diff --git a/assets/img/grid.svg b/assets/img/grid.svg new file mode 100644 index 0000000..07c5754 --- /dev/null +++ b/assets/img/grid.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/assets/img/list.svg b/assets/img/list.svg new file mode 100644 index 0000000..f7174ed --- /dev/null +++ b/assets/img/list.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 56d4364..ec351a9 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -141,14 +141,14 @@ label > .form-select:first-child { /* TDEI Utility Classes */ .page-header-title { - font-family: var(--secondary-font-family); - font-size: 1.5rem; + font-family: var(--primary-font-family); + font-size: 20px; font-weight: 700; margin-bottom: 0.3125rem; } .page-header-subtitle { - font-family: var(--secondary-font-family); + font-family: var(--primary-font-family); font-size: 0.875rem; color: $tdei-secondary; } @@ -182,31 +182,30 @@ label > .form-select:first-child { .tdei-list-title { color: $text-navy; - font-family: var(--secondary-font-family); - font-size: 1rem; - font-weight: 600; + font-size: 16px; + font-weight: 700; line-height: 1.45; - letter-spacing: -0.01em; } .tdei-list-meta-label { - color: rgba($secondary, 0.92); - font-size: 0.95rem; + color: $text-secondary; + font-size: 14px; font-weight: 400; line-height: 1.25; } .tdei-list-meta-value { color: $text-navy; - font-size: 1rem; + font-size: 14px; font-weight: 600; line-height: 1.3; } .tdei-list-progress-copy { - color: rgba($secondary, 0.95); - font-size: 1rem; + color: $text-secondary; + font-size: 14px; line-height: 1.25; + font-weight: 600; } .tdei-list-progress-copy strong { @@ -229,7 +228,7 @@ label > .form-select:first-child { .tdei-inline-filter-label { color: $text-navy; font-size: 1rem; - font-weight: 600; + font-weight: 500; line-height: 1; } @@ -245,8 +244,8 @@ label > .form-select:first-child { align-items: center; justify-content: space-between; gap: 0.75rem; - padding: 0.625rem 0.9rem; - color: $secondary; + padding: 5px 10px; + color: $text-secondary; font-size: 1rem; line-height: 1.2; text-align: left; diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss index b13e953..5f0a14f 100644 --- a/assets/scss/theme.scss +++ b/assets/scss/theme.scss @@ -22,7 +22,8 @@ $tdei-cyan: #59c3c8; $purple-background-light: #f4f0fb; $purple-background-dark: #ddd2ee; $purple-background-medium: #ebe4f6; -$text-navy: #2f3661; +$text-navy: #1A1E3D; +$text-secondary: #5A607B; $dropdown-active-bg: #e2f0f8; $danger-red: #c7393a; diff --git a/components/project-wizard/steps/AreaOfInterestStep.vue b/components/project-wizard/steps/AreaOfInterestStep.vue index b3e7bfc..c8df468 100644 --- a/components/project-wizard/steps/AreaOfInterestStep.vue +++ b/components/project-wizard/steps/AreaOfInterestStep.vue @@ -43,8 +43,9 @@
Area of interest captured @@ -243,7 +244,6 @@ function onFileDrop(event: DragEvent) { .project-wizard-step-title { margin: 0; color: $text-navy; - font-family: var(--secondary-font-family); font-size: 1rem; font-weight: 700; line-height: 1.15; @@ -331,8 +331,7 @@ function onFileDrop(event: DragEvent) { .project-wizard-area-captured { display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; gap: 1rem; padding: 0.95rem 1rem; background: #f3fcf8; @@ -374,6 +373,7 @@ function onFileDrop(event: DragEvent) { color: $text-navy; background: #ffffff; border: 1px solid rgba($text-navy, 0.14); + width: fit-content; } .project-wizard-area-dropzone-shell { diff --git a/components/project-wizard/steps/ProjectDetailsStep.vue b/components/project-wizard/steps/ProjectDetailsStep.vue index d3969b0..6cf2e5b 100644 --- a/components/project-wizard/steps/ProjectDetailsStep.vue +++ b/components/project-wizard/steps/ProjectDetailsStep.vue @@ -143,7 +143,6 @@ function findField(fieldId: ProjectWizardDetailsFieldId): ProjectWizardDetailsFi .project-wizard-step-title { margin: 0; color: $text-navy; - font-family: var(--secondary-font-family); font-size: 1rem; font-weight: 700; line-height: 1.15; diff --git a/components/project-wizard/steps/ReviewStep.vue b/components/project-wizard/steps/ReviewStep.vue index e93d2fe..15d8e18 100644 --- a/components/project-wizard/steps/ReviewStep.vue +++ b/components/project-wizard/steps/ReviewStep.vue @@ -121,7 +121,6 @@ function formatRole(role: WorkspaceRole) { .project-wizard-step-title { margin: 0; color: $text-navy; - font-family: var(--secondary-font-family); font-size: 1rem; font-weight: 700; line-height: 1.15; @@ -137,7 +136,7 @@ function formatRole(role: WorkspaceRole) { .project-wizard-review-group { display: grid; - gap: 1.25rem; + gap: 25px; } .project-wizard-review-item { @@ -148,13 +147,12 @@ function formatRole(role: WorkspaceRole) { .project-wizard-review-item h3 { margin: 0; text-align: left; - font-family: Lato, var(--primary-font-family), sans-serif; - font-size: 1.125rem; + font-size: 1rem; font-style: normal; font-weight: 600; line-height: 1.375rem; letter-spacing: 0; - color: #1a1e3d; + color: $text-navy; opacity: 1; } @@ -162,12 +160,12 @@ function formatRole(role: WorkspaceRole) { margin: 0; text-align: left; font-family: Lato, var(--primary-font-family), sans-serif; - font-size: 1.125rem; + font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.625rem; letter-spacing: 0; - color: #5a607b; + color: $text-secondary; opacity: 1; } @@ -186,6 +184,10 @@ function formatRole(role: WorkspaceRole) { opacity: 1; } +.project-wizard-review-status span { + font-size: 1rem; +} + .project-wizard-review-validator-list { display: grid; gap: 0.55rem; @@ -227,9 +229,8 @@ function formatRole(role: WorkspaceRole) { } .project-wizard-review-instructions { - color: #5a607b; - font-family: Lato, var(--primary-font-family), sans-serif; - font-size: 1.125rem; + color: $text-secondary; + font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.625rem; diff --git a/components/project-wizard/steps/SettingsStep.vue b/components/project-wizard/steps/SettingsStep.vue index 4bfc209..2fd21ab 100644 --- a/components/project-wizard/steps/SettingsStep.vue +++ b/components/project-wizard/steps/SettingsStep.vue @@ -135,7 +135,7 @@ function onReviewRequiredChange(event: Event) { .project-wizard-step-settings { display: grid; - gap: 1.4rem; + gap: 30px; } .project-wizard-step-header, @@ -147,7 +147,6 @@ function onReviewRequiredChange(event: Event) { .project-wizard-step-title { margin: 0; color: $text-navy; - font-family: var(--secondary-font-family); font-size: 1rem; font-weight: 700; line-height: 1.15; diff --git a/components/workspace-project-details/ContributionsTab.vue b/components/workspace-project-details/ContributionsTab.vue index bcf3ee3..0994b24 100644 --- a/components/workspace-project-details/ContributionsTab.vue +++ b/components/workspace-project-details/ContributionsTab.vue @@ -89,10 +89,9 @@ const countCards = computed(() => { .project-detail-contribution-metric, .project-detail-contribution-count-card { - background: #ffffff; - border: 1px solid rgba($text-navy, 0.1); - border-radius: 1rem; - box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08); + background: #FCFCFF; + border: 1px solid #E2E2F5; + border-radius: 12px; } .project-detail-contribution-metric { @@ -114,9 +113,7 @@ const countCards = computed(() => { .project-detail-contribution-copy h3, .project-detail-contribution-count-card h3 { - margin: 0; - color: #1a1e3d; - font-family: var(--secondary-font-family); + color: $text-secondary; } .project-detail-contribution-copy h3 { @@ -126,8 +123,8 @@ const countCards = computed(() => { .project-detail-contribution-copy p, .project-detail-contribution-count-card p { - margin: 0.2rem 0 0; - color: #5a607b; + margin: 10px 0 0; + color: $text-navy; } .project-detail-contribution-copy p, @@ -142,8 +139,8 @@ const countCards = computed(() => { } .project-detail-contribution-count-card h3 { - font-size: 0.98rem; - font-weight: 500; + font-size: 16px; + font-weight: 600; } .project-detail-contribution-summary-card { diff --git a/components/workspace-project-details/RichTextContent.vue b/components/workspace-project-details/RichTextContent.vue index 094c575..be4c0e7 100644 --- a/components/workspace-project-details/RichTextContent.vue +++ b/components/workspace-project-details/RichTextContent.vue @@ -34,10 +34,9 @@ const safeHtml = computed(() => .project-detail-rich-text { overflow-x: auto; - color: #5a607b; - font-family: var(--primary-font-family); - font-size: 1.1rem; - line-height: 1.9; + color: $text-navy; + font-size: 16px; + line-height: 26px; } .project-detail-rich-text:deep(h3) { diff --git a/components/workspace-project-details/SelectedTaskBar.vue b/components/workspace-project-details/SelectedTaskBar.vue index 851db27..f2a1174 100644 --- a/components/workspace-project-details/SelectedTaskBar.vue +++ b/components/workspace-project-details/SelectedTaskBar.vue @@ -76,7 +76,7 @@ defineEmits<{ @import "~/assets/scss/theme.scss"; .project-detail-task-action-bar { - min-height: 6.6rem; + min-height: 90px; display: flex; align-items: center; justify-content: space-between; @@ -124,8 +124,9 @@ defineEmits<{ .project-detail-task-action-copy span, .project-detail-task-action-status span { - color: #707796; - font-size: 0.95rem; + color: $text-secondary; + font-size: 14px; + font-weight: 500; } .project-detail-task-action-copy strong, @@ -133,8 +134,8 @@ defineEmits<{ display: inline-flex; align-items: center; gap: 0.55rem; - color: #1a1e3d; - font-size: 1.1rem; + color: $text-navy; + font-size: 1rem; font-weight: 700; } diff --git a/components/workspace-project-details/TasksTab.vue b/components/workspace-project-details/TasksTab.vue index e1040c4..31731f7 100644 --- a/components/workspace-project-details/TasksTab.vue +++ b/components/workspace-project-details/TasksTab.vue @@ -317,11 +317,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { @import "~/assets/scss/theme.scss"; .project-detail-card { - padding: 1.5rem; background: #ffffff; - border: 1px solid rgba($text-navy, 0.1); - border-radius: 1rem; - box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08); } .project-detail-task-card { @@ -334,6 +330,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { gap: 0.85rem; align-items: end; margin-bottom: 1rem; + margin-top: -10px; } .project-detail-task-search { @@ -341,8 +338,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { } .project-detail-task-search .form-control { - min-height: 2.85rem; - padding-right: 2.9rem; + border-radius: 6px; } .project-detail-task-search-icon { @@ -366,7 +362,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { .project-detail-card :deep(.tdei-select-toggle), .project-detail-card :deep(.tdei-select-menu) { - border-radius: 0.75rem; + border-radius: 6px; } .project-detail-task-list-wrap { @@ -374,7 +370,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { display: grid; gap: 0; border: 1px solid rgba($text-navy, 0.08); - border-radius: 0.85rem; + border-radius: 10px; overflow: visible; } @@ -391,6 +387,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { font-size: 0.88rem; font-weight: 700; background: #f7f8fc; + border-radius: 10px 10px 4px 4px; } .project-detail-task-list { @@ -407,6 +404,10 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { border-top: 1px solid rgba($text-navy, 0.08); } +.project-detail-task-item:nth-last-child(1) { + border-radius: 0px 0px 10px 10px; +} + .project-detail-task-item-selected { background: rgba(214, 233, 250, 0.42); } @@ -447,8 +448,10 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { display: inline-flex; align-items: center; gap: 0.45rem; - color: #37405d; + color: $text-navy; line-height: 1.35; + font-weight: 500; + font-size: 15px; } .project-detail-task-status-swatch { @@ -476,9 +479,11 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) { .project-detail-task-value { display: inline-block; - color: #37405d; + color: $text-navy; line-height: 1.35; word-break: break-word; + font-weight: 500; + font-size: 15px; } .project-detail-task-mobile-label { diff --git a/components/workspace-projects/ProjectCard.vue b/components/workspace-projects/ProjectCard.vue index 2b0a3fe..2decf58 100644 --- a/components/workspace-projects/ProjectCard.vue +++ b/components/workspace-projects/ProjectCard.vue @@ -130,9 +130,9 @@ const projectRoute = computed( height: 100%; cursor: pointer; background-color: #ffffff; - border: 1px solid rgba($text-navy, 0.1); - border-radius: 0.8rem; - box-shadow: 0 0.35rem 0.9rem rgba($text-navy, 0.08); + box-shadow: 0px 3px 6px #0000000D; + border: 1px solid #E5E7F0; + border-radius: 10px; transition: transform 160ms ease, box-shadow 160ms ease, @@ -190,7 +190,7 @@ const projectRoute = computed( display: flex; flex: 1; flex-direction: column; - gap: 1rem; + gap: 20px; padding: 0.9rem 1.2rem 1.3rem; } @@ -198,8 +198,7 @@ const projectRoute = computed( display: -webkit-box; margin: 0; color: $text-navy; - font-family: var(--secondary-font-family); - font-size: 1.05rem; + font-size: 16px; font-weight: 700; line-height: 1.5; overflow: hidden; @@ -226,18 +225,18 @@ const projectRoute = computed( align-items: center; justify-content: space-between; gap: 1rem; - color: rgba($secondary, 0.95); - font-size: 0.95rem; + color: $text-secondary; + font-size: 14px; } .project-progress-copy strong { font-weight: 600; - color: $text-navy; } .project-progress-bar { height: 0.35rem; - background-color: #e5e8f3; + background-color: #EBEDF6; + margin-top: -10px; } .project-progress-bar .progress-bar { @@ -266,8 +265,8 @@ const projectRoute = computed( display: block; min-width: 0; color: $text-navy; - font-size: 0.95rem; - font-weight: 400; + font-size: 14px; + font-weight: 500; overflow-wrap: anywhere; word-break: break-word; } @@ -275,7 +274,7 @@ const projectRoute = computed( .project-card-label { display: block; margin-bottom: 0.1rem; - color: rgba($secondary, 0.92); - font-size: 0.85rem; + color: $text-secondary; + font-size: 14px; } diff --git a/components/workspace-projects/ProjectListRow.vue b/components/workspace-projects/ProjectListRow.vue index d4da197..cd7f3f3 100644 --- a/components/workspace-projects/ProjectListRow.vue +++ b/components/workspace-projects/ProjectListRow.vue @@ -101,7 +101,7 @@ const projectRoute = computed( grid-template-columns: minmax(0, 2.9fr) minmax(8.5rem, 1.1fr) minmax(12rem, 1.35fr) minmax(11rem, 1.2fr) minmax(15rem, 1.6fr) 2.25rem; gap: 1.5rem; align-items: start; - padding: 2.2rem 0; + padding: 25px 10px; cursor: pointer; border-bottom: 1px solid rgba($text-navy, 0.08); transition: background-color 160ms ease; @@ -146,7 +146,7 @@ const projectRoute = computed( .project-list-progress-cell { display: grid; align-content: start; - gap: 0.7rem; + gap: 15px; padding-top: 0.05rem; } diff --git a/components/workspace-projects/StatusBadge.vue b/components/workspace-projects/StatusBadge.vue index 80238a7..f78e73d 100644 --- a/components/workspace-projects/StatusBadge.vue +++ b/components/workspace-projects/StatusBadge.vue @@ -67,11 +67,12 @@ const badgeClasses = computed(() => ({ gap: 0.35rem; border: 1px solid currentColor; border-radius: 999px; - font-size: 0.875rem; - font-weight: 400; + font-size: 12px; + font-weight: 600; line-height: 1; - padding: 0.38rem 0.72rem; + padding: 6px 10px; white-space: nowrap; + width: fit-content; } .project-status-badge-icon { @@ -90,20 +91,20 @@ const badgeClasses = computed(() => ({ } .project-status-badge-completed { - background-color: #f6fcfa; - border-color: #d4e4dd; - color: #5c9f83; + background-color: #F6FCFA; + border-color: #D4E4DD; + color: #067A57; } .project-status-badge-in-progress { - background-color: #f4fbff; - border-color: #c8e0ee; - color: #5a97cc; + background-color: #F4FBFF; + border-color: #C8E0EE; + color: #1A74A8; } .project-status-badge-draft { - background-color: #fffcf5; + background-color: #FFFCF5; border-color: #e9e1d3; - color: #b88d41; + color: #8F6C1A; } diff --git a/composables/useProjectDisplay.ts b/composables/useProjectDisplay.ts index dce8afc..d7f7d68 100644 --- a/composables/useProjectDisplay.ts +++ b/composables/useProjectDisplay.ts @@ -13,7 +13,7 @@ export function useProjectDisplay(project: Ref | WorkspaceProj const taskSummary = computed(() => progressPercent.value === 0 - ? 'Not started' + ? 'Not Started' : `${completedTaskCount.value}/${projectRef.value.taskCount} Tasks Executed`, ); diff --git a/pages/workspace/[id]/projects/[projectId]/index.vue b/pages/workspace/[id]/projects/[projectId]/index.vue index d23af61..6664e8d 100644 --- a/pages/workspace/[id]/projects/[projectId]/index.vue +++ b/pages/workspace/[id]/projects/[projectId]/index.vue @@ -1076,8 +1076,7 @@ function escapeHtml(value: string) { display: flex; flex-direction: column; height: calc(100vh - #{$navbar-height}); - padding-top: 1rem !important; - padding-bottom: 1rem !important; + padding: 0px 0px !important; overflow: hidden; } @@ -1096,7 +1095,7 @@ function escapeHtml(value: string) { min-height: 0; background: #ffffff; border: 1px solid rgba($text-navy, 0.12); - border-radius: 1rem; + border-radius: 0px; overflow: hidden; } @@ -1116,9 +1115,7 @@ function escapeHtml(value: string) { .project-detail-hero { padding: 2.2rem 2.5rem 2rem; - background: - radial-gradient(circle at top left, rgba(244, 240, 251, 0.98), rgba(244, 240, 251, 0.7) 44%, rgba(244, 240, 251, 0.28) 100%), - linear-gradient(180deg, #faf8fe 0%, #f7f3fc 100%); + background: transparent linear-gradient(283deg, #EEEAFF 0%, #F9F4FF 100%) 0% 0% no-repeat padding-box; border-bottom: 1px solid rgba($text-navy, 0.08); } @@ -1127,8 +1124,9 @@ function escapeHtml(value: string) { flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.25rem; - color: #757d98; - font-size: 1rem; + color: #5A607B; + font-size: 14px; + font-weight: 500; } .project-detail-breadcrumbs a { @@ -1143,12 +1141,11 @@ function escapeHtml(value: string) { .project-detail-title { max-width: 44rem; margin: 0; - color: #1a1e3d; - font-family: var(--secondary-font-family); - font-size: clamp(1rem, 2vw, 2rem); + color: $text-navy; + font-size: 26px; font-weight: 600; - line-height: 1.18; - letter-spacing: -0.03em; + line-height: 1.4; + // letter-spacing: -0.03em; } .project-detail-title-row { @@ -1166,15 +1163,15 @@ function escapeHtml(value: string) { } .project-detail-edit-button { - width: 3rem; - height: 3rem; + width: 42px; + height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #4d158d; - background: rgba(255, 255, 255, 0.78); + background: #f1eeff; border: 1px solid rgba(77, 21, 141, 0.28); - border-radius: 0.75rem; + border-radius: 8px; box-shadow: 0 0.4rem 1rem rgba(77, 21, 141, 0.08); } @@ -1190,16 +1187,15 @@ function escapeHtml(value: string) { } .project-detail-activate-button { - min-width: 10.5rem; - min-height: 2.85rem; - padding-inline: 1.15rem; - flex-shrink: 0; - color: #ffffff; - font-size: 0.98rem; - font-weight: 700; - background: #4d158d; - border: 1px solid #4d158d; - border-radius: 0.6rem; + height: 42px; + padding: 0px 15px; + flex-shrink: 0; + color: #ffffff; + font-size: 0.98rem; + font-weight: 600; + background: #32006e; + border: 1px solid #32006e; + border-radius: 8px; } .project-detail-activate-button:hover:not(:disabled), @@ -1219,19 +1215,22 @@ function escapeHtml(value: string) { justify-content: space-between; gap: 1rem; margin-top: 2.3rem; - color: #5f647a; - font-size: 1.1rem; + color: $text-secondary; + font-size: 14px; + font-weight: 500; } .project-detail-progress-copy strong { - color: #5f647a; + color: $text-secondary; font-weight: 500; } .project-detail-progress-bar { - height: 0.45rem; + height: 10px; margin-top: 0.55rem; - background: #e4e7f5; + background: #fff; + border: 1px solid #D9DDF0; + border-radius: 20px; } .project-detail-progress-bar .progress-bar { @@ -1250,13 +1249,13 @@ function escapeHtml(value: string) { .project-detail-tab-link { position: relative; padding-bottom: 1rem; - color: #5a607b; - font-size: 1.1rem; + color: $text-secondary; + font-size: 1rem; text-decoration: none; } .project-detail-tab-link-active { - color: #1a1e3d; + color: $text-navy; font-weight: 700; } @@ -1278,13 +1277,16 @@ function escapeHtml(value: string) { .project-detail-card, .project-detail-copy-card { background: #ffffff; - border: 1px solid rgba($text-navy, 0.1); - border-radius: 1rem; - box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08); + // border: 1px solid rgba($text-navy, 0.1); + // border-radius: 1rem; + // box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08); } .project-detail-summary-card { - padding: 1.55rem; + padding: 20px; + border: 1px solid #DFE2EF; + border-radius: 1rem; + margin-bottom: 30px; } .project-detail-summary-grid { @@ -1294,32 +1296,31 @@ function escapeHtml(value: string) { } .project-detail-summary-item { - display: grid; - gap: 0.45rem; + display: flex; + gap: 15px; } .project-detail-summary-item span { - color: #1a1e3d; - font-size: 1.05rem; - font-weight: 700; + // color: $text-navy; + font-size: 16px; + font-weight: 600; + min-width: 120px; } .project-detail-summary-item strong { - color: #5a607b; - font-size: 1.05rem; + color: $text-secondary; + font-size: 16px; font-weight: 400; } .project-detail-copy-card { - margin-top: 1.35rem; - padding: 1.75rem; + margin-top: 0px; } .project-detail-copy-card h2 { - margin: 0 0 1.35rem; - color: #1a1e3d; - font-family: var(--secondary-font-family); - font-size: 1.4rem; + margin-bottom: 12px; + color: $text-navy; + font-size: 16px; font-weight: 700; line-height: 1.2; } diff --git a/pages/workspace/[id]/projects/create.vue b/pages/workspace/[id]/projects/create.vue index d880c70..506604c 100644 --- a/pages/workspace/[id]/projects/create.vue +++ b/pages/workspace/[id]/projects/create.vue @@ -680,21 +680,23 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) { @import "~/assets/scss/theme.scss"; .project-create-page { - height: calc(100vh - #{$navbar-height}); - padding-top: 1rem !important; - padding-bottom: 1rem !important; + height: 100%; + padding: 0px 0px; + padding-top: 0px !important; + padding-bottom: 0px !important; overflow: hidden; } .project-create-shell { - position: relative; + position: absolute; display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; - background: #a9d3e6; - border: 1px solid rgba($text-navy, 0.12); - box-shadow: $box-shadow; + background: #ffffff; overflow: hidden; + width: 100%; + top: 0px; + z-index: 9999; } .project-create-header { @@ -704,9 +706,9 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) { align-items: center; justify-content: space-between; gap: 1rem; - padding: 1.2rem 1.5rem; + padding: 15px 40px; background-color: #fff; - border-bottom: 1px solid rgba($text-navy, 0.1); + box-shadow: 0px 3px 6px #00000029; } .project-create-header-copy { @@ -719,9 +721,8 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) { margin: 0; padding-right: 1.45rem; color: $text-navy; - font-family: var(--secondary-font-family); - font-size: 1.15rem; - font-weight: 700; + font-size: 22px; + font-weight: 600; line-height: 1.2; border-right: 1px solid rgba($text-navy, 0.15); } @@ -733,13 +734,12 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) { } .project-create-workspace-label { - color: rgba($secondary, 0.95); - font-size: 0.95rem; + color: $text-secondary; + font-size: 14px; } .project-create-workspace-copy strong { - font-family: var(--secondary-font-family); - font-size: 0.95rem; + font-size: 16px; font-weight: 600; } diff --git a/pages/workspace/[id]/projects/index.vue b/pages/workspace/[id]/projects/index.vue index 30ec07e..ca1d27c 100644 --- a/pages/workspace/[id]/projects/index.vue +++ b/pages/workspace/[id]/projects/index.vue @@ -71,16 +71,17 @@ :aria-pressed="option.value === viewMode" @click="viewMode = option.value" > - {{ option.label }}