style(settings): General style updates

Because: * Switching design to text-start default instead of text-center * Some images were cut off on mobile This commit: * Update style for AppLayout * Update image styling * Various tweaks to accomodate change to text-start * Set size for Mozilla logo in Storybook sidebar * Replace placeholder image used in storybooks * Increase spacing below primary buttons Closes #FXA-10613
mozilla · Nov 14, 2024 · 50b350f · 50b350f
1 parent 6a04b30
commit 50b350f
Show file tree

Hide file tree

Showing 81 changed files with 168 additions and 167 deletions.
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
@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   {{#isFirefoxDesktop}}
     <h1 class="text-base text-grey-400" id="fxa-connect-another-device-header">{{#t}}Connect another device{{/t}}</h1>
   {{/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
@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   <section>
     <div class="error"></div>
     <div class="success"></div>

diff --git 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 @@
 
-<div class="card-base">
+<div class="card">
   <header class="relative">
     {{#showSuccessMessage}}
       <div id="fxa-connected-heading"

diff --git a/packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache b/packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache
@@ -1,4 +1,4 @@
-<div class="card-base">
+<div class="card">
   {{#showCADHeader}}
     <header>
       <h1 class="mb-5 text-grey-400 text-base">{{#t}}Connect another device{{/t}}</h1>

diff --git 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
@@ -1 +1,9 @@
 <link rel="shortcut icon" href="./favicon.ico" />
+<style>
+  /* Adjust the max size for the brand image */
+  .sidebar-container img {
+    max-width: 200px; /* Customize max width */
+    max-height: 50px; /* Customize max height */
+    object-fit: contain;
+  }
+</style>
diff --git a/packages/fxa-settings/.storybook/preview-head.html 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
@@ -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 = ({
         </header>
         <main className="mobileLandscape:flex mobileLandscape:items-center mobileLandscape:flex-1">
           <section>
-            <div className={classNames(cardClass, widthClass)}>{children}</div>
+            <div className={classNames('card', widthClass)}>{children}</div>
           </section>
         </main>
       </div>

diff --git 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 = ({
     <>
       <FtlMsg id="recovery-key-download-button-v3">
         <button
-          className="cta-primary cta-xl w-full"
+          className="cta-primary cta-xl w-full mt-4"
           onClick={async () => {
             logViewEvent(`flow.${viewName}`, `recovery-key.download-option`);
             await downloadFile();

diff --git a/packages/fxa-settings/src/components/ChooseWhatToSync/index.tsx b/packages/fxa-settings/src/components/ChooseWhatToSync/index.tsx
@@ -32,16 +32,14 @@ const ChooseWhatToSync = ({
   return (
     <>
       <FtlMsg id="choose-what-to-sync-prompt-2">
-        <h2 className="font-normal mb-4 text-base text-center">
-          Choose what to sync
-        </h2>
+        <h2 className="mb-2 font-bold">Choose what to sync</h2>
       </FtlMsg>
-      <ul className="flex flex-wrap text-start text-sm mb-4 ltr:mobileLandscape:ml-6 rtl:mobileLandscape:mr-6">
+      <ul className="flex flex-wrap text-sm mb-4">
         {offeredSyncEngineConfigs.map((engineConfig) => {
           return (
             <li
               key={engineConfig.id}
-              className="flex-50% rtl:mobileLandscape:pr-6 ltr:mobileLandscape:pl-6 rtl:pr-3 ltr:pl-3"
+              className="basis-1/2 mobileLandscape:ps-4 pe-2"
             >
               <FtlMsg id={engineConfig.ftlId} attrs={{ label: true }}>
                 <InputCheckboxBlue

diff --git a/packages/fxa-settings/src/components/DataBlock/index.tsx b/packages/fxa-settings/src/components/DataBlock/index.tsx
@@ -69,11 +69,10 @@ export const DataBlock = ({
       <div
         className={classNames(
           'relative flex font-mono text-center text-sm font-bold text-black bg-gradient-to-tr from-blue-600/10 to-purple-500/10 border border-transparent',
-          valueIsArray ? 'max-w-sm py-4' : 'max-w-lg',
-          valueIsArray && !isInline && ' py-5',
+          valueIsArray ? 'max-w-sm' : 'max-w-lg',
           isInline
             ? 'flex-nowrap w-full rounded py-2 px-3'
-            : 'flex-wrap mb-8 rounded-lg px-6'
+            : 'flex-wrap mb-8 rounded-lg px-6 py-4'
         )}
         data-testid={dataTestId}
         {...{ onCopy }}

diff --git a/packages/fxa-settings/src/components/FormPassword/index.stories.tsx b/packages/fxa-settings/src/components/FormPassword/index.stories.tsx
@@ -8,7 +8,7 @@ import { LocationProvider } from '@reach/router';
 import FormPassword from '.';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import { MockSettingsAppLayout } from '../Settings/AppLayout/mocks';
+import { MockSettingsAppLayout } from '../Settings/SettingsLayout/mocks';
 
 export default {
   title: 'Components/FormPassword',

diff --git a/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx b/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/index.tsx
@@ -55,7 +55,7 @@ export const InlineRecoveryKeySetupCreate = ({
         <HeadingPrimary>Secure your account</HeadingPrimary>
       </FtlMsg>
 
-      <RecoveryKeyImage className="my-6 mx-auto" />
+      <RecoveryKeyImage />
 
       <h2 className="font-bold text-xl mb-5">
         <FtlMsg id="inline-recovery-key-setup-create-subheader">

diff --git a/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/mocks.tsx b/packages/fxa-settings/src/components/InlineRecoveryKeySetupCreate/mocks.tsx
@@ -7,7 +7,7 @@ import InlineRecoveryKeySetupCreate from '.';
 import AppLayout from '../AppLayout';
 
 export const Subject = () => (
-  <AppLayout cardClass="card-base">
+  <AppLayout>
     <InlineRecoveryKeySetupCreate
       createRecoveryKeyHandler={() =>
         Promise.resolve({

diff --git a/packages/fxa-settings/src/components/LinkRememberPassword/index.tsx b/packages/fxa-settings/src/components/LinkRememberPassword/index.tsx
@@ -47,7 +47,7 @@ const LinkRememberPassword = ({
 
   return (
     <div
-      className={`flex flex-wrap shrink-0 gap-1 text-sm ${
+      className={`flex flex-wrap mt-8 shrink-0 gap-1 text-sm ${
         textStart ? 'text-start' : 'justify-center'
       }`}
     >

diff --git a/packages/fxa-settings/src/components/PreparedImage/index.test.tsx b/packages/fxa-settings/src/components/PreparedImage/index.test.tsx
@@ -18,7 +18,7 @@ it('applies localization by default', () => {
 
 it('applies basic styles by default', () => {
   renderWithLocalizationProvider(<HeartsVerifiedImage />);
-  expect(screen.getByRole('img')).toHaveClass('w-3/5');
+  expect(screen.getByRole('img')).toHaveClass('mx-auto my-4 max-h-44');
 });
 
 it('applies a11y by default', () => {
@@ -49,7 +49,7 @@ it('applies custom classNames when desired', () => {
 describe('images without l10n', () => {
   it('applies basic styles by default', () => {
     renderWithLocalizationProvider(<HeartsVerifiedImage />);
-    expect(screen.getByRole('img')).toHaveClass('w-3/5');
+    expect(screen.getByRole('img')).toHaveClass('mx-auto my-4 max-h-44');
   });
   it('applies custom classNames when desired', () => {
     const MOCK_CLASS = 'w-full';

diff --git a/packages/fxa-settings/src/components/PreparedImage/index.tsx b/packages/fxa-settings/src/components/PreparedImage/index.tsx
@@ -31,7 +31,7 @@ export type PreparedImageProps =
 // translating it again. Don't forget to add new FTL strings into the `en.ftl` file!
 
 export const PreparedImage = (props: PreparedImageProps) => {
-  const { className = 'm-auto w-3/5', ariaHidden, Image } = props;
+  const { className = 'mx-auto my-4 max-h-44', ariaHidden, Image } = props;
   const showAriaLabel =
     !ariaHidden && props?.ariaLabel && props?.ariaLabelFtlId;
 

diff --git a/packages/fxa-settings/src/components/Ready/index.tsx b/packages/fxa-settings/src/components/Ready/index.tsx
@@ -102,17 +102,15 @@ const Ready = ({
 
   return (
     <>
-      <CardHeader
-        headingText={templateValues.headerText}
-        headingTextFtlId={templateValues.headerId}
-      />
       {errorMessage && (
         <Banner type="error" content={{ localizedHeading: errorMessage }} />
       )}
-      <div className="flex justify-center mx-auto">
-        <HeartsVerifiedImage className="w-3/5" />
-      </div>
-      <section>
+      <span className="text-center">
+        <CardHeader
+          headingText={templateValues.headerText}
+          headingTextFtlId={templateValues.headerId}
+        />
+        <HeartsVerifiedImage />
         {isSync && (
           <>
             <FtlMsg id="ready-complete-set-up-instruction">
@@ -147,7 +145,7 @@ const Ready = ({
             <p className="my-4 text-sm">Your account is ready!</p>
           </FtlMsg>
         )}
-      </section>
+      </span>
       {continueHandler && (
         <div className="flex justify-center mx-auto mt-6">
           <button

diff --git a/packages/fxa-settings/src/components/RecoveryKeySetupDownload/index.test.tsx b/packages/fxa-settings/src/components/RecoveryKeySetupDownload/index.test.tsx
@@ -6,13 +6,13 @@ import React from 'react';
 import { screen, waitFor, within } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
 import { Subject } from './mocks';
-import { MOCK_RECOVERY_KEY } from '../../pages/mocks';
+import { MOCK_RECOVERY_KEY_WITH_SPACES } from '../../pages/mocks';
 
 describe('RecoveryKeySetupDownload', () => {
   it('renders as expected', async () => {
     renderWithLocalizationProvider(<Subject />);
 
-    screen.getByText(MOCK_RECOVERY_KEY);
+    screen.getByText(MOCK_RECOVERY_KEY_WITH_SPACES);
     screen.getByRole('button', { name: 'Copy' });
 
     screen.getByRole('heading', {

diff --git a/packages/fxa-settings/src/components/RecoveryKeySetupDownload/index.tsx b/packages/fxa-settings/src/components/RecoveryKeySetupDownload/index.tsx
@@ -37,7 +37,7 @@ export const InlineRecoveryKeySetupDownload = ({
 }: RecoveryKeySetupDownloadProps) => {
   return (
     <>
-      <div className="rounded p-2 text-sm border-2 border-grey-100 mb-1">
+      <div className="rounded p-2 text-sm border-2 border-grey-100">
         <DataBlock
           value={recoveryKeyValue}
           onAction={() =>
@@ -90,7 +90,7 @@ export const InlineRecoveryKeySetupDownload = ({
 
       <FtlMsg id="flow-recovery-key-download-next-link-v2">
         <button
-          className="text-sm link-blue text-center py-2 mx-auto"
+          className="text-sm link-blue text-center mt-6 mx-auto"
           onClick={() => {
             logViewEvent(`flow.${viewName}`, 'recovery-key.skip-download');
             navigateForward();

diff --git a/packages/fxa-settings/src/components/RecoveryKeySetupDownload/mocks.tsx b/packages/fxa-settings/src/components/RecoveryKeySetupDownload/mocks.tsx
@@ -5,15 +5,18 @@
 import React from 'react';
 import RecoveryKeySetupDownload from '.';
 import { MOCK_ACCOUNT } from '../../models/mocks';
-import { MOCK_RECOVERY_KEY } from '../../pages/mocks';
+import { MOCK_RECOVERY_KEY_WITH_SPACES } from '../../pages/mocks';
+import AppLayout from '../AppLayout';
 
 export const Subject = () => {
   return (
-    <RecoveryKeySetupDownload
-      recoveryKeyValue={MOCK_RECOVERY_KEY}
-      email={MOCK_ACCOUNT.primaryEmail.email}
-      navigateForward={() => Promise.resolve()}
-      viewName="viewName"
-    />
+    <AppLayout>
+      <RecoveryKeySetupDownload
+        recoveryKeyValue={MOCK_RECOVERY_KEY_WITH_SPACES}
+        email={MOCK_ACCOUNT.primaryEmail.email}
+        navigateForward={() => Promise.resolve()}
+        viewName="viewName"
+      />
+    </AppLayout>
   );
 };
diff --git a/packages/fxa-settings/src/components/RecoveryKeySetupHint/index.stories.tsx b/packages/fxa-settings/src/components/RecoveryKeySetupHint/index.stories.tsx
@@ -18,7 +18,7 @@ const storyWithProps = (
   updateRecoveryKeyHint?: (hint: string) => Promise<void>
 ) => {
   const story = () => (
-    <AppLayout cardClass="card-base">
+    <AppLayout>
       <RecoveryKeySetupHint
         viewName="whatever"
         navigateForward={() => Promise.resolve()}

diff --git a/packages/fxa-settings/src/components/RecoveryKeySetupHint/index.tsx b/packages/fxa-settings/src/components/RecoveryKeySetupHint/index.tsx
@@ -104,7 +104,7 @@ export const RecoveryKeySetupHint = ({
 
     return (
       <p
-        className={classNames('text-end text-xs mt-2', {
+        className={classNames('text-end text-xs my-2', {
           'text-red-600': isTooLong,
         })}
       >
@@ -121,7 +121,7 @@ export const RecoveryKeySetupHint = ({
           content={{ localizedHeading: localizedErrorMessage }}
         />
       )}
-      <LightbulbImage className="mx-auto my-6" />
+      <LightbulbImage />
       <FtlMsg id="flow-recovery-key-hint-header-v2">
         <h2 className="font-bold text-xl mb-4">
           Add a hint to help find your key
@@ -136,6 +136,7 @@ export const RecoveryKeySetupHint = ({
         </p>
       </FtlMsg>
       <form onSubmit={handleSubmit(onSubmit)}>
+        <ControlledCharacterCount {...{ control }} />
         <FtlMsg id="flow-recovery-key-hint-input-v2" attrs={{ label: true }}>
           <InputText
             name="hint"
@@ -152,10 +153,9 @@ export const RecoveryKeySetupHint = ({
             {...{ errorText: hintError }}
           />
         </FtlMsg>
-        <ControlledCharacterCount {...{ control }} />
         <FtlMsg id="flow-recovery-key-hint-cta-text">
           <button
-            className="cta-primary cta-xl w-full mt-6 mb-4"
+            className="cta-primary cta-xl w-full mt-4 mb-4"
             type="submit"
             disabled={isSubmitDisabled}
           >

diff --git a/packages/fxa-settings/src/components/Settings/Avatar/index.test.tsx b/packages/fxa-settings/src/components/Settings/Avatar/index.test.tsx
@@ -9,6 +9,7 @@ import Avatar from '.';
 import {
   MOCK_AVATAR_DEFAULT,
   MOCK_AVATAR_NON_DEFAULT,
+  PLACEHOLDER_IMAGE_URL,
 } from '../../../pages/mocks';
 
 describe('Avatar', () => {
@@ -35,7 +36,7 @@ describe('Avatar', () => {
 
     expect(screen.getByTestId('avatar-nondefault')).toHaveAttribute(
       'src',
-      'http://placekitten.com/512/512'
+      PLACEHOLDER_IMAGE_URL
     );
     expect(screen.getByTestId('avatar-nondefault')).toHaveAttribute(
       'alt',

diff --git a/packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.test.tsx b/packages/fxa-settings/src/components/Settings/DropDownAvatarMenu/index.test.tsx
@@ -16,6 +16,7 @@ import { Account, AppContext } from '../../../models';
 import { SettingsContext } from '../../../models/contexts/SettingsContext';
 import { createMockSettingsIntegration } from '../mocks';
 import firefox from '../../../lib/channels/firefox';
+import { PLACEHOLDER_IMAGE_URL } from '../../../pages/mocks';
 
 jest.mock('../../../models/AlertBarInfo');
 jest.mock('fxa-settings/src/lib/metrics', () => ({
@@ -26,7 +27,7 @@ jest.mock('fxa-settings/src/lib/metrics', () => ({
 const account = {
   avatar: {
     id: 'abc1234',
-    url: 'http://placekitten.com/512/512',
+    url: PLACEHOLDER_IMAGE_URL,
     isDefault: false,
   },
   primaryEmail: {

diff --git a/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.stories.tsx b/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.stories.tsx
@@ -9,7 +9,7 @@ import { Account, AppContext, useFtlMsgResolver } from '../../../models';
 import { MOCK_ACCOUNT, mockAppContext } from '../../../models/mocks';
 import { AuthUiErrors } from '../../../lib/auth-errors/auth-errors';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import { MockSettingsAppLayout } from '../AppLayout/mocks';
+import { MockSettingsAppLayout } from '../SettingsLayout/mocks';
 
 export default {
   title: 'Components/Settings/FlowRecoveryKeyConfirmPwd',

diff --git a/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.tsx b/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyConfirmPwd/index.tsx
@@ -124,7 +124,7 @@ export const FlowRecoveryKeyConfirmPwd = ({
             content={{ localizedHeading: localizedErrorBannerMessage }}
           />
         )}
-        <PasswordImage className="mx-auto my-4" />
+        <PasswordImage />
 
         <FtlMsg id="flow-recovery-key-confirm-pwd-heading-v2">
           <h2 className="font-bold text-xl">

diff --git a/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyDownload/index.tsx b/packages/fxa-settings/src/components/Settings/FlowRecoveryKeyDownload/index.tsx
@@ -38,17 +38,17 @@ export const FlowRecoveryKeyDownload = ({
       }}
       {...{ localizedBackButtonTitle }}
     >
-      <div className="w-full flex flex-col gap-4">
+      <div className="w-full flex flex-col">
         <ProgressBar currentStep={3} numberOfSteps={4} />
-        <RecoveryKeyImage className="my-6 mx-auto" />
+        <RecoveryKeyImage />
 
         <FtlMsg id="flow-recovery-key-download-heading-v2">
           <h2 className="font-bold text-xl">
             Account recovery key created — Download and store it now
           </h2>
         </FtlMsg>
         <FtlMsg id="flow-recovery-key-download-info-v2">
-          <p>
+          <p className="my-4">
             This key allows you to recover your data if you forget your
             password. Download it now and store it somewhere you’ll remember —
             you won’t be able to return to this page later.