feat: [GSFE-88] Change homeswap component (#74)

gnoswap-labs · Apr 19, 2023 · 2f58707 · 2f58707
1 parent 07d5b3d
commit 2f58707
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 40 deletions.
diff --git a/packages/web/src/components/home/home-swap/HomeSwap.styles.ts b/packages/web/src/components/home/home-swap/HomeSwap.styles.ts
@@ -3,8 +3,7 @@ import { css, Theme } from "@emotion/react";
 import { fonts } from "@constants/font.constant";
 
 export const wrapper = (theme: Theme) => css`
-  padding: 24px;
-
+  padding: 23px;
   background-color: ${theme.colors.gray60};
   border: 1px solid ${theme.colors.gray50};
   box-shadow: 10px 14px 60px rgba(0, 0, 0, 0.4);
@@ -20,38 +19,40 @@ export const wrapper = (theme: Theme) => css`
       color: ${theme.colors.gray10};
     }
 
-    .icon * {
+    .setting-button {
+      width: 24px;
+      height: 24px;
+    }
+    .setting-icon * {
       fill: ${theme.colors.gray40};
     }
   }
 
   .inputs {
-    ${mixins.flexbox("row", "center", "space-between")};
+    ${mixins.flexbox("column", "center", "space-between")};
     flex-wrap: wrap;
-
+    gap: 2px;
     width: 100%;
     height: 100%;
-
+    position: relative;
     .from {
       ${mixins.flexbox("row", "center", "space-between")};
       flex-wrap: wrap;
 
       width: 100%;
-      padding: 16px 24px;
+      padding: 15px 23px;
 
       background-color: ${theme.colors.colorBlack};
       border: 1px solid ${theme.colors.gray50};
       border-radius: 8px;
-
-      margin-bottom: 2px;
     }
 
     .to {
       ${mixins.flexbox("row", "center", "space-between")};
       flex-wrap: wrap;
 
       width: 100%;
-      padding: 16px 24px;
+      padding: 15px 23px;
 
       background-color: ${theme.colors.colorBlack};
       border: 1px solid ${theme.colors.gray50};
@@ -76,41 +77,30 @@ export const wrapper = (theme: Theme) => css`
       color: ${theme.colors.colorWhite};
     }
 
-    .price-text {
-      ${fonts.body6};
-      color: ${theme.colors.gray30};
-    }
-
+    .price-text,
     .balence-text {
-      ${fonts.body6};
+      ${fonts.body12};
       color: ${theme.colors.gray30};
     }
 
     .arrow {
-      ${mixins.flexbox("row", "center", "space-between")};
-      justify-content: center;
-      flex-wrap: wrap;
-
+      ${mixins.flexbox("row", "center", "center")};
+      ${mixins.positionCenter()};
       width: 100%;
-      margin-top: -228px;
-
       .shape {
-        ${mixins.flexbox("row", "center", "space-between")};
-
+        ${mixins.flexbox("row", "center", "center")};
         width: 40px;
         height: 40px;
-
         background-color: ${theme.colors.colorBlack};
         border: 1px solid ${theme.colors.gray50};
-        border-radius: 99px;
-
-        .icon {
-          ${mixins.flexbox("row", "center", "space-between")};
-          margin: 7px;
-        }
-
-        .icon * {
-          fill: ${theme.colors.gray20};
+        border-radius: 50%;
+
+        .shape-icon {
+          width: 16px;
+          height: 16px;
+          * {
+            fill: ${theme.colors.gray20};
+          }
         }
       }
     }

diff --git a/packages/web/src/components/home/home-swap/HomeSwap.tsx b/packages/web/src/components/home/home-swap/HomeSwap.tsx
@@ -67,8 +67,8 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ from, to, swapNow }) => {
     <div css={wrapper}>
       <div className="header">
         <span className="title">Swap</span>
-        <button disabled>
-          <IconSettings className="icon" />
+        <button className="setting-button">
+          <IconSettings className="setting-icon" />
         </button>
       </div>
       <div className="inputs">
@@ -104,20 +104,20 @@ const HomeSwap: React.FC<HomeSwapProps> = ({ from, to, swapNow }) => {
         </div>
         <div className="arrow">
           <div className="shape">
-            <IconSwapArrowDown className="icon" />
+            <IconSwapArrowDown className="shape-icon" />
           </div>
         </div>
       </div>
 
       <div className="footer">
         <Button
-          text="Skip now"
+          text="Swap now"
           style={{
             bgColor: "brand50",
             fullWidth: true,
             height: 57,
-            textColor: "colorWhite",
-            fontType: "body4",
+            textColor: "gray10",
+            fontType: "body7",
           }}
           onClick={onClickSwapNow}
         />