Change row arrangement of metrics

TempleDAO · Nov 7, 2023 · 02b9f45 · 02b9f45
1 parent b7f5383
commit 02b9f45
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 13 deletions.
diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Metrics/index.tsx b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/Metrics/index.tsx
@@ -157,25 +157,24 @@ const MobileMetricsContainer = styled.div<MetricProps>`
 `;
 
 const MetricValue = styled.div<MetricProps>`
-  font-size: ${({ small }) => (small ? '1rem' : '2rem')};
+  font-size: ${({ small }) => (small ? '0.9rem' : '1.8rem')};
   color: ${({ theme }) => theme.palette.brandLight};
 `;
 
 const MetricTitle = styled.div<MetricProps>`
-  font-size: ${({ small }) => (small ? '1rem' : '1.25rem')};
+  font-size: ${({ small }) => (small ? '0.9rem' : '1rem')};
   color: ${({ theme }) => theme.palette.brand};
 `;
 
 const Metric = styled.div<MetricProps>`
-  width: 250px;
+  width: 200px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   border: ${({ small, theme }) => (small ? 'none' : `1px solid ${theme.palette.brand}}`)};
   border-radius: 0.75rem;
-  gap: 10px;
-  padding: 1rem 0;
+  padding: 0.75rem 0;
   background: ${({ theme }) => theme.palette.black};
 `;
 

diff --git a/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-metrics.ts b/apps/dapp/src/components/Pages/Core/DappPages/Dashboard/hooks/use-dashboardv2-metrics.ts
@@ -10,7 +10,7 @@ export enum StrategyKey {
   TLC = 'TlcStrategy',
   TEMPLEBASE = 'TempleBaseStrategy',
   DSRBASE = 'DsrBaseStrategy',
-  ALL = 'All'
+  ALL = 'All',
 }
 
 export enum TokenSymbols {
@@ -361,8 +361,6 @@ export default function useDashboardV2Metrics() {
             title: 'Treasury Price Index',
             value: `${formatPrice(metrics.treasuryPriceIndex)} DAI`,
           },
-        ],
-        [
           {
             title: 'Circulating Supply',
             value: `$${formatBigMoney(metrics.circulatingSupply)}`,
@@ -387,12 +385,12 @@ export default function useDashboardV2Metrics() {
             title: 'Nominal Equity',
             value: `$${formatBigMoney(metrics.nominalEquity)}`,
           },
+        ],
+        [
           {
             title: 'Nominal Performance',
             value: `${formatPercent(metrics.nominalPerformance)}%`,
           },
-        ],
-        [
           {
             title: 'Benchmarked Equity',
             value: `$${formatBigMoney(metrics.benchmarkedEquity)}`,
@@ -448,12 +446,11 @@ export default function useDashboardV2Metrics() {
             title: 'Debt Ceiling Utilization',
             value: `${formatPercent(metrics.debtCeilingUtilization)}%`,
           },
+        ],[
           {
             title: 'Total Repayment',
             value: `${formatBigMoney(metrics.totalRepayment)} DAI`,
           },
-        ],
-        [
           {
             title: 'Principal',
             value: `$${formatBigMoney(metrics.principal)}`,
@@ -462,6 +459,7 @@ export default function useDashboardV2Metrics() {
             title: 'Accrued dUSD Interest',
             value: `$${formatBigMoney(metrics.benchmarkedEquity)}`,
           },
+        ],[
           {
             title: 'Nominal Performance',
             value: `${formatPercent(metrics.nominalPerformance)}%`,
@@ -485,4 +483,4 @@ export default function useDashboardV2Metrics() {
     getArrangedTreasuryReservesVaultMetrics,
     getArrangedStrategyMetrics,
   };
-}
+}