feat: Fix minor changes in header (#165)

gnoswap-labs · Aug 4, 2023 · a961806 · a961806
1 parent a71923c
commit a961806
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/packages/web/src/components/common/button/Button.styles.ts b/packages/web/src/components/common/button/Button.styles.ts
@@ -11,6 +11,7 @@ export interface ButtonStyleProps {
   textColor?: ThemeColorKeyTypes;
   bgColor?: ThemeColorKeyTypes;
   fullWidth?: boolean;
+  gap?: CSSProperties["gap"];
   width?: CSSProperties["width"];
   height?: CSSProperties["height"];
   radius?: CSSProperties["borderRadius"];
@@ -20,6 +21,10 @@ export interface ButtonStyleProps {
 
 export const ButtonWrapper = styled.button<ButtonStyleProps>`
   ${({ justify }) => mixins.flexbox("row", "center", justify ?? "center")};
+  gap: ${({ gap }) => {
+    if (gap) return typeof gap === "number" ? gap + "px" : gap;
+    return "";
+  }};
   width: ${({ width, fullWidth }) => {
     if (width) return typeof width === "number" ? width + "px" : width;
     if (fullWidth) return "100%";
@@ -65,7 +70,7 @@ export const ButtonWrapper = styled.button<ButtonStyleProps>`
   & .arrow-icon path {
     fill: ${({ theme, textColor, hierarchy }) => {
       if (hierarchy === ButtonHierarchy.Primary) return theme.color.text09;
-      return theme.color[textColor ?? "text12"];
+      return theme.color[textColor ?? "text18"];
     }};
   }
 `;

diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.styles.ts b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.styles.ts
@@ -2,4 +2,8 @@ import styled from "@emotion/styled";
 
 export const WalletConnectorButtonWrapper = styled.div`
   position: relative;
+  .arrow-icon {
+    width: 16px;
+    height: 16px;
+  }
 `;
diff --git a/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx b/packages/web/src/components/common/wallet-connector-button/WalletConnectorButton.tsx
@@ -38,10 +38,11 @@ const WalletConnectorButton = ({ isConnected }: { isConnected: boolean }) => {
           style={{
             hierarchy: ButtonHierarchy.Dark,
             fontType: "p1",
-            width: 165,
-            height: 36,
+            textColor: "text19",
+            // width: 165,
+            // height: 36,
             padding: "10px 16px",
-            justify: "space-between",
+            gap: "8px",
           }}
           onClick={onMenuToggle}
         />

diff --git a/packages/web/src/constants/theme.constant.ts b/packages/web/src/constants/theme.constant.ts
@@ -152,6 +152,8 @@ export const DARK_THEME_COLORS: ThemeColorType = {
   text15: colors.global.brand100,
   text16: colors.dark.gray200Text3,
   text17: colors.dark.gray400Text5,
+  text18: colors.dark.whiteText1,
+  text19: colors.dark.gray100Text2,
   icon01: colors.dark.gray100Icon2,
   icon02: colors.dark.gray200Icon3,
   icon03: colors.dark.gray400Icon5,
@@ -224,6 +226,8 @@ export const LIGHT_THEME_COLORS: ThemeColorType = {
   text15: colors.white.gray100Text1,
   text16: colors.white.gray500Text3,
   text17: colors.white.gray200Text1,
+  text18: colors.white.gray300Text1,
+  text19: colors.white.gray400Text2,
   icon01: colors.white.gray300Icon1,
   icon02: colors.white.gray300Icon1,
   icon03: colors.white.gray300Icon1,

diff --git a/packages/web/src/styles/ThemeTypes.ts b/packages/web/src/styles/ThemeTypes.ts
@@ -49,6 +49,8 @@ export interface ThemeColorType {
   text15: string;
   text16: string;
   text17: string;
+  text18: string;
+  text19: string;
   icon01: string;
   icon02: string;
   icon03: string;