added dashboard n modal screen

ui/src/cmsData/projects.json

@@ -34,7 +34,6 @@
     ],
     "description": {
       "uid": "c876d3d577d549a99b3987a0ed5283c0",
-      "_version": 7,
       "attrs": {},
       "children": [
         {
@@ -47,15 +46,63 @@
           "uid": "5ff5db2c09b54cf994ac9c0684d9a9eb",
           "children": [
             {
-              "text": "Contentstack Migration allows you to migrate content from other CMS to Contentstack."
+              "text": "Let's get started on streamlining your content migration process! Simply follow the steps and unlock a seamless transfer experience."
+            }
+          ]
+        },
+        {
+          "type": "p",
+          "attrs": {
+            "style": {},
+            "redactor-attributes": {},
+            "dir": "ltr"
+          },
+          "uid": "9ecb9e032e8844f0be6414dd13e318a4",
+          "children": [
+            {
+              "text": "Happy migrating!"
             }
           ]
         }
       ],
-      "type": "doc"
+      "type": "doc",
+      "_version": 12
     },
     "heading": "Welcome to Contentstack Migrations",
-    "help_text": "",
+    "help_text": {
+      "type": "doc",
+      "attrs": {},
+      "uid": "2444ef393da042808311f805cea774b1",
+      "children": [
+        {
+          "type": "p",
+          "attrs": {},
+          "uid": "cc8ad415b9864b9ba32255c45f7aadd0",
+          "children": [
+            {
+              "text": "New to Migration? Visit our "
+            },
+            {
+              "uid": "14208d06df0e46c3b7f1d37d99dcfc3a",
+              "type": "a",
+              "attrs": {
+                "url": "https://www.contentstack.com/docs/",
+                "target": "_blank"
+              },
+              "children": [
+                {
+                  "text": "documentation"
+                }
+              ]
+            },
+            {
+              "text": " site to learn more."
+            }
+          ]
+        }
+      ],
+      "_version": 11
+    },
     "empty_search_description": {
       "uid": "911e7fc98c954b72ba0cfeea4a0737d1",
       "_version": 7,
@@ -94,11 +141,11 @@
     },
     "secondary_cta": {
       "open_in_new_tab": false,
-      "theme": "secondary",
+      "theme": "light",
       "title": "Cancel",
       "url": "",
       "with_icon": false
     },
     "title": "Create New Project"
   }
-}
+}

ui/src/components/Modal/index.tsx

@@ -186,13 +186,13 @@ const Modal = (props: ProjectModalProps) => {
                 {((primaryCta && primaryCta?.title) ?? (secondaryCta && secondaryCta?.title)) && (
                   <ButtonGroup>
                     {secondaryCta && secondaryCta?.title && (
-                      <Button buttonType={secondaryCta?.theme} onClick={() => closeModal()}>
+                      <Button buttonType={secondaryCta?.theme} onClick={() => closeModal()} size="large" className="baseColorButton">
                         {secondaryCta?.title}
                       </Button>
                     )}
 
                     {primaryCta && primaryCta?.title && (
-                      <Button type="submit" buttonType={primaryCta?.theme} disabled={!inputValue}>
+                      <Button type="submit" buttonType={primaryCta?.theme} disabled={!inputValue} size="large">
                         {primaryCta?.title}
                       </Button>
                     )}

ui/src/pages/Projects/index.scss

@@ -22,3 +22,21 @@
     }
   }
 }
+.EmptyState__description {
+  p {
+    color: $color-font-base;
+  }
+}
+
+.helpText {
+  font-size: 14px;
+  padding-top: 30px;
+}
+.EmptyStateWrapper {
+  .EmptyState {
+    max-width: 35rem !important;
+  }
+  .EmptyState__title {
+    padding-top: 15px;
+  }
+}

ui/src/pages/Projects/index.tsx

@@ -180,13 +180,17 @@ const Projects = () => {
                   buttonType={cta?.theme}
                   className="mt-10 no-project-add-btn"
                   onClick={() => openModal()}
+                  size="large"
                 >
                   {cta?.with_icon && (
                     <Icon icon="Plus" version="v2" size="small" fill="white" stroke="white" />
                   )}
                   {cta?.title}
                 </Button>
               ))}
+              <div className='helpText'>
+                {HTMLReactParser(jsonToHtml(emptystate?.help_text ?? {}))}
+              </div>
           </EmptyState>
         )}
 
@@ -208,7 +212,6 @@ const Projects = () => {
       </div>
     )
   };
-
   return (
     <div className="layout-container projects-landing">
       <PageLayout content={content} header={header} type="card" />

ui/src/scss/App.scss

@@ -349,15 +349,27 @@ h2 {
   .ReactModal__Content {
     .ReactModal__Content__header h3 {
       color: $color-black-2121;
-      font-weight: bold;
+      font-weight: 600;
+    }
+    .FieldLabel {
+      .FieldLabel__required-text {
+        color: $color-stepper-title !important;
+      }
+    }
+    input, textarea {
+      color: $color-base-black-base;
+    }
+    ::placeholder {
+      color: $color-placeholder !important;
+    }
+    .ReactModal__Content__footer .Button {
+      line-height: 24px;
+    }
+    .baseColorButton {
+      color: $color-brand-primary-base;
     }
   }
 }
-.ReactModal__Content__footer .Button {
-  font-size: 1rem;
-  line-height: 100%;
-}
-
 ::-webkit-input-placeholder {
   color: $color-black-2121 !important;
 }

ui/src/scss/_variables.scss

@@ -28,6 +28,7 @@ $color-font-disabled: rgba(160, 174, 192, 0.5);
 $color-font-gray: #637392;
 $color-black-2121: #212121;
 $color-black-222: #222222;
+$color-placeholder: #767676;
 
 $font-family-primary: 'Inter', sans-serif;
 $font-family-secondary: 'Montserrat', sans-serif;