More styling adjustments

KlimaDAO · Apr 3, 2024 · 4e0db01 · 4e0db01
1 parent a128d79
commit 4e0db01
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 31 deletions.
diff --git a/src/apps/treasury/assets/arrow.svg b/src/apps/treasury/assets/arrow.svg
diff --git a/src/apps/treasury/assets/custom.css b/src/apps/treasury/assets/custom.css
@@ -11,6 +11,14 @@
   font-family: 'Poppins-SemiBold';
   src: url('Poppins/Poppins-SemiBold.ttf') format('truetype');
 }
+@font-face {
+  font-family: 'Poppins-Bold';
+  src: url('Poppins/Poppins-Bold.ttf') format('truetype');
+}
+@font-face {
+  font-family: 'Poppins-ExtraBold';
+  src: url('Poppins/Poppins-ExtraBold.ttf') format('truetype');
+}
 /* Set the default font to Poppins regular*/
 *{
   font-family: 'Poppins', sans-serif;
@@ -67,4 +75,14 @@ body{
 
 .btn {
   background-color: #00cc33;
+  border: 0px;
+  border-radius: 500px;
+  color: #000;
+  padding-left: 50px;
+  padding-right: 50px;
+  font-family: 'Poppins-SemiBold';
+}
+
+a {
+  color: #00cc33;
 }
diff --git a/src/apps/treasury/pages/hud.py b/src/apps/treasury/pages/hud.py
@@ -8,7 +8,7 @@
 import plotly.graph_objects as go
 import plotly.express as px
 
-from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT
+from src.apps.treasury.util.constants import BCT_ERC20_CONTRACT, KLIMA_GREEN
 from src.apps.treasury.data.protocol_metrics import \
     sg, last_metric, get_last_asset_price_by_address
 
@@ -26,14 +26,16 @@
     go.Indicator(
         mode="number",
         value=sg.query([last_metric.marketCap]),
-        number={"prefix": "$", "valueformat": ".2s"},
+        number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
         title={
             "text":
-            ("KLIMA <a title='KLIMA supply multiplied by current price' href="
+            ("KLIMA<br><b><a title='KLIMA supply multiplied by current price' href="
              "'https://www.coinbase.com/learn/crypto-basics/what-is-market-cap'>"
-             "Market Cap</a>")
+             "Market Cap</a></b>"),
+            'align': 'left',
+            "font": {"family": "Poppins-Bold", 'size': 30}
         },
-        domain={'y': [0, 0.5], 'x': [0.25, 0.75]},
+        domain={'y': [0, 0.35], 'x': [0.25, 0.75]},
     )
 )
 
@@ -42,12 +44,14 @@
     go.Indicator(
         mode="number",
         value=sg.query([last_metric.treasuryMarketValue]),
-        number={"prefix": "$", "valueformat": ".2s"},
+        number={"prefix": "$", "valueformat": ".2s", "font": {"family": "Poppins-ExtraBold"}},
         title={
             "text":
-            "Treasury <a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a>"
+            "Treasury<br><b><a href='https://en.wikipedia.org/wiki/Market_value'>Market Value</a></b>",
+            'align': 'left',
+            "font": {"family": "Poppins-Bold", 'size': 30}
         },
-        domain={'y': [0.5, 1], 'x': [0.25, 0.75]},
+        domain={'y': [0.65, 1], 'x': [0.25, 0.75]},
     )
 )
 
@@ -131,49 +135,50 @@
 
 
 # TODO: style holdings as $xx.yy[m/k] (i.e. human-formatted like indicators)
-# TODO: visualize targets in some way
+# TODO: visualize targets in a better way on single chart
 # TODO: load targets from Google Sheet for ease of maintenance
+color_map = {
+    'Op Ex': '#f2ae00',
+    'Carbon Forwards': '#6fff93',
+    'Carbon Backing': KLIMA_GREEN,
+    'Treasury Holdings': '#ddf641'
+}
+
 green_ratio_fig = px.pie(
     green_ratio_df, values="value",
     names="bucket", hole=.3, color="bucket",
-    color_discrete_map={
-        'Op Ex': '#f2ae00',
-        'Carbon Forwards': '#6fff93',
-        'Carbon Backing': '#00cc33',
-        'Treasury Holdings': '#ddf641'
-    },
+    color_discrete_map=color_map,
     category_orders={'bucket': order},
-    title="Green Ratio: Current",
+    title="Green Ratio:<br><b>Current</b>",
 )
 green_ratio_fig.update_layout(
-    title_x=0.5,
+    title_x=0.1,
+    title_font_size=30,
+    title_font_family='Poppins-Bold',
     legend=dict(
         yanchor='bottom',
-        y=-.5,
+        y=0,
         xanchor='auto',
-        x=.5
+        x=1.25
     )
 )
 
 green_ratio_target_fig = px.pie(
     green_ratio_df, values="target",
     names="bucket", hole=.3, color="bucket",
-    color_discrete_map={
-        'Op Ex': '#f2ae00',
-        'Carbon Forwards': '#6fff93',
-        'Carbon Backing': '#00cc33',
-        'Treasury Holdings': '#ddf641'
-    },
+    color_discrete_map=color_map,
     category_orders={'bucket': order},
-    title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio: Target</a>",
+    title="<a href='https://forum.klimadao.finance/d/285-rfc-green-ratio'>Green Ratio:<br><b>Target</b></a>",
 )
 green_ratio_target_fig.update_layout(
-    title_x=0.5,
+    title_x=0.1,
+    title_font_size=30,
+    title_font_family='Poppins-Bold',
     legend=dict(
         yanchor='bottom',
-        y=-.5,
+        y=0,
         xanchor='auto',
-        x=.5
+        x=1.25
     )
 )
 
@@ -193,11 +198,12 @@
         dbc.Row([
             dbc.Col([
                 dbc.Button(
-                    'Learn more',
+                    ['LEARN MORE   ', html.Img(src='./assets/arrow.svg')],
                     size='lg',
                     href='https://dune.com/klimadao/klima'
                 )
             ], xs=12, sm=12, md=12, lg=12, xl=12)
         ])
     ], className='center')
-], id='page_content_hud', fluid=True)
+], id='page_content_hud', fluid=True,
+style={'border': f'4px solid {KLIMA_GREEN}', 'border-radius': '30px', 'padding': '20px'})
diff --git a/src/apps/treasury/util/constants.py b/src/apps/treasury/util/constants.py
@@ -13,3 +13,6 @@
 BCT_USDC_PAIR = '0x1E67124681b402064CD0ABE8ed1B5c79D2e02f64'
 KLIMA_MCO2_PAIR = '0x64a3b8ca5a7e406a78e660ae10c7563d9153a739'
 KLIMA_USDC_PAIR = '0x5786b267d35f9d011c4750e0b0ba584e1fdbead1'
+
+# Colors
+KLIMA_GREEN = '#00cc33'