From 3d05536334dc16a53770d8e35fa499aad628a586 Mon Sep 17 00:00:00 2001 From: snehalsankhe Date: Tue, 21 May 2024 18:20:45 +0530 Subject: [PATCH] added dashboard n modal screen --- ui/src/cmsData/projects.json | 59 ++- ui/src/common/assets/icons.tsx | 571 ++++++++++-------------------- ui/src/components/Modal/index.tsx | 4 +- ui/src/pages/Projects/index.scss | 18 + ui/src/pages/Projects/index.tsx | 5 +- ui/src/scss/App.scss | 24 +- ui/src/scss/_variables.scss | 1 + 7 files changed, 288 insertions(+), 394 deletions(-) diff --git a/ui/src/cmsData/projects.json b/ui/src/cmsData/projects.json index b85043d8..d74389fc 100644 --- a/ui/src/cmsData/projects.json +++ b/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" } -} +} \ No newline at end of file diff --git a/ui/src/common/assets/icons.tsx b/ui/src/common/assets/icons.tsx index 129e75e8..ac841d3e 100644 --- a/ui/src/common/assets/icons.tsx +++ b/ui/src/common/assets/icons.tsx @@ -4,8 +4,7 @@ export const NO_PROJECTS_SEARCH = ( height="300" viewBox="0 0 300 300" fill="none" - xmlns="http://www.w3.org/2000/svg" - > + xmlns="http://www.w3.org/2000/svg"> - + width="300" + height="300" + viewBox="0 0 300 300" + fill="none"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - - - - - - - - - - - - - - - - ); @@ -910,8 +724,7 @@ export const CARET_RIGHT = ( viewBox="0 0 10 18" fill="none" xmlns="http://www.w3.org/2000/svg" - name="CaretRight" - > + name="CaretRight"> { {((primaryCta && primaryCta?.title) ?? (secondaryCta && secondaryCta?.title)) && ( {secondaryCta && secondaryCta?.title && ( - )} {primaryCta && primaryCta?.title && ( - )} diff --git a/ui/src/pages/Projects/index.scss b/ui/src/pages/Projects/index.scss index 0b5f6c04..21c9d486 100644 --- a/ui/src/pages/Projects/index.scss +++ b/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; + } +} \ No newline at end of file diff --git a/ui/src/pages/Projects/index.tsx b/ui/src/pages/Projects/index.tsx index 6e101780..a8dc07f5 100644 --- a/ui/src/pages/Projects/index.tsx +++ b/ui/src/pages/Projects/index.tsx @@ -180,6 +180,7 @@ const Projects = () => { buttonType={cta?.theme} className="mt-10 no-project-add-btn" onClick={() => openModal()} + size="large" > {cta?.with_icon && ( @@ -187,6 +188,9 @@ const Projects = () => { {cta?.title} ))} +
+ {HTMLReactParser(jsonToHtml(emptystate?.help_text ?? {}))} +
)} @@ -208,7 +212,6 @@ const Projects = () => { ) }; - return (
diff --git a/ui/src/scss/App.scss b/ui/src/scss/App.scss index dd608e09..7b158dd5 100644 --- a/ui/src/scss/App.scss +++ b/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; } diff --git a/ui/src/scss/_variables.scss b/ui/src/scss/_variables.scss index e8e0e4ab..2943765e 100644 --- a/ui/src/scss/_variables.scss +++ b/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;