Card container components for a cleaner dashboard

src/components/CardContainers/CardContainers.tsx

@@ -0,0 +1,9 @@
+import style from "./style.module.css";
+
+export function CardRow({ children }) {
+    return <div className={style.cardRow}>{children}</div>;
+}
+
+export function CardColumn({ children }) {
+    return <div className={style.cardColumn}>{children}</div>;
+}

src/components/CardContainers/style.module.css

@@ -0,0 +1,17 @@
+.cardColumn {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+    margin: 30px;
+}
+
+.cardRow {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: 30px;
+}

src/components/Dashboard/Dashboard.tsx

@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 
 import Card from "@/components/Card/Card";
+import {
+    CardColumn,
+    CardRow,
+} from "@/components/CardContainers/CardContainers";
 import CardHeader from "@/components/CardHeader/CardHeader";
 import Datetime from "@/components/Datetime/Datetime";
 import Flatastic from "@/components/Flatastic/Flatastic";
@@ -38,23 +42,24 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.cardWrapper}>
+            <CardColumn>
                 <Card>
                     <CardHeader icon="🚊" content="Timetable" />
                     <Timetable />
                 </Card>
-                <div className={style.clockAndWeather}>
+
-                    <div className={style.small}>
+                <CardRow>
-                        <Card>
-                            <CardHeader icon="🕐" content="Clock" />
-                            <Datetime />
-                        </Card>
-                    </div>
                     <Card>
-                        <CardHeader icon="🌤️" content="Weather" />
+                        <CardHeader icon="🕐" content="Clock" />
+                        <Datetime />
+                    </Card>
+
+                    <Card>
+                        <CardHeader icon="🌤" content="Weather" />
                         <Weather />
                     </Card>
-                </div>
+                </CardRow>
+
                 <Card>
                     <CardHeader icon="🔔" content="Terminal" active={true} />
                     <Terminal />
@@ -64,10 +69,9 @@ export default function Dashboard() {
                     <CardHeader icon="🧹" content="Flatastic" />
                     <Flatastic />
                 </Card>
-            </div>
+            </CardColumn>
-            <div className={style.footer}>
+
-                <Footer />
+            <Footer />
-            </div>
         </div>
     );
 }

src/components/Dashboard/style.module.css

@@ -19,29 +19,3 @@
 .night {
     background-color: #2a3f55;
 }
-
-.clockAndWeather {
-    display: flex;
-    align-items: center;
-}
-
-.cardWrapper {
-    margin: 30px;
-    height: 100%;
-    gap: 30px;
-    flex-direction: column;
-    display: flex;
-    justify-content: flex-start;
-}
-
-.small {
-    width: 45%;
-}
-
-.terminal {
-    margin: 2px;
-}
-
-.footer {
-    background-color: #c0c0c0;
-}

src/components/Footer/style.module.css

@@ -1,11 +1,12 @@
 .container {
+    background-color: #c0c0c0;
     height: 30px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
-    margin: 2px;
+    padding: 2px;
 }
 
 .taskbar {