Improve Device Detection For Better Responsiveness (#1512)

* Refactor `useOnMainScroll` function to use responsive device detection

- Replace static `isDesktopWeb` with `useWebMediaQueries` hook to enable dynamic device type detection.
- Create `useDeviceLimits` hook to dynamically determine `DY_LIMIT_UP` and `DY_LIMIT_DOWN` based on device type.
- Update dependency arrays for the `useCallback` hooks to include new dynamic variables.

* Refactor styles to be responsive to device type

- Create `useStyles` hook that generates styles object based on device type detected from `useWebMediaQueries`.
- Replace static styles object with dynamic styles object generated from `useStyles` hook in components.
- This allows `paddingLeft` values for 'ul' and 'ol' styles to adapt to device type dynamically.
- This allows `maxWidth` values for 'metaItem'' styles to adapt to device type dynamically.

* Remove `isDesktopWeb` in favor of `useWebMediaQueries().isDesktop`

* Refactor `SplashScreen` component for responsive design

* Revision based on review results

* Fix isNative check

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 14 insertions, 10 deletions

diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
index 507a28cee..250ef3a36 100644
--- a/src/lib/hooks/useOnMainScroll.ts
+++ b/src/lib/hooks/useOnMainScroll.ts
@@ -2,12 +2,18 @@ import {useState, useCallback, useRef} from 'react'
 import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
 import {RootStoreModel} from 'state/index'
 import {s} from 'lib/styles'
-import {isDesktopWeb} from 'platform/detection'
+import {useWebMediaQueries} from './useWebMediaQueries'
 
-const DY_LIMIT_UP = isDesktopWeb ? 30 : 10
-const DY_LIMIT_DOWN = isDesktopWeb ? 150 : 10
 const Y_LIMIT = 10
 
+const useDeviceLimits = () => {
+  const {isDesktop} = useWebMediaQueries()
+  return {
+    dyLimitUp: isDesktop ? 30 : 10,
+    dyLimitDown: isDesktop ? 150 : 10,
+  }
+}
+
 export type OnScrollCb = (
   event: NativeSyntheticEvent<NativeScrollEvent>,
 ) => void
@@ -18,6 +24,8 @@ export function useOnMainScroll(
 ): [OnScrollCb, boolean, ResetCb] {
   let lastY = useRef(0)
   let [isScrolledDown, setIsScrolledDown] = useState(false)
+  const {dyLimitUp, dyLimitDown} = useDeviceLimits()
+
   return [
     useCallback(
       (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -25,15 +33,11 @@ export function useOnMainScroll(
         const dy = y - (lastY.current || 0)
         lastY.current = y
 
-        if (
-          !store.shell.minimalShellMode &&
-          dy > DY_LIMIT_DOWN &&
-          y > Y_LIMIT
-        ) {
+        if (!store.shell.minimalShellMode && dy > dyLimitDown && y > Y_LIMIT) {
           store.shell.setMinimalShellMode(true)
         } else if (
           store.shell.minimalShellMode &&
-          (dy < DY_LIMIT_UP * -1 || y <= Y_LIMIT)
+          (dy < dyLimitUp * -1 || y <= Y_LIMIT)
         ) {
           store.shell.setMinimalShellMode(false)
         }
@@ -50,7 +54,7 @@ export function useOnMainScroll(
           setIsScrolledDown(false)
         }
       },
-      [store, isScrolledDown],
+      [store.shell, dyLimitDown, dyLimitUp, isScrolledDown],
     ),
     isScrolledDown,
     useCallback(() => {