feat: CB-790 update Welcome page design

webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/WizardStepper.tsx

@@ -21,7 +21,7 @@ const styles = composes(
     wizard-stepper {
       composes: theme-background-surface theme-text-on-surface theme-border-color-background from global;
     }
-    actions, wizard-step {
+    actions {
       composes: theme-border-color-background from global;
     }
   `,
@@ -38,7 +38,7 @@ const styles = composes(
       flex-shrink: 0;
     }
 
-    actions, wizard-step {
+    actions {
       border-right: solid 1px;
     }
 
@@ -48,13 +48,13 @@ const styles = composes(
       }
     }
 
-    actions, wizard-text, wizard-step {
+    actions, wizard-text {
       display: flex;
       align-items: center;
       height: 28px;
     }
 
-    wizard-text, wizard-step {
+    wizard-text {
       padding: 0 16px;
     }
   `
@@ -83,7 +83,6 @@ export const WizardStepper = observer(function WizardStepper() {
           {translate(service.currentStepIndex === service.steps.length - 1 ? 'ui_stepper_finish' : 'ui_stepper_next')}
         </Button>
       </actions>
-      {service.stepsToFinish.length > 1 && <wizard-step as='div'>{service.finishedSteps.length} / {service.stepsToFinish.length}</wizard-step>}
       <wizard-text as='div'>{translate(service.currentStep?.configurationWizardOptions?.description || '')}</wizard-text>
     </wizard-stepper>
   );

webapp/packages/plugin-administration/src/ConfigurationWizard/Welcome/WelcomePage.tsx

@@ -6,57 +6,39 @@
  * you may not use this file except in compliance with the License.
  */
 
-import styled, { use, css } from 'reshadow';
+import styled, { css } from 'reshadow';
 
+import { BASE_CONTAINERS_STYLES, ColoredContainer, Container, Group, GroupItem } from '@cloudbeaver/core-blocks';
 import { Translate } from '@cloudbeaver/core-localization';
-import { useStyles, composes } from '@cloudbeaver/core-theming';
+import { useStyles } from '@cloudbeaver/core-theming';
 
-const styles = composes(
-  css`
-    layout-grid-cell {
-      composes: theme-background-surface theme-text-on-surface from global;
-    }
+const styles = css`
+  p {
+    line-height: 2;
+    white-space: pre-wrap;
+  }
 
-    layout-grid-cell {
-      composes: theme-border-color-background from global;
-    }
-  `,
-  css`
-    layout-grid {
-      width: 100%;
-      flex: 1;
-    }
-
-    layout-grid-inner {
-      min-height: 100%;
-    }
-
-    layout-grid-cell {
-      position: relative;
-      border: solid 1px;
-      padding: 16px 24px
-    }
-
-    p {
-      line-height: 2;
-    }
-
-    note {
-      composes: theme-typography--body2 from global;
-    }
-  `
-);
+  note {
+    composes: theme-typography--body2 from global;
+  }
+`;
 
 export const WelcomePage: React.FC = function WelcomePage() {
-  return styled(useStyles(styles))(
-    <layout-grid as="div">
-      <layout-grid-inner as="div">
-        <layout-grid-cell as='div' {...use({ span: 12 })}>
-          <h3><Translate token='administration_configuration_wizard_welcome_title' /></h3>
-          <p><Translate token='administration_configuration_wizard_welcome_message' /></p>
-          <note as='div'><Translate token='administration_configuration_wizard_welcome_note' /></note>
-        </layout-grid-cell>
-      </layout-grid-inner>
-    </layout-grid>
+  return styled(useStyles(styles, BASE_CONTAINERS_STYLES))(
+    <ColoredContainer wrap horizontal overflow parent>
+      <Container>
+        <Container>
+          <Group form noGap>
+            <GroupItem>
+              <h3><Translate token='administration_configuration_wizard_welcome_title' /></h3>
+            </GroupItem>
+            <GroupItem>
+              <p><Translate token='administration_configuration_wizard_welcome_message' /></p>
+              <note as='div'><Translate token='administration_configuration_wizard_welcome_note' /></note>
+            </GroupItem>
+          </Group>
+        </Container>
+      </Container>
+    </ColoredContainer>
   );
 };