Feature stage sync (#67)

This pull request introduces several significant UI and workflow
improvements, focusing on navigation, theming, and utility enhancements.
The most substantial changes are a complete redesign of the navigation
bar for better mobile and desktop experience, a new GitHub workflow for
automated environment tagging, and a broad update to the application's
theme and utility classes.

**Navigation and Layout Improvements:**
*
[`components/AppNavbar.vue`](diffhunk://#diff-f5338ad3123fd5a2307b41d35b44ef3937f97b2cda5baae203d5dc80ba75109bL2-R411):
Completely redesigned the navigation bar to support a responsive
side-drawer menu on mobile devices, improved accessibility (keyboard
navigation, focus management, Escape key support), and enhanced user
profile/logout handling for both mobile and desktop. Updated branding
and navigation links for clarity and consistency.
*
[`components/AppLogo.vue`](diffhunk://#diff-a3b5a2eb30621c64c88a28b95b89e1365ae22a64bdf983e2e137aba7657405f7L2-R2):
Updated the logo image to use the new `tdei-logo.png` for consistent
branding.

**Theming and Utility Enhancements:**
* `assets/scss/theme.scss`, `assets/scss/main.scss`: Overhauled theme
variables with new brand colors, font families, and utility classes.
Added CSS variables for colors and fonts, improved autofill handling,
and added utility classes for common UI elements (headers, subtitles,
hints).
[[1]](diffhunk://#diff-3ca8bb2feea4e836c15314e7883fb708c1fbfac9be89b932659ac5be31b80823L6-R27)
[[2]](diffhunk://#diff-6e542e5567dc3568b6ef395995b5897822a3f74fa7e12afcb413bc89f4347fd3R3-R41)
[[3]](diffhunk://#diff-6e542e5567dc3568b6ef395995b5897822a3f74fa7e12afcb413bc89f4347fd3R75-R81)
[[4]](diffhunk://#diff-6e542e5567dc3568b6ef395995b5897822a3f74fa7e12afcb413bc89f4347fd3R102-R141)

**Workflow Automation:**
*
[`.github/workflows/tag.yml`](diffhunk://#diff-84dff8d1094ca39c02ac0e48d951ca22f4da29c76b50ae517f5bd2d50f94c2f6R1-R42):
Added a new GitHub Actions workflow to automatically update environment
tags (`dev`, `stage`, `prod`) when pull requests are merged into
`develop`, `staging`, or `production` branches.

**Component and UI Tweaks:**
*
[`components/DatasetTypeRadio.vue`](diffhunk://#diff-22e341fbd37362852438041432b32c9f56118cc6a4a423e1db60c575931ebad7L12-R12):
Changed dataset type radio button styles from `btn-outline-primary` to
`btn-outline-secondary` for better visual consistency with the new
theme.
[[1]](diffhunk://#diff-22e341fbd37362852438041432b32c9f56118cc6a4a423e1db60c575931ebad7L12-R12)
[[2]](diffhunk://#diff-22e341fbd37362852438041432b32c9f56118cc6a4a423e1db60c575931ebad7L23-R23)
*
[`components/AppSpinner.vue`](diffhunk://#diff-3e0e987214827beb4127b0ef553325bf67336549c3f44babee21a6f932bada0cL2-R5):
Minor markup adjustment for improved readability and accessibility.
*
[`components/AppImageViewer.vue`](diffhunk://#diff-6c814aa23949b1b55654ff0e34e7e3d974a5ef891952f1a949067897bef36bb4R1-R38):
Added a new wrapper component for image viewing with customizable
toolbar options.

Author: susrisha

.github/workflows/tag.yml

@@ -0,0 +1,42 @@
+# Whenever there is a pull request merged into the branches, create tag
+name: Update Environment Tag
+on:
+   pull_request:
+     types: [closed]
+     branches:
+       - develop
+       - staging
+       - production
+jobs:
+  update-tag:
+    if: github.event.pull_request.merged == true
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+        - name: Checkout code
+          uses: actions/checkout@v4
+          with:
+            fetch-depth: 1
+        - name: Get the current branch name
+          id: get_branch
+          run: |
+            TARGET_BRANCH="${{ github.event.pull_request.base.ref }}"
+            
+            if [ "$TARGET_BRANCH" = "develop" ]; then
+                echo "ENV_TAG=dev" >> $GITHUB_ENV
+            elif [ "$TARGET_BRANCH" = "staging" ]; then
+                echo "ENV_TAG=stage" >> $GITHUB_ENV
+            elif [ "$TARGET_BRANCH" = "production" ]; then
+                echo "ENV_TAG=prod" >> $GITHUB_ENV
+            else
+                echo "ENV_TAG=" >> $GITHUB_ENV
+            fi
+        - name: Force update tag
+          if: ${{ env.ENV_TAG != '' }}
+          run: |
+            git config user.name "github-actions[bot]"
+            git config user.email "github-actions[bot]@users.noreply.github.com"
+            echo "Targeting tag: ${{ env.ENV_TAG }}"
+            git tag -f $ENV_TAG
+            git push origin $ENV_TAG --force

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;