diff --git a/assets/img/bg_login.png b/assets/img/bg_login.png new file mode 100644 index 0000000..54ab4bf Binary files /dev/null and b/assets/img/bg_login.png differ diff --git a/assets/img/flex-type.svg b/assets/img/flex-type.svg new file mode 100644 index 0000000..bf5e620 --- /dev/null +++ b/assets/img/flex-type.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/osw-type.svg b/assets/img/osw-type.svg new file mode 100644 index 0000000..714591d --- /dev/null +++ b/assets/img/osw-type.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/assets/img/pathways-type.svg b/assets/img/pathways-type.svg new file mode 100644 index 0000000..2edfaa0 --- /dev/null +++ b/assets/img/pathways-type.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/tdei-logo.png b/assets/img/tdei-logo.png new file mode 100644 index 0000000..b33898b Binary files /dev/null and b/assets/img/tdei-logo.png differ diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 46b42c0..34f6047 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -1,12 +1,29 @@ @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 { @@ -14,6 +31,14 @@ html, body, #__nuxt { 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; +} + diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss index 5df4fdf..4ea71c7 100644 --- a/assets/scss/theme.scss +++ b/assets/scss/theme.scss @@ -3,7 +3,9 @@ /* 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"; @@ -11,6 +13,18 @@ $primary: #9b0092; $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; diff --git a/components/AppLogo.vue b/components/AppLogo.vue index 539ca6f..8f8b50a 100644 --- a/components/AppLogo.vue +++ b/components/AppLogo.vue @@ -1,4 +1,4 @@ diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue index 38106c5..66776f0 100644 --- a/components/AppNavbar.vue +++ b/components/AppNavbar.vue @@ -1,51 +1,99 @@ @@ -53,19 +101,314 @@ import { tdeiClient } from '~/services/index' const auth = tdeiClient.auth +const mobileMenuOpen = ref(false) +const isMobileView = ref(false) +const toggleButtonRef = ref<{ $el: HTMLElement } | null>(null) + +watch(mobileMenuOpen, (isOpen) => { + if (!isOpen) { + nextTick(() => toggleButtonRef.value?.$el?.focus()) + } +}) + +function onKeydown(e: KeyboardEvent) { + if (e.key === 'Escape' && mobileMenuOpen.value && isMobileView.value) { + mobileMenuOpen.value = false + } +} + +function syncMobileView() { + if (typeof window === 'undefined') return + isMobileView.value = window.innerWidth < 768 + if (!isMobileView.value) { + mobileMenuOpen.value = false + } +} + +function closeOnMobile() { + if (isMobileView.value) { + mobileMenuOpen.value = false + } +} + +function logoutFromMobileMenu() { + mobileMenuOpen.value = false + auth.clear() + navigateTo('/') +} + +onMounted(() => { + syncMobileView() + window.addEventListener('resize', syncMobileView) + document.addEventListener('keydown', onKeydown) +}) + +onBeforeUnmount(() => { + window.removeEventListener('resize', syncMobileView) + document.removeEventListener('keydown', onKeydown) +}) - diff --git a/components/AppSpinner.vue b/components/AppSpinner.vue index 0c50a4c..f6b7341 100644 --- a/components/AppSpinner.vue +++ b/components/AppSpinner.vue @@ -1,5 +1,8 @@ diff --git a/components/DatasetTypeRadio.vue b/components/DatasetTypeRadio.vue index 1784906..1b612bb 100644 --- a/components/DatasetTypeRadio.vue +++ b/components/DatasetTypeRadio.vue @@ -9,7 +9,7 @@ autocomplete="off" value="osw" > - + - + diff --git a/components/SigninForm.vue b/components/SigninForm.vue index 7597d4c..8a9978f 100644 --- a/components/SigninForm.vue +++ b/components/SigninForm.vue @@ -1,81 +1,274 @@ + + diff --git a/components/dashboard/Toolbar.vue b/components/dashboard/Toolbar.vue index 86ed05c..d56b765 100644 --- a/components/dashboard/Toolbar.vue +++ b/components/dashboard/Toolbar.vue @@ -3,7 +3,7 @@ diff --git a/components/review/Toolbar.vue b/components/review/Toolbar.vue index 033505a..ee3d36a 100644 --- a/components/review/Toolbar.vue +++ b/components/review/Toolbar.vue @@ -5,7 +5,7 @@ #{{ props.item.id }}