Merge pull request #674 from bcgov/sam-student-profile

Fix users needing to click on link text in header navbar instead of just anywhere on the button

Author: shaunlumbcgov

frontend/src/assets/css/global.css

@@ -149,10 +149,13 @@ th {
 .v-table > .v-table__wrapper > table > tbody > tr > td, .v-table > .v-table__wrapper > table > thead > tr > th {
   padding: var(--v-table-padding);
 }
-.router-link-active{
+.router-link-active, .v-btn--active:not(.v-btn--disabled) {
   font-weight: bold;
   color: rgb(var(--v-theme-bcGovBlue));
 }
+.v-btn--active .v-btn__overlay {
+  background-color: transparent;
+}
 .bg-primary .v-btn.v-tab, .bg-bcGovLightGrey .v-btn.v-tab {
   border-radius: 4px 4px 0 0;
   margin: 2px 1px 0 1px;

frontend/src/components/Header/BCHeader.vue

@@ -72,26 +72,28 @@
           :key="link.id"
           class="text-none"
           size="small"
+          :to="link.route"
         >
-          <router-link :to="link.route">
-            {{ link.title }}
-          </router-link>
+          {{ link.title }}
         </v-btn>
-        <v-btn v-if="!profile.pen" size="small" class="text-none">
-          <a
-            id="profile-route"
-            class="text-decoration-none text-disabled"
-            :disabled="true"
-            >Profile (Student Not Loaded)</a
-          >
+        <v-btn
+          v-if="!profile.pen"
+          id="profile-route"
+          size="small"
+          disabled
+          class="text-none"
+          to="#"
+        >
+          Profile (Student Not Loaded)
         </v-btn>
-        <v-btn size="small" v-else>
-          <router-link
-            :to="`/student-profile/${profile.studentID}`"
-            id="profile-route"
-            class="text-none"
-            >Profile ({{ profile.pen }})</router-link
-          >
+        <v-btn
+          id="profile-route"
+          size="small"
+          :to="`/student-profile/${profile.studentID}`"
+          class="text-none"
+          v-else
+        >
+          Profile ({{ profile.pen }})
         </v-btn>
         <v-spacer />
         <div class="form-group top-search mb-0">
@@ -267,8 +269,10 @@ export default {
   border-right: 1px solid
     rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
   border-radius: 0;
+  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
+  text-decoration: none !important;
 }
-:deep(.header-nav .v-btn):hover {
+:deep(.header-nav .v-btn .v-btn__content):hover {
   background-color: transparent;
   text-decoration: underline;
   border-radius: 2px;
@@ -282,10 +286,6 @@ export default {
 :deep(.header-nav .v-btn):last-of-type {
   border-right: none;
 }
-:deep(.header-nav .v-btn a) {
-  color: rgba(var(--v-theme-on-surface-light), var(--v-high-emphasis-opacity));
-  text-decoration: none !important;
-}
 :deep(#header-pen-search) {
   padding: 4px 16px;
   min-height: 0;