From d7e9ac909cb3760d56fda5e121ab622def0a630c Mon Sep 17 00:00:00 2001
From: Saurabh Dome <domesaurabh@gmail.com>
Date: Tue, 5 Dec 2023 01:56:54 +0100
Subject: [PATCH] CSS fixes for Vue

---
 docker-compose.yml                |  2 +-
 frontend/package.json             | 38 +++++++++++------------
 frontend/src/assets/base.css      | 50 ++-----------------------------
 frontend/src/views/dutiesView.vue |  2 --
 4 files changed, 23 insertions(+), 69 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index b3fde9f0e..41277c9f1 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -31,7 +31,7 @@ services:
     hostname: parkour2-django
     build:
       dockerfile: ./backend.Dockerfile
-      target: pk2_base
+      target: pk2_dev
     env_file:
       - ./misc/parkour.env
     restart: always
diff --git a/frontend/package.json b/frontend/package.json
index 497163dee..7aeb28fab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,26 +10,26 @@
     "start-prod": "npm install && vite build && npx serve -s dist -l 5173"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.2",
-    "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
-    "ag-grid-community": "^30.2.0",
-    "ag-grid-vue3": "^30.2.0",
-    "axios": "^1.5.1",
-    "bootstrap": "^5.3.2",
-    "js-cookie": "^3.0.5",
-    "moment": "^2.29.4",
-    "pinia": "^2.1.6",
-    "sass": "^1.69.3",
-    "serve": "^14.2.1",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4",
-    "vue-toastification": "^2.0.0-rc.5"
+    "@fortawesome/fontawesome-svg-core": "6.4.2",
+    "@fortawesome/free-regular-svg-icons": "6.4.2",
+    "@fortawesome/free-solid-svg-icons": "6.4.2",
+    "@fortawesome/vue-fontawesome": "3.0.3",
+    "ag-grid-community": "30.2.0",
+    "ag-grid-vue3": "30.2.0",
+    "axios": "1.5.1",
+    "bootstrap": "5.3.2",
+    "js-cookie": "3.0.5",
+    "moment": "2.29.4",
+    "pinia": "2.1.6",
+    "sass": "1.69.3",
+    "serve": "14.2.1",
+    "vue": "3.3.4",
+    "vue-router": "4.2.4",
+    "vue-toastification": "2.0.0-rc.5"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.3.4",
-    "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "vite": "^4.4.9"
+    "@vitejs/plugin-vue": "4.3.4",
+    "@vitejs/plugin-vue-jsx": "3.0.2",
+    "vite": "4.4.9"
   }
 }
\ No newline at end of file
diff --git a/frontend/src/assets/base.css b/frontend/src/assets/base.css
index 14470af96..3663ae173 100644
--- a/frontend/src/assets/base.css
+++ b/frontend/src/assets/base.css
@@ -1,51 +1,7 @@
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
+  color-scheme: only light;
+  color: #181818;
+  background-color: #ffffff;
 }
 
 *,
diff --git a/frontend/src/views/dutiesView.vue b/frontend/src/views/dutiesView.vue
index 2d1e9d69a..b77f8f214 100644
--- a/frontend/src/views/dutiesView.vue
+++ b/frontend/src/views/dutiesView.vue
@@ -119,7 +119,6 @@
         max-width: 320px;
         height: 800px;
         border: 1px solid #006c66;
-        box-sizing: border-box;
       "
     >
       <div
@@ -738,7 +737,6 @@ export default {
   background: #006c66;
   padding: 16px 20px;
   width: 100% !important;
-  box-sizing: border-box;
 }
 
 .styled-box {