Show bold icons in footer based on state

src/view/index.ts

@@ -20,7 +20,8 @@ import {faBookmark as farBookmark} from '@fortawesome/free-regular-svg-icons/faB
 import {faCheck} from '@fortawesome/free-solid-svg-icons/faCheck'
 import {faCircleCheck} from '@fortawesome/free-regular-svg-icons/faCircleCheck'
 import {faCircleUser} from '@fortawesome/free-regular-svg-icons/faCircleUser'
-import {faClone} from '@fortawesome/free-regular-svg-icons/faClone'
+import {faClone} from '@fortawesome/free-solid-svg-icons/faClone'
+import {faClone as farClone} from '@fortawesome/free-regular-svg-icons/faClone'
 import {faComment} from '@fortawesome/free-regular-svg-icons/faComment'
 import {faCompass} from '@fortawesome/free-regular-svg-icons/faCompass'
 import {faEllipsis} from '@fortawesome/free-solid-svg-icons/faEllipsis'
@@ -78,6 +79,7 @@ export function setup() {
     faCircleCheck,
     faCircleUser,
     faClone,
+    farClone,
     faComment,
     faCompass,
     faEllipsis,

src/view/lib/icons.tsx

@@ -2,7 +2,13 @@ import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
 import Svg, {Path} from 'react-native-svg'
 
-export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
+export function GridIcon({
+  style,
+  solid,
+}: {
+  style?: StyleProp<ViewStyle>
+  solid?: boolean
+}) {
   const DIM = 4
   const ARC = 2
   return (
@@ -11,25 +17,32 @@ export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) {
         d={`M4,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
         strokeWidth={2}
         stroke="#000"
+        fill={solid ? '#000' : undefined}
       />
       <Path
         d={`M16,1 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
         strokeWidth={2}
         stroke="#000"
+        fill={solid ? '#000' : undefined}
       />
       <Path
         d={`M4,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
         strokeWidth={2}
         stroke="#000"
+        fill={solid ? '#000' : undefined}
       />
       <Path
         d={`M16,13 h${DIM} a${ARC},${ARC} 0 0 1 ${ARC},${ARC} v${DIM} a${ARC},${ARC} 0 0 1 -${ARC},${ARC} h-${DIM} a${ARC},${ARC} 0 0 1 -${ARC},-${ARC} v-${DIM} a${ARC},${ARC} 0 0 1 ${ARC},-${ARC} z`}
         strokeWidth={2}
         stroke="#000"
+        fill={solid ? '#000' : undefined}
       />
     </Svg>
   )
 }
+export function GridIconSolid({style}: {style?: StyleProp<ViewStyle>}) {
+  return <GridIcon style={style} solid />
+}
 
 export function HomeIcon({
   style,
@@ -53,6 +66,29 @@ export function HomeIcon({
   )
 }
 
+export function HomeIconSolid({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      viewBox="0 0 48 48"
+      width={size || 24}
+      height={size || 24}
+      stroke="currentColor"
+      style={style}>
+      <Path
+        strokeWidth={2}
+        fill="currentColor"
+        d="M 23.951 2 C 23.631 2.011 23.323 2.124 23.072 2.322 L 8.859 13.52 C 7.055 14.941 6 17.114 6 19.41 L 6 38.5 C 6 39.864 7.136 41 8.5 41 L 18.5 41 C 19.864 41 21 39.864 21 38.5 L 21 28.5 C 21 28.205 21.205 28 21.5 28 L 26.5 28 C 26.795 28 27 28.205 27 28.5 L 27 38.5 C 27 39.864 28.136 41 29.5 41 L 39.5 41 C 40.864 41 42 39.864 42 38.5 L 42 19.41 C 42 17.114 40.945 14.941 39.141 13.52 L 24.928 2.322 C 24.65 2.103 24.304 1.989 23.951 2 Z"
+      />
+    </Svg>
+  )
+}
+
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function MangifyingGlassIcon({
@@ -80,6 +116,33 @@ export function MangifyingGlassIcon({
   )
 }
 
+// Copyright (c) 2020 Refactoring UI Inc.
+// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
+export function MangifyingGlassIconSolid({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={3}
+      stroke="currentColor"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+      />
+    </Svg>
+  )
+}
+
 // https://github.com/Remix-Design/RemixIcon/blob/master/License
 export function BellIcon({
   style,
@@ -104,6 +167,30 @@ export function BellIcon({
   )
 }
 
+// https://github.com/Remix-Design/RemixIcon/blob/master/License
+export function BellIconSolid({
+  style,
+  size,
+}: {
+  style?: StyleProp<ViewStyle>
+  size?: string | number
+}) {
+  return (
+    <Svg
+      fill="none"
+      viewBox="0 0 24 24"
+      width={size || 24}
+      height={size || 24}
+      style={style}>
+      <Path fill="none" d="M0 0h24v24H0z" />
+      <Path
+        fill="currentColor"
+        d="M 20 17 L 22 17 L 22 19 L 2 19 L 2 17 L 4 17 L 4 10 C 4 3.842 10.667 -0.007 16 3.072 C 18.475 4.501 20 7.142 20 10 L 20 17 Z M 9 21 L 15 21 L 15 23 L 9 23 L 9 21 Z"
+      />
+    </Svg>
+  )
+}
+
 // Copyright (c) 2020 Refactoring UI Inc.
 // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE
 export function UserGroupIcon({

src/view/shell/mobile/index.tsx

@@ -35,9 +35,13 @@ import {Composer} from './Composer'
 import {s, colors} from '../../lib/styles'
 import {
   GridIcon,
+  GridIconSolid,
   HomeIcon,
+  HomeIconSolid,
   MangifyingGlassIcon,
+  MangifyingGlassIconSolid,
   BellIcon,
+  BellIconSolid,
 } from '../../lib/icons'
 
 const SWIPE_GESTURE_DIST_TRIGGER = 0.4
@@ -50,7 +54,16 @@ const Btn = ({
   onPress,
   onLongPress,
 }: {
-  icon: IconProp | 'menu' | 'house' | 'bell' | 'search'
+  icon:
+    | IconProp
+    | 'menu'
+    | 'menu-solid'
+    | 'home'
+    | 'home-solid'
+    | 'bell'
+    | 'bell-solid'
+    | 'search'
+    | 'search-solid'
   inactive?: boolean
   notificationCount?: number
   onPress?: (event: GestureResponderEvent) => void
@@ -61,17 +74,30 @@ const Btn = ({
   let IconEl
   if (icon === 'menu') {
     IconEl = GridIcon
-  } else if (icon === 'house') {
+  } else if (icon === 'menu-solid') {
+    IconEl = GridIconSolid
+  } else if (icon === 'home') {
     IconEl = HomeIcon
     size = 24
+  } else if (icon === 'home-solid') {
+    IconEl = HomeIconSolid
+    size = 24
   } else if (icon === 'search') {
     IconEl = MangifyingGlassIcon
     size = 24
     addedStyles = {position: 'relative', top: -1} as ViewStyle
+  } else if (icon === 'search-solid') {
+    IconEl = MangifyingGlassIconSolid
+    size = 24
+    addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else if (icon === 'bell') {
     IconEl = BellIcon
     size = 24
     addedStyles = {position: 'relative', top: -1} as ViewStyle
+  } else if (icon === 'bell-solid') {
+    IconEl = BellIconSolid
+    size = 24
+    addedStyles = {position: 'relative', top: -1} as ViewStyle
   } else {
     IconEl = FontAwesomeIcon
   }
@@ -207,6 +233,9 @@ export const MobileShell: React.FC = observer(() => {
     )
   }
 
+  const isAtHome = store.nav.tab.current.url === '/'
+  const isAtSearch = store.nav.tab.current.url === '/search'
+  const isAtNotifications = store.nav.tab.current.url === '/notifications'
   return (
     <View style={styles.outerContainer}>
       <SafeAreaView style={styles.innerContainer}>
@@ -251,15 +280,24 @@ export const MobileShell: React.FC = observer(() => {
         onClose={() => toggleTabsMenu(false)}
       />
       <SafeAreaView style={styles.bottomBar}>
-        <Btn icon="house" onPress={onPressHome} />
+        <Btn icon={isAtHome ? 'home-solid' : 'home'} onPress={onPressHome} />
-        <Btn icon="search" onPress={onPressSearch} />
-        <Btn icon="menu" onPress={onPressMenu} />
         <Btn
-          icon="bell"
+          icon={isAtSearch ? 'search-solid' : 'search'}
+          onPress={onPressSearch}
+        />
+        <Btn
+          icon={isMainMenuActive ? 'menu-solid' : 'menu'}
+          onPress={onPressMenu}
+        />
+        <Btn
+          icon={isAtNotifications ? 'bell-solid' : 'bell'}
           onPress={onPressNotifications}
           notificationCount={store.me.notificationCount}
         />
-        <Btn icon={['far', 'clone']} onPress={onPressTabs} />
+        <Btn
+          icon={isTabsSelectorActive ? 'clone' : ['far', 'clone']}
+          onPress={onPressTabs}
+        />
       </SafeAreaView>
       <MainMenu
         active={isMainMenuActive}