From 27571946cfba16297f1bcd07cc0d3985cf137570 Mon Sep 17 00:00:00 2001
From: jtpark <pjt0014@gmail.com>
Date: Wed, 9 Aug 2023 10:46:51 +0900
Subject: [PATCH] feat: Change header icon padding

---
 .../web/src/components/common/button/Button.styles.ts    | 9 +++++----
 packages/web/src/components/common/button/Button.tsx     | 1 +
 .../notification-button/NotificationButton.styles.ts     | 2 +-
 .../wallet-connector-button/WalletConnectorButton.tsx    | 3 +--
 .../home/mobile-token-info/MobileTokenInfo.styles.ts     | 1 +
 5 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/common/button/Button.styles.ts b/packages/web/src/components/common/button/Button.styles.ts
index d3dca4439..b755b9bcd 100644
--- a/packages/web/src/components/common/button/Button.styles.ts
+++ b/packages/web/src/components/common/button/Button.styles.ts
@@ -9,6 +9,7 @@ export interface ButtonStyleProps {
   hierarchy?: ButtonHierarchy;
   fontType?: FontsKey;
   textColor?: ThemeColorKeyTypes;
+  arrowColor?: ThemeColorKeyTypes;
   bgColor?: ThemeColorKeyTypes;
   fullWidth?: boolean;
   gap?: CSSProperties["gap"];
@@ -53,9 +54,9 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
       return;
     }};
     & .arrow-icon path {
-      fill: ${({ theme, textColor, hierarchy }) => {
+      fill: ${({ theme, arrowColor, hierarchy }) => {
         if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;
-        return theme.color[textColor ?? "text10"];
+        return theme.color[arrowColor ?? "text10"];
       }};
     }
   }
@@ -68,9 +69,9 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
   }
 
   & .arrow-icon path {
-    fill: ${({ theme, textColor, hierarchy }) => {
+    fill: ${({ theme, arrowColor, hierarchy }) => {
       if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;
-      return theme.color[textColor ?? "text18"];
+      return theme.color[arrowColor ?? "text18"];
     }};
   }
 `;
diff --git a/packages/web/src/components/common/button/Button.tsx b/packages/web/src/components/common/button/Button.tsx
index f879d45a0..b28570600 100644
--- a/packages/web/src/components/common/button/Button.tsx
+++ b/packages/web/src/components/common/button/Button.tsx
@@ -37,6 +37,7 @@ const Button = ({
           {...style}
           fontType={style.fontType}
           textColor={style.textColor}
+          arrowColor={style.arrowColor}
         >
           {text}
         </StyledText>
diff --git a/packages/web/src/components/common/notification-button/NotificationButton.styles.ts b/packages/web/src/components/common/notification-button/NotificationButton.styles.ts
index a4dd25e9b..2ad25ddf9 100644
--- a/packages/web/src/components/common/notification-button/NotificationButton.styles.ts
+++ b/packages/web/src/components/common/notification-button/NotificationButton.styles.ts
@@ -10,7 +10,7 @@ export const AlertButton = styled.button`
   ${mixins.flexbox("row", "center", "center")};
   width: 36px;
   height: 36px;
-  padding: 4px;
+  padding: 3px 4px 5px 4px;
   border-radius: 4px;
   transition: all 0.3s ease;
   ${media.tablet} {
diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx
index 272cd0530..f31806bd6 100644
--- a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx
+++ b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx
@@ -39,8 +39,7 @@ const WalletConnectorButton = ({ isConnected }: { isConnected: boolean }) => {
             hierarchy: ButtonHierarchy.Dark,
             fontType: "p1",
             textColor: "text19",
-            // width: 165,
-            // height: 36,
+            arrowColor: "text18",
             padding: "10px 16px",
             gap: "8px",
           }}
diff --git a/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts
index 993ba9611..440f2e8e6 100644
--- a/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts
+++ b/packages/web/src/components/home/mobile-token-info/MobileTokenInfo.styles.ts
@@ -73,6 +73,7 @@ export const TableColumn = styled.div<{ tdWidth: number }>`
   .token-symbol {
     margin: 0px 8px;
     ${fonts.p4};
+    color: ${({ theme }) => theme.color.text04};
   }
 
   .token-index {