From ccad0b51dabd75afe443217ba8543bd2a2bceda6 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 16:27:05 -0500
Subject: [PATCH 1/8] Refactor category and pathway rendering in Pathway.vue

---
 src/web/src/pages/Pathway.vue | 44 +++++++++++++++++------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index bbad23709..a9739a319 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -73,32 +73,29 @@
               <!-- Category Title  -->
               <b-row class="category-title">
                 <h3 class="m-1 ml-2">
-                  {{ categoryObj["Category Name"][0] }}
+                  <!-- Add v-b-toggle directive to the button -->
+                  <b-button v-b-toggle="'collapse-' + cleanId(categoryObj['Category Name'][0])" class="button" variant="outline-secondary">
+                    {{ categoryObj['Category Name'][0] }}
+                    <span class="chevron"></span>
+                  </b-button>
                 </h3>
               </b-row>
-              <!-- Pathway Names  -->
-              <b-row>
-                <div class="d-flex flex-column flex-grow-1">
-                  <!-- LOOP Through the Pathway Categories list -->
-                  <div
-                    v-for="pathway in categoryObj['Pathways']"
-                    :key="pathway['Name'][0]"
-                    role="tablist"
-                  >
-                    <div class="mt-1 mb-1 w-100">
-                      <!-- pathway button -->
-                      <b-button
-                        @click="ShowPath(pathway)"
-                        squared
-                        variant="light"
-                        class="pathway-button m-0 ml-1"
-                      >
-                        {{ pathway["Name"][0] }}
-                      </b-button>
+              <!-- Pathway Names inside a b-collapse -->
+              <b-collapse :id="'collapse-' + cleanId(categoryObj['Category Name'][0])">
+                <b-row>
+                  <div class="d-flex flex-column flex-grow-1">
+                    <!-- LOOP Through the Pathway Categories list -->
+                    <div v-for="pathway in categoryObj['Pathways']" :key="pathway['Name'][0]" role="tablist">
+                      <div class="mt-1 mb-1 w-100">
+                        <!-- pathway button -->
+                        <b-button @click="ShowPath(pathway)" squared variant="light" class="pathway-button m-0 ml-1">
+                          {{ pathway['Name'][0] }}
+                        </b-button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </b-row>
+                </b-row>
+              </b-collapse>
             </b-col>
           </b-row>
         </b-col>
@@ -282,6 +279,9 @@ export default {
     },
   },
   methods: {
+    cleanId(str) {
+      return str.replace(/\s+/g, '-');
+    },
     listAlphabet() {
       this.cateShow = false;
       this.alphShow = true;

From fe0840dfbb7b179a229edac3011c8ffb4652ce19 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 16:29:31 -0500
Subject: [PATCH 2/8] Refactor pathway alphabet list in Pathway.vue

---
 src/web/src/pages/Pathway.vue | 45 ++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 24 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index a9739a319..1f5d77128 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -107,41 +107,38 @@
           md="6"
           v-show="alphShow"
         >
-          <b-row
+            <b-row
             v-for="alphabetObj in alphCol"
             :key="alphabetObj['Category Name'][0]"
             class="categoryBox border m-2 mb-4"
-          >
+            >
             <b-col>
               <!-- Alphabet Title  -->
               <b-row class="category-title">
                 <h3 class="m-1 ml-2">
-                  {{ alphabetObj["Category Name"][0] }}
+                  <!-- Add v-b-toggle directive to the button -->
+                  <b-button v-b-toggle="'collapse-' + cleanId(alphabetObj['Category Name'][0])" class="button" variant="outline-secondary">
+                    {{ alphabetObj['Category Name'][0] }}
+                    <span class="chevron"></span>
+                  </b-button>
                 </h3>
               </b-row>
-              <!-- Pathway Names  -->
-              <b-row>
-                <div class="d-flex flex-column flex-grow-1">
-                  <!-- LOOP Through the Pathway Alphabet list -->
-                  <div
-                    v-for="pathway in alphabetObj['Pathways']"
-                    :key="pathway['Name'][0]"
-                    role="tablist"
-                  >
-                    <div class="mt-1 mb-1 w-100">
-                      <!-- pathway button -->
-                      <b-button
-                        @click="ShowPath(pathway)"
-                        squared
-                        variant="light"
-                        class="pathway-button m-0 ml-1"
-                      >
-                        {{ pathway["Name"][0] }}
-                      </b-button>
+              <!-- Pathway Names inside a b-collapse -->
+              <b-collapse :id="'collapse-' + cleanId(alphabetObj['Category Name'][0])">
+                <b-row>
+                  <div class="d-flex flex-column flex-grow-1">
+                    <!-- LOOP Through the Pathway Alphabet list -->
+                    <div v-for="pathway in alphabetObj['Pathways']" :key="pathway['Name'][0]" role="tablist">
+                      <div class="mt-1 mb-1 w-100">
+                        <!-- pathway button -->
+                        <b-button @click="ShowPath(pathway)" squared variant="light" class="pathway-button m-0 ml-1">
+                          {{ pathway['Name'][0] }}
+                        </b-button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </b-row>
+                </b-row>
+              </b-collapse>
             </b-col>
           </b-row>
         </b-col>

From b5a55032bbf4afec6bbc39d03bb3c9216e8d613d Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 16:43:55 -0500
Subject: [PATCH 3/8] Refactor pathway component layout and styles

---
 src/web/src/pages/Pathway.vue | 76 +++++++++++++++++++++++++++++------
 1 file changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index 1f5d77128..bf5005773 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -101,17 +101,17 @@
         </b-col>
 
         <!-- splitted Pathways in alphabet order -->
-        <b-col
-          v-for="(alphCol, index) in alphabetCols"
-          :key="`alphCol-${index}`"
-          md="6"
-          v-show="alphShow"
-        >
-            <b-row
-            v-for="alphabetObj in alphCol"
-            :key="alphabetObj['Category Name'][0]"
-            class="categoryBox border m-2 mb-4"
-            >
+          <b-col
+            v-for="(alphCol, index) in alphabetCols"
+            :key="`alphCol-${index}`"
+            md="6"
+            v-show="alphShow"
+          >
+          <b-row
+          v-for="alphabetObj in alphCol"
+          :key="alphabetObj['Category Name'][0]"
+          class="categoryBox border border-custom m-2 mb-4"
+          >
             <b-col>
               <!-- Alphabet Title  -->
               <b-row class="category-title">
@@ -314,6 +314,7 @@ export default {
 </script>
 
 <style>
+
 .gridContainer {
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -327,8 +328,57 @@ export default {
 
 .category-title {
   color: hsl(211, 100%, 60%);
-  background: rgba(108, 90, 90, 0.15);
-  border-bottom: rgba(108, 90, 90, 0.1), solid, 1px;
+}
+
+.button {
+  width: 100%;
+  text-align: left;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 500;
+  color: #3395ff !important;
+  text-decoration: none;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.button:hover {
+  background-color: rgba(108, 90, 90, 0.15);
+}
+
+.button:focus {
+  background-color: transparent;
+  box-shadow: none !important;
+  outline: none !important;
+
+}
+
+.button:active {
+  background-color: transparent !important;
+  color: #3395ff;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.chevron {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  margin-left: auto;
+  border-style: solid;
+  border-width: 0 5px 10px;
+  border-color: transparent transparent #3395ff;
+  transition: transform 0.3s;
+}
+
+/* Rotate the chevron when the button is active */
+.button[aria-expanded="true"] .chevron {
+  transform: rotate(180deg);
+  margin-left: auto;
 }
 
 .pathway-button {

From 4d2281d4bddf8ad222867d7e091b9f176a0a77b6 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 17:34:21 -0500
Subject: [PATCH 4/8] Refactor category and alphabet titles in Pathway.vue

---
 src/web/src/pages/Pathway.vue | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index bf5005773..7e374123c 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -67,19 +67,20 @@
           <b-row
             v-for="categoryObj in catCol"
             :key="categoryObj['Category Name'][0]"
-            class="categoryBox border m-2 mb-4"
+            class="categoryBox"
           >
             <b-col>
               <!-- Category Title  -->
               <b-row class="category-title">
-                <h3 class="m-1 ml-2">
+                <h2 class="m-1 ml-2">
                   <!-- Add v-b-toggle directive to the button -->
                   <b-button v-b-toggle="'collapse-' + cleanId(categoryObj['Category Name'][0])" class="button" variant="outline-secondary">
                     {{ categoryObj['Category Name'][0] }}
                     <span class="chevron"></span>
                   </b-button>
-                </h3>
+                </h2>
               </b-row>
+              <hr />
               <!-- Pathway Names inside a b-collapse -->
               <b-collapse :id="'collapse-' + cleanId(categoryObj['Category Name'][0])">
                 <b-row>
@@ -110,19 +111,20 @@
           <b-row
           v-for="alphabetObj in alphCol"
           :key="alphabetObj['Category Name'][0]"
-          class="categoryBox border border-custom m-2 mb-4"
+          class="categoryBox"
           >
             <b-col>
               <!-- Alphabet Title  -->
               <b-row class="category-title">
-                <h3 class="m-1 ml-2">
+                <h2 class="m-1 ml-2">
                   <!-- Add v-b-toggle directive to the button -->
                   <b-button v-b-toggle="'collapse-' + cleanId(alphabetObj['Category Name'][0])" class="button" variant="outline-secondary">
                     {{ alphabetObj['Category Name'][0] }}
                     <span class="chevron"></span>
                   </b-button>
-                </h3>
+                </h2>
               </b-row>
+              <hr />
               <!-- Pathway Names inside a b-collapse -->
               <b-collapse :id="'collapse-' + cleanId(alphabetObj['Category Name'][0])">
                 <b-row>
@@ -314,7 +316,6 @@ export default {
 </script>
 
 <style>
-
 .gridContainer {
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -324,22 +325,26 @@ export default {
 
 .categoryBox {
   text-align: center;
+  border: 0 !important;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .category-title {
   color: hsl(211, 100%, 60%);
+  margin-bottom: 10px;
 }
 
 .button {
   width: 100%;
-  text-align: left;
+  text-align: center;
   background-color: transparent;
   border: none;
   outline: none;
   cursor: pointer;
-  padding: 0;
-  margin: 0;
-  font-size: 2rem;
+  padding: 10px;
+  font-size: 1.5rem;
   font-weight: 500;
   color: #3395ff !important;
   text-decoration: none;

From 653b9936042c9497667f30e0eac652e082d87ab3 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 17:42:53 -0500
Subject: [PATCH 5/8] Refactor pathway button styling

---
 src/web/src/pages/Pathway.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index 7e374123c..a50e36ab8 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -89,7 +89,7 @@
                     <div v-for="pathway in categoryObj['Pathways']" :key="pathway['Name'][0]" role="tablist">
                       <div class="mt-1 mb-1 w-100">
                         <!-- pathway button -->
-                        <b-button @click="ShowPath(pathway)" squared variant="light" class="pathway-button m-0 ml-1">
+                        <b-button @click="ShowPath(pathway)" class="pathway-button m-0 ml-1">
                           {{ pathway['Name'][0] }}
                         </b-button>
                       </div>
@@ -133,7 +133,7 @@
                     <div v-for="pathway in alphabetObj['Pathways']" :key="pathway['Name'][0]" role="tablist">
                       <div class="mt-1 mb-1 w-100">
                         <!-- pathway button -->
-                        <b-button @click="ShowPath(pathway)" squared variant="light" class="pathway-button m-0 ml-1">
+                        <b-button @click="ShowPath(pathway)" class="pathway-button m-0 ml-1">
                           {{ pathway['Name'][0] }}
                         </b-button>
                       </div>
@@ -380,7 +380,6 @@ export default {
   transition: transform 0.3s;
 }
 
-/* Rotate the chevron when the button is active */
 .button[aria-expanded="true"] .chevron {
   transform: rotate(180deg);
   margin-left: auto;
@@ -388,8 +387,8 @@ export default {
 
 .pathway-button {
   display: inline-block;
-  background: white;
   border-style: none;
+  background-color: transparent;
   text-align: justify;
   width: 95%;
 }

From 50e902db13c38cb51df543f72de5e35e9bbdc0af Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 18:08:34 -0500
Subject: [PATCH 6/8] Refactor button styles in Pathway.vue

---
 src/web/src/pages/Pathway.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index a50e36ab8..86bf13a7d 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -4,26 +4,20 @@
 
     <!-- button to switch between alphabet order and category order -->
     <div style="float: left;" class="w-10">
-      <b-button
+      <b-button variant="primary"
         @click="listAlphabet()"
         style="
           margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
         "
       >
         List by Alphabet
       </b-button>
       <br />
-      <b-button
+      <b-button variant="primary"
         @click="listCate()"
         style="
-          margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
-        "
+        margin-top: 10px;
+      "
       >
         List by Category
       </b-button>

From 2bb1fa8671311a0a9c3aafc366b3a5b3fbb9c08f Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 18:17:52 -0500
Subject: [PATCH 7/8] Update background color in category box and title to fix
 bug

---
 src/web/src/pages/Pathway.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index 86bf13a7d..c077e765a 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -320,6 +320,7 @@ export default {
 .categoryBox {
   text-align: center;
   border: 0 !important;
+  background-color: transparent !important;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -328,6 +329,7 @@ export default {
 .category-title {
   color: hsl(211, 100%, 60%);
   margin-bottom: 10px;
+  background-color: transparent !important;
 }
 
 .button {

From 752a9bfdf002e4092b34e1b3536d103abba5fa96 Mon Sep 17 00:00:00 2001
From: Ethan <ethan2917@gmail.com>
Date: Fri, 8 Dec 2023 18:32:20 -0500
Subject: [PATCH 8/8] Update pathway page styles for light mode

---
 src/web/src/pages/Pathway.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index c077e765a..2188f9f9e 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -387,10 +387,12 @@ export default {
   background-color: transparent;
   text-align: justify;
   width: 95%;
+  color: black;
 }
 
 .pathway-button:hover {
   background: rgba(108, 90, 90, 0.15) !important;
+  color: black;
 }
 
 .courseInPath {