HMS-2584 fix: update margin top to the title

Update the margin top to the title of the wizard page, and clean-up some
custom styles defined which are not necessary anymore.

Signed-off-by: Alejandro Visiedo <[email protected]>

src/Routes/WizardPage/Components/PageReview/PageReview.scss

@@ -1,33 +1 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
-
-.empty-state-body-content {
-  margin-bottom: $ins-margin;
-}
-
-/*
-FIXME Add a solution that fit different widths 
-      so starting with some dimensions, the width: 50%
-      is not used, and a margin-right enough is added to
-      avoid the componing is hided by the 'Feedback'
-      button.
-*/
-.domain-type-select {
-  width: 50%;
-}
-
-.domain-item-margin-left {
-  margin-left: 16px;
-}
-
-.domain-name {
-  width: 50%;
-}
-
-.domain-description {
-  width: 50%;
-}
-
-.domain-page-3-list {
-  margin-left: 32px;
-  margin-right: 128px;
-}

src/Routes/WizardPage/Components/PageReview/PageReview.tsx

@@ -93,10 +93,11 @@ const PageReviewIpaServers = (props: PageReviewIpaServersProps) => {
  * @see {@link PageReviewProps} about the properties.
  * @see {@link PageReview} about the parent component.
  */
-const PageReviewIpa = (props: PageReviewProps) => {
+const PageReviewIpa = (props: PageReviewProps & { className?: string }) => {
   return (
     <>
       <DescriptionList
+        className={props.className}
         isHorizontal
         horizontalTermWidthModifier={{
           default: '12ch',
@@ -164,7 +165,9 @@ const PageReview = (props: PageReviewProps) => {
       <Title className="pt-u-mb-xl" headingLevel={'h2'}>
         Review
       </Title>
-      {props.domain.domain_type === 'rhel-idm' && <PageReviewIpa domain={props.domain} />}
+      {props.domain.domain_type === 'rhel-idm' && (
+        <PageReviewIpa domain={props.domain} className="pf-u-mt-xs pf-u-mt-sm pf-u-mt-md pf-u-mt-lg pf-u-mt-xl" />
+      )}
     </>
   );
 };

src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.scss

@@ -1,9 +1 @@
 @import '~@redhat-cloud-services/frontend-components-utilities/styles/variables';
-
-.domain-name {
-  width: 50%;
-}
-
-.domain-description {
-  width: 50%;
-}

src/Routes/WizardPage/Components/PageServiceDetails/PageServiceDetails.tsx

@@ -73,8 +73,8 @@ const PageServiceDetails = (props: PageServiceDetailsProps) => {
     <>
       <Form onSubmit={(e) => e.preventDefault()}>
         <Title headingLevel={'h2'}>Service Details</Title>
-        <FormGroup label="Service name" isRequired fieldId="register-domain-name">
-          <TextInput id="register-domain-name" className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl" value={title} onChange={onChangeTitle} />
+        <FormGroup label="Service name" isRequired fieldId="register-domain-name" className="pf-u-mt-xs pf-u-mt-sm pf-u-mt-md pf-u-mt-lg pf-u-mt-xl">
+          <TextInput id="register-domain-name" value={title} onChange={onChangeTitle} className="pf-u-w-100 pf-u-w-50-on-md pf-u-w-50-on-xl" />
         </FormGroup>
         <FormGroup label="Service description" fieldId="register-domain-description">
           <TextArea

src/Routes/WizardPage/Components/PageServiceRegistration/PageServiceRegistration.tsx

@@ -62,7 +62,7 @@ const PageServiceRegistration = (props: PageServiceRegistrationProp) => {
     <>
       <Title headingLevel={'h2'}>Register your directory and domain service</Title>
       <Form onSubmit={(e) => e.preventDefault()}>
-        <Alert title={alertTitle} variant="warning" isInline className="pf-u-mt-sm">
+        <Alert title={alertTitle} variant="warning" isInline className="pf-u-mt-xs pf-u-mt-sm pf-u-mt-md pf-u-mt-lg pf-u-mt-xl">
           Completing this step registers your directory and domain service, and cannot be undone from the wizard.{' '}
           <div className="pf-u-mt-md">
             <Button component="a" target="_blank" variant="link" isInline href={linkLearnMoreAbout}>