diff options
| -rw-r--r-- | src/lib/icons.tsx | 29 | ||||
| -rw-r--r-- | src/view/shell/desktop/RightNav.tsx | 12 |
2 files changed, 38 insertions, 3 deletions
diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index 606d27ea4..06f195011 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -322,6 +322,35 @@ export function MoonIcon({ // Copyright (c) 2020 Refactoring UI Inc. // https://github.com/tailwindlabs/heroicons/blob/master/LICENSE +export function SunIcon({ + style, + size, + strokeWidth = 1.5, +}: { + style?: StyleProp<ViewStyle> + size?: string | number + strokeWidth?: number +}) { + return ( + <Svg + fill="none" + viewBox="0 0 24 24" + width={size || 32} + height={size || 32} + strokeWidth={strokeWidth} + stroke="currentColor" + style={style}> + <Path + d="M12 3V5.25M18.364 5.63604L16.773 7.22703M21 12H18.75M18.364 18.364L16.773 16.773M12 18.75V21M7.22703 16.773L5.63604 18.364M5.25 12H3M7.22703 7.22703L5.63604 5.63604M15.75 12C15.75 14.0711 14.0711 15.75 12 15.75C9.92893 15.75 8.25 14.0711 8.25 12C8.25 9.92893 9.92893 8.25 12 8.25C14.0711 8.25 15.75 9.92893 15.75 12Z" + strokeLinecap="round" + strokeLinejoin="round" + /> + </Svg> + ) +} + +// Copyright (c) 2020 Refactoring UI Inc. +// https://github.com/tailwindlabs/heroicons/blob/master/LICENSE export function UserIcon({ style, size, diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx index d6663ce3d..fcdea35e8 100644 --- a/src/view/shell/desktop/RightNav.tsx +++ b/src/view/shell/desktop/RightNav.tsx @@ -11,13 +11,14 @@ import {s} from 'lib/styles' import {useStores} from 'state/index' import {pluralize} from 'lib/strings/helpers' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' -import {MoonIcon} from 'lib/icons' +import {MoonIcon, SunIcon} from 'lib/icons' import {formatCount} from 'view/com/util/numeric/format' export const DesktopRightNav = observer(function DesktopRightNav() { const store = useStores() const pal = usePalette('default') const mode = useColorSchemeStyle('Light', 'Dark') + const otherMode = mode === 'Dark' ? 'Light' : 'Dark'; const onDarkmodePress = React.useCallback(() => { store.shell.setDarkMode(!store.shell.darkMode) @@ -71,10 +72,15 @@ export const DesktopRightNav = observer(function DesktopRightNav() { : 'Sets display to dark mode' }> <View style={[pal.viewLight, styles.darkModeToggleIcon]}> - <MoonIcon size={18} style={pal.textLight} /> + { + mode === 'Dark' ? + <SunIcon size={18} style={pal.textLight} /> + : + <MoonIcon size={18} style={pal.textLight} /> + } </View> <Text type="sm" style={pal.textLight}> - {mode} mode + {otherMode} mode </Text> </TouchableOpacity> </View> |