feat: Added Radix Theme to the app, added specific scss file and made some styling adjustments

package.json

@@ -19,6 +19,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/themes": "^3.2.1",
     "@reduxjs/toolkit": "^2.4.0",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.20.5",

src/App.tsx

@@ -18,7 +18,8 @@ import { setBootState } from "redux-store/BootSlice";
 import { Dict } from 'app/Types';
 
 /* Import Styles */
-import './App.css';
+import 'styles/App.css';
+import 'styles/Main.scss';
 
 /* Import Components */
 import Notifications from 'components/elements/notifications/Notifications';
@@ -66,7 +67,7 @@ const App = (props: Props) => {
   /* If booted: return routes for application, otherwise show loading screen */
   if (!isMobile) {
     return (
-      <div className="h-100 w-100">
+      <div className="h-full w-full">
         <Router>
           <Routes>
             {AppRoutes}

src/Mobile.tsx

@@ -2,7 +2,7 @@
 import { Container, Row, Col } from 'react-bootstrap';
 
 /* Import Styles */
-import './App.css';
+import 'styles/App.css';
 
 /* Import Webroot */
 import DiSSCoLogo from 'webroot/logos/dissco-logo.svg';

src/components/home/components/topicFilters/TopicOriginFilter.tsx

@@ -39,7 +39,7 @@ const TopicOriginFilter = (props: Props) => {
             {/* Name and checkbox */}
             <Row>
                 <Col>
-                    <p className="fs-3 fw-lightBold">{topicOrigin.name}</p>
+                    <p className="fw-lightBold">{topicOrigin.name}</p>
                 </Col>
                 <Col lg="auto">
                     <Field name={id}

src/index.tsx

@@ -3,6 +3,7 @@ import './app/i18n';
 import axios from 'axios';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
+import { Theme } from "@radix-ui/themes";
 
 /* Import Store */
 import { setupStore } from './app/Store';
@@ -13,6 +14,7 @@ import { Dict } from 'app/Types';
 /* Import Styles */
 import '@annotorious/react/annotorious-react.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
+import "@radix-ui/themes/styles.css";
 import 'intro.js/introjs.css';
 import 'leaflet/dist/leaflet.css';
 import "react-datepicker/dist/react-datepicker.css";
@@ -43,7 +45,9 @@ const RenderRoot = (bootState?: {
   if (bootState) {
     root.render(
       <Provider store={setupStore()}>
-        <App bootState={bootState} />
+        <Theme accentColor="indigo" grayColor="sand" radius="large" scaling="95%">
+          <App bootState={bootState} />
+        </Theme>
       </Provider>
     );
   } else {

src/App.css → src/styles/App.css

@@ -19,10 +19,9 @@
   --warning: #FFBB00;
 }
 
-/* Import Montserrat Font */
-@font-face {
-  font-family: 'Montserrat';
-  src: url(webroot/font/Montserrat-VariableFont_wght.ttf);
+/* Replacement Bootstrap styles*/
+.h-full {
+  height: 100vh;
 }
 
 /* Global styles */
@@ -42,11 +41,6 @@ body {
   overflow: hidden;
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
 #root {
   height: 100%;
   width: 100%;

src/styles/Main.scss

@@ -0,0 +1,53 @@
+/* Import color definitions */
+@use './colors.scss';
+
+/* Import fonts */
+@font-face {
+    font-family: 'Inter';
+    src: url(webroot/font/Inter-VariableFont_opsz,wght.ttf);
+}
+@font-face {
+    font-family: 'Courier Prime';
+    src: url(webroot/font/CourierPrime-Regular.ttf);
+}
+
+/* Radix theme configuration */
+.radix-themes {
+    --default-font-family: 'Inter', sans-serif;
+    --default-font-weight: 300;
+    --default-font-color: var(--greyDark);
+    --default-font-size: 1rem;
+    --default-line-height: px;
+
+    /* Map custom blueberry color to Radix indigo */
+    --indigo-1: var(--disscover-blueberry-1);
+    --indigo-2: var(--disscover-blueberry-2);
+    --indigo-3: var(--disscover-blueberry-3);
+    --indigo-4: var(--disscover-blueberry-4);
+    --indigo-5: var(--disscover-blueberry-5);
+    --indigo-6: var(--disscover-blueberry-6);
+    --indigo-7: var(--disscover-blueberry-7);
+    --indigo-8: var(--disscover-blueberry-8);
+    --indigo-9: var(--disscover-blueberry-9);
+    --indigo-10: var(--disscover-blueberry-10);
+    --indigo-11: var(--disscover-blueberry-11);
+    --indigo-12: var(--disscover-blueberry-12);
+
+    --indigo-a1: var(--disscover-blueberry-a1);
+    --indigo-a2: var(--disscover-blueberry-a2);
+    --indigo-a3: var(--disscover-blueberry-a3);
+    --indigo-a4: var(--disscover-blueberry-a4);
+    --indigo-a5: var(--disscover-blueberry-a5);
+    --indigo-a6: var(--disscover-blueberry-a6);
+    --indigo-a7: var(--disscover-blueberry-a7);
+    --indigo-a8: var(--disscover-blueberry-a8);
+    --indigo-a9: var(--disscover-blueberry-a9);
+    --indigo-a10: var(--disscover-blueberry-a10);
+    --indigo-a11: var(--disscover-blueberry-a11);
+    --indigo-a12: var(--disscover-blueberry-a12);
+}
+
+/* General layout and component styles */
+code {
+    font-family: 'Courier Prime', monospace;
+}

src/styles/_colors.scss

@@ -0,0 +1,70 @@
+// This file defines the custom color palette for the application.
+
+// Light theme color definitions
+:root, .light, .light-theme {
+    --disscover-blueberry-1: #f7f7f8;
+    --disscover-blueberry-2: #f2f3f8;
+    --disscover-blueberry-3: #e9ecf6;
+    --disscover-blueberry-4: #dce2f6;
+    --disscover-blueberry-5: #d0d7f4;
+    --disscover-blueberry-6: #c0c9ee;
+    --disscover-blueberry-7: #abb6e3;
+    --disscover-blueberry-8: #8f9cd6;
+    --disscover-blueberry-9: #4d59a2;
+    --disscover-blueberry-10: #404a92;
+    --disscover-blueberry-11: #4c57a0;
+    --disscover-blueberry-12: #262d55;
+
+    --disscover-blueberry-a1: #94623005;
+    --disscover-blueberry-a2: #1a1b7d08;
+    --disscover-blueberry-a3: #0928a211;
+    --disscover-blueberry-a4: #032eca1e;
+    --disscover-blueberry-a5: #0126cc2a;
+    --disscover-blueberry-a6: #0327c03b;
+    --disscover-blueberry-a7: #0121ad50;
+    --disscover-blueberry-a8: #011fa46d;
+    --disscover-blueberry-a9: #02137bb1;
+    --disscover-blueberry-a10: #010e6ebe;
+    --disscover-blueberry-a11: #021179b2;
+    --disscover-blueberry-a12: #010937d9;
+
+    --disscover-blueberry-contrast: #fff;
+    --disscover-blueberry-surface: #f0f1f8cc;
+    --disscover-blueberry-indicator: #4d59a2;
+    --disscover-blueberry-track: #4d59a2;
+
+    // P3 color gamut enhancements for displays that support it
+    @supports (color: color(display-p3 1 1 1)) {
+        @media (color-gamut: p3) {
+            --disscover-blueberry-1: oklch(97.6% 0.002 274.2);
+            --disscover-blueberry-2: oklch(96.5% 0.0066 274.2);
+            --disscover-blueberry-3: oklch(94.4% 0.0136 274.2);
+            --disscover-blueberry-4: oklch(91.4% 0.0281 274.2);
+            --disscover-blueberry-5: oklch(88.3% 0.0409 274.2);
+            --disscover-blueberry-6: oklch(84.2% 0.0524 274.2);
+            --disscover-blueberry-7: oklch(78.3% 0.0654 274.2);
+            --disscover-blueberry-8: oklch(70.5% 0.0864 274.2);
+            --disscover-blueberry-9: oklch(49% 0.1171 274.2);
+            --disscover-blueberry-10: oklch(43.9% 0.1171 274.2);
+            --disscover-blueberry-11: oklch(48.5% 0.1171 274.2);
+            --disscover-blueberry-12: oklch(31.3% 0.071 274.2);
+
+            --disscover-blueberry-a1: color(display-p3 0.4902 0.2471 0.0118 / 0.016);
+            --disscover-blueberry-a2: color(display-p3 0.0314 0.0353 0.451 / 0.029);
+            --disscover-blueberry-a3: color(display-p3 0.0157 0.0824 0.5412 / 0.061);
+            --disscover-blueberry-a4: color(display-p3 0.0078 0.149 0.7098 / 0.113);
+            --disscover-blueberry-a5: color(display-p3 0.0039 0.1294 0.7216 / 0.161);
+            --disscover-blueberry-a6: color(display-p3 0.0039 0.1137 0.6902 / 0.221);
+            --disscover-blueberry-a7: color(display-p3 0.0039 0.1059 0.6196 / 0.306);
+            --disscover-blueberry-a8: color(display-p3 0.0039 0.098 0.5922 / 0.418);
+            --disscover-blueberry-a9: color(display-p3 0 0.0588 0.4431 / 0.683);
+            --disscover-blueberry-a10: color(display-p3 0 0.0431 0.3961 / 0.735);
+            --disscover-blueberry-a11: color(display-p3 0 0.051 0.4353 / 0.687);
+            --disscover-blueberry-a12: color(display-p3 0 0.0275 0.2 / 0.844);
+
+            --disscover-blueberry-surface: color(display-p3 0.9412 0.9451 0.9725 / 0.8);
+            --disscover-blueberry-indicator: oklch(49% 0.1171 274.2);
+            --disscover-blueberry-track: oklch(49% 0.1171 274.2);
+        }
+    }
+}

vite.config.ts

@@ -10,6 +10,7 @@ export default defineConfig({
       api: '/src/api',
       app: '/src/app',
       components: '/src/components',
+      styles: '/src/styles',
       "redux-store": '/src/redux-store',
       sources: '/src/sources',
       tests: '/src/tests',