Use new blue everywhere (#9435)

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

@@ -7,16 +7,13 @@ import {
 } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {LinearGradient} from 'expo-linear-gradient'
 
 import {PressableScale} from '#/lib/custom-animations/PressableScale'
 import {useHaptics} from '#/lib/haptics'
 import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {clamp} from '#/lib/numbers'
-import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
-import {ios} from '#/alf'
+import {ios, useBreakpoints, useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 
 export interface FABProps extends ComponentProps<typeof Pressable> {
@@ -27,13 +24,14 @@ export interface FABProps extends ComponentProps<typeof Pressable> {
 
 export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
-  const {isMobile, isTablet} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
+  const t = useTheme()
   const playHaptic = useHaptics()
   const fabMinimalShellTransform = useMinimalShellFabTransform()
 
-  const size = isTablet ? styles.sizeLarge : styles.sizeRegular
+  const size = gtMobile ? styles.sizeLarge : styles.sizeRegular
 
-  const tabletSpacing = isTablet
+  const tabletSpacing = gtMobile
     ? {right: 50, bottom: 50}
     : {right: 24, bottom: clamp(insets.bottom, 15, 60) + 15}
 
@@ -43,7 +41,7 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
         styles.outer,
         size,
         tabletSpacing,
-        isMobile && fabMinimalShellTransform,
+        !gtMobile && fabMinimalShellTransform,
       ]}>
       <PressableScale
         testID={testID}
@@ -57,15 +55,17 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
           playHaptic('Heavy')
         })}
         targetScale={0.9}
-        style={[a.rounded_full, style]}
+        style={[
+          a.rounded_full,
+          size,
+          {backgroundColor: t.palette.primary_500},
+          a.align_center,
+          a.justify_center,
+          a.shadow_sm,
+          style,
+        ]}
         {...props}>
-        <LinearGradient
+        {icon}
-          colors={[gradients.blueLight.start, gradients.blueLight.end]}
-          start={{x: 0, y: 0}}
-          end={{x: 1, y: 1}}
-          style={[styles.inner, size]}>
-          {icon}
-        </LinearGradient>
       </PressableScale>
     </Animated.View>
   )
@@ -73,8 +73,8 @@ export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
 
 const styles = StyleSheet.create({
   sizeRegular: {
-    width: 60,
+    width: 56,
-    height: 60,
+    height: 56,
     borderRadius: 30,
   },
   sizeLarge: {
@@ -88,8 +88,4 @@ const styles = StyleSheet.create({
     zIndex: 1,
     cursor: 'pointer',
   },
-  inner: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
 })

src/view/icons/Logo.tsx

@@ -10,9 +10,8 @@ import Svg, {
 } from 'react-native-svg'
 import {Image} from 'expo-image'
 
-import {colors} from '#/lib/styles'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
-import {flatten} from '#/alf'
+import {flatten, useTheme} from '#/alf'
 
 const ratio = 57 / 64
 
@@ -22,12 +21,15 @@ type Props = {
 } & Omit<SvgProps, 'style'>
 
 export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
+  const t = useTheme()
   const {fill, ...rest} = props
   const gradient = fill === 'sky'
   const styles = flatten(props.style)
-  const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
+  const _fill = gradient
+    ? 'url(#sky)'
+    : fill || styles?.color || t.palette.primary_500
   // @ts-ignore it's fiiiiine
-  const size = parseInt(rest.width || 32)
+  const size = parseInt(rest.width || 32, 10)
 
   const isKawaii = useKawaiiMode()
 

src/view/shell/bottom-bar/BottomBar.tsx

@@ -28,11 +28,10 @@ import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useShellLayout} from '#/state/shell/shell-layout'
 import {useCloseAllActiveElements} from '#/state/util'
-import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {Logo} from '#/view/icons/Logo'
 import {Logotype} from '#/view/icons/Logotype'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount'
@@ -50,6 +49,7 @@ import {
   Message_Stroke2_Corner0_Rounded as Message,
   Message_Stroke2_Corner0_Rounded_Filled as MessageFilled,
 } from '#/components/icons/Message'
+import {Text} from '#/components/Typography'
 import {useDemoMode} from '#/storage/hooks/demo-mode'
 import {styles} from './BottomBarStyles'
 
@@ -396,6 +396,8 @@ function Btn({
   accessibilityHint,
   accessibilityLabel,
 }: BtnProps) {
+  const t = useTheme()
+
   return (
     <PressableScale
       testID={testID}
@@ -410,8 +412,13 @@ function Btn({
       accessibilityShowsLargeContentViewer>
       {icon}
       {notificationCount ? (
-        <View style={[styles.notificationCount, a.rounded_full]}>
+        <View
-          <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
+          style={[
+            styles.notificationCount,
+            a.rounded_full,
+            {backgroundColor: t.palette.primary_500},
+          ]}>
+          <Text style={styles.notificationCountLabel}>1</Text>
         </View>
       ) : hasNew ? (
         <View style={[styles.hasNewBadge, a.rounded_full]} />

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -24,7 +24,6 @@ export const styles = StyleSheet.create({
     position: 'absolute',
     left: '52%',
     top: 8,
-    backgroundColor: colors.blue3,
     paddingHorizontal: 4,
     paddingBottom: 1,
     borderRadius: 6,
@@ -35,12 +34,6 @@ export const styles = StyleSheet.create({
     paddingBottom: 3,
     borderRadius: 12,
   },
-  notificationCountLight: {
-    borderColor: colors.white,
-  },
-  notificationCountDark: {
-    borderColor: colors.gray8,
-  },
   notificationCountLabel: {
     fontSize: 12,
     fontWeight: '600',

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -236,6 +236,7 @@ const NavItem: React.FC<{
   hasNew?: boolean
   notificationCount?: string
 }> = ({children, href, routeName, hasNew, notificationCount}) => {
+  const t = useTheme()
   const {_} = useLingui()
   const {currentAccount} = useSession()
   const currentRoute = useNavigationState(state => {
@@ -272,7 +273,11 @@ const NavItem: React.FC<{
       {children({isActive})}
       {notificationCount ? (
         <View
-          style={[styles.notificationCount, styles.notificationCountWeb]}
+          style={[
+            styles.notificationCount,
+            styles.notificationCountWeb,
+            {backgroundColor: t.palette.primary_500},
+          ]}
           aria-label={_(
             msg`${plural(notificationCount, {
               one: '# unread item',