diff --git a/src/view/index.ts b/src/view/index.ts index 69078dae..3b9a92eb 100644 --- a/src/view/index.ts +++ b/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, diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index b42fc6fc..c160df3c 100644 --- a/src/view/lib/icons.tsx +++ b/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}) { +export function GridIcon({ + style, + solid, +}: { + style?: StyleProp + solid?: boolean +}) { const DIM = 4 const ARC = 2 return ( @@ -11,25 +17,32 @@ export function GridIcon({style}: {style?: StyleProp}) { 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} /> ) } +export function GridIconSolid({style}: {style?: StyleProp}) { + return +} export function HomeIcon({ style, @@ -53,6 +66,29 @@ export function HomeIcon({ ) } +export function HomeIconSolid({ + style, + size, +}: { + style?: StyleProp + size?: string | number +}) { + return ( + + + + ) +} + // 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 + size?: string | number +}) { + return ( + + + + ) +} + // 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 + size?: string | number +}) { + return ( + + + + + ) +} + // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserGroupIcon({ diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 83bab5e9..25e572dd 100644 --- a/src/view/shell/mobile/index.tsx +++ b/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 ( @@ -251,15 +280,24 @@ export const MobileShell: React.FC = observer(() => { onClose={() => toggleTabsMenu(false)} /> - - - + + + - +