fix ci

.github/workflows/ci.yml

@@ -68,6 +68,9 @@ jobs:
           script: |
             cd monitor-im-flur
             echo "Deploying Docker container..."
+            git clean -dfx
+            git reset --hard HEAD
+            git pull
             docker-compose pull
             docker-compose down
             docker-compose up -d

Dockerfile

@@ -1,7 +1,11 @@
-FROM nginx
-
-COPY ./dist /usr/share/nginx/html
+FROM oven/bun as builder
+WORKDIR /app
+COPY . .
+RUN bun install
+RUN bun run build
 
+FROM nginx:alpine
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
-
 CMD ["nginx", "-g", "daemon off;"]

nginx.conf

@@ -0,0 +1,27 @@
+worker_processes 1;
+
+events { worker_connections 1024; }
+
+http {
+    include       mime.types;
+    default_type  application/octet-stream;
+    sendfile        on;
+    keepalive_timeout  65;
+
+    server {
+        listen 80;
+        server_name _;
+
+        root /usr/share/nginx/html;
+        index index.html;
+
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            log_not_found off;
+        }
+    }
+}

src/components/Card/Card.tsx

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

src/components/CardContainers/style.module.css

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

src/components/CardHeader/CardHeader.tsx

@@ -1,17 +1,14 @@
-import classNames from "classnames/bind";
+import classNames from "classnames";
 
 import style from "./style.module.css";
 
-const styles = {
-    container: style.container,
-    active: style.active,
-};
-
-const cx = classNames.bind(styles);
-
-export default function CardHeader({ icon, content, isActive = false }) {
+export default function CardHeader({ icon, content, active = false }) {
     return (
-        <div className={cx("container", { active: isActive })}>
+        <div
+            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,29 +42,31 @@ export default function Dashboard() {
 
     return (
         <div className={`${style.dashboard} ${scheme}`}>
-            <CardColumn>
-                <Card icon="🚊" name="Timetable">
-                    <Timetable />
-                </Card>
-
-                <CardRow>
-                    <Card icon="🕐" name="Clock">
-                        <Datetime />
+            <div className={style.body}>
+                <CardColumn>
+                    <Card icon="🚊" name="Timetable">
+                        <Timetable />
                     </Card>
 
-                    <Card icon="🌤" name="Weather">
-                        <Weather />
+                    <CardRow>
+                        <Card icon="🕐" name="Clock">
+                            <Datetime />
+                        </Card>
+
+                        <Card icon="🌤" name="Weather">
+                            <Weather />
+                        </Card>
+                    </CardRow>
+
+                    <Card icon="🔔" name="Terminal" active={true}>
+                        <Terminal />
                     </Card>
-                </CardRow>
 
-                <Card icon="🔔" name="Terminal" active={true}>
-                    <Terminal />
-                </Card>
-
-                <Card icon="🧹" name="Flatastic">
-                    <Flatastic />
-                </Card>
-            </CardColumn>
+                    <Card icon="🧹" name="Flatastic">
+                        <Flatastic />
+                    </Card>
+                </CardColumn>
+            </div>
 
             <Footer />
         </div>

src/components/Dashboard/style.module.css

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