fix ci

src/components/Card/Card.tsx

@@ -17,9 +17,9 @@ export default function Card({
 }) {
     return (
         <div className={style.card}>
-            {header ? (
+            {header && (
-                <CardHeader icon={icon} content={name} active={active} />
+                <CardHeader icon={icon} content={name} isActive={active} />
-            ) : null}
+            )}
             <div className={style.cardContent}>{children}</div>
         </div>
     );

src/components/CardContainers/style.module.css

@@ -5,6 +5,7 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: 30px;
+    margin: 30px;
 }
 
 .cardRow {

src/components/CardHeader/CardHeader.tsx

@@ -1,14 +1,17 @@
-import classNames from "classnames";
+import classNames from "classnames/bind";
 
 import style from "./style.module.css";
 
-export default function CardHeader({ icon, content, active = false }) {
+const styles = {
+    container: style.container,
+    active: style.active,
+};
+
+const cx = classNames.bind(styles);
+
+export default function CardHeader({ icon, content, isActive = false }) {
     return (
-        <div
+        <div className={cx("container", { active: isActive })}>
-            className={classNames(style.container, {
-                [`${style.active}`]: active,
-            })}
-        >
             <div className={style.title}>
                 <div className={style.icon}>{icon}</div>
                 <div className={style.content}>{content}</div>

src/components/Dashboard/Dashboard.tsx

@@ -42,31 +42,29 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <div className={style.body}>
+            <CardColumn>
-                <CardColumn>
+                <Card icon="🚊" name="Timetable">
-                    <Card icon="🚊" name="Timetable">
+                    <Timetable />
-                        <Timetable />
+                </Card>
+
+                <CardRow>
+                    <Card icon="🕐" name="Clock">
+                        <Datetime />
                     </Card>
 
-                    <CardRow>
+                    <Card icon="🌤" name="Weather">
-                        <Card icon="🕐" name="Clock">
+                        <Weather />
-                            <Datetime />
-                        </Card>
-
-                        <Card icon="🌤" name="Weather">
-                            <Weather />
-                        </Card>
-                    </CardRow>
-
-                    <Card icon="🔔" name="Terminal" active={true}>
-                        <Terminal />
                     </Card>
+                </CardRow>
 
-                    <Card icon="🧹" name="Flatastic">
+                <Card icon="🔔" name="Terminal" active={true}>
-                        <Flatastic />
+                    <Terminal />
-                    </Card>
+                </Card>
-                </CardColumn>
+
-            </div>
+                <Card icon="🧹" name="Flatastic">
+                    <Flatastic />
+                </Card>
+            </CardColumn>
 
             <Footer />
         </div>

src/components/Dashboard/style.module.css

@@ -5,12 +5,6 @@
     transition: 0.5s;
 }
 
-.body {
-    height: 100%;
-    margin: 30px;
-    overflow: scroll;
-}
-
 /* 7 to 16  */
 .day {
     background-color: #007c7d;