Fix styling to match landing page

Author: 0xAurelius

src/apps/treasury/assets/custom.css

@@ -23,7 +23,7 @@
   font-size: 40px;
   line-height: 54px;
   text-align: center;
-  color: #FFFFFF;
+  color: #000;
 }
 
 .card_metric{
@@ -33,7 +33,7 @@
   font-size: 26px;
   line-height: 54px;
   text-align: center;
-  color: #FFFFFF;
+  color: #000;
 }
 .vl {
   border-left: 1px solid #FFFFFF;
@@ -56,7 +56,7 @@
 body{
   font-family: 'Poppins', sans-serif;
   line-height:1.2;
-  background-color: #202020;
+  background-color: #FFF;
   background-size:auto;
   background-position:center;
 }
@@ -65,8 +65,5 @@ body{
   margin: auto;
   width: 100%;
 }
-.center_2{
-  margin: 140px
-}
 
 

src/apps/treasury/index.py

@@ -6,7 +6,7 @@
     "position": "relative",
     "margin-right": "0rem",
     "margin-left": "0rem",
-    "background-color": "#202020",
+    "background-color": "#FFF",
     "height": "100vh"
 }
 FOOTER_STYLE = {
@@ -16,13 +16,10 @@
     "right": 0,
     "height": "6rem",
     "padding": "1rem 1rem",
-    "background-color": "#202020",
+    "background-color": "#FFF",
 }
 
 app.layout = html.Div([
-    html.Div([
-        html.H1("KlimaDAO Treasury Dashboard")
-    ], className='center_2'),
     dash.page_container
 ])
 

src/apps/treasury/pages/hud.py

@@ -14,8 +14,7 @@
 
 ILLIQUID_ASSETS_GSHEET = 'https://docs.google.com/spreadsheets/d/1beNgV2Aemu01I-iyTsfOvHDTSevb0dj8GWXqo5KDShk'
 
-# TODO: update page title for browser header
-dash.register_page(__name__)
+dash.register_page(__name__, title="KlimaDAO Treasury Heads Up Display")
 
 # TODO: add caching
 
@@ -121,9 +120,19 @@
 # TODO: style colors based on KIP
 # TODO: style holdings as $xx.yy[m/k] (i.e. human-formatted like indicators)
 # TODO: visualize targets in some way
-# TODO: load from Google Sheet for maintenance
-green_ratio_fig = px.pie(green_ratio_df, values="value",
-                         names="bucket", hole=.3)
+# TODO: load targets from Google Sheet for ease of maintenance
+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'
+    }
+)
+
+# target_indicators =
 
 layout = dbc.Container([
     html.Div([
@@ -138,5 +147,5 @@
                 dcc.Graph(figure=green_ratio_fig)
             ], xs=12, sm=12, md=12, lg=6, xl=6),
         ]),
-    ], className='center_2'),
+    ], className='center'),
 ], id='page_content_hud', fluid=True)