UI Pixel perfection: Project listing, Project details page and tabs, Project creation (#97)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary

- Refined project listing, project details, tabs, and project creation
page styling for pixel-perfect layouts.
- Updated typography, colors, spacing, borders, radii, shadows, progress
bars, cards, badges, filters, and responsive layout treatments.
- Added theme text color variables and standardized their use across
project and wizard components.
- Replaced project list view-toggle icons with SVG image assets and
adjusted toggle/grid styling.
- Improved project creation wizard step layouts and review styling.
- Updated zero-progress task summary capitalization from “Not started”
to “Not Started.”

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: shweta2101

assets/img/grid.svg

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

assets/img/list.svg

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

assets/scss/main.scss

@@ -43,8 +43,9 @@
       <div class="project-wizard-area-captured-copy">
         <app-icon
           variant="check_circle"
-          size="18"
+          size="20"
           no-margin
+          class="mt-1"
         />
         <div>
           <strong>Area of interest captured</strong>
@@ -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 {

assets/scss/theme.scss

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

components/project-wizard/steps/AreaOfInterestStep.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,26 +147,25 @@ 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;
 }
 
 .project-wizard-review-item p {
   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;

components/project-wizard/steps/ProjectDetailsStep.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;

components/project-wizard/steps/ReviewStep.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 {

components/project-wizard/steps/SettingsStep.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) {