Project grid, list view pixel perfection

Author: Faiz

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

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

@@ -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,16 +190,15 @@ const projectRoute = computed(
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 1rem;
+  gap: 20px;
   padding: 0.9rem 1.2rem 1.3rem;
 }
 
 .project-card-title {
   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,16 +265,16 @@ 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;
 }
 
 .project-card-label {
   display: block;
   margin-bottom: 0.1rem;
-  color: rgba($secondary, 0.92);
-  font-size: 0.85rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 </style>

assets/scss/theme.scss

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

components/workspace-projects/ProjectCard.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;
 }
 </style>

components/workspace-projects/ProjectListRow.vue

@@ -13,7 +13,7 @@ export function useProjectDisplay(project: Ref<WorkspaceProject> | WorkspaceProj
 
   const taskSummary = computed(() =>
     progressPercent.value === 0
-      ? 'Not started'
+      ? 'Not Started'
       : `${completedTaskCount.value}/${projectRef.value.taskCount} Tasks Executed`,
   );
 

components/workspace-projects/StatusBadge.vue

@@ -71,16 +71,17 @@
             :aria-pressed="option.value === viewMode"
             @click="viewMode = option.value"
           >
-            <app-icon
-              :variant="option.icon"
-              size="20"
-              no-margin
+            <img
+              :src="option.icon"
+              :alt="option.label"
+              class="view-icon"
             />
             <span class="visually-hidden">{{ option.label }}</span>
           </button>
         </div>
 
         <span
+          v-if="isWorkspaceLead"
           class="workspace-projects-toolbar-divider"
           aria-hidden="true"
         />
@@ -208,6 +209,8 @@
 <script setup lang="ts">
 import { LoadingContext } from '~/services/loading';
 import { tdeiUserClient, workspaceProjectsClient, workspacesClient } from '~/services/index';
+import gridIcon from '~/assets/img/grid.svg';
+import listIcon from '~/assets/img/list.svg';
 
 import type {
   WorkspaceProjectsQuery,
@@ -270,8 +273,8 @@ const sortOptions: SelectOption[] = [
 ];
 
 const viewOptions: Array<{ icon: string; label: string; value: WorkspaceProjectView }> = [
-  { icon: 'grid_view', label: 'Grid view', value: 'grid' },
-  { icon: 'view_list', label: 'List view', value: 'list' },
+  { icon: gridIcon, label: 'Grid view', value: 'grid' },
+  { icon: listIcon, label: 'List view', value: 'list' },
 ];
 
 const statusOptions: SelectOption[] = [
@@ -411,7 +414,7 @@ onBeforeUnmount(() => {
 .workspace-projects-filters {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 20px;
   flex: 1;
   min-width: 0;
 }
@@ -473,15 +476,24 @@ onBeforeUnmount(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.8rem;
+  width: 2.4rem;
   height: 2.4rem;
   color: $secondary;
   background-color: #fff;
   border: 0;
 }
 
+.workspace-projects-view-button i.material-icons{
+  margin-top: 0px;
+}
+
+.workspace-projects-view-button .view-icon {
+    width: 16px;
+    height: 16px;
+}
+
 .workspace-projects-view-button-active {
-  background-color: $gray-200;
+  background-color: #EBEDF6;
 }
 
 .workspace-projects-toolbar-divider {
@@ -505,13 +517,12 @@ onBeforeUnmount(() => {
 .workspace-projects-list {
   gap: 0;
   border-top: 1px solid rgba($text-navy, 0.08);
-  border-bottom: 1px solid rgba($text-navy, 0.08);
 }
 
 .workspace-projects-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1.6rem 1.2rem;
+  gap: 25px 25px;
 }
 
 .workspace-projects-empty-state {