fix: user migration play test feedback issues [WPB-14770]

wireapp · Dec 3, 2024 · da0bc6d · da0bc6d
1 parent 3898eaa
commit da0bc6d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 17 deletions.
diff --git a/src/script/page/migration/ConfirmInvitation.tsx b/src/script/page/migration/ConfirmInvitation.tsx
@@ -99,6 +99,7 @@ export const ConfirmInvitation = () => {
           value={password}
           data-uie-name="enter-login-password"
           onBlur={() => trackEvent(SegmentationValue.PASSWORD_ENTERED)}
+          markInvalid={!!error}
         />
         <div css={forgotPasswordCss}>
           <Link href={ROUTE.PASSWORD_FORGOT} data-uie-name="go-forgot-password">

diff --git a/src/script/page/migration/TermsAcknowledgement.tsx b/src/script/page/migration/TermsAcknowledgement.tsx
@@ -135,17 +135,21 @@ export const TermsAcknowledgement = () => {
       <div css={{margin: '2.5rem 2rem', textAlign: 'left'}}>
         <Bold css={termsContentHeaderCss}>{t('termsPageRecommendationsHeader')}</Bold>
         <div css={termsContentBlueBox}>
-          <div css={{margin: '0.4rem 0'}}>
+          <div css={{marginTop: '5px'}}>
             <OutlinedCheckIcon />
           </div>
           <div css={termsContentBlueBoxContent}>{t('termsPageRecommendationItem1')}</div>
         </div>
         <div css={termsContentBlueBox}>
-          <div css={{margin: '0.4rem 0'}}>
+          <div css={{marginTop: '5px'}}>
             <OutlinedCheckIcon />
           </div>
 
-          <Link href={EXTERNAL_ROUTE.SUPPORT_BACKUP_HISTORY} target="_blank" css={{textDecoration: 'underline'}}>
+          <Link
+            href={EXTERNAL_ROUTE.SUPPORT_BACKUP_HISTORY}
+            target="_blank"
+            css={{textDecoration: 'underline', alignContent: 'center'}}
+          >
             <b css={termsContentBlueBoxContent}>{t('termsPageRecommendationItem2')}</b>
           </Link>
         </div>

diff --git a/src/script/page/migration/styles.ts b/src/script/page/migration/styles.ts
@@ -18,13 +18,13 @@
  */
 
 import {CSSObject} from '@emotion/react';
-import {COLOR_V2, QUERY, QueryKeys} from '@wireapp/react-ui-kit';
+import {COLOR_V2, media, QueryKeys} from '@wireapp/react-ui-kit';
 
 export const headerCss: CSSObject = {
   fontSize: '3rem',
   display: 'block',
   textAlign: 'center',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     fontSize: '2rem',
     marginTop: '1.5rem',
   },
@@ -37,19 +37,19 @@ export const loginSubHeaderCss: CSSObject = {
   display: 'block',
   textAlign: 'center',
 
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     lineHeight: '1.75rem',
     margin: '1rem 0 5rem 0',
     fontSize: '1rem',
   },
 };
 
 export const loginContainerCss: CSSObject = {
-  maxWidth: '32rem',
+  maxWidth: '40rem',
   textAlign: 'center',
   padding: '1.5rem',
   margin: '4rem auto',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     marginTop: '1.5rem',
     margin: '2rem auto',
   },
@@ -60,7 +60,7 @@ export const termsContainerCss: CSSObject = {
   textAlign: 'left',
   padding: '1.5rem 4rem',
   maxWidth: '55rem',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     marginTop: '1.5rem',
     margin: '0 auto',
     padding: '1.5rem 0',
@@ -70,8 +70,8 @@ export const termsContainerCss: CSSObject = {
 export const termsSubHeaderCss: CSSObject = {
   ...loginSubHeaderCss,
   margin: '1.8rem 0',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
-    ...(loginSubHeaderCss[QUERY[QueryKeys.TABLET_DOWN]] as CSSObject),
+  [media[QueryKeys.TABLET_DOWN]]: {
+    ...(loginSubHeaderCss[media[QueryKeys.TABLET_DOWN]] as CSSObject),
     margin: '1rem 2rem',
     fontSize: '1.25rem',
   },
@@ -81,7 +81,7 @@ export const termsContentHeaderCss: CSSObject = {
   fontSize: '1.25rem',
   marginBottom: '1rem',
   display: 'block',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     fontSize: '1rem',
   },
 };
@@ -91,15 +91,15 @@ export const termsListCss: CSSObject = {
   flexDirection: 'column',
   gap: '1rem',
   paddingLeft: '2rem',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     paddingLeft: '1.5rem',
   },
 };
 
 export const termsListItemCss: CSSObject = {
   fontSize: '1.25rem',
   lineHeight: '1.75rem',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     fontSize: '1rem',
   },
 };
@@ -115,7 +115,7 @@ export const termsContentWarningBox: CSSObject = {
 export const termsContentWarningBoxContent: CSSObject = {
   fontSize: '1.25rem',
   lineHeight: '1.75rem',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     fontSize: '1rem',
   },
 };
@@ -133,14 +133,14 @@ export const termsContentBlueBoxContent: CSSObject = {
   fontSize: '1.25rem',
   lineHeight: '1.75rem',
   textTransform: 'none',
-  [QUERY[QueryKeys.TABLET_DOWN]]: {
+  [media[QueryKeys.TABLET_DOWN]]: {
     fontSize: '1rem',
   },
 };
 
 export const forgotPasswordCss: CSSObject = {
   textAlign: 'right',
-  marginTop: '-0.25rem',
+  marginTop: '-1rem',
   marginBottom: '0.75rem',
   '& a:link': {
     color: COLOR_V2.BLACK,