Feature task 3634 tdei theme

assets/scss/main.scss

@@ -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/scss/theme.scss

@@ -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;

components/AppLogo.vue

@@ -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>