Fix card header alignment and add weather to footer

src/components/Card/Card.tsx

@@ -20,7 +20,7 @@ export default function Card({
             {header && (
                 <CardHeader icon={icon} content={name} isActive={active} />
             )}
-            {children}
+            <div className={style.cardContent}>{children}</div>
         </div>
     );
 }

src/components/Card/style.module.css

@@ -1,7 +1,7 @@
 .card {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     background-color: #c0c0c0;
     border-top: 2px solid white;
     border-left: 2px solid white;
@@ -9,3 +9,8 @@
     border-right: 2px solid #828282;
     margin: 10px;
 }
+
+.cardContent {
+    display: flex;
+    height: 100%;
+}

src/components/Footer/Footer.tsx

@@ -1,10 +1,8 @@
 import style from "./style.module.css";
 
-import weedImage from "/img/weed.png"
+import weedImage from "/img/weed.png";
 
 export default function Footer() {
-
-
     return (
         <div className={style.container}>
             <div className={style.taskbar}>
@@ -29,6 +27,9 @@ export default function Footer() {
                     <span className={style.window}>
                         <span className={style.windowIcon}>🧹</span>Flatastic
                     </span>
+                    <span className={style.window}>
+                        <span className={style.windowIcon}>⛅</span>Weather
+                    </span>
                 </div>
             </div>
         </div>