CP-9875: Design feedback - Onboarding (#2269)

ava-labs · Feb 13, 2025 · e8c980e · e8c980e
1 parent 854a8cc
commit e8c980e
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/packages/core-mobile/app/new/common/components/AccountSettingBarButton.tsx b/packages/core-mobile/app/new/common/components/AccountSettingBarButton.tsx
@@ -11,7 +11,7 @@ export const AccountSettingBarButton = ({
       <View sx={{ marginTop: 5 }}>
         <Avatar
           backgroundColor="transparent"
-          size={36}
+          size={32}
           // todo: replace with actual avatar
           source={{
             uri: 'https://miro.medium.com/v2/resize:fit:1256/format:webp/1*xm2-adeU3YD4MsZikpc5UQ.png'

diff --git a/packages/core-mobile/app/new/common/consts/screenOptions.tsx b/packages/core-mobile/app/new/common/consts/screenOptions.tsx
@@ -108,9 +108,8 @@ export const homeScreenOptions: StackNavigationOptions = {
   headerLeft: () => (
     <View
       sx={{
-        marginLeft: 12,
-        height: '100%',
-        justifyContent: 'center'
+        marginLeft: 14,
+        height: '100%'
       }}>
       <Link href="/settings/" asChild>
         <AccountSettingBarButton />
@@ -123,7 +122,7 @@ export const homeScreenOptions: StackNavigationOptions = {
         sx={{
           flexDirection: 'row',
           gap: 12,
-          marginRight: 12,
+          marginRight: 14,
           height: '100%',
           alignItems: 'center'
         }}>

diff --git a/packages/k2-alpine/src/components/Avatar/HexagonImageView.tsx b/packages/k2-alpine/src/components/Avatar/HexagonImageView.tsx
@@ -108,18 +108,20 @@ export const HexagonImageView = ({
 export const HexagonBorder = ({ height }: { height: number }): JSX.Element => {
   const { theme } = useTheme()
 
+  const strokeWidth = Math.floor(150 / height)
+
   return (
     <Svg
       style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
       width={height}
       height={height}
-      viewBox={hexagonPath.viewBox}>
+      viewBox={hexagonBorderPath.viewBox}>
       <Path
-        d={hexagonPath.path}
+        d={hexagonBorderPath.path}
         fill="none"
         stroke={theme.isDark ? colors.$neutralWhite : 'black'}
         strokeOpacity={0.1}
-        strokeWidth="2"
+        strokeWidth={strokeWidth}
       />
     </Svg>
   )
@@ -186,6 +188,13 @@ const hexagonPath = {
   viewBox: '0 0 130 144'
 }
 
+const hexagonBorderPath = {
+  path: `
+  M76.75 4.36122L117.702 28.0048C124.973 32.2027 129.452 39.9607 129.452 48.3564V95.6436C129.452 104.039 124.973 111.797 117.702 115.995L76.75 139.639C69.4791 143.837 60.5209 143.837 53.25 139.639L12.2981 115.995C5.02717 111.797 0.548096 104.039 0.548096 95.6436V48.3564C0.548096 39.9607 5.02717 32.2027 12.2981 28.0048L53.25 4.36122C60.5209 0.163346 69.4791 0.163345 76.75 4.36122Z
+`,
+  viewBox: '0 0 130 144'
+}
+
 const LoadingView = ({ style }: { style: ViewStyle }): JSX.Element => {
   const backgroundAnimation = useSharedValue(0)
   const { theme } = useTheme()

diff --git a/packages/k2-alpine/src/components/GroupList/GroupList.tsx b/packages/k2-alpine/src/components/GroupList/GroupList.tsx
@@ -47,7 +47,7 @@ export const GroupList = ({
                 }}
                 onLayout={handleLayout}>
                 <Text
-                  variant="body1"
+                  variant="buttonMedium"
                   sx={{
                     color: '$textPrimary',
                     paddingVertical: 14

diff --git a/packages/k2-alpine/src/components/PriceChangeIndicator/PriceChangeIndicator.tsx b/packages/k2-alpine/src/components/PriceChangeIndicator/PriceChangeIndicator.tsx
@@ -55,7 +55,7 @@ export const PriceChangeIndicator = ({
                 status === 'down'
                   ? [colors.$accentRed, colors.$accentDanger]
                   : status === 'up'
-                  ? [theme.colors.$textSuccess, colors.$accentTeal]
+                  ? [colors.$accentTeal, theme.colors.$textSuccess]
                   : [theme.colors.$textSecondary, theme.colors.$textSecondary]
               }
               start={{ x: 1, y: 0.5 }}

diff --git a/yarn.lock b/yarn.lock
@@ -27081,7 +27081,7 @@ react-native-webview@ava-labs/react-native-webview:
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: ae658f8c94177d1b419ffb73d26bd70474b6c688af507daaabc11451f983f77a906b2aafcdfdd09c96cab846d9722dcaf26a7c22ee7d19fb4cf70578c8812ac5
+  checksum: 869028a5bb7a4a8a125d274753b703c2b3579b5efc7bb82db136a186fd88a11c5a4696505ebcd976d20fcdd41111abe229ae0e19c27c50bb30fe4f52bb6383bc
   languageName: node
   linkType: hard