More visual separation for sidebar sections

src/components/FeedInterstitials.tsx

@@ -933,8 +933,15 @@ export function SuggestedFeeds() {
 
 export function ProgressGuide() {
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   return (
-    <View style={[t.atoms.border_contrast_low, a.px_lg, a.py_lg, a.pb_lg]}>
+    <View
+      style={[
+        t.atoms.border_contrast_low,
+        a.px_lg,
+        a.py_lg,
+        !gtMobile && {marginTop: 4},
+      ]}>
       <ProgressGuideList />
     </View>
   )

src/components/ProgressGuide/List.tsx

@@ -23,16 +23,19 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
 
   if (guide) {
     return (
-      <View style={[a.flex_col, a.gap_md, style]}>
+      <View
+        style={[
+          a.flex_col,
+          a.gap_md,
+          a.rounded_md,
+          t.atoms.bg_contrast_25,
+          style,
+          a.p_md,
+        ]}>
         <View style={[a.flex_row, a.align_center, a.justify_between]}>
           <Text
-            style={[
-              t.atoms.text_contrast_medium,
-              a.font_semi_bold,
-              a.text_sm,
-              {textTransform: 'uppercase'},
-            ]}>
-            <Trans>Getting started</Trans>
+            style={[t.atoms.text_contrast_medium, a.font_semi_bold, a.text_sm]}>
+            <Trans>Getting Started</Trans>
           </Text>
           <Button
             variant="ghost"
@@ -40,8 +43,9 @@ export function ProgressGuideList({style}: {style?: StyleProp<ViewStyle>}) {
             color="secondary"
             shape="round"
             label={_(msg`Dismiss getting started guide`)}
-            onPress={endProgressGuide}>
-            <ButtonIcon icon={Times} size="sm" />
+            onPress={endProgressGuide}
+            style={[a.bg_transparent]}>
+            <ButtonIcon icon={Times} size="xs" />
           </Button>
         </View>
         {guide.guide === 'follow-10' && (

src/components/ProgressGuide/Task.tsx

@@ -31,11 +31,11 @@ export function ProgressGuideTask({
           size={20}
           thickness={3}
           borderWidth={0}
-          unfilledColor={t.palette.contrast_50}
+          unfilledColor={t.palette.contrast_100}
         />
       )}
 
-      <View style={[a.flex_col, a.gap_2xs, subtitle && {marginTop: -2}]}>
+      <View style={[a.flex_col, a.gap_xs, subtitle && {marginTop: -2}]}>
         <Text
           style={[
             a.text_sm,

src/components/TrendingTopics.tsx

@@ -20,8 +20,12 @@ export function TrendingTopic({
   topic: raw,
   size,
   style,
-}: {topic: TrendingTopic; size?: 'large' | 'small'} & ViewStyleProp) {
-  const t = useTheme()
+  hovered,
+}: {
+  topic: TrendingTopic
+  size?: 'large' | 'small'
+  hovered?: boolean
+} & ViewStyleProp) {
   const topic = useTopic(raw)
 
   const isSmall = size === 'small'
@@ -33,18 +37,14 @@ export function TrendingTopic({
       style={[
         a.flex_row,
         a.align_center,
-        a.rounded_full,
-        a.border,
-        t.atoms.border_contrast_medium,
-        t.atoms.bg,
         isSmall
           ? [
               {
-                paddingVertical: 5,
-                paddingHorizontal: 10,
+                paddingVertical: 2,
+                paddingHorizontal: 4,
               },
             ]
-          : [a.py_sm, a.px_md],
+          : [a.py_xs, a.px_sm],
         hasIcon && {gap: 6},
         style,
       ]}>
@@ -93,6 +93,7 @@ export function TrendingTopic({
           a.font_semi_bold,
           a.leading_tight,
           isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
+          hovered && {textDecorationLine: 'underline'},
         ]}
         numberOfLines={1}>
         {topic.displayName}

src/view/shell/desktop/RightNav.tsx

@@ -18,7 +18,6 @@ import {
   web,
 } from '#/alf'
 import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
-import {Divider} from '#/components/Divider'
 import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
@@ -86,9 +85,8 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
 
       {hasSession && (
         <>
-          <ProgressGuideList />
           <DesktopFeeds />
-          <Divider />
+          <ProgressGuideList />
         </>
       )}
 

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -12,9 +12,7 @@ import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/service-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
-import {Divider} from '#/components/Divider'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
 import * as Prompt from '#/components/Prompt'
 import {
   TrendingTopic,
@@ -46,9 +44,15 @@ function Inner() {
 
   return error || noTopics ? null : (
     <>
-      <View style={[a.gap_sm, {paddingBottom: 2}]}>
+      <View
+        style={[
+          a.gap_sm,
+          a.py_md,
+          a.px_md,
+          a.rounded_md,
+          t.atoms.bg_contrast_25,
+        ]}>
         <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-          <Graph size="sm" />
           <Text
             style={[
               a.flex_1,
@@ -59,17 +63,19 @@ function Inner() {
             <Trans>Trending</Trans>
           </Text>
           <Button
-            label={_(msg`Hide trending topics`)}
-            size="tiny"
             variant="ghost"
+            size="tiny"
             color="secondary"
             shape="round"
-            onPress={() => trendingPrompt.open()}>
-            <ButtonIcon icon={X} size="sm" />
+            label={_(msg`Hide trending topics`)}
+            onPress={() => trendingPrompt.open()}
+            style={[a.bg_transparent]}>
+            <ButtonIcon icon={X} size="xs" />
           </Button>
         </View>
 
-        <View style={[a.flex_row, a.flex_wrap, {gap: '6px 4px'}]}>
+        <View
+          style={[a.flex_row, a.flex_wrap, {gap: '6px 4px', marginLeft: -4}]}>
           {isLoading ? (
             Array(TRENDING_LIMIT)
               .fill(0)
@@ -90,12 +96,7 @@ function Inner() {
                     <TrendingTopic
                       size="small"
                       topic={topic}
-                      style={[
-                        hovered && [
-                          t.atoms.border_contrast_high,
-                          t.atoms.bg_contrast_25,
-                        ],
-                      ]}
+                      hovered={hovered}
                     />
                   )}
                 </TrendingTopicLink>
@@ -111,7 +112,6 @@ function Inner() {
         confirmButtonCta={_(msg`Hide`)}
         onConfirm={onConfirmHide}
       />
-      <Divider />
     </>
   )
 }