diff --git a/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache b/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache index 34a46f691cd..1f8bd1ae3fe 100644 --- a/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache +++ b/packages/fxa-content-server/app/scripts/templates/connect_another_device.mustache @@ -1,4 +1,4 @@ -
+
{{#isFirefoxDesktop}}

{{#t}}Connect another device{{/t}}

{{/isFirefoxDesktop}} diff --git a/packages/fxa-content-server/app/scripts/templates/pair/failure.mustache b/packages/fxa-content-server/app/scripts/templates/pair/failure.mustache index eab518d65cf..5f17b07dfb2 100644 --- a/packages/fxa-content-server/app/scripts/templates/pair/failure.mustache +++ b/packages/fxa-content-server/app/scripts/templates/pair/failure.mustache @@ -1,4 +1,4 @@ -
+
diff --git a/packages/fxa-content-server/app/scripts/templates/pair/index.mustache b/packages/fxa-content-server/app/scripts/templates/pair/index.mustache index 06ee32c8511..8a3101116b5 100644 --- a/packages/fxa-content-server/app/scripts/templates/pair/index.mustache +++ b/packages/fxa-content-server/app/scripts/templates/pair/index.mustache @@ -1,5 +1,5 @@ -
+
{{#showSuccessMessage}}
+
{{#showCADHeader}}

{{#t}}Connect another device{{/t}}

diff --git a/packages/fxa-react/styles/flows.css b/packages/fxa-react/styles/flows.css index 212b8635a50..8ac33da6783 100644 --- a/packages/fxa-react/styles/flows.css +++ b/packages/fxa-react/styles/flows.css @@ -6,13 +6,8 @@ * applied after content-server no longer needs it */ /* Transparent border around card is for Windows HCM mode */ -/* Does not specify text-align */ -.card-base { - @apply relative w-full border border-transparent mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 pb-12 pt-9 mobileLandscape:shadow-card-grey-drop mb-6; -} - .card { - @apply card-base text-center; + @apply relative w-full border border-transparent mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 py-9 mobileLandscape:shadow-card-grey-drop mb-6; /* HACK until content-server no longer needs .card, otherwise component classes take precedence */ &.card-xl { diff --git a/packages/fxa-settings/.storybook/manager-head.html b/packages/fxa-settings/.storybook/manager-head.html index d04451a2221..59dd7fa2fac 100644 --- a/packages/fxa-settings/.storybook/manager-head.html +++ b/packages/fxa-settings/.storybook/manager-head.html @@ -1 +1,9 @@ + diff --git a/packages/fxa-settings/.storybook/preview-head.html b/packages/fxa-settings/.storybook/preview-head.html new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/packages/fxa-settings/.storybook/preview-head.html @@ -0,0 +1 @@ + diff --git a/packages/fxa-settings/src/components/AppLayout/index.tsx b/packages/fxa-settings/src/components/AppLayout/index.tsx index 258c0eab660..25a73b68314 100644 --- a/packages/fxa-settings/src/components/AppLayout/index.tsx +++ b/packages/fxa-settings/src/components/AppLayout/index.tsx @@ -15,14 +15,12 @@ type AppLayoutProps = { title?: string; children: React.ReactNode; widthClass?: string; - cardClass?: string; }; export const AppLayout = ({ title, children, widthClass, - cardClass = 'card', }: AppLayoutProps) => { const { l10n } = useLocalization(); @@ -53,7 +51,7 @@ export const AppLayout = ({
-
{children}
+
{children}
diff --git a/packages/fxa-settings/src/components/ButtonDownloadRecoveryKeyPDF/index.tsx b/packages/fxa-settings/src/components/ButtonDownloadRecoveryKeyPDF/index.tsx index 5192546a67a..5b61f98a23b 100644 --- a/packages/fxa-settings/src/components/ButtonDownloadRecoveryKeyPDF/index.tsx +++ b/packages/fxa-settings/src/components/ButtonDownloadRecoveryKeyPDF/index.tsx @@ -145,7 +145,7 @@ export const ButtonDownloadRecoveryKeyPDF = ({ <>
- +
{!hasLinkedAccountAndNoPassword && ( @@ -381,7 +381,7 @@ const Signin = ({ -
+
} -
- -
+ -

+

Enter the code that was sent to {email} within 5 minutes.

@@ -307,7 +305,7 @@ const ConfirmSignupCode = ({ }} /> -
+
<>

Code expired?

diff --git a/packages/fxa-settings/src/pages/Signup/index.stories.tsx b/packages/fxa-settings/src/pages/Signup/index.stories.tsx index fd705078a70..1a1f1fa6d66 100644 --- a/packages/fxa-settings/src/pages/Signup/index.stories.tsx +++ b/packages/fxa-settings/src/pages/Signup/index.stories.tsx @@ -16,12 +16,13 @@ import { } from './mocks'; import { SignupIntegration } from './interfaces'; import { SignupQueryParams } from '../../models/pages/signup'; -import { mockUrlQueryData } from '../../models/mocks'; +import { mockAppContext, mockUrlQueryData } from '../../models/mocks'; import { MONITOR_CLIENTIDS, POCKET_CLIENTIDS, } from '../../models/integrations/client-matching'; import { getSyncEngineIds } from '../../components/ChooseWhatToSync/sync-engines'; +import { AppContext } from '../../models'; export default { title: 'Pages/Signup', @@ -36,16 +37,18 @@ const storyWithProps = ( integration: SignupIntegration = createMockSignupOAuthWebIntegration() ) => { const story = () => ( - - - + + + + + ); return story; }; diff --git a/packages/fxa-settings/src/pages/Signup/index.tsx b/packages/fxa-settings/src/pages/Signup/index.tsx index ac786a40ffc..8703716b866 100644 --- a/packages/fxa-settings/src/pages/Signup/index.tsx +++ b/packages/fxa-settings/src/pages/Signup/index.tsx @@ -477,7 +477,7 @@ export const Signup = ({ name="age" label="How old are you?" inputMode="numeric" - className="text-start mb-4" + className="mb-4" pattern="[0-9]*" maxLength={3} onChange={() => { @@ -502,7 +502,7 @@ export const Signup = ({ GleanMetrics.registration.whyWeAsk()} diff --git a/packages/fxa-settings/src/pages/mocks.tsx b/packages/fxa-settings/src/pages/mocks.tsx index 269ceb272a6..5acf602a5eb 100644 --- a/packages/fxa-settings/src/pages/mocks.tsx +++ b/packages/fxa-settings/src/pages/mocks.tsx @@ -25,9 +25,10 @@ export const MOCK_AUTHPW = 'b5a61d1f7a6b1b762539bd85f783b65f635def1025c3f66fc51a438a68a77d6d'; export const MOCK_UNBLOCK_CODE = 'A1B2C3D4'; export const MOCK_RECOVERY_CODE = 'a1b2c3d4e5'; +export const PLACEHOLDER_IMAGE_URL = 'https://loremflickr.com/512/512'; export const MOCK_AVATAR_NON_DEFAULT = { id: 'abc123', - url: 'http://placekitten.com/512/512', + url: PLACEHOLDER_IMAGE_URL, }; export const MOCK_AVATAR_DEFAULT = { id: null, url: null }; export const MOCK_STORED_ACCOUNT = {