Update graph colours

client/src/components/weatherCharts/DailyChart/index.js

@@ -27,12 +27,11 @@ const createChartOptions = ({
     stacked: false,
     title: {
       display: true,
-      /*text: `5 Day ${
+      text: `5-Day ${
         altMode
-          ? `Wind Speed / Precipitation (${lengthUnit})`
-          : `Temp / Precipitation`
-      }`,*/
-      text: "Five-Day Forecast",
+          ? `Wind / Rain (${lengthUnit})`
+          : `Temperature / Rain (%)`
+      }`,
       fontColor: fontColor(darkMode),
       fontFamily: "Rubik, sans-serif",
     },
@@ -89,6 +88,7 @@ const chartColors = {
   blue: "rgba(63, 127, 191, 0.5)",
   gray: "rgba(127, 127, 127, 0.5)",
   orange: "rgba(226, 99, 71)",
+  white: "rgba(255, 255, 255)",
 };
 
 const mapChartData = ({
@@ -122,8 +122,8 @@ const mapChartData = ({
             : convertTemp(temperature, tempUnit);
         }),
         yAxisID: "y-axis-1",
-        borderColor: chartColors.orange,
-        backgroundColor: chartColors.orange,
+        borderColor: altMode ? chartColors.gray : chartColors.orange,
+        backgroundColor: altMode ? chartColors.gray : chartColors.orange,
         fill: false,
       },
       {

client/src/components/weatherCharts/HourlyChart/index.js

@@ -27,12 +27,11 @@ const chartOptions = ({
     stacked: false,
     title: {
       display: true,
-      /*text: `24 Hour ${
+      text: `24-Hour ${
         altMode
-          ? `Wind Speed / Precipitation (${lengthUnit})`
-          : `Temp / Precipitation`
-      }`,*/
-      text: "24-hour Forecast",
+          ? `Wind / Rain (${lengthUnit})`
+          : `Temperature / Rain (%)`
+      }`,
       fontColor: fontColor(darkMode),
       fontFamily: "Rubik, sans-serif",
     },
@@ -127,8 +126,8 @@ const mapChartData = ({
             : convertTemp(temperature, tempUnit);
         }),
         yAxisID: "y-axis-1",
-        borderColor: chartColors.orange,
-        backgroundColor: chartColors.orange,
+        borderColor: altMode ? chartColors.gray : chartColors.orange,
+        backgroundColor: altMode ? chartColors.gray : chartColors.orange,
         fill: false,
       },
       {