Use new blue everywhere (#9435)

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]}>
-          <Text style={styles.notificationCountLabel}>{notificationCount}</Text>
+        <View
+          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',