From 4116a39497871cec3499fad97dddc0e0cfb9574b Mon Sep 17 00:00:00 2001
From: snehalsankhe <snehal.pimple@contentstack.com>
Date: Fri, 7 Jun 2024 11:41:50 +0530
Subject: [PATCH] Update code as per new design update

---
 ui/src/components/Card/card.scss        | 12 ++----------
 ui/src/components/Card/index.tsx        | 14 +++++++-------
 ui/src/components/MainHeader/index.scss |  3 +++
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/Card/card.scss b/ui/src/components/Card/card.scss
index b17545ddc..fa090c38a 100644
--- a/ui/src/components/Card/card.scss
+++ b/ui/src/components/Card/card.scss
@@ -64,31 +64,23 @@
   border: 1px solid $color-brand-secondary-lightest;
   border-radius: 8px;
   font-size: $size-font-large;
-  color: $color-black-2121;
+  color: $color-font-base;
   padding: 4px 8px;
   text-transform: capitalize;
   svg {
     margin-right: 5px;
   }
   &.draft {
-    border-color: $color-brand-draft-base;
-    background-color: $color-brand-draft-light;
-    svg {
-      stroke: $color-brand-draft-base;
-      fill: none;
-    }
+    background-color: $color-base-white-10;
   }
   &.completed {
     background-color: $color-brand-success-light;
-    border-color: $color-brand-success-base;
   }
   &.failed {
     background-color: $color-brand-fail-light;
-    border-color: $color-brand-fail-base;
   }
   &.pending {
     background-color: $color-brand-attention-light;
-    border-color: $color-brand-attention-base;
   }
 }
 .ProjectCard__stats-Title {
diff --git a/ui/src/components/Card/index.tsx b/ui/src/components/Card/index.tsx
index a2acbb4ae..d8b316ccc 100644
--- a/ui/src/components/Card/index.tsx
+++ b/ui/src/components/Card/index.tsx
@@ -25,12 +25,12 @@ const CardList = ({ project }: ProjectType) => {
   };
   const iconMapping: { [key: string]: string } = {
     '0': 'Information',
-    '1': 'WarningBold',
-    '2': 'WarningBold',
-    '3': 'WarningBold',
-    '4': 'WarningBold',
-    '5': 'CheckCircle',
-    '6': 'CloseBorder',
+    '1': 'Warning',
+    '2': 'Warning',
+    '3': 'Warning',
+    '4': 'Warning',
+    '5': 'CheckCircleDark',
+    '6': 'Close',
   };
   const statusClassMapping: { [key: string]: string } = {
     '0': 'draft',
@@ -75,7 +75,7 @@ const CardList = ({ project }: ProjectType) => {
                 <div className="ProjectCard__unit">
                   <span className="ProjectCard__stats-Title">Project Status</span>
                   <div className={`ProjectCard__stats-category ${statusClass}`}>
-                    {icon && <Icon size="small" icon={icon} version="v2" />}
+                    {icon && <Icon size="mini" icon={icon} version="v2" />}
                     {statusText}
                   </div>
                 </div>
diff --git a/ui/src/components/MainHeader/index.scss b/ui/src/components/MainHeader/index.scss
index 20aea4986..b6dca57e1 100644
--- a/ui/src/components/MainHeader/index.scss
+++ b/ui/src/components/MainHeader/index.scss
@@ -34,6 +34,9 @@
   .organisationWrapper:focus {
     box-shadow: 0 0 1px $color-brand-primary-base, 0 0 0 4px #bbb4f4;
   }
+  .Dropdown-wrapper {
+    padding: 0 18px;
+  }
   .Dropdown__header__value {
     overflow: visible;
     line-height: 1.2;