update for summer theme

frontend/src/components/CenteredConatiner.css

@@ -6,7 +6,7 @@
     width: 100%;                 /* Full width of the viewport */
     overflow-x: auto;            /* Enables horizontal scrolling if necessary */
     margin: 20px 0;             /* Spacing above and below the container */
-    background-color: rgba(0, 42, 255, 0.6);
+    background-color: #06984aef;
     border-radius: 20px;
 }
 

frontend/src/components/Leafs.css

@@ -0,0 +1,38 @@
+.leafs {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none; /* Make leafs non-interactive */
+    overflow: hidden; /* Hide overflow */
+    z-index: 998; /* Ensure leafs are above other content */
+}
+
+.leaf {
+    position: absolute;
+    top: -10%; /* Start above the top of the screen */
+    color: white; /* leaf color */
+    font-size: 1em; /* Size of the leaf; adjust as needed */
+    opacity: 0.6; /* Transparency */
+    animation: fall linear infinite; /* Apply the fall animation */
+}
+
+/* Falling animation */
+@keyframes fall {
+    0% {
+        transform: translateX(0) translateY(0) rotate(0deg);/* Start position */
+    }
+    100% {
+        transform: translateX(-5vw) translateY(120vh) rotate(360deg); /* End position */
+        opacity: 0.1; /* Optional: fade out */
+    }
+}
+/* Randomize leaf size and animation */
+.leaf:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
+.leaf:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
+.leaf:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
+.leaf:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
+.leaf:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
+
+/* Add more child selectors for additional leafs */

frontend/src/components/Leafs.tsx

@@ -1,26 +1,26 @@
 import React from 'react';
-import './Snowflakes.css';
+import './Leafs.css';
 
-const Snowflakes: React.FC = () => {
-    // Adjust the number of snowflakes as needed
-    const snowflakeCount = Array.from({ length: 50 });
+const Leafs: React.FC = () => {
+    // Adjust the number of leafs as needed
+    const leafCount = Array.from({ length: 50 });
 
     return (
-        <div className="snowflakes">
-            {snowflakeCount.map((_, index) => (
+        <div className="leafs">
+            {leafCount.map((_, index) => (
                 <div 
                     key={index} 
-                    className="snowflake"
+                    className="leaf"
                     style={{
                         left: `${Math.random() * 100}vw`, // Random position across the full width
                         animationDuration: `${Math.random() * 20 + 10}s`, // Random fall duration between 2s and 5s
                     }}
                 >
-                    ❄️
+                    🍃
                 </div>
             ))}
         </div>
     );
 };
 
-export default Snowflakes;
+export default Leafs;

frontend/src/components/Loading.css

@@ -1,10 +1,10 @@
 .spinner {
     font-size: 100px; /* Adjust size as needed */
     animation: spin 2s linear infinite; /* Spin animation */
-    position: fixed; /* Keep the snowflake in a fixed position */
+    position: fixed; /* Keep the leaf in a fixed position */
     top: 50%; /* Adjust vertical position */
     left: 50%; /* Center horizontally */
-    transform: translateX(-50%); /* Center the snowflake */
+    transform: translateX(-50%); /* Center the leaf */
     z-index: 10000; /* Ensure it's above the full-screen loading */
 }
 

frontend/src/components/Loading.tsx

@@ -4,7 +4,7 @@ import './Loading.css'; // Import CSS for styling
 export const Loading: React.FC = () => {
     return (
         <div className="spinner">
-            🎅🏻
+            🍺
         </div>
     );
 };

frontend/src/components/Snowflakes.css

@@ -1,39 +0,0 @@
-.snowflakes {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none; /* Make snowflakes non-interactive */
-    overflow: hidden; /* Hide overflow */
-    z-index: 998; /* Ensure snowflakes are above other content */
-}
-
-.snowflake {
-    position: absolute;
-    top: -10%; /* Start above the top of the screen */
-    color: white; /* Snowflake color */
-    font-size: 1em; /* Size of the snowflake; adjust as needed */
-    opacity: 0.5; /* Transparency */
-    animation: fall linear infinite; /* Apply the fall animation */
-}
-
-/* Falling animation */
-@keyframes fall {
-    0% {
-        transform: translateX(0) translateY(0); /* Start position */
-    }
-    100% {
-        transform: translateX(-5vw) translateY(120vh); /* End position */
-        opacity: 0.1; /* Optional: fade out */
-    }
-}
-
-/* Randomize snowflake size and animation */
-.snowflake:nth-child(1) { animation-duration: 6s; left: 10%; font-size: 0.8em;}
-.snowflake:nth-child(2) { animation-duration: 8s; left: 20%; font-size: 3em;}
-.snowflake:nth-child(3) { animation-duration: 5s; left: 30%; font-size: 4em;}
-.snowflake:nth-child(4) { animation-duration: 7s; left: 40%; font-size: 0.9em;}
-.snowflake:nth-child(5) { animation-duration: 10s; left: 50%; font-size: 2em;}
-
-/* Add more child selectors for additional snowflakes */