From c8177df54f6321093f32afdd9e8d8866cd664f31 Mon Sep 17 00:00:00 2001
From: laibatool792 <133545972+laibatool792@users.noreply.github.com>
Date: Mon, 7 Oct 2024 17:17:28 +1300
Subject: [PATCH 1/4] styling updated to daisyui component for resource navbar
 to tabs

---
 .../modals/ResourcesModal/ResourcesModal.jsx  | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
index 9894be1b..644ce7e1 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
@@ -56,23 +56,23 @@ function ResourcesModal({ handleClose, resources }) {
           &times;
         </button>
         <h2 className={resourceStyles.modalHeading}>Resources</h2>
-        <nav className={resourceStyles.navBar}>
+
+        {/* DaisyUI Tabs Implementation */}
+        <div role="tablist" className="tabs tabs-bordered">
           {resources.map((resource) => (
-            <p key={resource._id}>
-              <button
-                type="button"
-                onClick={() => setCurrentResourceId(resource._id)}
-                className={
-                  currentResourceId === resource._id
-                    ? resourceStyles.active
-                    : ""
-                }
-              >
-                {resource.name}
-              </button>
-            </p>
+            <a
+              key={resource._id}
+              role="tab"
+              onClick={() => setCurrentResourceId(resource._id)}
+              className={`tab ${
+                currentResourceId === resource._id ? "tab-active" : ""
+              }`}
+            >
+              {resource.name}
+            </a>
           ))}
-        </nav>
+        </div>
+
         <div className={resourceStyles.r_content_card}>
           {currentResource ? (
             <ResourceContent item={currentResource} />

From 16f06f0203020291c3125c09047c4d17dbfca066 Mon Sep 17 00:00:00 2001
From: laibatool792 <133545972+laibatool792@users.noreply.github.com>
Date: Mon, 7 Oct 2024 19:38:30 +1300
Subject: [PATCH 2/4] selected resource + title bolded

---
 .../modals/ResourcesModal/ResourcesModal.jsx  |  4 +-
 .../ResourcesModal/ResourcesModal.module.scss | 41 ++-----------------
 2 files changed, 6 insertions(+), 39 deletions(-)

diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
index 644ce7e1..99796ccb 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
@@ -65,7 +65,9 @@ function ResourcesModal({ handleClose, resources }) {
               role="tab"
               onClick={() => setCurrentResourceId(resource._id)}
               className={`tab ${
-                currentResourceId === resource._id ? "tab-active" : ""
+                currentResourceId === resource._id
+                ? "tab-active text-[#035084] border-white font-bold" 
+                  : ""
               }`}
             >
               {resource.name}
diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
index 06eb1a2f..a5c0dab3 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
@@ -19,12 +19,13 @@
 .modalHeading {
   text-align: center;
   font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .closeButton {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 0px;
+  right: 10px;
   background: transparent;
   border: none;
   font-size: 2rem;
@@ -36,42 +37,6 @@
   color: #000;
 }
 
-.navBar {
-  display: flex;
-  padding: 10px;
-  width: 100%;
-  height: 12%;
-  overflow-x: auto;
-  overflow-y: hidden;
-  box-sizing: border-box;
-  white-space: nowrap;
-  background-color: #6fc9e5;
-  align-items: center;
-  flex-shrink: 0;
-  font-size: 1rem;
-}
-
-.navBar > p {
-  margin: 0;
-}
-
-.navBar button {
-  border: none;
-  padding: 10px 15px;
-  font-size: 1.2rem;
-  // border-radius: 10px;
-  cursor: pointer;
-  // transition: background-color 0.3s ease;
-  background-color: transparent;
-}
-
-.navBar .active {
-  // background-color: #e0e0e0;
-  // color: white;
-  font-weight: bold;
-  border-bottom: 5px solid black;
-}
-
 .r_content_card {
   height: 75%;
   display: flex;

From 10d188f930de9aea5ace6fe723c7622ce1ca9d50 Mon Sep 17 00:00:00 2001
From: laibatool792 <133545972+laibatool792@users.noreply.github.com>
Date: Sun, 20 Oct 2024 18:43:05 +1300
Subject: [PATCH 3/4] resources mui modal updated to daisyui tab

---
 frontend/index.html                                           | 2 +-
 .../playScenario/modals/ResourcesModal/ResourcesModal.jsx     | 4 ++--
 .../modals/ResourcesModal/ResourcesModal.module.scss          | 4 ++++
 frontend/tailwind.config.js                                   | 4 +++-
 4 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 72b83c9f..6cf57e22 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-theme="emerald">
+<html lang="en" data-theme="VPSTheme">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
index 99796ccb..76f9bc5d 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
@@ -64,9 +64,9 @@ function ResourcesModal({ handleClose, resources }) {
               key={resource._id}
               role="tab"
               onClick={() => setCurrentResourceId(resource._id)}
-              className={`tab ${
+              className={`tab text-lg ${
                 currentResourceId === resource._id
-                ? "tab-active text-[#035084] border-white font-bold" 
+                ? "tab-active text-[#035084] border-bottom-[#035084] border-[#035084] font-bold" 
                   : ""
               }`}
             >
diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
index a5c0dab3..f26f841e 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
@@ -50,3 +50,7 @@
   display: block;
   margin: 0 auto;
 }
+
+.tabs tabs-bordered{
+  font-size:100px;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6bdbfb29..2a4d1bf2 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -18,7 +18,9 @@ module.exports = {
       {
         VPSTheme: {
           primary: "#fafafa",
-          secondary: "#0080a7",
+          secondary: "#035084",
+          error: "#c13216",
+          // "base-content": "#035084",
         },
       },
       "emerald",

From e83e4024efeb8f2735bb3fa056a81757751d17cb Mon Sep 17 00:00:00 2001
From: harbassan <harbassan@hotmail.com>
Date: Mon, 21 Oct 2024 14:26:48 +1300
Subject: [PATCH 4/4] chore: code style

---
 .../playScenario/modals/ResourcesModal/ResourcesModal.jsx     | 2 +-
 .../modals/ResourcesModal/ResourcesModal.module.scss          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
index 76f9bc5d..ce80c36b 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.jsx
@@ -66,7 +66,7 @@ function ResourcesModal({ handleClose, resources }) {
               onClick={() => setCurrentResourceId(resource._id)}
               className={`tab text-lg ${
                 currentResourceId === resource._id
-                ? "tab-active text-[#035084] border-bottom-[#035084] border-[#035084] font-bold" 
+                  ? "tab-active text-[#035084] border-bottom-[#035084] border-[#035084] font-bold"
                   : ""
               }`}
             >
diff --git a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
index f26f841e..3b75f6d0 100644
--- a/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
+++ b/frontend/src/features/playScenario/modals/ResourcesModal/ResourcesModal.module.scss
@@ -51,6 +51,6 @@
   margin: 0 auto;
 }
 
-.tabs tabs-bordered{
-  font-size:100px;
+.tabs tabs-bordered {
+  font-size: 100px;
 }