diff --git a/frontend/src/SvgDayTemp.js b/frontend/src/SvgDayTemp.js
new file mode 100644
index 0000000000000000000000000000000000000000..3a7ddf169bbd1833a8466a426852fb051284bd97
--- /dev/null
+++ b/frontend/src/SvgDayTemp.js
@@ -0,0 +1,30 @@
+import * as React from "react";
+
+const SvgDayTemp = (props) => {
+ return(
+ <svg width="100%" height="100%" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" xmlSpace="preserve" style={{fillRule:"evenodd", clipRule:"evenodd", strokeLinecap:"round", strokeLinejoin:"round"}}>
+ <g transform="matrix(2.57801,0,0,2.57801,-68.0147,-453.02)">
+ <g transform="matrix(54.1785,0,0,54.1785,182.463,369.702)">
+ </g>
+ <text x="69.447px" y="369.702px" style={{fontFamily:"'Sanchez-Regular', 'Sanchez '", fontSize:"54.178px"}}>{props.dayTemp}<tspan x="136.141px " y="369.702px ">°</tspan>F</text>
+ </g>
+ <g transform="matrix(7.24492,0,0,7.24492,24.1626,-52.5182)">
+ <circle cx="32" cy="32" r="10.5" style={{fill:"url(#_Linear1)", stroke:"rgb(248,175,24)", strokeWidth:"0.5px"}}/>
+ </g>
+ <g transform="matrix(7.24492,0,0,7.24492,24.1626,-52.5182)">
+ <path d="M32,15.71L32,9.5M32,54.5L32,48.29M43.52,20.48L47.91,16.09M16.09,47.91L20.48,43.52M20.48,20.52L16.09,16.13M47.91,47.91L43.52,43.52M15.71,32L9.5,32M54.5,32L48.29,32" style={{fill:"none", fillRule:"nonzero", stroke:"rgb(251,191,36)", strokeWidth:"3px", strokeLinecap:"round"}}>
+ <animateTransform attributeName="transform" dur="45s" values="0 32 32; 360 32 32" repeatCount="indefinite" type="rotate"/>
+ </path>
+ </g>
+ <defs>
+ <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(10.5,18.18,-18.18,10.5,26.75,22.91)">
+ <stop offset="0" style={{stopColor:"rgb(251,191,36)", stopOpacity:1}}/>
+ <stop offset="0.45" style={{stopColor:"rgb(251,191,36)", stopOpacity:1}}/>
+ <stop offset="1" style={{stopColor:"rgb(245,158,11)", stopOpacity:1}}/>
+ </linearGradient>
+ </defs>
+ </svg>
+ );
+}
+
+export default SvgDayTemp;
\ No newline at end of file
diff --git a/frontend/src/forecastCollection.js b/frontend/src/forecastCollection.js
index 5ce2522340b52afb15637fbea0e5e4ee3b227dd4..0dd0d00ca5774332d7bbc3a6881c1d397f9924c7 100644
--- a/frontend/src/forecastCollection.js
+++ b/frontend/src/forecastCollection.js
@@ -1,7 +1,7 @@
import * as React from "react";
import { useState, useEffect} from 'react';
-import SvgNightTemp from './svgNightTemp';
-
+import SvgNightTemp from "./SvgNightTemp";
+import SvgDayTemp from "./SvgDayTemp";
const ForecastCollection = (props) => {
const [forecast, setForecast] = useState(null);
@@ -31,9 +31,9 @@ const ForecastCollection = (props) => {
<div className="forecast-days">
{forecast.list.map((day, index) => (
<div key={index} className="forecasted-day">
- <p>{new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}</p>
+ <p style={{fontFamily:"'Sans-Mateo-Medium', 'Sanchez '", fontSize:'1.5em'}}>{new Date(day.dt * 1000).toLocaleDateString('en-US', { weekday: 'long' })}</p>
<img src={`${process.env.PUBLIC_URL}/weatherIconsFill/${day.weather[0].icon}.svg`} alt="weather icon" />
- <p>{day.weather[0].main}</p>
+ <p style={{fontFamily:"'Sans-Mateo-Regular', 'Sanchez '", fontSize:'1.5em'}}>{day.weather[0].main}</p>
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-morning.svg`} alt="weather icon" />
<p>{day.temp.morn.toFixed(0)}°F</p> */}
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-afternoon.svg`} alt="weather icon" /> */}
@@ -42,7 +42,7 @@ const ForecastCollection = (props) => {
{/* <p>{day.temp.eve.toFixed(0)}°F</p> */}
{/* <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-night-2.svg`} alt="weather icon" />
<p>{day.temp.night.toFixed(0)}°F</p> */}
- <SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
+ <SvgDayTemp dayTemp={day.temp.day.toFixed(0)}/>
<SvgNightTemp nightTemp={day.temp.night.toFixed(0)}/>
</div>
diff --git a/frontend/src/svgNightTemp.js b/frontend/src/svgNightTemp.js
index efaf204b4783c99d4f23aa19c149df82f3f4512a..596566a2c6f7155b0e34aedbc380ca630fc7f222 100644
--- a/frontend/src/svgNightTemp.js
+++ b/frontend/src/svgNightTemp.js
@@ -10,16 +10,21 @@ const SvgNightTemp = (props) => {
</text>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
- <path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2"/>
+ <path d="M282.8,162.8L307.8,156.4C308.414,156.257 309.061,156.447 309.5,156.9L327.8,174.9C328.135,175.221 328.581,175.4 329.045,175.4C330.032,175.4 330.845,174.587 330.845,173.6C330.845,173.465 330.83,173.331 330.8,173.2L324.4,148.2C324.257,147.586 324.447,146.939 324.9,146.5L342.9,128.1C343.243,127.762 343.436,127.3 343.436,126.818C343.436,125.831 342.624,125.018 341.636,125.018C341.454,125.018 341.274,125.046 341.1,125.1L316.2,131.6C315.586,131.743 314.939,131.553 314.5,131.1L296.1,113.1C295.765,112.779 295.319,112.6 294.855,112.6C293.868,112.6 293.055,113.413 293.055,114.4C293.055,114.535 293.07,114.669 293.1,114.8L299.6,139.8C299.743,140.414 299.553,141.061 299.1,141.5L281.1,159.8C280.779,160.135 280.6,160.581 280.6,161.045C280.6,162.032 281.413,162.845 282.4,162.845C282.535,162.845 282.669,162.83 282.8,162.8Z" fill="url(#_Linear1)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2">
+ <animate attributeName="opacity" values="1; 0; 1" dur="3s" repeatCount="indefinite"/>
+ </path>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
- <path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2" />
+ <path d="M285.4,193.4L297.4,205.7C297.679,205.992 297.792,206.407 297.7,206.8L293.4,223.4C293.364,223.516 293.346,223.636 293.346,223.757C293.346,224.416 293.887,224.957 294.546,224.957C294.867,224.957 295.175,224.829 295.4,224.6L307.7,212.6C307.992,212.321 308.407,212.208 308.8,212.3L325.4,216.6C325.516,216.636 325.636,216.654 325.757,216.654C326.416,216.654 326.957,216.113 326.957,215.454C326.957,215.133 326.829,214.825 326.6,214.6L314.6,202.3C314.321,202.008 314.208,201.593 314.3,201.2L318.6,184.6C318.636,184.484 318.654,184.364 318.654,184.243C318.654,183.584 318.113,183.043 317.454,183.043C317.133,183.043 316.825,183.171 316.6,183.4L304.3,195.4C304.008,195.679 303.593,195.792 303.2,195.7L286.5,191.4C286.426,191.386 286.35,191.379 286.275,191.379C285.617,191.379 285.075,191.92 285.075,192.579C285.075,192.884 285.191,193.178 285.4,193.4Z" fill="url(#_Linear2)" fillRule="nonzero" stroke="rgb(252,211,77)" strokeWidth="2">
+ <animate attributeName="opacity" values="0; 1; 0" dur="4s" repeatCount="indefinite"/>
+ </path>
</g>
<g transform="matrix(1.54711,0,0,1.54711,-184.903,-159.875)">
<path
d="M337.3,223.7L362.1,230.7C362.713,230.845 363.207,231.301 363.4,231.9L370.3,256.7C370.551,257.422 371.236,257.908 372,257.908C372.764,257.908 373.449,257.422 373.7,256.7L380.7,231.9C380.845,231.287 381.301,230.793 381.9,230.6L406.7,223.7C407.422,223.449 407.908,222.764 407.908,222C407.908,221.236 407.422,220.551 406.7,220.3L381.9,213.3C381.287,213.155 380.793,212.699 380.6,212.1L373.7,187.3C373.449,186.578 372.764,186.092 372,186.092C371.236,186.092 370.551,186.578 370.3,187.3L363.3,212.1C363.155,212.713 362.699,213.207 362.1,213.4L337.3,220.3C336.578,220.551 336.092,221.236 336.092,222C336.092,222.764 336.578,223.449 337.3,223.7Z"
- style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}
- />
+ style={{ fill: 'url(#_Linear3)', fillRule: 'nonzero', stroke: 'rgb(252,211,77)', strokeWidth: '2px' }}>
+ <animate attributeName="opacity" values="1; 0; 1" dur="4s" repeatCount="indefinite"/>
+ </path>
</g>
<g id="e" transform="matrix(1.54711,0,0,1.54711,62.2641,56.3496)">
<path d="M179.7,120.2C127.659,120.475 84.583,77.94 84.2,25.9C84.212,17.9 85.254,9.934 87.3,2.2C39.423,7.175 2.55,47.866 2.3,96C2.683,148.04 45.759,190.575 97.8,190.3C142.3,190.3 179.6,160.3 190.2,119.7C186.713,120.087 183.208,120.287 179.7,120.3"
@@ -28,7 +33,9 @@ const SvgNightTemp = (props) => {
fillRule: "nonzero",
stroke: "rgb(114,185,213)",
strokeWidth: "4.5px",
- }} />
+ }} >
+ <animateTransform attributeName="transform" type="rotate" values="-5 32 32; 15 32 32; -5 32 32" dur="10s" repeatCount="indefinite"/>
+ </path>
</g>
<defs>
<linearGradient