Project details page - pixel perfection

Author: Faiz

assets/scss/main.scss

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

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 {

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) {

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,17 +124,18 @@ 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,
 .project-detail-task-action-status strong {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
-  color: #1a1e3d;
-  font-size: 1.1rem;
+  color: $text-navy;
+  font-size: 1rem;
   font-weight: 700;
 }
 

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,15 +330,15 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   gap: 0.85rem;
   align-items: end;
   margin-bottom: 1rem;
+  margin-top: -10px;
 }
 
 .project-detail-task-search {
   position: relative;
 }
 
 .project-detail-task-search .form-control {
-  min-height: 2.85rem;
-  padding-right: 2.9rem;
+  border-radius: 6px;
 }
 
 .project-detail-task-search-icon {
@@ -366,15 +362,15 @@ 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 {
   position: relative;
   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 {