diff --git a/frontend/public/weatherIcons/01d.svg b/frontend/public/weatherIcons/01d.svg
deleted file mode 100644
index 5bd98463dac0c7c04a7c35711adc1b4ca870e14d..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/01d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M42.5 32A10.5 10.5 0 1132 21.5 10.5 10.5 0 0142.5 32zM32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21"/><animateTransform attributeName="transform" dur="45s" from="0 32 32" repeatCount="indefinite" to="360 32 32" type="rotate"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/01n.svg b/frontend/public/weatherIcons/01n.svg
deleted file mode 100644
index 529e18ae0fdbb92ccf7631949118d6af24c49691..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/01n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M46.66 36.2a16.66 16.66 0 01-16.78-16.55 16.29 16.29 0 01.55-4.15A16.56 16.56 0 1048.5 36.1c-.61.06-1.22.1-1.84.1z"/><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-5 32 32;15 32 32;-5 32 32"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/02d.svg b/frontend/public/weatherIcons/02d.svg
deleted file mode 100644
index dd40d02a9df6f58faaac4767563a8fdc087ebf7a..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/02d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"/><animateTransform attributeName="transform" dur="45s" from="0 19 24" repeatCount="indefinite" to="360 19 24" type="rotate"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/02n.svg b/frontend/public/weatherIcons/02n.svg
deleted file mode 100644
index bdbe5f741338071ce2f1215357c393f066f7f400..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/02n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M29.33 26.68a10.61 10.61 0 01-10.68-10.54A10.5 10.5 0 0119 13.5a10.54 10.54 0 1011.5 13.11 11.48 11.48 0 01-1.17.07z"/><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-10 19.22 24.293;10 19.22 24.293;-10 19.22 24.293"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/03d.svg b/frontend/public/weatherIcons/03d.svg
deleted file mode 100644
index 41c1848a54cac87143c49030150ffe9157d7b8d2..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/03d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/03n.svg b/frontend/public/weatherIcons/03n.svg
deleted file mode 100644
index 41c1848a54cac87143c49030150ffe9157d7b8d2..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/03n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/04d.svg b/frontend/public/weatherIcons/04d.svg
deleted file mode 100644
index 41c1848a54cac87143c49030150ffe9157d7b8d2..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/04d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/04n.svg b/frontend/public/weatherIcons/04n.svg
deleted file mode 100644
index 41c1848a54cac87143c49030150ffe9157d7b8d2..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/04n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linejoin="round" stroke-width="3" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/09d.svg b/frontend/public/weatherIcons/09d.svg
deleted file mode 100644
index f674ec91ba096096b14e95e25a6002f3b3a3849e..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/09d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/09n.svg b/frontend/public/weatherIcons/09n.svg
deleted file mode 100644
index f674ec91ba096096b14e95e25a6002f3b3a3849e..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/09n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/10d.svg b/frontend/public/weatherIcons/10d.svg
deleted file mode 100644
index 7d3dfa83c21c6882e8bf57a9efccec3aeb460f52..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/10d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"/><animateTransform attributeName="transform" dur="45s" from="0 19 24" repeatCount="indefinite" to="360 19 24" type="rotate"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/10n.svg b/frontend/public/weatherIcons/10n.svg
deleted file mode 100644
index 2e31ac3c1216d2594337cce6c8e8052d02c3783b..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/10n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M29.33 26.68a10.61 10.61 0 01-10.68-10.54A10.5 10.5 0 0119 13.5a10.54 10.54 0 1011.5 13.11 11.48 11.48 0 01-1.17.07z"/><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-10 19.22 24.293;10 19.22 24.293;-10 19.22 24.293"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g><g><path fill="none" stroke="#2885c7" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"/><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/11d.svg b/frontend/public/weatherIcons/11d.svg
deleted file mode 100644
index ce9b1f924cad8c7c0bfd8f6e34d1e56619a8bb8d..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/11d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="#f59e0b" d="M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z"/><animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/11n.svg b/frontend/public/weatherIcons/11n.svg
deleted file mode 100644
index ce9b1f924cad8c7c0bfd8f6e34d1e56619a8bb8d..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/11n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><path fill="#f59e0b" d="M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z"/><animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1;1;1;1;1;1;0.1;1;0.1;1;1;0.1;1;0.1;1"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/13d.svg b/frontend/public/weatherIcons/13d.svg
deleted file mode 100644
index 7a352c426cc58dfc5fe8247b3431f85443b11048..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/13d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"/><animateTransform attributeName="transform" dur="45s" from="0 19 24" repeatCount="indefinite" to="360 19 24" type="rotate"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><circle cx="31" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" dur="4s" repeatCount="indefinite" type="translate" values="-1 -6; 1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 31 45; 360 31 45"/><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="24" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-2s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 24 45; 360 24 45"/><animate attributeName="opacity" begin="-2s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="38" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-1s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 38 45; 360 38 45"/><animate attributeName="opacity" begin="-1s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/13n.svg b/frontend/public/weatherIcons/13n.svg
deleted file mode 100644
index 7a352c426cc58dfc5fe8247b3431f85443b11048..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/13n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><clipPath id="a"><path fill="none" d="M12 35l-5.28-4.21-2-6 1-7 4-5 5-3h6l5 1 3 3L33 20l-6 4h-6l-3 3v4l-4 2-2 2z"/></clipPath></defs><g clip-path="url(#a)"><g><path fill="none" stroke="#f59e0b" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M23.5 24a4.5 4.5 0 11-4.5-4.5 4.49 4.49 0 014.5 4.5zM19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"/><animateTransform attributeName="transform" dur="45s" from="0 19 24" repeatCount="indefinite" to="360 19 24" type="rotate"/></g></g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M43.67 45.5h2.83a7 7 0 000-14h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0"/><g><circle cx="31" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" dur="4s" repeatCount="indefinite" type="translate" values="-1 -6; 1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 31 45; 360 31 45"/><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="24" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-2s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 24 45; 360 24 45"/><animate attributeName="opacity" begin="-2s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="38" cy="45" r="1.25" fill="none" stroke="#72b8d4" stroke-miterlimit="10"/><path fill="none" stroke="#72b8d4" stroke-linecap="round" stroke-miterlimit="10" d="M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-1s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 38 45; 360 38 45"/><animate attributeName="opacity" begin="-1s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/50d.svg b/frontend/public/weatherIcons/50d.svg
deleted file mode 100644
index 47377b984d5b06c5fcbeb7c365d70e8759a5eccb..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/50d.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 32h30"/><animateTransform attributeName="transform" begin="0s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></g><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 39h30"/><animateTransform attributeName="transform" begin="-2s" dur="5s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 25h30"/><animateTransform attributeName="transform" begin="-4s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIcons/50n.svg b/frontend/public/weatherIcons/50n.svg
deleted file mode 100644
index 47377b984d5b06c5fcbeb7c365d70e8759a5eccb..0000000000000000000000000000000000000000
--- a/frontend/public/weatherIcons/50n.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 32h30"/><animateTransform attributeName="transform" begin="0s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></g><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 39h30"/><animateTransform attributeName="transform" begin="-2s" dur="5s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></g><g><path fill="none" stroke="#e5e7eb" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 25h30"/><animateTransform attributeName="transform" begin="-4s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/01d.svg b/frontend/public/weatherIconsFill/01d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..7f4af1f798f612cf5172ff14d8870bff68ea255b
--- /dev/null
+++ b/frontend/public/weatherIconsFill/01d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="26.75" x2="37.25" y1="22.91" y2="41.09" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".45" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><circle cx="32" cy="32" r="10.5" fill="url(#a)" stroke="#f8af18" stroke-miterlimit="10" stroke-width=".5"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M32 15.71V9.5m0 45v-6.21m11.52-27.81l4.39-4.39M16.09 47.91l4.39-4.39m0-23l-4.39-4.39m31.82 31.78l-4.39-4.39M15.71 32H9.5m45 0h-6.21"><animateTransform attributeName="transform" dur="45s" repeatCount="indefinite" type="rotate" values="0 32 32; 360 32 32"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/01n.svg b/frontend/public/weatherIconsFill/01n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b53c32976b8d43f52f3728d4f79a4824946180b5
--- /dev/null
+++ b/frontend/public/weatherIconsFill/01n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="21.92" x2="38.52" y1="18.75" y2="47.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".45" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/><animateTransform attributeName="gradientTransform" dur="10s" repeatCount="indefinite" type="rotate" values="5 32 32; -15 32 32; 5 32 32"/></linearGradient></defs><path fill="url(#a)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" d="M46.66 36.2a16.66 16.66 0 01-16.78-16.55 16.29 16.29 0 01.55-4.15A16.56 16.56 0 1048.5 36.1c-.61.06-1.22.1-1.84.1z"><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-5 32 32; 15 32 32; -5 32 32"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/02d.svg b/frontend/public/weatherIconsFill/02d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5c4540f6b3c373353ac5aa13ce7b9052e0086586
--- /dev/null
+++ b/frontend/public/weatherIconsFill/02d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="16.5" x2="21.5" y1="19.67" y2="28.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".45" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><linearGradient id="b" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><circle cx="19" cy="24" r="5" fill="url(#a)" stroke="#f8af18" stroke-miterlimit="10" stroke-width=".5"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"><animateTransform attributeName="transform" dur="45s" repeatCount="indefinite" type="rotate" values="0 19 24; 360 19 24"/></path><path fill="url(#b)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/02n.svg b/frontend/public/weatherIconsFill/02n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..69f911b5b3ad7df99f5ea2ca521b6da76742075d
--- /dev/null
+++ b/frontend/public/weatherIconsFill/02n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="13.58" x2="24.15" y1="15.57" y2="33.87" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".45" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/><animateTransform attributeName="gradientTransform" dur="10s" repeatCount="indefinite" type="rotate" values="10 19.22 24.293; -10 19.22 24.293; 10 19.22 24.293"/></linearGradient><linearGradient id="b" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><path fill="url(#a)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" d="M29.33 26.68a10.61 10.61 0 01-10.68-10.54A10.5 10.5 0 0119 13.5a10.54 10.54 0 1011.5 13.11 11.48 11.48 0 01-1.17.07z"><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-10 19.22 24.293; 10 19.22 24.293; -10 19.22 24.293"/></path><path fill="url(#b)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/03d.svg b/frontend/public/weatherIconsFill/03d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..42a00a2a5c66170907afcff1037e49e40cd88d14
--- /dev/null
+++ b/frontend/public/weatherIconsFill/03d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/03n.svg b/frontend/public/weatherIconsFill/03n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..42a00a2a5c66170907afcff1037e49e40cd88d14
--- /dev/null
+++ b/frontend/public/weatherIconsFill/03n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/04d.svg b/frontend/public/weatherIconsFill/04d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..42a00a2a5c66170907afcff1037e49e40cd88d14
--- /dev/null
+++ b/frontend/public/weatherIconsFill/04d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/04n.svg b/frontend/public/weatherIconsFill/04n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..42a00a2a5c66170907afcff1037e49e40cd88d14
--- /dev/null
+++ b/frontend/public/weatherIconsFill/04n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"><animateTransform attributeName="transform" dur="7s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/09d.svg b/frontend/public/weatherIconsFill/09d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..982d0c3ec88c27bc66ffb4185f58ddd45ea40b10
--- /dev/null
+++ b/frontend/public/weatherIconsFill/09d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="22.53" x2="25.47" y1="42.95" y2="48.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4286ee"/><stop offset=".45" stop-color="#4286ee"/><stop offset="1" stop-color="#0950bc"/></linearGradient><linearGradient id="c" x1="29.53" x2="32.47" y1="42.95" y2="48.05" xlink:href="#a"/><linearGradient id="d" x1="36.53" x2="39.47" y1="42.95" y2="48.05" xlink:href="#a"/></defs><path fill="url(#b)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#c)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/09n.svg b/frontend/public/weatherIconsFill/09n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..982d0c3ec88c27bc66ffb4185f58ddd45ea40b10
--- /dev/null
+++ b/frontend/public/weatherIconsFill/09n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="22.53" x2="25.47" y1="42.95" y2="48.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4286ee"/><stop offset=".45" stop-color="#4286ee"/><stop offset="1" stop-color="#0950bc"/></linearGradient><linearGradient id="c" x1="29.53" x2="32.47" y1="42.95" y2="48.05" xlink:href="#a"/><linearGradient id="d" x1="36.53" x2="39.47" y1="42.95" y2="48.05" xlink:href="#a"/></defs><path fill="url(#b)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#c)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/10d.svg b/frontend/public/weatherIconsFill/10d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..15bbdeac3803ddd045b59f6f8a033f5a40b25107
--- /dev/null
+++ b/frontend/public/weatherIconsFill/10d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="16.5" x2="21.5" y1="19.67" y2="28.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".45" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><linearGradient id="c" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="22.53" x2="25.47" y1="42.95" y2="48.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4286ee"/><stop offset=".45" stop-color="#4286ee"/><stop offset="1" stop-color="#0950bc"/></linearGradient><linearGradient id="d" x1="29.53" x2="32.47" y1="42.95" y2="48.05" xlink:href="#a"/><linearGradient id="e" x1="36.53" x2="39.47" y1="42.95" y2="48.05" xlink:href="#a"/></defs><circle cx="19" cy="24" r="5" fill="url(#b)" stroke="#f8af18" stroke-miterlimit="10" stroke-width=".5"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"><animateTransform attributeName="transform" dur="45s" repeatCount="indefinite" type="rotate" values="0 19 24; 360 19 24"/></path><path fill="url(#c)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#e)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/10n.svg b/frontend/public/weatherIconsFill/10n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4baa8d2be1870f4497f9dfc17c4757832b0214af
--- /dev/null
+++ b/frontend/public/weatherIconsFill/10n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="13.58" x2="24.15" y1="15.57" y2="33.87" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".45" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/><animateTransform attributeName="gradientTransform" dur="10s" repeatCount="indefinite" type="rotate" values="10 19.22 24.293; -10 19.22 24.293; 10 19.22 24.293"/></linearGradient><linearGradient id="c" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="22.53" x2="25.47" y1="42.95" y2="48.05" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#4286ee"/><stop offset=".45" stop-color="#4286ee"/><stop offset="1" stop-color="#0950bc"/></linearGradient><linearGradient id="d" x1="29.53" x2="32.47" y1="42.95" y2="48.05" xlink:href="#a"/><linearGradient id="e" x1="36.53" x2="39.47" y1="42.95" y2="48.05" xlink:href="#a"/></defs><path fill="url(#b)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".5" d="M29.33 26.68a10.61 10.61 0 01-10.68-10.54A10.5 10.5 0 0119 13.5a10.54 10.54 0 1011.5 13.11 11.48 11.48 0 01-1.17.07z"><animateTransform attributeName="transform" dur="10s" repeatCount="indefinite" type="rotate" values="-10 19.22 24.293; 10 19.22 24.293; -10 19.22 24.293"/></path><path fill="url(#c)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M24.39 43.03l-.78 4.94"><animateTransform attributeName="transform" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M31.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.4s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.4s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path><path fill="none" stroke="url(#e)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M38.39 43.03l-.78 4.94"><animateTransform attributeName="transform" begin="-0.2s" dur="0.7s" repeatCount="indefinite" type="translate" values="1 -5; -2 10"/><animate attributeName="opacity" begin="-0.2s" dur="0.7s" repeatCount="indefinite" values="0;1;1;0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/11d.svg b/frontend/public/weatherIconsFill/11d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aeef9456734015b48240c7d4838d2a5b8e79a6aa
--- /dev/null
+++ b/frontend/public/weatherIconsFill/11d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="b" x1="26.74" x2="35.76" y1="37.88" y2="53.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7b23b"/><stop offset=".45" stop-color="#f7b23b"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="url(#b)" stroke="#f6a823" stroke-miterlimit="10" stroke-width=".5" d="M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z"><animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1; 1; 1; 1; 1; 1; 0.1; 1; 0.1; 1; 1; 0.1; 1; 0.1; 1"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/11n.svg b/frontend/public/weatherIconsFill/11n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aeef9456734015b48240c7d4838d2a5b8e79a6aa
--- /dev/null
+++ b/frontend/public/weatherIconsFill/11n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="b" x1="26.74" x2="35.76" y1="37.88" y2="53.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f7b23b"/><stop offset=".45" stop-color="#f7b23b"/><stop offset="1" stop-color="#f59e0b"/></linearGradient></defs><path fill="url(#a)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><path fill="url(#b)" stroke="#f6a823" stroke-miterlimit="10" stroke-width=".5" d="M30 36l-4 12h4l-2 10 10-14h-6l4-8h-6z"><animate attributeName="opacity" dur="2s" repeatCount="indefinite" values="1; 1; 1; 1; 1; 1; 0.1; 1; 0.1; 1; 1; 0.1; 1; 0.1; 1"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/13d.svg b/frontend/public/weatherIconsFill/13d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..de9f4fc520faf5c76110b0072a148890020c80dc
--- /dev/null
+++ b/frontend/public/weatherIconsFill/13d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="16.5" x2="21.5" y1="19.67" y2="28.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".45" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><linearGradient id="c" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="30.12" x2="31.88" y1="43.48" y2="46.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".45" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/></linearGradient><linearGradient id="d" x1="29.67" x2="32.33" y1="42.69" y2="47.31" xlink:href="#a"/><linearGradient id="e" x1="23.12" x2="24.88" y1="43.48" y2="46.52" xlink:href="#a"/><linearGradient id="f" x1="22.67" x2="25.33" y1="42.69" y2="47.31" xlink:href="#a"/><linearGradient id="g" x1="37.12" x2="38.88" y1="43.48" y2="46.52" xlink:href="#a"/><linearGradient id="h" x1="36.67" x2="39.33" y1="42.69" y2="47.31" xlink:href="#a"/></defs><circle cx="19" cy="24" r="5" fill="url(#b)" stroke="#f8af18" stroke-miterlimit="10" stroke-width=".5"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"><animateTransform attributeName="transform" dur="45s" repeatCount="indefinite" type="rotate" values="0 19 24; 360 19 24"/></path><path fill="url(#c)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><g><circle cx="31" cy="45" r="1.25" fill="none" stroke="url(#a)" stroke-miterlimit="10"/><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" d="M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" dur="4s" repeatCount="indefinite" type="translate" values="-1 -6; 1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 31 45; 360 31 45"/><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="24" cy="45" r="1.25" fill="none" stroke="url(#e)" stroke-miterlimit="10"/><path fill="none" stroke="url(#f)" stroke-linecap="round" stroke-miterlimit="10" d="M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-2s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 24 45; 360 24 45"/><animate attributeName="opacity" begin="-2s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="38" cy="45" r="1.25" fill="none" stroke="url(#g)" stroke-miterlimit="10"/><path fill="none" stroke="url(#h)" stroke-linecap="round" stroke-miterlimit="10" d="M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-1s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 38 45; 360 38 45"/><animate attributeName="opacity" begin="-1s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/13n.svg b/frontend/public/weatherIconsFill/13n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..de9f4fc520faf5c76110b0072a148890020c80dc
--- /dev/null
+++ b/frontend/public/weatherIconsFill/13n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="b" x1="16.5" x2="21.5" y1="19.67" y2="28.33" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".45" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><linearGradient id="c" x1="22.56" x2="39.2" y1="21.96" y2="50.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".45" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="a" x1="30.12" x2="31.88" y1="43.48" y2="46.52" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".45" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/></linearGradient><linearGradient id="d" x1="29.67" x2="32.33" y1="42.69" y2="47.31" xlink:href="#a"/><linearGradient id="e" x1="23.12" x2="24.88" y1="43.48" y2="46.52" xlink:href="#a"/><linearGradient id="f" x1="22.67" x2="25.33" y1="42.69" y2="47.31" xlink:href="#a"/><linearGradient id="g" x1="37.12" x2="38.88" y1="43.48" y2="46.52" xlink:href="#a"/><linearGradient id="h" x1="36.67" x2="39.33" y1="42.69" y2="47.31" xlink:href="#a"/></defs><circle cx="19" cy="24" r="5" fill="url(#b)" stroke="#f8af18" stroke-miterlimit="10" stroke-width=".5"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M19 15.67V12.5m0 23v-3.17m5.89-14.22l2.24-2.24M10.87 32.13l2.24-2.24m0-11.78l-2.24-2.24m16.26 16.26l-2.24-2.24M7.5 24h3.17m19.83 0h-3.17"><animateTransform attributeName="transform" dur="45s" repeatCount="indefinite" type="rotate" values="0 19 24; 360 19 24"/></path><path fill="url(#c)" stroke="#e6effc" stroke-miterlimit="10" stroke-width=".5" d="M46.5 31.5h-.32a10.49 10.49 0 00-19.11-8 7 7 0 00-10.57 6 7.21 7.21 0 00.1 1.14A7.5 7.5 0 0018 45.5a4.19 4.19 0 00.5 0v0h28a7 7 0 000-14z"/><g><circle cx="31" cy="45" r="1.25" fill="none" stroke="url(#a)" stroke-miterlimit="10"/><path fill="none" stroke="url(#d)" stroke-linecap="round" stroke-miterlimit="10" d="M33.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M31 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" dur="4s" repeatCount="indefinite" type="translate" values="-1 -6; 1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 31 45; 360 31 45"/><animate attributeName="opacity" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="24" cy="45" r="1.25" fill="none" stroke="url(#e)" stroke-miterlimit="10"/><path fill="none" stroke="url(#f)" stroke-linecap="round" stroke-miterlimit="10" d="M26.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M24 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-2s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 24 45; 360 24 45"/><animate attributeName="opacity" begin="-2s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g><g><circle cx="38" cy="45" r="1.25" fill="none" stroke="url(#g)" stroke-miterlimit="10"/><path fill="none" stroke="url(#h)" stroke-linecap="round" stroke-miterlimit="10" d="M40.17 46.25l-1.09-.63m-2.16-1.24l-1.09-.63M38 42.5v1.25m0 3.75v-1.25m-1.08-.63l-1.09.63m4.34-2.5l-1.09.63"/><animateTransform additive="sum" attributeName="transform" begin="-1s" dur="4s" repeatCount="indefinite" type="translate" values="1 -6; -1 12"/><animateTransform additive="sum" attributeName="transform" dur="9s" repeatCount="indefinite" type="rotate" values="0 38 45; 360 38 45"/><animate attributeName="opacity" begin="-1s" dur="4s" repeatCount="indefinite" values="0;1;1;1;0"/></g></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/50d.svg b/frontend/public/weatherIconsFill/50d.svg
new file mode 100644
index 0000000000000000000000000000000000000000..420400eec2558fee595297ec0017e0d3232a7029
--- /dev/null
+++ b/frontend/public/weatherIconsFill/50d.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="27.5" x2="36.5" y1="17.21" y2="32.79" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".45" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><linearGradient id="b" y1="24.21" y2="39.79" xlink:href="#a"/><linearGradient id="c" y1="31.21" y2="46.79" xlink:href="#a"/></defs><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 25h30"><animateTransform attributeName="transform" begin="0s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></path><path fill="none" stroke="url(#b)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 32h30"><animateTransform attributeName="transform" begin="-2s" dur="5s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path><path fill="none" stroke="url(#c)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 39h30"><animateTransform attributeName="transform" begin="-4s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/50n.svg b/frontend/public/weatherIconsFill/50n.svg
new file mode 100644
index 0000000000000000000000000000000000000000..420400eec2558fee595297ec0017e0d3232a7029
--- /dev/null
+++ b/frontend/public/weatherIconsFill/50n.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64"><defs><linearGradient id="a" x1="27.5" x2="36.5" y1="17.21" y2="32.79" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d4d7dd"/><stop offset=".45" stop-color="#d4d7dd"/><stop offset="1" stop-color="#bec1c6"/></linearGradient><linearGradient id="b" y1="24.21" y2="39.79" xlink:href="#a"/><linearGradient id="c" y1="31.21" y2="46.79" xlink:href="#a"/></defs><path fill="none" stroke="url(#a)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 25h30"><animateTransform attributeName="transform" begin="0s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></path><path fill="none" stroke="url(#b)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 32h30"><animateTransform attributeName="transform" begin="-2s" dur="5s" repeatCount="indefinite" type="translate" values="-3 0; 3 0; -3 0"/></path><path fill="none" stroke="url(#c)" stroke-linecap="round" stroke-miterlimit="10" stroke-width="3" d="M17 39h30"><animateTransform attributeName="transform" begin="-4s" dur="5s" repeatCount="indefinite" type="translate" values="-4 0; 4 0; -4 0"/></path></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/time-afternoon.svg b/frontend/public/weatherIconsFill/time-afternoon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fcdff334edf69eec1fd654eef44e98eaf24c3a97
--- /dev/null
+++ b/frontend/public/weatherIconsFill/time-afternoon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><linearGradient id="a" x1="115" x2="179.4" y1="91.4" y2="203" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".5" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><symbol id="b" viewBox="0 0 294.4 294.4"><circle cx="147.2" cy="147.2" r="64.4" fill="url(#a)" stroke="#f8af18" stroke-miterlimit="10" stroke-width="4.6"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="18.4" d="M147.2 47.3V9.2m0 276v-38m70.7-170.7 26.9-26.9M49.6 244.8l27-27m0-141.3-27-26.9m195.2 195.2-27-27M47.4 147.3H9.2m276 0h-38"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="0 147.2 147.2; 45 147.2 147.2"/></path></symbol></defs><path fill="#374251" d="M185.3 438.4h-13.5v-32h-12.7v-9h2.2q5.5 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.1-.5h11.1Zm52.5 0H197a20.8 20.8 0 013-11.5q3-4.4 10.8-9.8l8-5.6a16.3 16.3 0 004.2-4 7.5 7.5 0 001.3-4.3 6.3 6.3 0 00-1.9-4.9 7.1 7.1 0 00-5-1.7q-7.4 0-7.4 8.5v1.1h-12.2v-1.6q0-8.8 5.1-13.8t14.7-5q9.1 0 14.4 4.4t5.4 12.2a16 16 0 01-2.5 9 26.7 26.7 0 01-8.2 7.6l-8.8 5.6c-1.7 1-2.6 2-2.7 2.8h22.5Zm28.5-15.1h-20.6v-9.9h20.6Zm31.1 15.1H284v-32h-12.7v-9h2.2q5.5 0 8.7-2.4c2-1.5 3.4-4 4-7.3l.2-.5h11Zm32.1 1.3q-8.8 0-14.4-4a16.2 16.2 0 01-6.6-11.5l12.8-1a7.2 7.2 0 002.8 4.5 8.8 8.8 0 005.3 1.5 8.5 8.5 0 006.2-2.2 8.4 8.4 0 000-11.5 8.5 8.5 0 00-6.2-2.2 9.2 9.2 0 00-7.1 3l-12.1-1 4.7-28.1H347v10.7h-22.5l-1.7 8.8.2.1a17.1 17.1 0 0110.4-3q7.8 0 12.5 4.6t4.7 12.5q0 8.6-5.7 13.7t-15.5 5Z"/><use xlink:href="#b" width="294.4" height="294.4" transform="translate(108.68 70.93)"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/time-evening.svg b/frontend/public/weatherIconsFill/time-evening.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1d46af27bb6f2aa220a44cd426ad12b056fba26
--- /dev/null
+++ b/frontend/public/weatherIconsFill/time-evening.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><linearGradient id="a" x1="115.3" x2="179.7" y1="91.3" y2="202.8" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffa94d"/><stop offset=".5" stop-color="#ffa94d"/><stop offset="1" stop-color="#fd7e14"/></linearGradient><clipPath id="b"><path fill="none" d="M0 12h512v282H0z"/></clipPath><symbol id="c" viewBox="0 0 295 294"><ellipse cx="147.5" cy="147" fill="url(#a)" stroke="#ff922b" stroke-miterlimit="10" stroke-width="6" rx="64.5" ry="64.3"/><path fill="none" stroke="#ffa94d" stroke-linecap="round" stroke-miterlimit="10" stroke-width="18.4" d="M147.5 47.2v-38m0 275.6v-38m70.8-170.4 27-26.8M49.7 244.5l27-27m0-141-27-27m195.6 195-27-27M47.3 147H9.2m276.6 0h-38.2"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="0 147.2 147.2; 45 147.2 147.2"/></path></symbol></defs><g clip-path="url(#b)"><use xlink:href="#c" width="295" height="294" transform="translate(108.58 166.91)"/></g><path fill="none" stroke="#374151" stroke-linecap="round" stroke-linejoin="round" stroke-width="18" d="M128 320h256"/><path fill="#374251" d="M185.3 438.4h-13.5v-32h-12.7v-9h2.2q5.5 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.1-.5h11.1Zm48.2-3.1q-6 4.4-16 4.4t-16-4.4a14.2 14.2 0 01-6-12 12.2 12.2 0 012.7-8 13.3 13.3 0 017.4-4.4v-.2a11 11 0 01-5.6-4.1 11.5 11.5 0 01-2-6.7 12 12 0 015.2-10.3q5-3.7 14.3-3.7t14.5 3.7a12 12 0 015.2 10.3 11.5 11.5 0 01-2 6.8 10.7 10.7 0 01-5.6 4v.3a13.5 13.5 0 017.3 4.4 12.1 12.1 0 012.6 8 14.2 14.2 0 01-6 11.9Zm-16-5.3a10.6 10.6 0 006.7-1.9 7 7 0 000-10.6 10.6 10.6 0 00-6.7-1.9 10.9 10.9 0 00-6.9 2 7 7 0 000 10.5 11 11 0 007 1.9Zm0-22.6a9.3 9.3 0 005.9-1.7 5.5 5.5 0 002-4.6 5.2 5.2 0 00-2-4.4 9.8 9.8 0 00-5.9-1.6q-8 0-8 6a5.5 5.5 0 002 4.6 9.4 9.4 0 006 1.7Zm48.8 15.9h-20.6v-9.9h20.6Zm48.6 15.1h-40.6a20.7 20.7 0 013-11.5q2.9-4.4 10.7-9.8l8-5.6a16.3 16.3 0 004.3-4 7.5 7.5 0 001.2-4.3 6.4 6.4 0 00-1.9-4.9 7.2 7.2 0 00-5-1.7q-7.4 0-7.4 8.5v1.1H275v-1.6q0-8.8 5.2-13.8t14.7-5q9 0 14.4 4.4t5.4 12.2a16 16 0 01-2.6 9 26.8 26.8 0 01-8.2 7.5l-8.8 5.6c-1.7 1-2.6 2-2.8 2.8H315Zm33.5 0H335v-32h-12.7v-9h2.1q5.6 0 8.8-2.4c2-1.5 3.3-4 4-7.3l.2-.5h11Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/time-morning.svg b/frontend/public/weatherIconsFill/time-morning.svg
new file mode 100644
index 0000000000000000000000000000000000000000..aa544420419995e198bbbac53d483e6715db7e4d
--- /dev/null
+++ b/frontend/public/weatherIconsFill/time-morning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><linearGradient id="a" x1="115" x2="179.4" y1="91.4" y2="203" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fbbf24"/><stop offset=".5" stop-color="#fbbf24"/><stop offset="1" stop-color="#f59e0b"/></linearGradient><clipPath id="b"><path fill="none" d="M0 12h512v282H0z"/></clipPath><symbol id="c" viewBox="0 0 294.4 294.4"><circle cx="147.2" cy="147.2" r="64.4" fill="url(#a)" stroke="#f8af18" stroke-miterlimit="10" stroke-width="4.6"/><path fill="none" stroke="#fbbf24" stroke-linecap="round" stroke-miterlimit="10" stroke-width="18.4" d="M147.2 47.3V9.2m0 276v-38m70.7-170.7 26.9-26.9M49.6 244.8l27-27m0-141.3-27-26.9m195.2 195.2-27-27M47.4 147.3H9.2m276 0h-38"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="0 147.2 147.2; 45 147.2 147.2"/></path></symbol></defs><g clip-path="url(#b)"><use xlink:href="#c" width="294.4" height="294.4" transform="translate(108.8 166.8)"/></g><path fill="none" stroke="#374151" stroke-linecap="round" stroke-linejoin="round" stroke-width="18" d="M128 320h256"/><path fill="#374251" d="M220.8 403q8.2 0 13.3 4.8t5 13a17.9 17.9 0 01-5.7 13.7q-5.7 5.3-15 5.3t-15.5-5.8q-7.1-6.8-7.1-20.7 0-13 5.7-20.2t16.6-7.2a21.8 21.8 0 0112.6 3.4 16.6 16.6 0 016.7 9.7l-12.5.7c-1-2.7-3.3-4-6.9-4a7.9 7.9 0 00-6.7 3q-2.3 3-2.8 9.7 4.3-5.4 12.3-5.4Zm-9.5 23.6a8.6 8.6 0 006.7 2.8 7.8 7.8 0 006.1-2.4 8.9 8.9 0 002.2-6 8 8 0 00-2.4-6 8.4 8.4 0 00-6.1-2.3 8.2 8.2 0 00-6 2.3 9 9 0 00-2.5 6.1 9.1 9.1 0 002 5.5Zm55-3.3h-20.6v-9.9h20.6Zm42.8-31.3q7.2 6.8 7.2 20.6 0 13-5.7 20.2t-16.7 7.2q-7.5 0-12.6-3.4a16.4 16.4 0 01-6.6-9.6l12.4-.8c1 2.7 3.3 4 6.9 4a8 8 0 006.7-3q2.4-3 2.9-9.6-4.5 5.3-12.4 5.3-8.2 0-13.2-4.8t-5.1-12.9a17.9 17.9 0 015.7-13.7q5.7-5.3 15-5.3t15.5 5.8Zm-14.9 21.3a8.1 8.1 0 006-2.3 9 9 0 002.5-6.2 8.7 8.7 0 00-2-5.4 8.4 8.4 0 00-6.7-2.8 8 8 0 00-6.1 2.3 8.4 8.4 0 00-2.2 6 8.1 8.1 0 002.3 6.1 8.4 8.4 0 006.2 2.3Z"/></svg>
\ No newline at end of file
diff --git a/frontend/public/weatherIconsFill/time-night.svg b/frontend/public/weatherIconsFill/time-night.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ec2ca0390f546f936e94440fb611b2054310f4c1
--- /dev/null
+++ b/frontend/public/weatherIconsFill/time-night.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"><defs><linearGradient id="b" x1="38.8" x2="133.4" y1="20.8" y2="184.6" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#86c3db"/><stop offset=".5" stop-color="#86c3db"/><stop offset="1" stop-color="#5eafcf"/></linearGradient><linearGradient id="a" x1="294" x2="330" y1="112.8" y2="175.2" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcd966"/><stop offset=".5" stop-color="#fcd966"/><stop offset="1" stop-color="#fccd34"/></linearGradient><linearGradient xlink:href="#a" id="c" x1="295.5" x2="316.5" y1="185.9" y2="222.1"/><linearGradient xlink:href="#a" id="d" x1="356.3" x2="387.7" y1="194.8" y2="249.2"/><symbol id="e" overflow="visible" viewBox="0 0 192.5 192.5"><path fill="url(#b)" stroke="#72b9d5" stroke-linecap="round" stroke-linejoin="round" stroke-width="4.5" d="M179.7 120.2a95 95 0 01-95.5-94.3 93.2 93.2 0 013.1-23.7A94.8 94.8 0 002.3 96a95 95 0 0095.5 94.3c44.5 0 81.8-30 92.4-70.6a98.4 98.4 0 01-10.5.6Z"/></symbol></defs><path fill="#374251" d="M233.8 432.3q-6 7.2-16.3 7.2t-16.3-7.2q-6-7.3-6-19.7t6-19.4q6-7.2 16.3-7.2 10.2 0 16.3 7.2t6 19.4q0 12.4-6 19.7Zm-16.3-3.2q9.4 0 9.4-16.4t-9.4-16.3q-9.4 0-9.4 16.3t9.4 16.4Zm48.8-5.8h-20.6v-9.9h20.6Zm38.4-12.6a13.4 13.4 0 018 4.3 12.3 12.3 0 013 8.3 15 15 0 01-5.5 11.8q-5.4 4.7-15.1 4.7-10.2 0-15.7-5t-5.9-14h12.3q.5 8.8 8.8 8.8a8.7 8.7 0 005.7-1.8 6 6 0 002.2-4.9 5.6 5.6 0 00-2.3-4.8 10.5 10.5 0 00-6.3-1.6h-3.6v-9h3.8a8 8 0 005.2-1.5 5.2 5.2 0 001.9-4.3 5.4 5.4 0 00-1.9-4.4 7.9 7.9 0 00-5.2-1.5 7 7 0 00-5 1.6q-1.7 1.7-2 5.4h-12q.7-16.9 19.5-17 8.8 0 13.8 4a12 12 0 015 10 11.1 11.1 0 01-2.3 7 11.3 11.3 0 01-6.4 4Z"/><path fill="url(#a)" stroke="#fcd34d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m282.8 162.8 25-6.4a1.8 1.8 0 011.7.5l18.3 18a1.8 1.8 0 003-1.7l-6.4-25a1.8 1.8 0 01.5-1.7l18-18.4a1.8 1.8 0 00-1.8-3l-24.9 6.5a1.8 1.8 0 01-1.7-.5l-18.4-18a1.8 1.8 0 00-3 1.7l6.5 25a1.8 1.8 0 01-.5 1.7l-18 18.3a1.8 1.8 0 001.7 3Z"><animateTransform additive="sum" attributeName="transform" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="-15 312 144; 15 312 144; -15 312 144"/><animate attributeName="opacity" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="1; .75; 1; .75; 1; .75; 1"/></path><path fill="url(#c)" stroke="#fcd34d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m285.4 193.4 12 12.3a1.2 1.2 0 01.3 1.1l-4.3 16.6a1.2 1.2 0 002 1.2l12.3-12a1.2 1.2 0 011.1-.3l16.6 4.3a1.2 1.2 0 001.2-2l-12-12.3a1.2 1.2 0 01-.3-1.1l4.3-16.6a1.2 1.2 0 00-2-1.2l-12.3 12a1.2 1.2 0 01-1.1.3l-16.7-4.3a1.2 1.2 0 00-1.1 2Z"><animateTransform additive="sum" attributeName="transform" begin="-.33s" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="-15 306 204; 15 306 204; -15 306 204"/><animate attributeName="opacity" begin="-.33s" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="1; .75; 1; .75; 1; .75; 1"/></path><path fill="url(#d)" stroke="#fcd34d" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m337.3 223.7 24.8 7a1.8 1.8 0 011.3 1.2l6.9 24.8a1.8 1.8 0 003.4 0l7-24.8a1.8 1.8 0 011.2-1.3l24.8-6.9a1.8 1.8 0 000-3.4l-24.8-7a1.8 1.8 0 01-1.3-1.2l-6.9-24.8a1.8 1.8 0 00-3.4 0l-7 24.8a1.8 1.8 0 01-1.2 1.3l-24.8 6.9a1.8 1.8 0 000 3.4Z"><animateTransform additive="sum" attributeName="transform" begin="-.67s" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" type="rotate" values="-15 372 222; 15 372 222; -15 372 222"/><animate attributeName="opacity" begin="-.67s" calcMode="spline" dur="6s" keySplines=".42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1; .42, 0, .58, 1" repeatCount="indefinite" values="1; .75; 1; .75; 1; .75; 1"/></path><use xlink:href="#e" width="192.5" height="192.5" transform="translate(159.76 139.76)"><animateTransform additive="sum" attributeName="transform" dur="6s" repeatCount="indefinite" type="rotate" values="-15 96.24 96.24; 9 96.24 96.24; -15 96.24 96.24"/></use></svg>
\ No newline at end of file
diff --git a/frontend/src/App.js b/frontend/src/App.js
index c5a45066be51b516bef60c460fde9cf5acf4ced9..a6f128ad31c8f978c2535cd9d31b6d7c7fb97911 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -56,6 +56,7 @@ function App() {
<DarkModeToggleButton handleDarkModeToggle={handleDarkModeToggle}/>
<div id="main" ref={rotateRef} style={{transform: `rotateY(${rotateValues.rotateX}deg) rotateX(${-1 * rotateValues.rotateY}deg)`}}>
<ReactTooltip id="tooltip" place="top" effect="solid" />
+ <ReactTooltip id="comfortTemp" place="top" effect="solid" style={{ textAlign: 'center'}}/>
<CarouselProvider
isIntrinsicHeight={true}
totalSlides={3}
diff --git a/frontend/src/forecastCollection.js b/frontend/src/forecastCollection.js
index f47fa29c2c56b5ec70cb10ce88907cdc85256676..eeb01d340cf580c0a167b297dd090591e4d7c177 100644
--- a/frontend/src/forecastCollection.js
+++ b/frontend/src/forecastCollection.js
@@ -24,22 +24,23 @@ const ForecastCollection = (props) => {
fetchData();
}, []);
- // https://api.openweathermap.org/data/2.5/forecast?lat=33.5186&lon=86.8104&appid=3563bf5e2d2996538b6ec9d50c045948
- // https://api.openweathermap.org/data/2.5/forecast?lat=33.5186&lon=86.8104&appid=96c71299fdf8ace053d64d762f029353
-
- // Assume data is the object containing the weather forecast data
-
- // from ./public/weatherIcons/01d.svg
-
if (forecast && forecast.city) {
return (
<div className="forecast-days">
{forecast.list.map(day => (
<div className="forecasted-day">
- <p>{new Date(day.dt * 1000).toLocaleDateString()}</p>
- <p>Temperature: {day.temp.day.toFixed(0)}°F</p>
- <img src={`${process.env.PUBLIC_URL}/weatherIcons/${day.weather[0].icon}.svg`} alt="weather icon" />
+ <p>{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>
+ {/* <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" />
+ {/* <p>{day.temp.day.toFixed(0)}°F</p>
+ <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-evening.svg`} alt="weather icon" /> */}
+ <p>{day.temp.eve.toFixed(0)}°F</p>
+ <img src={`${process.env.PUBLIC_URL}/weatherIconsFill/time-night.svg`} alt="weather icon" />
+ <p>{day.temp.night.toFixed(0)}°F</p>
</div>
))}
</div>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 214b20d72100e534d142ae58b2be076574a3c016..2faa9e01e8d82dfaa5bd6c5b9c982dd99720d14a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1997,16 +1997,26 @@ animation-iteration-count: 1;
.forecast-days{
display: flex;
- flex-direction: row;
- flex-wrap: nowrap;
+ /* flex-direction: row;
+ flex-wrap: nowrap; */
+ height: inherit;
justify-content: space-evenly;
- position: unset;
+ width: 90%;
+ margin: auto;
}
.forecasted-day{
display: flex;
flex-direction: column;
- align-content: center;
align-items: center;
- position: relative;
+ flex-basis: 0;
+ flex-grow: 1;
+ min-width: 20%;
+ padding: 0.5em;
+ margin: 0.5em;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
+}
+
+.forecasted-day * {
+ margin: 0;
}
\ No newline at end of file
diff --git a/frontend/src/tempsCollection.js b/frontend/src/tempsCollection.js
index afacc4dc194a649dcf38fa18fc40f827206f5542..52c7f66ffb3552c8b04ce18804cf10ed9deb70d1 100644
--- a/frontend/src/tempsCollection.js
+++ b/frontend/src/tempsCollection.js
@@ -1,4 +1,6 @@
import * as React from "react";
+// import { Tooltip as ReactTooltip } from 'react-tooltip';
+// import 'react-tooltip/dist/react-tooltip.css';
import { useState, useEffect} from 'react';
const TempsCollection = (props) => {
@@ -28,20 +30,25 @@ const TempsCollection = (props) => {
return (
<div id="tempsCollection">
- <div id="desiredTemp" className='temps'>
+ <div id="outsideTemp" className='temps'>
<p className='title'>Outside</p>
<p className='title'>Temperature</p>
<p className='temperatures'>{outdoorTemp} °F</p>
</div>
- <div id="comfortTemp" className='temps'>
+ <div id="currentTemp" className='temps'>
<p className='title'>Current</p>
<p className='title'>Temperature</p>
<p className='temperatures'>70 °F</p>
</div>
- <div id="outsideTemp" className='temps'>
- <p className='title'>Comfort</p>
- <p className='title'>Temperature</p>
- <p className='temperatures'>81 °F</p>
+ <div id="comfortTemp"
+ className='temps'
+ data-tooltip-id="comfortTemp"
+ data-tooltip-offset={30}
+ data-tooltip-place="top"
+ data-tooltip-html="Temperature can affect our state of mind. Based on our research, setting<br /> the temperature between 68 and 72 is optimal for sleep and comfort while<br /> working along side the patterns of our core body temperature.">
+ <p className='title'>Comfort</p>
+ <p className='title'>Temperature</p>
+ <p className='temperatures'>81 °F</p>
</div>
</div>
);