nasso.dev / bsky-social-app
my fork of the bluesky client
fork atom

Clean up left nav on web (#5488)

* Tweak nav item count style

* Fix nav item icon width and alignment

* Just refactor the thing

* New compose button

* Z index

* Rounded

* Tweak gradient

* Tweak gradient

* Tweak gradient

* Solid

* Adjust position of counter

* Always a circle

authored by

Eric Bailey and committed by
GitHub 23dd638f 1895ae2e

+68 -93
unified split
+9
src/alf/tokens.ts
··· 60 60 } as const 61 61 62 62 export const gradients = { 63 + primary: { 64 + values: [ 65 + [0, '#054CFF'], 66 + [0.4, '#1085FE'], 67 + [0.6, '#1085FE'], 68 + [1, '#59B9FF'], 69 + ], 70 + hover_value: '#1085FE', 71 + }, 63 72 sky: { 64 73 values: [ 65 74 [0, '#0A7AFF'],
+5 -4
src/components/Button.tsx
··· 24 24 | 'secondary' 25 25 | 'secondary_inverted' 26 26 | 'negative' 27 + | 'gradient_primary' 27 28 | 'gradient_sky' 28 29 | 'gradient_midnight' 29 30 | 'gradient_sunrise' ··· 412 413 secondary: tokens.gradients.sky, 413 414 secondary_inverted: tokens.gradients.sky, 414 415 negative: tokens.gradients.sky, 416 + gradient_primary: tokens.gradients.primary, 415 417 gradient_sky: tokens.gradients.sky, 416 418 gradient_midnight: tokens.gradients.midnight, 417 419 gradient_sunrise: tokens.gradients.sunrise, ··· 444 446 [state, variant, color, size, disabled], 445 447 ) 446 448 447 - const flattenedBaseStyles = flatten(baseStyles) 449 + const flattenedBaseStyles = flatten([baseStyles, style]) 448 450 449 451 return ( 450 452 <Pressable ··· 464 466 a.align_center, 465 467 a.justify_center, 466 468 flattenedBaseStyles, 467 - flatten(style), 468 469 ...(state.hovered || state.pressed 469 470 ? [hoverStyles, flatten(hoverStyleProp)] 470 471 : []), ··· 626 627 } 627 628 628 629 if (size === 'large') { 629 - baseStyles.push(a.text_md, a.leading_tight, web({paddingTop: 1})) 630 + baseStyles.push(a.text_md, a.leading_tight, web({top: -0.4})) 630 631 } else if (size === 'small') { 631 - baseStyles.push(a.text_sm, a.leading_tight, web({paddingTop: 1})) 632 + baseStyles.push(a.text_sm, a.leading_tight, web({top: -0.4})) 632 633 } else if (size === 'tiny') { 633 634 baseStyles.push(a.text_xs, a.leading_tight) 634 635 }
+1 -1
src/logger/index.ts
··· 1 1 import format from 'date-fns/format' 2 2 import {nanoid} from 'nanoid/non-secure' 3 3 4 + import {isNetworkError} from '#/lib/strings/errors' 4 5 import {DebugContext} from '#/logger/debugContext' 5 6 import {add} from '#/logger/logDump' 6 7 import {Sentry} from '#/logger/sentry' 7 - import {isNetworkError} from 'lib/strings/errors' 8 8 import * as env from '#/env' 9 9 10 10 export enum LogLevel {
+53 -88
src/view/shell/desktop/LeftNav.tsx
··· 18 18 import {makeProfileLink} from '#/lib/routes/links' 19 19 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types' 20 20 import {isInvalidHandle} from '#/lib/strings/handles' 21 - import {colors, s} from '#/lib/styles' 22 21 import {emitSoftReset} from '#/state/events' 23 22 import {useFetchHandle} from '#/state/queries/handle' 24 23 import {useUnreadMessageCount} from '#/state/queries/messages/list-converations' ··· 29 28 import {Link} from '#/view/com/util/Link' 30 29 import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 31 30 import {PressableWithHover} from '#/view/com/util/PressableWithHover' 32 - import {Text} from '#/view/com/util/text/Text' 33 31 import {UserAvatar} from '#/view/com/util/UserAvatar' 34 32 import {NavSignupCard} from '#/view/shell/NavSignupCard' 33 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 34 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 35 35 import { 36 36 Bell_Filled_Corner0_Rounded as BellFilled, 37 37 Bell_Stroke2_Corner0_Rounded as Bell, ··· 63 63 UserCircle_Filled_Corner0_Rounded as UserCircleFilled, 64 64 UserCircle_Stroke2_Corner0_Rounded as UserCircle, 65 65 } from '#/components/icons/UserCircle' 66 + import {Text} from '#/components/Typography' 66 67 import {router} from '../../../routes' 67 68 68 69 const NAV_ICON_WIDTH = 28 ··· 149 150 label: string 150 151 } 151 152 function NavItem({count, href, icon, iconFilled, label}: NavItemProps) { 152 - const pal = usePalette('default') 153 + const t = useTheme() 153 154 const {currentAccount} = useSession() 154 - const {isDesktop, isTablet} = useWebMediaQueries() 155 + const {gtMobile, gtTablet} = useBreakpoints() 156 + const isTablet = gtMobile && !gtTablet 155 157 const [pathName] = React.useMemo(() => router.matchPath(href), [href]) 156 158 const currentRouteInfo = useNavigationState(state => { 157 159 if (!state) { ··· 183 185 184 186 return ( 185 187 <PressableWithHover 186 - style={styles.navItemWrapper} 187 - hoverStyle={pal.viewLight} 188 + style={[a.flex_row, a.align_center, a.p_md, a.rounded_sm, a.gap_sm]} 189 + hoverStyle={t.atoms.bg_contrast_25} 188 190 // @ts-ignore the function signature differs on web -prf 189 191 onPress={onPressWrapped} 190 192 // @ts-ignore web only -prf ··· 195 197 accessibilityHint=""> 196 198 <View 197 199 style={[ 198 - styles.navItemIconWrapper, 199 - isTablet && styles.navItemIconWrapperTablet, 200 + a.align_center, 201 + a.justify_center, 202 + a.z_10, 203 + { 204 + width: 24, 205 + height: 24, 206 + }, 207 + isTablet && { 208 + width: 40, 209 + height: 40, 210 + }, 200 211 ]}> 201 212 {isCurrent ? iconFilled : icon} 202 213 {typeof count === 'string' && count ? ( 203 214 <Text 204 - type="button" 205 215 style={[ 206 - styles.navItemCount, 207 - isTablet && styles.navItemCountTablet, 216 + a.absolute, 217 + a.text_xs, 218 + a.font_bold, 219 + a.rounded_full, 220 + a.text_center, 221 + { 222 + top: '-10%', 223 + left: count.length === 1 ? '50%' : '40%', 224 + backgroundColor: t.palette.primary_500, 225 + color: t.palette.white, 226 + lineHeight: a.text_sm.fontSize, 227 + paddingHorizontal: 4, 228 + paddingVertical: 1, 229 + minWidth: 16, 230 + }, 231 + isTablet && [ 232 + { 233 + top: '10%', 234 + left: count.length === 1 ? '50%' : '40%', 235 + }, 236 + ], 208 237 ]}> 209 238 {count} 210 239 </Text> 211 240 ) : null} 212 241 </View> 213 - {isDesktop && ( 214 - <Text type="title" style={[isCurrent ? s.bold : s.normal, pal.text]}> 242 + {gtTablet && ( 243 + <Text style={[a.text_xl, isCurrent ? a.font_heavy : a.font_normal]}> 215 244 {label} 216 245 </Text> 217 246 )} ··· 268 297 return null 269 298 } 270 299 return ( 271 - <View style={styles.newPostBtnContainer}> 272 - <TouchableOpacity 300 + <View style={[a.flex_row, a.pl_md, a.pt_xl]}> 301 + <Button 273 302 disabled={isFetchingHandle} 274 - style={styles.newPostBtn} 303 + label={_(msg`New post`)} 275 304 onPress={onPressCompose} 276 - accessibilityRole="button" 277 - accessibilityLabel={_(msg`New post`)} 278 - accessibilityHint=""> 279 - <View style={styles.newPostBtnIconWrapper}> 280 - <EditBig width={19} style={styles.newPostBtnLabel} /> 281 - </View> 282 - <Text type="button" style={styles.newPostBtnLabel}> 305 + size="large" 306 + variant="solid" 307 + color="primary" 308 + style={[a.rounded_full]}> 309 + <ButtonIcon icon={EditBig} position="left" /> 310 + <ButtonText> 283 311 <Trans context="action">New Post</Trans> 284 - </Text> 285 - </TouchableOpacity> 312 + </ButtonText> 313 + </Button> 286 314 </View> 287 315 ) 288 316 } ··· 439 467 right: 12, 440 468 width: 30, 441 469 height: 30, 442 - }, 443 - 444 - navItemWrapper: { 445 - flexDirection: 'row', 446 - alignItems: 'center', 447 - paddingHorizontal: 12, 448 - padding: 12, 449 - borderRadius: 8, 450 - gap: 10, 451 - }, 452 - navItemIconWrapper: { 453 - alignItems: 'center', 454 - justifyContent: 'center', 455 - width: 28, 456 - height: 24, 457 - marginTop: 2, 458 - zIndex: 1, 459 - }, 460 - navItemIconWrapperTablet: { 461 - width: 40, 462 - height: 40, 463 - }, 464 - navItemCount: { 465 - position: 'absolute', 466 - top: 0, 467 - left: 15, 468 - backgroundColor: colors.blue3, 469 - color: colors.white, 470 - fontSize: 12, 471 - fontWeight: '600', 472 - paddingHorizontal: 4, 473 - borderRadius: 8, 474 - }, 475 - navItemCountTablet: { 476 - left: 18, 477 - fontSize: 14, 478 - }, 479 - 480 - newPostBtnContainer: { 481 - flexDirection: 'row', 482 - }, 483 - newPostBtn: { 484 - flexDirection: 'row', 485 - alignItems: 'center', 486 - justifyContent: 'center', 487 - borderRadius: 24, 488 - paddingTop: 10, 489 - paddingBottom: 12, // visually aligns the text vertically inside the button 490 - paddingLeft: 16, 491 - paddingRight: 18, // looks nicer like this 492 - backgroundColor: colors.blue3, 493 - marginLeft: 12, 494 - marginTop: 20, 495 - marginBottom: 10, 496 - gap: 8, 497 - }, 498 - newPostBtnIconWrapper: { 499 - marginTop: 2, // aligns the icon visually with the text 500 - }, 501 - newPostBtnLabel: { 502 - color: colors.white, 503 - fontSize: 16, 504 - fontWeight: '600', 505 470 }, 506 471 })