From e8c980ee52d6456be20491b62a1a0a8e6b8e9142 Mon Sep 17 00:00:00 2001
From: JungHwan Jang <onghwan@gmail.com>
Date: Thu, 13 Feb 2025 10:43:55 -0500
Subject: [PATCH] CP-9875: Design feedback - Onboarding (#2269)

---
 .../common/components/AccountSettingBarButton.tsx |  2 +-
 .../app/new/common/consts/screenOptions.tsx       |  7 +++----
 .../src/components/Avatar/HexagonImageView.tsx    | 15 ++++++++++++---
 .../src/components/GroupList/GroupList.tsx        |  2 +-
 .../PriceChangeIndicator/PriceChangeIndicator.tsx |  2 +-
 yarn.lock                                         |  2 +-
 6 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/core-mobile/app/new/common/components/AccountSettingBarButton.tsx b/packages/core-mobile/app/new/common/components/AccountSettingBarButton.tsx
index 5abf3a75fb..96026e49ad 100644
--- 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
index f0c460097f..ce9fe1b20c 100644
--- 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
index 81b59939e2..66837b016b 100644
--- 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
index c0513fa35c..ce5df0ecc4 100644
--- 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
index 2661637041..23596a7c15 100644
--- 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
index 6fe202caa1..3c32c2676a 100644
--- 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