refactor FAB

src/view/com/util/fab/FABInner.tsx

@@ -1,6 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {observer} from 'mobx-react-lite'
-import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
+import {TouchableWithoutFeedback} from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
 import {gradients} from 'lib/styles'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
@@ -8,6 +8,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {clamp} from 'lib/numbers'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import Animated from 'react-native-reanimated'
+import {useStyles} from 'view/nova'
 
 export interface FABProps
   extends ComponentProps<typeof TouchableWithoutFeedback> {
@@ -21,59 +22,51 @@ export const FABInner = observer(function FABInnerImpl({
   ...props
 }: FABProps) {
   const insets = useSafeAreaInsets()
-  const {isMobile, isTablet} = useWebMediaQueries()
+  const {isMobile} = useWebMediaQueries()
   const {fabMinimalShellTransform} = useMinimalShellMode()
-
-  const size = React.useMemo(() => {
-    return isTablet ? styles.sizeLarge : styles.sizeRegular
-  }, [isTablet])
-  const tabletSpacing = React.useMemo(() => {
-    return isTablet
-      ? {right: 50, bottom: 50}
-      : {
-          right: 24,
-          bottom: clamp(insets.bottom, 15, 60) + 15,
-        }
-  }, [insets.bottom, isTablet])
+  const styles = useStyles({
+    outer: {
+      position: 'absolute',
+      z: 1,
+      right: 24,
+      bottom: clamp(insets.bottom, 15, 60) + 15,
+      gtMobile: {
+        right: 50,
+        bottom: 50,
+      },
+    },
+    sizing: {
+      w: 60,
+      h: 60,
+      radius: 30,
+      gtMobile: {
+        w: 70,
+        h: 70,
+        radius: 35,
+      },
+    },
+    inner: {
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  })
 
   return (
     <TouchableWithoutFeedback testID={testID} {...props}>
       <Animated.View
         style={[
           styles.outer,
-          size,
-          tabletSpacing,
+          styles.sizing,
           isMobile && fabMinimalShellTransform,
         ]}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}
           start={{x: 0, y: 0}}
           end={{x: 1, y: 1}}
-          style={[styles.inner, size]}>
+          style={[styles.inner, styles.sizing]}>
           {icon}
         </LinearGradient>
       </Animated.View>
     </TouchableWithoutFeedback>
   )
 })
-
-const styles = StyleSheet.create({
-  sizeRegular: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
-  },
-  sizeLarge: {
-    width: 70,
-    height: 70,
-    borderRadius: 35,
-  },
-  outer: {
-    position: 'absolute',
-    zIndex: 1,
-  },
-  inner: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-})