From 316b1443272c007625908852a7220942177c5aba Mon Sep 17 00:00:00 2001
From: juntaepark <112064254+juntaepark@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:01:05 +0900
Subject: [PATCH] feat: Align-items and symbol font size adjustment (#141)

---
 .../dashboard-info-title/DashboardInfoTitle.styles.ts    | 6 ++++++
 .../dashboard-info-title/DashboardInfoTitle.tsx          | 4 ++--
 .../governance-overview/GovernanceOverview.styles.ts     | 6 +++---
 .../dashboard/supply-overview/SupplyOverview.styles.ts   | 9 ++++++---
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.styles.ts b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.styles.ts
index 2e8313a0c..a21f61317 100644
--- a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.styles.ts
+++ b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.styles.ts
@@ -24,6 +24,9 @@ export const GnosLogoWrapper = styled.div`
     height: 36px;
     border-radius: 100%;
   }
+  .gnos-symbol {
+    ${fonts.body6};
+  }
   .gnos-image {
     width: 17px;
     height: 19.5px;
@@ -39,6 +42,9 @@ export const GnotLogoWrapper = styled.div`
     height: 36px;
     border-radius: 100%;
   }
+  .gnot-symbol {
+    ${fonts.body6};
+  }
   .gnot-image {
     width: 21.37499618530306px;
     height: 21.374998092651694px;
diff --git a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
index e1be8b5a6..5d02e14f7 100644
--- a/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
+++ b/packages/web/src/components/dashboard/dashboard-info-title/DashboardInfoTitle.tsx
@@ -14,7 +14,7 @@ const DashboardInfoTitle = ({}) => (
         <div className="gnos-image-wrapper">
           <IconLogoWhite className="gnos-image" />
         </div>
-        <div>GNOS</div>
+        <div className="gnos-symbol">GNOS</div>
       </GnosLogoWrapper>
       <div>$0.7425</div>
     </TokenWrapper>
@@ -24,7 +24,7 @@ const DashboardInfoTitle = ({}) => (
         <div className="gnot-image-wrapper">
           <IconLogoWhite className="gnot-image" />
         </div>
-        <div>GNOT</div>
+        <div className="gnot-symbol">GNOT</div>
       </GnotLogoWrapper>
       <div>$1.8852</div>
     </TokenWrapper>
diff --git a/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts b/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
index d646dede6..45b319e81 100644
--- a/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
+++ b/packages/web/src/components/dashboard/governance-overview/GovernanceOverview.styles.ts
@@ -34,7 +34,7 @@ export const IconButton = styled.button`
 `;
 
 export const GovernanceWrapper = styled.div`
-  ${mixins.flexbox("column", "flex-start", "flex-start")};
+  ${mixins.flexbox("column", "center", "flex-start")};
   width: 100%;
   ${fonts.body7};
   gap: 16px;
@@ -43,7 +43,7 @@ export const GovernanceWrapper = styled.div`
   .passed-proposals,
   .active-proposals,
   .community-pool {
-    ${mixins.flexbox("row", "flex-start", "space-between")};
+    ${mixins.flexbox("row", "center", "space-between")};
     width: 100%;
   }
 
@@ -53,7 +53,7 @@ export const GovernanceWrapper = styled.div`
   }
 
   .label-title {
-    ${mixins.flexbox("row", "flex-start", "flex-start")};
+    ${mixins.flexbox("row", "center", "flex-start")};
     ${fonts.body10}
     color: ${({ theme }) => theme.color.text04};
     gap: 4px;
diff --git a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
index b3f4c9bd7..953f951c0 100644
--- a/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
+++ b/packages/web/src/components/dashboard/supply-overview/SupplyOverview.styles.ts
@@ -15,13 +15,16 @@ export const SupplyOverviewWrapper = styled.div`
 `;
 
 export const SupplyInfoWrapper = styled.div`
-  ${mixins.flexbox("column", "flex-start", "flex-start")}
+  ${mixins.flexbox("column", "center", "flex-start")}
   width: 100%;
   ${fonts.body7};
   gap: 16px;
   .total-supply,
   .circulating-supply,
-  .daily-block-emissions,
+  .daily-block-emissions {
+    ${mixins.flexbox("row", "center", "space-between")};
+    width: 100%;
+  }
   .total-staked {
     ${mixins.flexbox("row", "flex-start", "space-between")};
     width: 100%;
@@ -42,7 +45,7 @@ export const SupplyInfoWrapper = styled.div`
     }
   }
   .label-title {
-    ${mixins.flexbox("row", "flex-start", "flex-start")};
+    ${mixins.flexbox("row", "center", "flex-start")};
     ${fonts.body10}
     color: ${({ theme }) => theme.color.text04};
     gap: 4px;