Confirm: fix style

packages/client/src/pages/Confirm/sub-components/StyledConfirm.js

@@ -15,13 +15,16 @@ export const StyledPage = styled.div`
   @media ${mobile} {
     margin-top: 72px;
   }
+
+  .subtitle {
+    margin-bottom: 32px;
+  }
 `;
 
 export const StyledHeader = styled.div`
-  text-align: left;
-
   .title {
-    margin-bottom: 24px;
+    margin-bottom: 32px;
+    text-align: center;
   }
 
   .subtitle {
@@ -81,11 +84,7 @@ export const StyledBody = styled.div`
 
 export const ButtonsWrapper = styled.div`
   display: flex;
-  flex: 1fr 1fr;
   flex-direction: row;
   gap: 16px;
-
-  .button {
-    width: 100%;
-  }
+  width: 100%;
 `;

packages/client/src/pages/Confirm/sub-components/changeOwner.js

@@ -26,26 +26,25 @@ const ChangeOwnerForm = (props) => {
           <Text fontSize="23px" fontWeight="700" className="title">
             {greetingTitle}
           </Text>
-
-          <Text className="subtitle">
-            {t("ConfirmOwnerPortalTitle", { newOwner: "NEW OWNER" })}
-          </Text>
         </StyledHeader>
 
         <FormWrapper>
+          <Text className="subtitle">
+            {t("ConfirmOwnerPortalTitle", { newOwner: "NEW OWNER" })}
+          </Text>
           <ButtonsWrapper>
             <Button
-              className="button"
               primary
-              size="normal"
+              scale
+              size="medium"
               label={t("Common:SaveButton")}
               tabIndex={2}
               isDisabled={false}
               //onClick={this.onAcceptClick} // call toast with t("ConfirmOwnerPortalSuccessMessage")
             />
             <Button
-              className="button"
-              size="normal"
+              scale
+              size="medium"
               label={t("Common:CancelButton")}
               tabIndex={2}
               isDisabled={false}