improve styling, UX, and language

Jackie-HJ · Nov 18, 2023 · 659d955 · 659d955
1 parent 2066bf5
commit 659d955
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 9 deletions.
diff --git a/frontend-svelte/src/app.css b/frontend-svelte/src/app.css
@@ -16,7 +16,11 @@
 
   /* Couillard colors */
   --couillard-blue-color: rgb(16, 58, 113);
-  --couillard-orange-color: rgb(247, 147, 30);
+  --couillard-orange-color: #d85d15;
+  /* 
+  The above orange is from CSF's website, it is darker than the one they gave us and more useful for buttons
+  The one CSF gave us (the one in their logo) is rgb(247, 147, 30) 
+  */
 }
 
 /*

diff --git a/frontend-svelte/src/components/footer/Footer.svelte b/frontend-svelte/src/components/footer/Footer.svelte
@@ -8,7 +8,7 @@
     align-items: center;
     justify-content: center;
     background-color: var(--couillard-blue-color);
-    color: var(--couillard-orange-color);
+    color: white;
     padding: 15px;
     font-size: larger;
 }

diff --git a/frontend-svelte/src/components/graph/Graph.svelte b/frontend-svelte/src/components/graph/Graph.svelte
@@ -27,7 +27,7 @@
     const layout = {
       xaxis: {
         title: "Date",
-        //range: [new Date(new Date().getTime() - 15768000), new Date()]   - last 6 months, can use this once we have data with dates
+        range: [new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 6), new Date()] // last 6 months (roughly)
       },
       yaxis: {
         title: "Energy (kWh)",
@@ -123,11 +123,11 @@
   }
 
   #description select {
-    width: 50%; 
     padding: 10px; 
     font-size: 16px; 
     cursor: pointer; 
-    border: 1px solid #ccc; 
+    border: none;
     border-radius: 4px; 
+    background-color: var(--couillard-orange-color);
   }
 </style>
diff --git a/frontend-svelte/src/components/home/Home.svelte b/frontend-svelte/src/components/home/Home.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  import { totalData } from '../../stores';
+  import { totalData, selectedPanelStore } from '../../stores';
   import { TOTALS_DERIVATIONS, FORMATTING_LOCALE, CURRENCY } from '../../conversions';
 
   let totals = 0;
@@ -82,7 +82,7 @@
 </script>
 
 <div class="stats-row">
-    Solar panels have saved, to date:
+    Since we started tracking, {$selectedPanelStore ? `the ${$selectedPanelStore} array has` : "solar arrays in Deerfield have"} saved:
   <div class="row-arrange">
     {#each TOTALS_DERIVATIONS as [conv, unit, unitType, showDesc]}
       <div class="statistic">
@@ -97,6 +97,7 @@
       </div>
     {/each}
   </div>
+  <p class="tiny">*many of our arrays have been operational for much longer than the data reflects, so these numbers are <b>underestimates</b> by a large margin!</p>
 </div>
 
 <style>
@@ -110,8 +111,7 @@
 
 .stats-row {
   margin-top: 0px;
-  color: var(--couillard-orange-color);
-  font-weight: bold;
+  color: white;
   font-size: x-large;
   background-color: var(--couillard-blue-color);
   text-align: center;
@@ -132,11 +132,13 @@
   border: 10px white;
   color: white;
   padding: 0px;
+  font-weight: bold;
 }
 
 .large {
   font-size: 4rem;
   margin: 0%;
+  font-weight: bold;
 }
 
 .medium {
@@ -148,4 +150,10 @@
   font-size: 1rem;
   margin: 0%;
 }
+
+.tiny {
+  font-size: 0.7rem;
+  margin: 0%;
+}
+
 </style>