settings section

Author: stormcloud266

packages/app/features/account/settings/SettingsLinks.tsx

@@ -5,7 +5,7 @@ export function SettingsLinks(): JSX.Element {
   const supabase = useSupabase()
   const settingsLinks = [
     {
-      text: 'Edit Profile',
+      text: 'My Profile',
       href: '/account/settings/edit-profile',
     },
     {

packages/app/features/account/settings/SettingsNavLink.tsx

@@ -17,33 +17,32 @@ export function SettingsNavLink({
     : false // no href is never active
 
   const { resolvedTheme } = useThemeSetting()
-  const iconActiveColor = resolvedTheme?.startsWith('dark') ? '$primary' : '$green3Light'
-  const iconInActiveColor = resolvedTheme?.startsWith('dark') ? '$gray5Light' : '$color12'
+  const iconActiveColor = resolvedTheme?.startsWith('dark') ? '$primary' : '$color12'
 
   return (
     <Link
       hoverStyle={
         props.disabled ? {} : { opacity: 1, backgroundColor: 'transparent', borderWidth: 0 }
       }
       cursor={props.disabled ? 'not-allowed' : 'pointer'}
-      opacity={isActiveRoute ? 1 : 0.63}
       disabled={props.disabled}
       {...props}
       href={props.disabled ? '' : props.href}
     >
       <Paragraph
         f={1}
-        $md={{ fontSize: '$5' }}
-        fontWeight={isActiveRoute ? 'bold' : '300'}
-        color={isActiveRoute ? iconActiveColor : iconInActiveColor}
+        fontWeight={isActiveRoute ? '600' : '400'}
+        color={isActiveRoute ? iconActiveColor : '$color10'}
         pl="$4"
+        fontSize={'$5'}
       >
         {text}
       </Paragraph>
       {isActiveRoute && !sheet.open && (
         <Separator
           vertical
-          borderColor="$greenBackground"
+          borderColor="$primary"
+          $theme-light={{ borderColor: '$color12' }}
           pos="absolute"
           right={-1.5}
           top={-2}

packages/app/features/account/settings/layout.web.tsx

@@ -1,4 +1,4 @@
-import { Separator, XStack, YStack } from '@my/ui'
+import { Card, Separator, XStack, YStack } from '@my/ui'
 import { SettingsLinks } from './SettingsLinks'
 
 export type SettingsLayoutProps = {
@@ -14,29 +14,32 @@ export type SettingsLayoutProps = {
 
 export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
   return (
-    <XStack f={1} pt={'$4'}>
-      <YStack
-        // this file is web-only so we can safely use CSS
-        style={{
-          transition: '200ms ease width',
-        }}
-        width="$14"
-        display="none"
-        $gtLg={{ display: 'flex' }}
-        py={'$4'}
-      >
-        <YStack width={'100%'} gap={'$4'}>
-          <YStack jc={'space-between'} zIndex={4} flex={1} width={'100%'}>
-            <YStack h={'inherit'} gap={'$6'} width={'100%'}>
-              <SettingsLinks />
+    <YStack pb={'$size.3.5'} f={1} pt={'$size.0.9'} $gtLg={{ pt: 0 }}>
+      <Card width={'100%'} p={'$size.3.5'}>
+        <XStack f={1}>
+          <YStack
+            // this file is web-only so we can safely use CSS
+            style={{
+              transition: '200ms ease width',
+            }}
+            width="$size.16"
+            display="none"
+            $gtLg={{ display: 'flex' }}
+          >
+            <YStack width={'100%'} gap={'$4'}>
+              <YStack jc={'space-between'} zIndex={4} flex={1} width={'100%'}>
+                <YStack h={'inherit'} gap={'$size.1.5'} width={'100%'}>
+                  <SettingsLinks />
+                </YStack>
+              </YStack>
             </YStack>
           </YStack>
-        </YStack>
-      </YStack>
-      <Separator display="none" $gtLg={{ display: 'flex' }} vertical />
-      <YStack f={1} ai="center" $gtLg={{ ml: '$8' }}>
-        <YStack width="100%">{children}</YStack>
-      </YStack>
-    </XStack>
+          <Separator display="none" $gtLg={{ display: 'flex' }} vertical />
+          <YStack f={1} ai="center" $gtLg={{ ml: '$size.8' }}>
+            <YStack width="100%">{children}</YStack>
+          </YStack>
+        </XStack>
+      </Card>
+    </YStack>
   )
 }