Improve Explanation dialog design (#55)

Flaburgan · Oct 29, 2024 · 43da2d4 · 43da2d4
1 parent 85568e6
commit 43da2d4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 8 deletions.
diff --git a/components/chart-bar.tsx b/components/chart-bar.tsx
@@ -10,14 +10,17 @@ interface ChartBarProps {
 export default function ChartBar(props: ChartBarProps) {
   const {value, total} = props;
   let percent = value * 100 / total;
-  let color = "red";
+  let color = red;
   if (value < 0) {
     percent = -percent;
-    color = "green";
+    color = green;
   }
 
   return (<div className={styles.chartBar}>
     <span className={styles.bar} style={{width: percent + "%", backgroundColor: color}}></span>
     <span className={styles.co2}>{displayCO2(value)}</span>
   </div>);
-}
+}
+
+export const red = "#ce2550";
+export const green = "#25CFA4";
diff --git a/components/explanation-dialog.tsx b/components/explanation-dialog.tsx
@@ -8,7 +8,7 @@ import { FootprintDetails } from "../types/AdemeECV";
 import { useLingui } from "@lingui/react";
 import { getFootprintDetails } from "../lib/ademe-api";
 import { Locale } from "../types/i18n";
-import ChartBar from "./chart-bar";
+import ChartBar, { green, red } from "./chart-bar";
 
 interface ExplanationDialogProps {
   item: Item;
@@ -43,7 +43,9 @@ export default function ExplanationDialog(props: ExplanationDialogProps) {
         </main>
         <footer>
           <h3><Trans>Total:</Trans></h3>
-          <p><strong>{total} kg CO<sub>2</sub>e</strong></p>
+          <div>
+            <strong style={{backgroundColor: total > 0 ? red : green}}>{total} kg CO<sub>2</sub>e</strong>
+          </div>
         </footer>
       </div>
     </div>

diff --git a/styles/chart-bar.module.scss b/styles/chart-bar.module.scss
@@ -6,6 +6,8 @@
     display: inline-block;
     height: 1rem;
     margin-right: 5px;
+    border-radius: 3px;
+    border: solid 2px #333;
   }
 
   .co2 {

diff --git a/styles/explanation-dialog.module.scss b/styles/explanation-dialog.module.scss
@@ -23,18 +23,27 @@
   border-radius: $box-border-radius;
 
   header,
-  main {
+  main,
+  footer {
     padding: 1rem;
   }
 
+  main {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  h2 {
+    font-size: 1.6rem;
+  }
+
   h2,
   h3 {
     margin: 0;
   }
   h3 {
-    margin-bottom: 5px;
+    margin-bottom: .5rem;
   }
-
   ul {
     margin: 0;
     padding: 0;
@@ -46,5 +55,17 @@
 
   footer {
     text-align: center;
+
+    h3 {
+      font-size: 1.4rem;
+      margin-bottom: 1rem;
+    }
+
+    strong {
+      font-size: 1.6rem;
+      padding: .4rem .8rem;
+      border: solid #333 2px;
+      border-radius: 3px;
+    }
   }
 }