From fa198475c1a434afd5cc1a8d6b5fa0287d18475f Mon Sep 17 00:00:00 2001
From: Connor Yoh <con.yoh13@gmail.com>
Date: Tue, 8 Apr 2025 15:05:29 +0100
Subject: [PATCH] Updated CSS cusomisation

---
 .../static/css/cookieconsentCustomisation.css | 55 ++++++++++++++-----
 .../js/thirdParty/cookieconsent-config.js     |  8 +--
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/main/resources/static/css/cookieconsentCustomisation.css b/src/main/resources/static/css/cookieconsentCustomisation.css
index 9ae81b946..a28b1e89b 100644
--- a/src/main/resources/static/css/cookieconsentCustomisation.css
+++ b/src/main/resources/static/css/cookieconsentCustomisation.css
@@ -1,5 +1,5 @@
 .cc--darkmode{
-    --cc-bg: var(--md-sys-color-surface);
+    --cc-bg: var(--md-sys-color-inverse-on-surface);
     --cc-primary-color: var(--md-sys-color-on-surface);
     --cc-secondary-color: var(--md-sys-color-on-surface);
 
@@ -16,31 +16,32 @@
     --cc-btn-secondary-hover-bg:var(--md-sys-color-secondary);
     --cc-btn-secondary-hover-color: var(--cc-bg);
     --cc-btn-secondary-hover-border-color: var(--md-sys-color-secondary);
-/*
-    --cc-separator-border-color: #222a30;
+
+    --cc-separator-border-color: var(--md-sys-color-outline);
 
     --cc-toggle-on-bg: var(--cc-btn-primary-bg);
-    --cc-toggle-off-bg: #525f6b;
+    --cc-toggle-off-bg: var(--md-sys-color-outline);
     --cc-toggle-on-knob-bg: var(--cc-btn-primary-color);
     --cc-toggle-off-knob-bg: var(--cc-btn-primary-color);
 
     --cc-toggle-enabled-icon-color: var(--cc-btn-primary-color);   
     --cc-toggle-disabled-icon-color: var(--cc-btn-primary-color);  
 
-    --cc-toggle-readonly-bg: #343e45;
-    --cc-toggle-readonly-knob-bg: #5f6b72;
+    --cc-toggle-readonly-bg: var(--md-sys-color-surface);
+    --cc-toggle-readonly-knob-bg: var(--md-sys-color-outline);
     --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg);
 
-    --cc-section-category-border: #1e2428;
+    --cc-section-category-border: var(--md-sys-color-outline);
 
-    --cc-cookie-category-block-bg: #1e2428;
-    --cc-cookie-category-block-border: var(--cc-section-category-border);
-    --cc-cookie-category-block-hover-bg: #242c31;
-    --cc-cookie-category-block-hover-border: #232a2f;
-    --cc-cookie-category-expanded-block-bg: transparent;
+    --cc-cookie-category-block-bg: var(--cc-btn-secondary-bg);
+    --cc-cookie-category-block-border: var(--cc-btn-secondary-bg); 
+    --cc-cookie-category-block-hover-bg: var(--cc-btn-secondary-bg);
+    --cc-cookie-category-block-hover-border: var(--cc-btn-secondary-bg);
+    
+    --cc-cookie-category-expanded-block-bg: var(--cc-btn-secondary-bg);
     --cc-cookie-category-expanded-block-hover-bg: var(--cc-toggle-readonly-bg);
 
-    --cc-overlay-bg: rgba(0, 0, 0, 0.65);
+  /*  --cc-overlay-bg: rgba(0, 0, 0, 0.65);
     --cc-webkit-scrollbar-bg: var(--cc-section-category-border);
     --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg);
 */
@@ -48,3 +49,31 @@
     --cc-footer-color: var(--cc-primary-color);
     --cc-footer-border-color: var(--cc-bg); 
 }
+.cm__body{
+    max-width: 90% !important;
+    flex-direction: row !important;
+    align-items: center !important;
+
+}
+
+.cm__desc{
+    max-width: 70rem !important;
+}
+
+.cm__btns{
+    flex-direction: row-reverse !important;
+    gap:10px !important;
+    padding-top: 3.4rem !important;
+}
+
+@media only screen and (max-width: 1400px) {
+    .cm__body{
+        max-width: 90% !important;
+        flex-direction: column !important;
+        align-items: normal !important;
+    }
+
+    .cm__btns{
+        padding-top: 1rem !important;
+    }
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/thirdParty/cookieconsent-config.js b/src/main/resources/static/js/thirdParty/cookieconsent-config.js
index 0902a2337..2c3ede13c 100644
--- a/src/main/resources/static/js/thirdParty/cookieconsent-config.js
+++ b/src/main/resources/static/js/thirdParty/cookieconsent-config.js
@@ -7,16 +7,16 @@ document.documentElement.classList.add('cc--darkmode');
 CookieConsent.run({
     guiOptions: {
         consentModal: {
-            layout: "box",
-            position: "bottom left",
+            layout: "bar",
+            position: "bottom",
             equalWeightButtons: true,
-            flipButtons: false
+            flipButtons: true
         },
         preferencesModal: {
             layout: "box",
             position: "right",
             equalWeightButtons: true,
-            flipButtons: false
+            flipButtons: true
         }
     },
     categories: {