From c5f28376c86478b4c55d9f0910d8d0cb4a1feb06 Mon Sep 17 00:00:00 2001 From: Paul Frazee Date: Wed, 22 Feb 2023 23:37:14 -0600 Subject: Rework web shell ui --- src/lib/hooks/useColorSchemeStyle.ts | 6 + src/lib/icons.tsx | 26 ++++ src/view/com/discover/LiteSuggestedFollows.tsx | 21 ++- src/view/shell/web/DesktopLeftColumn.tsx | 201 +++++++++++++++++-------- src/view/shell/web/DesktopRightColumn.tsx | 43 ++---- 5 files changed, 191 insertions(+), 106 deletions(-) create mode 100644 src/lib/hooks/useColorSchemeStyle.ts (limited to 'src') diff --git a/src/lib/hooks/useColorSchemeStyle.ts b/src/lib/hooks/useColorSchemeStyle.ts new file mode 100644 index 000000000..61e3d7cc9 --- /dev/null +++ b/src/lib/hooks/useColorSchemeStyle.ts @@ -0,0 +1,6 @@ +import {useColorScheme} from 'react-native' + +export function useColorSchemeStyle(lightStyle: any, darkStyle: any) { + const colorScheme = useColorScheme() + return colorScheme === 'dark' ? darkStyle : lightStyle +} diff --git a/src/lib/icons.tsx b/src/lib/icons.tsx index f400c3f72..931e3c721 100644 --- a/src/lib/icons.tsx +++ b/src/lib/icons.tsx @@ -527,3 +527,29 @@ export function RectTallIcon({ ) } +export function ComposeIcon({ + style, + size, + strokeWidth = 1.5, +}: { + style?: StyleProp + size?: string | number + strokeWidth?: number +}) { + return ( + + + + ) +} diff --git a/src/view/com/discover/LiteSuggestedFollows.tsx b/src/view/com/discover/LiteSuggestedFollows.tsx index 5314e691c..d9620f387 100644 --- a/src/view/com/discover/LiteSuggestedFollows.tsx +++ b/src/view/com/discover/LiteSuggestedFollows.tsx @@ -5,7 +5,6 @@ import { TouchableOpacity, View, } from 'react-native' -import LinearGradient from 'react-native-linear-gradient' import {observer} from 'mobx-react-lite' import _omit from 'lodash.omit' import {Link} from '../util/Link' @@ -99,6 +98,7 @@ const User = ({ onPressUnfollow: (item: SuggestedActor) => void }) => { const pal = usePalette('default') + const palInverted = usePalette('inverted') return ( @@ -121,23 +121,19 @@ const User = ({ {follow ? ( onPressUnfollow(item)}> - + Unfollow ) : ( - onPressFollow(item)}> - - - Follow - - + onPressFollow(item)} + style={[styles.btn, palInverted.view]}> + + Follow + )} @@ -187,6 +183,7 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', paddingVertical: 7, + paddingHorizontal: 14, borderRadius: 50, marginLeft: 6, }, diff --git a/src/view/shell/web/DesktopLeftColumn.tsx b/src/view/shell/web/DesktopLeftColumn.tsx index d5fe45e80..819bcba6d 100644 --- a/src/view/shell/web/DesktopLeftColumn.tsx +++ b/src/view/shell/web/DesktopLeftColumn.tsx @@ -1,13 +1,13 @@ import React from 'react' import {Pressable, StyleSheet, TouchableOpacity, View} from 'react-native' import {observer} from 'mobx-react-lite' -import LinearGradient from 'react-native-linear-gradient' import {Link} from '../../com/util/Link' import {Text} from '../../com/util/text/Text' import {UserAvatar} from '../../com/util/UserAvatar' -import {s, colors, gradients} from 'lib/styles' +import {colors} from 'lib/styles' import {useStores} from 'state/index' import {usePalette} from 'lib/hooks/usePalette' +import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' import { HomeIcon, HomeIconSolid, @@ -15,6 +15,7 @@ import { BellIconSolid, MagnifyingGlassIcon, CogIcon, + ComposeIcon, } from 'lib/icons' interface NavItemProps { @@ -28,15 +29,18 @@ interface NavItemProps { export const NavItem = observer( ({label, count, href, icon, iconFilled, isProfile}: NavItemProps) => { const store = useStores() - const pal = usePalette('default') + const hoverBg = useColorSchemeStyle( + styles.navItemHoverBgLight, + styles.navItemHoverBgDark, + ) const isCurrent = store.nav.tab.current.url === href return ( [ // @ts-ignore Pressable state differs for RNW -prf - state.hovered && {backgroundColor: pal.colors.backgroundLight}, + state.hovered && hoverBg, ]}> - + {label} @@ -63,6 +66,14 @@ export const NavItem = observer( export const DesktopLeftColumn = observer(() => { const store = useStores() + const containerBg = useColorSchemeStyle( + styles.containerBgLight, + styles.containerBgDark, + ) + const hoverBg = useColorSchemeStyle( + styles.navItemHoverBgLight, + styles.navItemHoverBgDark, + ) const pal = usePalette('default') const onPressCompose = () => store.shell.openComposer({}) const avi = ( @@ -70,81 +81,152 @@ export const DesktopLeftColumn = observer(() => { handle={store.me.handle} displayName={store.me.displayName} avatar={store.me.avatar} - size={40} + size={30} /> ) return ( - - - } - iconFilled={} - /> - } - iconFilled={} - /> - } - iconFilled={} - /> - } - iconFilled={} - /> - - - - New Post + + + + Bluesky + + + + + Search - - + + } + iconFilled={} + /> + } + iconFilled={} + /> + } + iconFilled={} + /> + } + iconFilled={} + /> + + [ + // @ts-ignore Pressable state differs for RNW -prf + state.hovered && hoverBg, + ]}> + + + + + New Post + + + + + + ) }) const styles = StyleSheet.create({ + containerBgLight: { + backgroundColor: '#f9f9fd', + }, + containerBgDark: { + backgroundColor: '#f9f9fd', // TODO + }, + container: { position: 'absolute', - left: 'calc(50vw - 530px)', - width: '230px', - height: '100%', + left: 0, + width: '300px', + height: '100vh', borderRightWidth: 1, paddingTop: 5, }, + main: { + flex: 1, + paddingHorizontal: 16, + }, + footer: { + borderTopWidth: 1, + paddingHorizontal: 16, + paddingVertical: 8, + }, + separator: { + borderTopWidth: 1, + marginVertical: 12, + marginHorizontal: 8, + }, + + logo: { + paddingTop: 6, + paddingBottom: 12, + }, + + search: { + flexDirection: 'row', + alignItems: 'center', + borderRadius: 8, + paddingVertical: 8, + paddingHorizontal: 6, + marginBottom: 10, + borderWidth: 1, + }, + searchIconWrapper: { + flexDirection: 'row', + width: 30, + justifyContent: 'center', + marginRight: 6, + }, + navItem: { - paddingVertical: 10, - paddingHorizontal: 10, + paddingVertical: 8, + paddingHorizontal: 6, + marginBottom: 2, flexDirection: 'row', alignItems: 'center', + borderRadius: 6, + }, + navItemHoverBgLight: { + backgroundColor: '#ebebf0', + borderRadius: 6, + }, + navItemHoverBgDark: { + backgroundColor: colors.gray2, // TODO + borderRadius: 6, }, navItemIconWrapper: { flexDirection: 'row', width: 30, justifyContent: 'center', - marginRight: 5, + marginRight: 8, }, navItemProfile: { - width: 40, + width: 30, marginRight: 10, }, navItemCount: { @@ -158,9 +240,6 @@ const styles = StyleSheet.create({ paddingHorizontal: 4, borderRadius: 6, }, - navItemLabel: { - fontSize: 19, - }, composeBtn: { marginTop: 20, marginBottom: 10, diff --git a/src/view/shell/web/DesktopRightColumn.tsx b/src/view/shell/web/DesktopRightColumn.tsx index 22acac382..b051e6094 100644 --- a/src/view/shell/web/DesktopRightColumn.tsx +++ b/src/view/shell/web/DesktopRightColumn.tsx @@ -1,25 +1,15 @@ import React from 'react' -import {View, StyleSheet} from 'react-native' -import {Link} from '../../com/util/Link' +import {StyleSheet, View} from 'react-native' import {Text} from '../../com/util/text/Text' -import {usePalette} from 'lib/hooks/usePalette' -import {MagnifyingGlassIcon} from 'lib/icons' import {LiteSuggestedFollows} from '../../com/discover/LiteSuggestedFollows' import {s} from 'lib/styles' +import {useStores} from 'state/index' export const DesktopRightColumn: React.FC = () => { - const pal = usePalette('default') + const store = useStores() return ( - - - - - - - Search - - - + + Suggested Follows @@ -30,23 +20,10 @@ export const DesktopRightColumn: React.FC = () => { const styles = StyleSheet.create({ container: { position: 'absolute', - right: 'calc(50vw - 650px)', - width: '350px', - height: '100%', - borderLeftWidth: 1, - overscrollBehavior: 'auto', - paddingLeft: 30, - paddingTop: 10, - }, - searchContainer: { - flexDirection: 'row', - alignItems: 'center', - paddingHorizontal: 14, - paddingVertical: 10, - borderRadius: 20, - marginBottom: 20, - }, - searchIcon: { - marginRight: 5, + right: 0, + width: '400px', + paddingHorizontal: 16, + paddingRight: 32, + paddingTop: 20, }, }) -- cgit 1.4.1