From 13c6b1e8cf7b75ff4e2c32c06d212c8f44161a43 Mon Sep 17 00:00:00 2001
From: Dylan De Faoite <dylanseandefaoite@gmail.com>
Date: Sat, 15 Aug 2026 17:49:47 +0100
Subject: [PATCH] update styling css file

---
 frontend/index.html        |  2 +-
 frontend/package-lock.json |  1 -
 frontend/package.json      |  3 +--
 frontend/src/App.css       | 42 ----------------------------------
 frontend/src/index.css     | 47 +++++++++++++++++---------------------
 frontend/vite.config.ts    |  3 +--
 6 files changed, 24 insertions(+), 74 deletions(-)
 delete mode 100644 frontend/src/App.css

diff --git a/frontend/index.html b/frontend/index.html
index 9552ecd..21829db 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/small_icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>The VoD System</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 2f9c5b0..5c9e7e2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -7,7 +7,6 @@
     "": {
       "name": "frontend",
       "version": "0.0.0",
-      "hasInstallScript": true,
       "dependencies": {
         "@react-oauth/google": "^0.12.2",
         "clsx": "^2.1.1",
diff --git a/frontend/package.json b/frontend/package.json
index f7643ae..b151796 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,8 +8,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview",
-    "postinstall": "flowbite-react patch"
+    "preview": "vite preview"
   },
   "dependencies": {
     "@react-oauth/google": "^0.12.2",
diff --git a/frontend/src/App.css b/frontend/src/App.css
deleted file mode 100644
index b9d355d..0000000
--- a/frontend/src/App.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6c52b81..d14266a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,37 +1,24 @@
 @import "tailwindcss";
-@plugin "flowbite-react/plugin/tailwindcss";
-@source "../.flowbite-react/class-list.json";
 
 @theme {
-    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    /* ── Fonts ───────────────────────────────────────────────────────────── */
+    --font-body: "IBM Plex Sans", system-ui, sans-serif;
+    --font-data: "IBM Plex Mono", monospace;
 
-    /* Breakpoints */
-    --breakpoint-3xl: 1920px;
+    /* ── Surfaces ────────────────────────────────────────────────────────── */
+    --color-background: #F7F4EE;
+    --color-sidebar: #F2EEE6;
+    --color-card: #FDFBF7;
+    --color-fields: #F4F0E8;
 
-    --color-primary: oklch(0.55 0.21 254);
-    --color-primary-pressed: oklch(0.45 0.21 254);
-    --color-secondary: oklch(0.94 0.01 250);
-    --color-accent: oklch(0.68 0.20 288);
-    --color-text: oklch(0.17 0.01 270);
-    --color-background: oklch(0.97 0.005 250);
-    --color-surface: oklch(1 0 0);
-    --color-border: oklch(0.91 0.008 250);
-
-    /* Easing */
-    --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
-    --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
-}
-
-#range-slider .range-slider__range {
-    background: var(--color-primary);
-}
-
-#range-slider .range-slider__thumb {
-    background: var(--color-primary);
+    /* ── Ink ─────────────────────────────────────────────────────────────── */
+    --color-text-primary: #2B2620;
+    --color-text-strong: #35302A;
+    --color-text-body: #554D44;
 }
 
 :root {
-    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
     line-height: 1.5;
     font-weight: 400;
     font-synthesis: none;
@@ -42,4 +29,12 @@
 
 body {
     background-color: var(--color-background);
+    font-family: "IBM Plex Sans", system-ui, sans-serif;
+    color: var(--color-text-body);
 }
+
+@utility font-heading {
+    font-family: "Newsreader", serif;
+    font-weight: 400;
+    color: #2B2620;
+}
\ No newline at end of file
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index bb793db..4ac281d 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,13 +1,12 @@
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
-import flowbiteReact from "flowbite-react/plugin/vite";
 
 export default defineConfig(({ mode }) => {  // change to function form
   const env = loadEnv(mode, process.cwd(), '')  // load all env vars
 
   return {
-    plugins: [react(), tailwindcss(), flowbiteReact()],
+    plugins: [react(), tailwindcss()],
     preview: {
       port: 5173,
       strictPort: true,