diff options
| -rw-r--r-- | src/view/lib/icons.tsx | 26 | ||||
| -rw-r--r-- | src/view/shell/mobile/MainMenu.tsx | 6 | ||||
| -rw-r--r-- | src/view/shell/mobile/index.tsx | 19 |
3 files changed, 42 insertions, 9 deletions
diff --git a/src/view/lib/icons.tsx b/src/view/lib/icons.tsx index 114ae5322..1a96a3aaa 100644 --- a/src/view/lib/icons.tsx +++ b/src/view/lib/icons.tsx @@ -1,6 +1,6 @@ import React from 'react' import {StyleProp, ViewStyle} from 'react-native' -import Svg, {Circle, Line, G, Path} from 'react-native-svg' +import Svg, {Path} from 'react-native-svg' export function GridIcon({style}: {style?: StyleProp<ViewStyle>}) { const DIM = 4 @@ -47,6 +47,30 @@ export function HomeIcon({style}: {style?: StyleProp<ViewStyle>}) { ) } +// https://github.com/Remix-Design/RemixIcon/blob/master/License +export function BellIcon({ + 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="M20 17h2v2H2v-2h2v-7a8 8 0 1 1 16 0v7zm-2 0v-7a6 6 0 1 0-12 0v7h12zm-9 4h6v2H9v-2z" + /> + </Svg> + ) +} + // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserGroupIcon({style}: {style?: StyleProp<ViewStyle>}) { diff --git a/src/view/shell/mobile/MainMenu.tsx b/src/view/shell/mobile/MainMenu.tsx index 04b2f0248..1ff286efc 100644 --- a/src/view/shell/mobile/MainMenu.tsx +++ b/src/view/shell/mobile/MainMenu.tsx @@ -16,7 +16,7 @@ import Animated, { } from 'react-native-reanimated' import {IconProp} from '@fortawesome/fontawesome-svg-core' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' -import {HomeIcon, UserGroupIcon} from '../../lib/icons' +import {HomeIcon, UserGroupIcon, BellIcon} from '../../lib/icons' import {UserAvatar} from '../../com/util/UserAvatar' import {useStores} from '../../../state' import {s, colors} from '../../lib/styles' @@ -70,6 +70,8 @@ export const MainMenu = observer( <HomeIcon style={styles.menuItemIcon} /> ) : icon === 'user-group' ? ( <UserGroupIcon style={styles.menuItemIcon} /> + ) : icon === 'bell' ? ( + <BellIcon style={styles.menuItemIcon} size="28" /> ) : ( <FontAwesomeIcon icon={icon} @@ -160,7 +162,7 @@ export const MainMenu = observer( <View style={[styles.menuItems]}> <MenuItem icon="home" label="Home" url="/" /> <MenuItem - icon={['far', 'bell']} + icon="bell" label="Notifications" url="/notifications" count={store.me.notificationCount} diff --git a/src/view/shell/mobile/index.tsx b/src/view/shell/mobile/index.tsx index 3b0b01e97..cdac003f0 100644 --- a/src/view/shell/mobile/index.tsx +++ b/src/view/shell/mobile/index.tsx @@ -9,6 +9,7 @@ import { Text, TouchableOpacity, View, + ViewStyle, } from 'react-native' import {ScreenContainer, Screen} from 'react-native-screens' import LinearGradient from 'react-native-linear-gradient' @@ -31,7 +32,7 @@ import {LocationNavigator} from './LocationNavigator' import {MainMenu} from './MainMenu' import {TabsSelector} from './TabsSelector' import {s, colors} from '../../lib/styles' -import {GridIcon, HomeIcon} from '../../lib/icons' +import {GridIcon, HomeIcon, BellIcon} from '../../lib/icons' const SWIPE_GESTURE_DIST_TRIGGER = 0.5 const SWIPE_GESTURE_VEL_TRIGGER = 2500 @@ -43,17 +44,23 @@ const Btn = ({ onPress, onLongPress, }: { - icon: IconProp + icon: IconProp | 'menu' | 'house' | 'bell' inactive?: boolean notificationCount?: number onPress?: (event: GestureResponderEvent) => void onLongPress?: (event: GestureResponderEvent) => void }) => { + let size = 21 + let addedStyles let IconEl if (icon === 'menu') { IconEl = GridIcon } else if (icon === 'house') { IconEl = HomeIcon + } else if (icon === 'bell') { + IconEl = BellIcon + size = 24 + addedStyles = {position: 'relative', top: -1} as ViewStyle } else { IconEl = FontAwesomeIcon } @@ -67,8 +74,8 @@ const Btn = ({ </View> ) : undefined} <IconEl - size={21} - style={[styles.ctrlIcon, styles.inactive]} + size={size} + style={[styles.ctrlIcon, styles.inactive, addedStyles]} icon={icon} /> </View> @@ -85,7 +92,7 @@ const Btn = ({ <Text style={styles.ctrlCountLabel}>{notificationCount}</Text> </View> ) : undefined} - <IconEl size={21} style={styles.ctrlIcon} icon={icon} /> + <IconEl size={size} style={[styles.ctrlIcon, addedStyles]} icon={icon} /> </TouchableOpacity> ) } @@ -203,7 +210,7 @@ export const MobileShell: React.FC = observer(() => { <Btn icon="search" inactive={true} onPress={() => {} /* TODO */} /> <Btn icon="menu" onPress={onPressMenu} /> <Btn - icon={['far', 'bell']} + icon="bell" onPress={onPressNotifications} notificationCount={store.me.notificationCount} /> |