Feature task 3634 tdei theme (#54)

### DevBoard Task
https://dev.azure.com/TDEI-UW/TDEI/_workitems/edit/3634/

This PR applies TDEI brand theming across the application — updating
colours, typography, layout, and accessibility throughout.

### Visual changes
- **Navbar** — Redesigned with TDEI brand colour (`#32006e`), new
responsive mobile side-menu with slide-in animation, user profile
dropdown, and sticky positioning
- **Sign-in page** — Fully redesigned card layout with TDEI logo, styled
inputs, show/hide password toggle, and responsive mobile view
- **Dashboard** — Split-panel layout with scrollable workspace list and
sticky detail panel; workspace type icons added
- **Homepage** — New hero section with brand imagery and workspace type
icons (OSW, Pathways, Flex)
- **Buttons & links** — Replaced ad-hoc Bootstrap variants with
consistent utility classes (`tdei-primary-button`,
`tdei-secondary-button`, `tdei-primary-link`, `tdei-rounded-button`)

### Screenshots:
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 02 16 PM"
src="https://github.com/user-attachments/assets/acaf73e3-9bea-4259-9846-03c1021574c4"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 02 40 PM"
src="https://github.com/user-attachments/assets/e7c76520-9f88-4042-b3cf-c83e5977a500"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 06 00 PM"
src="https://github.com/user-attachments/assets/65b10d2d-6042-46b8-8c18-02804cc53c0d"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 08 21 PM"
src="https://github.com/user-attachments/assets/7db14bb2-4ce4-4716-be2f-d4b203ed8bcb"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 08 42 PM"
src="https://github.com/user-attachments/assets/10893743-643c-4d8d-8b29-12df3e01e80a"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 16 01 PM"
src="https://github.com/user-attachments/assets/3a33c87d-9b94-4c15-a46f-b3636a753631"
/>
<img width="1470" height="956" alt="Screenshot 2026-05-25 at 8 17 03 PM"
src="https://github.com/user-attachments/assets/4cbde4e3-9ff7-4577-911c-b523eceb3015"
/>



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Theme & Styling Updates

- Updated Bootstrap primary color from `#9b0092` to TDEI brand colour
`#32006e`
- Added new SCSS theme variables for TDEI brand colors including
`$brand-accent`, `$tdei-secondary`, `$tdei-blue`, `$tdei-green`,
`$tdei-cyan`, background shades, and `$text-navy`
- Expanded global styling in `main.scss` with webkit autofill
transitions, new CSS variable declarations in `:root`, and dropdown menu
active state styling
- Added "TDEI Utility Classes" section with page header/title/subtitle
helpers and typography utilities
- Introduced Google Fonts module (`@nuxtjs/google-fonts`) with Open Sans
and Montserrat font families

## Navigation & Navbar

- Refactored `AppNavbar.vue` from Bootstrap collapsed layout to custom
responsive design with sticky positioning
- Implemented mobile-only off-canvas side drawer using `b-collapse` with
click-to-dismiss backdrop
- Added responsive behavior tracking (`isMobileView` for viewport
≤768px) with automatic drawer closure on resize
- Integrated keyboard handling (Escape key to close drawer) and focus
management for accessibility
- Updated navbar styling with TDEI brand colors and responsive spacing
- Added mobile-specific user section and logout button in side drawer
- Hidden "Sign In" link for unauthenticated users (showing only the
brand)

## Authentication & Sign-in Page

- Redesigned `SigninForm.vue` with TDEI-branded auth card layout and
updated styling
- Changed password input from static to toggleable with visibility icon
button controlled by `showPassword` state
- Updated submit button to display dynamic state ("Signing In..." vs
"Sign In") based on loading state, replacing prior spinner template
- Implemented dedicated error rendering block displayed only when error
exists
- Improved error handling with stricter fetch-error type guard checking
`response.status` and `response.json()` function
- Refactored sign-in page (`pages/signin.vue`) to simplified markup with
centered flex layout and login background image

## Dashboard Layout & Components

- Refactored dashboard to split-panel layout with scrollable workspace
list on left and sticky details panel on right
- Updated `WorkspaceItem.vue` workspace picker card with type-specific
icons, formatted type labels, conditional status/role pills, and
responsive styling
- Added `selectedProjectGroupName` computed value for project group
display
- Explicitly typed `selectWorkspace` function parameter as `Workspace`
- Introduced new SCSS for flex split layout, responsive stacking, sticky
positioning, and custom scrollbars
- Updated `dashboard/Toolbar.vue` button styling: "Edit" uses primary
variant, "Review/Export/Settings" use outline-secondary

## Homepage Updates

- Redesigned homepage with new hero layout replacing prior centered
jumbo-content
- Added hero divider element and restructured hero content using
`hero-shell`, `hero-copy`, and `hero-actions` classes
- Made primary call-to-action conditional: routes to `/dashboard` when
authenticated, otherwise to `/signin`, with dynamic button label
- Updated `pages/index.vue` to import `tdeiClient` and expose auth state
- Revised SCSS replacing `.jumbo` styles with new hero-specific classes
and responsive breakpoint adjustments across lg/md/sm viewports

## Component Button & Link Standardization

- Standardized button styling across components:
- Changed outline buttons from `btn btn-outline-primary` to `btn
btn-outline-secondary` (DatasetTypeRadio, help page)
- Updated toolbar and modal buttons to use primary/secondary/danger
variants consistently
- Replaced `btn-dark` styling with appropriate primary/outline-secondary
variants in review, settings, and teams components
- Updated deletion confirmation button styling from outline-danger to
solid danger variant

## Accessibility & UX Improvements

- Added focus trap and keyboard handling in navbar for mobile menu
drawer
- Improved ARIA attributes and semantic HTML in refactored components
- Updated button `aria-label` in WorkspaceItem to include workspace ID
- Refined modal button configurations for better accessibility (e.g.,
custom `cancelClass` with `p-0`)
- Updated component formatting for improved readability and spacing

## Additional Changes

- Updated `AppLogo.vue` to use new TDEI logo (`tdei-logo.png` instead of
`icon.svg`)
- Modified Nuxt config to optimize dependency bundling for `BCollapse`
and `BNavbar` components
- Added `@nuxtjs/google-fonts` to devDependencies
- Updated `nuxt-loading-indicator` styling in default layout with
gradient color via CSS variables
- Minor SCSS restructuring and reformatting across multiple components
for consistency
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: cyrossignol

assets/img/bg_login.png

@@ -1,19 +1,44 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  transition: background-color 600000s, color 600000s;
+}
 @import "maplibre-gl/dist/maplibre-gl.css";
 @import "vue3-toastify/dist/index.css";
 
 :root {
-  --ws-create-color: $review-create-color;
-  --ws-modify-color: $review-modify-color;
-  --ws-delete-color: $review-delete-color;
+  --primary-font-family: "Open Sans", sans-serif;
+  --secondary-font-family: "Montserrat", sans-serif;
+  --brand-accent: #{$brand-accent};
+  --secondary-color: #{$tdei-secondary};
+  --text-navy: #{$text-navy};
+  --tdei-blue: #{$tdei-blue};
+  --tdei-green: #{$tdei-green};
+  --tdei-cyan: #{$tdei-cyan};
+  --purple-background-light: #{$purple-background-light};
+  --purple-background-dark: #{$purple-background-dark};
+  --purple-background-medium: #{$purple-background-medium};
+  --ws-create-color: #{$review-create-color};
+  --ws-modify-color: #{$review-modify-color};
+  --ws-delete-color: #{$review-delete-color};
 }
 
 html, body, #__nuxt {
   width: 100%;
   height: 100%;
 }
 
+body {
+  margin: 0;
+  font-family: var(--primary-font-family);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  min-height: 100vh;
+}
+
 /* Vue page transitions */
 .fade-enter-active, .fade-leave-active,
 .layout-enter-active, .layout-leave-active,
@@ -47,6 +72,13 @@ label > .form-select:first-child {
   box-shadow: $box-shadow;
 }
 
+.dropdown-item.active,
+.dropdown-item:active {
+  color: $text-navy;
+  text-decoration: none;
+  background-color: $dropdown-active-bg;
+}
+
 /* Review */
 
 .bg-create {
@@ -67,3 +99,43 @@ label > .form-select:first-child {
 .text-delete {
   color: #{darken($review-delete-color, 3%)};
 }
+
+/* TDEI Utility Classes */
+
+.page-header-title {
+  font-family: var(--secondary-font-family);
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 5px;
+}
+
+.page-header-subtitle {
+  font-family: var(--secondary-font-family);
+  font-size: 14px;
+  color: $tdei-secondary;
+}
+
+.tdei-bold-name {
+  font-size: 16px;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.tdei-name-desc {
+  font-size: 14px;
+  color: $tdei-secondary;
+}
+
+.tdei-hint-text {
+  font-size: 14px;
+  color: $tdei-secondary;
+  font-style: italic;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 20px;
+}
+

assets/img/flex-type.svg

@@ -3,14 +3,28 @@
 /* Bootstrap Customization */
 $border-radius: 0.15rem;
 $card-height: 100%;
-$primary: #9b0092;
+$primary: #32006e;
+$secondary: #5f647a;
+$btn-font-weight: 600;
 
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/mixins";
 
 $navbar-height: 58px;
 
+// TDEI brand colors
+$brand-accent: #4b2e83;
+$tdei-secondary: $secondary;
+$tdei-blue: #586ab5;
+$tdei-green: #479fa1;
+$tdei-cyan: #59c3c8;
+$purple-background-light: #f4f0fb;
+$purple-background-dark: #ddd2ee;
+$purple-background-medium: #ebe4f6;
+$text-navy: #2f3661;
+$dropdown-active-bg: #e2f0f8;
+
 $review-create-color: #39dbc0;
 $review-modify-color: #db950a;
 $review-delete-color: #cc2c47;

assets/img/osw-type.svg

@@ -1,4 +1,4 @@
 <template>
-  <img class="app-logo img-fluid" src="~/assets/img/icon.svg" alt="" />
+  <img class="app-logo img-fluid" src="~/assets/img/tdei-logo.png" alt="" />
 </template>