feat: Align-items and symbol font size adjustment (#141)

gnoswap-labs · Jul 31, 2023 · 316b144 · 316b144
1 parent 1740b6d
commit 316b144
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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;