Improve styles (#4916)

Co-authored-by: Hailey <[email protected]>
bluesky-social · Aug 11, 2024 · 88f879f · 88f879f
1 parent 6f450b4
commit 88f879f
Show file tree

Hide file tree

Showing 20 changed files with 89 additions and 163 deletions.
diff --git a/src/alf/themes.ts b/src/alf/themes.ts
@@ -186,19 +186,19 @@ export function createThemes({
     white: color.gray_0,
     black: color.trueBlack,
 
-    contrast_25: color.gray_1000,
-    contrast_50: color.gray_975,
-    contrast_100: color.gray_950,
-    contrast_200: color.gray_900,
-    contrast_300: color.gray_800,
-    contrast_400: color.gray_700,
-    contrast_500: color.gray_600,
-    contrast_600: color.gray_500,
-    contrast_700: color.gray_400,
-    contrast_800: color.gray_300,
-    contrast_900: color.gray_200,
-    contrast_950: color.gray_100,
-    contrast_975: color.gray_50,
+    contrast_25: color.gray_975,
+    contrast_50: color.gray_950,
+    contrast_100: color.gray_900,
+    contrast_200: color.gray_800,
+    contrast_300: color.gray_700,
+    contrast_400: color.gray_600,
+    contrast_500: color.gray_500,
+    contrast_600: color.gray_400,
+    contrast_700: color.gray_300,
+    contrast_800: color.gray_200,
+    contrast_900: color.gray_100,
+    contrast_950: color.gray_50,
+    contrast_975: color.gray_25,
 
     primary_25: color.primary_975,
     primary_50: color.primary_950,
@@ -400,7 +400,7 @@ export function createThemes({
         color: darkPalette.contrast_400,
       },
       text_contrast_medium: {
-        color: darkPalette.contrast_700,
+        color: darkPalette.contrast_600,
       },
       text_contrast_high: {
         color: darkPalette.contrast_900,

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -202,28 +202,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
       } else if (color === 'secondary') {
         if (variant === 'solid') {
           if (!disabled) {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_25,
-                dim: t.palette.contrast_100,
-                dark: t.palette.contrast_100,
-              }),
-            })
-            hoverStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_50,
-                dim: t.palette.contrast_200,
-                dark: t.palette.contrast_200,
-              }),
-            })
+            baseStyles.push(t.atoms.bg_contrast_25)
+            hoverStyles.push(t.atoms.bg_contrast_50)
           } else {
-            baseStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_100,
-                dim: t.palette.contrast_25,
-                dark: t.palette.contrast_25,
-              }),
-            })
+            baseStyles.push(t.atoms.bg_contrast_100)
           }
         } else if (variant === 'outline') {
           baseStyles.push(a.border, t.atoms.bg, {

diff --git a/src/components/dialogs/GifSelect.tsx b/src/components/dialogs/GifSelect.tsx
@@ -249,7 +249,9 @@ function DialogError({details}: {details?: string}) {
   const control = Dialog.useDialogContext()
 
   return (
-    <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error has occurred`)}>
+    <Dialog.ScrollableInner
+      style={a.gap_md}
+      label={_(msg`An error has occurred`)}>
       <Dialog.Close />
       <ErrorScreen
         title={_(msg`Oh no!`)}

diff --git a/src/components/forms/TextField.tsx b/src/components/forms/TextField.tsx
@@ -193,6 +193,7 @@ export function createInput(Component: typeof TextInput) {
               lineHeight: a.text_md.fontSize * 1.1875,
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
+              minWidth: 0,
             },
             // fix for autofill styles covering border
             web({

diff --git a/src/lib/styles.ts b/src/lib/styles.ts
@@ -1,6 +1,7 @@
 import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
-import {Theme, TypographyVariant} from './ThemeContext'
+
 import {isWeb} from 'platform/detection'
+import {Theme, TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
 export const colors = {

diff --git a/src/lib/themes.ts b/src/lib/themes.ts
@@ -295,9 +295,9 @@ export const darkTheme: Theme = {
     ...defaultTheme.palette,
     default: {
       background: darkPalette.black,
-      backgroundLight: darkPalette.contrast_50,
+      backgroundLight: darkPalette.contrast_25,
       text: darkPalette.white,
-      textLight: darkPalette.contrast_700,
+      textLight: darkPalette.contrast_600,
       textInverted: darkPalette.black,
       link: darkPalette.primary_500,
       border: darkPalette.contrast_100,
@@ -344,7 +344,7 @@ export const dimTheme: Theme = {
     default: {
       ...darkTheme.palette.default,
       background: dimPalette.black,
-      backgroundLight: dimPalette.contrast_50,
+      backgroundLight: dimPalette.contrast_25,
       text: dimPalette.white,
       textLight: dimPalette.contrast_700,
       textInverted: dimPalette.black,

diff --git a/src/view/com/pager/PagerWithHeader.web.tsx b/src/view/com/pager/PagerWithHeader.web.tsx
@@ -193,13 +193,11 @@ const styles = StyleSheet.create({
   tabBarContainer: {
     // @ts-ignore web-only
     position: 'sticky',
-    overflow: 'hidden',
     top: 0,
     zIndex: 1,
   },
   tabBarContainerDesktop: {
     marginHorizontal: 'auto',
-    paddingHorizontal: 2,
     width: 600,
     borderLeftWidth: 1,
     borderRightWidth: 1,

diff --git a/src/view/com/pager/TabBar.tsx b/src/view/com/pager/TabBar.tsx
@@ -180,7 +180,7 @@ const desktopStyles = StyleSheet.create({
     left: 0,
     right: 0,
     top: '100%',
-    borderBottomWidth: 1,
+    borderBottomWidth: StyleSheet.hairlineWidth,
   },
 })
 

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
@@ -660,7 +660,7 @@ function ExpandedPostDetails({
         a.flex_row,
         a.align_center,
         a.flex_wrap,
-        a.gap_sm,
+        a.gap_xs,
         s.mt2,
         s.mb10,
       ]}>

diff --git a/src/view/com/posts/Feed.tsx b/src/view/com/posts/Feed.tsx
@@ -480,9 +480,7 @@ let Feed = ({
           // -prf
           return <DiscoverFallbackHeader />
         }
-        return (
-          <FeedSlice slice={item.slice} hideTopBorder={index === 0 && !isWeb} />
-        )
+        return <FeedSlice slice={item.slice} hideTopBorder={index === 0} />
       } else {
         return null
       }

diff --git a/src/view/com/util/PostMeta.tsx b/src/view/com/util/PostMeta.tsx
@@ -91,11 +91,7 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
         </Text>
       </ProfileHoverCard>
       {!isAndroid && (
-        <Text
-          type="md"
-          style={pal.textLight}
-          lineHeight={1.2}
-          accessible={false}>
+        <Text type="md" style={pal.textLight} accessible={false}>
           &middot;
         </Text>
       )}
@@ -104,7 +100,6 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
           <TextLinkOnWebOnly
             type="md"
             style={pal.textLight}
-            lineHeight={1.2}
             text={timeElapsed}
             accessibilityLabel={niceDate(opts.timestamp)}
             title={niceDate(opts.timestamp)}

diff --git a/src/view/screens/AccessibilitySettings.tsx b/src/view/screens/AccessibilitySettings.tsx
@@ -80,7 +80,7 @@ export function AccessibilitySettingsScreen({}: Props) {
         style={s.flex1}
         contentContainerStyle={[
           s.flex1,
-          {paddingBottom: 200},
+          {paddingBottom: 100},
           isMobile && pal.viewLight,
         ]}>
         <Text type="xl-bold" style={[pal.text, styles.heading]}>

diff --git a/src/view/screens/LanguageSettings.tsx b/src/view/screens/LanguageSettings.tsx
@@ -145,6 +145,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
+                  fontFamily: 'inherit',
                   letterSpacing: 0.5,
                   fontWeight: '500',
                   paddingHorizontal: 14,
@@ -236,6 +237,7 @@ export function LanguageSettingsScreen(_props: Props) {
                   backgroundColor: pal.viewLight.backgroundColor,
                   color: pal.text.color,
                   fontSize: 14,
+                  fontFamily: 'inherit',
                   letterSpacing: 0.5,
                   fontWeight: '500',
                   paddingHorizontal: 14,

diff --git a/src/view/screens/Search/Explore.tsx b/src/view/screens/Search/Explore.tsx
@@ -571,7 +571,7 @@ export function Explore() {
       keyExtractor={item => item.key}
       // @ts-ignore web only -prf
       desktopFixedHeight
-      contentContainerStyle={{paddingBottom: 200}}
+      contentContainerStyle={{paddingBottom: 100}}
       keyboardShouldPersistTaps="handled"
       keyboardDismissMode="on-drag"
     />

diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx
@@ -783,7 +783,7 @@ let SearchInputBox = ({
       }}>
       <MagnifyingGlassIcon
         style={[pal.icon, styles.headerSearchIcon]}
-        size={21}
+        size={20}
       />
       <TextInput
         testID="searchTextInput"
@@ -1071,6 +1071,7 @@ const styles = StyleSheet.create({
   headerSearchInput: {
     flex: 1,
     fontSize: 17,
+    minWidth: 0,
   },
   headerCancelBtn: {
     paddingLeft: 10,

diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
@@ -325,7 +325,7 @@ export function SettingsScreen({}: Props) {
         </View>
       </SimpleViewHeader>
       <ScrollView
-        style={[s.hContentRegion, isMobile && pal.viewLight]}
+        style={[isMobile && pal.viewLight]}
         scrollIndicatorInsets={{right: 1}}
         // @ts-ignore web only -prf
         dataSet={{'stable-gutters': 1}}>

diff --git a/src/view/screens/Storybook/index.tsx b/src/view/screens/Storybook/index.tsx
@@ -36,7 +36,7 @@ function StorybookInner() {
 
   return (
     <CenteredView style={[t.atoms.bg]}>
-      <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 200}]}>
+      <View style={[a.p_xl, a.gap_5xl, {paddingBottom: 100}]}>
         {!showContainedList ? (
           <>
             <View style={[a.flex_row, a.align_start, a.gap_md]}>

diff --git a/src/view/shell/Drawer.tsx b/src/view/shell/Drawer.tsx
@@ -33,6 +33,7 @@ import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {formatCountShortOnly} from 'view/com/util/numeric/format'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {atoms as a} from '#/alf'
 import {useTheme as useAlfTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
@@ -96,29 +97,42 @@ let DrawerProfileCard = ({
         numberOfLines={1}>
         @{account.handle}
       </Text>
-      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCountShortOnly(profile?.followersCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followersCount || 0}
-            one="follower"
-            other="followers"
-          />
-        </Trans>{' '}
-        &middot;{' '}
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCountShortOnly(profile?.followsCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followsCount || 0}
-            one="following"
-            other="following"
-          />
-        </Trans>
-      </Text>
+      <View
+        style={[
+          styles.profileCardFollowers,
+          a.gap_xs,
+          a.flex_row,
+          a.align_center,
+          a.flex_wrap,
+        ]}>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCountShortOnly(profile?.followersCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followersCount || 0}
+              one="follower"
+              other="followers"
+            />
+          </Trans>
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          &middot;
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCountShortOnly(profile?.followsCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followsCount || 0}
+              one="following"
+              other="following"
+            />
+          </Trans>
+        </Text>
+      </View>
     </TouchableOpacity>
   )
 }
@@ -610,7 +624,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#1B1919',
   },
   main: {
-    paddingLeft: 20,
+    paddingHorizontal: 20,
     paddingTop: 20,
   },
   smallSpacer: {
@@ -627,14 +641,12 @@ const styles = StyleSheet.create({
   },
   profileCardFollowers: {
     marginTop: 16,
-    paddingRight: 10,
   },
 
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 16,
-    paddingRight: 10,
   },
   menuItemIconWrapper: {
     width: 24,

diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
@@ -11,6 +11,7 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s} from 'lib/styles'
 import {TextLink} from 'view/com/util/Link'
 import {Text} from 'view/com/util/text/Text'
+import {atoms as a} from '#/alf'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {DesktopFeeds} from './Feeds'
 import {DesktopSearch} from './Search'
@@ -56,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               paddingTop: hasSession ? 0 : 18,
             },
           ]}>
-          <View style={[{flexWrap: 'wrap'}, s.flexRow]}>
+          <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}>
             {hasSession && (
               <>
                 <TextLink
@@ -69,7 +70,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
                   text={_(msg`Feedback`)}
                 />
                 <Text type="md" style={pal.textLight}>
-                  &nbsp;&middot;&nbsp;
+                  &middot;
                 </Text>
               </>
             )}
@@ -80,7 +81,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Privacy`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"
@@ -89,7 +90,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Terms`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"