Fix labeller highlight when selected on bottom bar (bluesky-social#10716)

Author: heikadog

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

@@ -144,6 +144,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
 
   const [demoMode] = useDemoMode()
   const {isActive: live} = useActorStatus(profile)
+  const isLabeler = profile?.associated?.labeler
 
   return (
     <>
@@ -276,9 +277,9 @@ export function BottomBar({navigation}: BottomTabBarProps) {
                   <View
                     style={[
                       styles.ctrlIcon,
-                      styles.profileIcon,
+                      isLabeler ? styles.profileIconSquare : styles.profileIcon,
                       isAtMyProfile && [
-                        styles.onProfile,
+                        isLabeler ? styles.onProfileSquare : styles.onProfile,
                         {
                           borderColor: t.atoms.text.color,
                           borderWidth: live ? 0 : 1,

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

@@ -67,9 +67,18 @@ export const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'transparent',
   },
+  profileIconSquare: {
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: 'transparent',
+  },
   messagesIcon: {},
   onProfile: {
     borderWidth: 1,
     borderRadius: 100,
   },
+  onProfileSquare: {
+    borderWidth: 1,
+    borderRadius: 3,
+  },
 })

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

@@ -65,6 +65,7 @@ export function BottomBarWeb() {
   const unreadMessageCount = useUnreadMessageCount()
   const notificationCountStr = useUnreadNotifications()
   const aa = useAgeAssurance()
+  const isLabeler = profile?.associated?.labeler
 
   const showSignIn = useCallback(() => {
     closeAllActiveElements()
@@ -186,9 +187,13 @@ export function BottomBarWeb() {
                       <View
                         style={[
                           styles.ctrlIcon,
-                          styles.profileIcon,
+                          isLabeler
+                            ? styles.profileIconSquare
+                            : styles.profileIcon,
                           isActive && [
-                            styles.onProfile,
+                            isLabeler
+                              ? styles.onProfileSquare
+                              : styles.onProfile,
                             {borderColor: t.atoms.text.color},
                           ],
                         ]}>