Improved dashboard UI

populationgenomics · Sep 7, 2023 · ea43979 · ea43979
1 parent b1e03c9
commit ea43979
Show file tree

Hide file tree

Showing 2 changed files with 1,282 additions and 104 deletions.
diff --git a/web/src/pages/billing/BillingDashboard.tsx b/web/src/pages/billing/BillingDashboard.tsx
@@ -7,8 +7,38 @@ const BillingDashboard: React.FunctionComponent = () => {
     const [end, setEnd] = React.useState<string>('2022-10-31')
 
     return (
-        <Card fluid>
-            <h3>Billing dashboard</h3>
+        <Card fluid style={{ backgroundColor: '#EFECEA' }}>
+            <div
+                style={{
+                    backgroundColor: '#F5F3F2',
+                    marginTop: 20,
+                    paddingTop: 20,
+                    marginBottom: 20,
+                }}
+            >
+                <div
+                    style={{
+                        fontSize: 50,
+                        marginLeft: 20,
+                        color: '#635F5D',
+                    }}
+                >
+                    Billing Dashboard
+                </div>
+                <br />
+                <div
+                    style={{
+                        fontSize: 24,
+                        marginBottom: 10,
+                        marginLeft: 20,
+                        marginTop: 5,
+                        color: '#8E8883',
+                        fontStyle: 'italic',
+                    }}
+                >
+                    Breakdown of proportional allocation of costs per project over time
+                </div>
+            </div>
             <SeqrProportionalMapGraph start={start} end={end} />
         </Card>
     )