Content Mapper New design changes

ui/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@contentstack/json-rte-serializer": "^2.0.5",
-    "@contentstack/venus-components": "1.5.1",
+    "@contentstack/venus-components": "^2.2.4",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -65,4 +65,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

ui/src/cmsData/content_mapping.json

@@ -142,7 +142,8 @@
     ],
     "_version": 3
   },
-  "search_placeholder": "Search",
+  "table_search_placeholder": "Search in Fields...",
+  "search_placeholder": "Search for content types...",
   "tags": [],
   "title": "Content Mapping",
   "updated_at": "2024-01-25T12:13:32.967Z",

ui/src/components/ContentMapper/index.scss

@@ -4,14 +4,19 @@
 .content-types-list-wrapper {
   display: flex;
   flex-direction: column;
-  max-height: calc(100vh - 173px);
-  max-width: 27%;
+  max-width: 25%;
   overflow: hidden;
   width: 100%;
 }
 .content-types-list-header {
+  background-color: $color-base-white-10;
   border-bottom: 1px solid $color-brand-secondary-lightest;
-  padding: 18px $space-12;
+  padding: $px-20 $space-12;
+  h2 {
+    color: $color-font-base;
+    font-size: $size-font-20;
+    font-weight: $font-weight-semi-bold;
+  }
   .Search {
     margin: $space-20 0 $space-12;
     width: 100%;
@@ -20,36 +25,56 @@
     }
   }
 }
-.ct-list {
-  list-style-type: none;
-  padding: 15px 0;
+.ct-search-wrapper {
+  border-bottom: 1px solid $color-brand-secondary-lightest;
+  padding: $px-8 $px-12;
+  .Search__v2 {
+    height: 2.5rem;
+    width: 100%!important;
+    .Search-input-show {
+      width: 100%!important;
+    }
+  }
+}
+.ct-list-wrapper {
+  height: calc(100vh - 375px);
   overflow-y: auto;
   overflow-x: hidden;
+}
+.ct-list {
+  border-right: 1px solid $color-brand-secondary-lightest;
+  list-style-type: none;
+  margin: 0 0 0 $px-12;
+  padding: 15px 12px 15px 0;
   li {
     align-items: center;
     border: 1px solid transparent;
     cursor: pointer;
     display: flex;
-    font-size: $size-font-large;
+    font-size: $size-font-xl;
     justify-content: space-between;
     line-height: normal;
     min-height: 42px;
-    padding: $space-10 35px;
+    padding: $px-8 $px-12;
     &.active-ct {
       background-color: $color-brand-white-base;
       border: 1px solid $color-brand-primary-base;
       color: $color-brand-primary-base;
     }
   }
 }
+.dropdown-align {
+  .Dropdown__menu--primary {
+    right: 0.25rem;
+  }       
+}
 .content-type-list {
   padding-left: 12px;
 }
 .content-types-fields-wrapper {
-  border-left: 1px solid $color-brand-secondary-lightest;
   display: flex;
   flex-direction: column;
-  max-width: 73%;
+  max-width: 75%;
   width: 100%;
   padding: 0px;
 }
@@ -72,12 +97,16 @@
       padding: 0 1.25rem;
     }
     .cms-field {
-      font-weight: $font-weight-semi-bold;
+      text-transform: capitalize;
     }
     .InstructionText {
+      font-size: $size-font-small;
       margin: 0;
     }
   }
+  .import-cta {
+    margin: 0;
+  }
 }
 .disabled-field {
   color: $color-font-disabled;
@@ -96,7 +125,6 @@
   flex-direction: column;
   margin-top: 0;
   margin-left: 0px;
-  // margin-bottom: 20px;
   width: 100%;
 }
 .saveButton {
@@ -105,10 +133,13 @@
 .btnWrapper {
   margin-left: 20px;
 }
-div .select .Select {
-  width: $px-50;
-  max-width: $px-50 !important;
-}
+div .select {
+  width: calc(100% - 30px);
+  .Select {
+    width: 100%;
+    max-width: 100% !important;
+  }
+} 
 div .table-row {
   display: flex;
   justify-content: space-between;