Update login, password reset and error pages with new MacawUI (#5091)

* Macaw migration * migrate error page * change margins * changeset * migrate button * migrate buttons in error page
saleor · Aug 12, 2024 · c8a6d86 · c8a6d86
1 parent 6289fbd
commit c8a6d86
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 142 deletions.
diff --git a/.changeset/chilly-trains-fail.md b/.changeset/chilly-trains-fail.md
@@ -0,0 +1,5 @@
+---
+"saleor-dashboard": patch
+---
+
+Login, password reset and error pages now use new Macaw buttons, text and styles.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "@material-ui/styles": "^4.11.4",
     "@reach/auto-id": "^0.16.0",
     "@saleor/macaw-ui": "npm:@saleor/[email protected]",
-    "@saleor/macaw-ui-next": "npm:@saleor/[email protected].6",
+    "@saleor/macaw-ui-next": "npm:@saleor/[email protected].7",
     "@saleor/sdk": "0.6.0",
     "@sentry/react": "^8.21.0",
     "@sentry/vite-plugin": "^2.21.1",

diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx
@@ -1,13 +1,12 @@
 import { UserContextError } from "@dashboard/auth/types";
 import { passwordResetUrl } from "@dashboard/auth/urls";
-import { Button } from "@dashboard/components/Button";
 import { FormSpacer } from "@dashboard/components/FormSpacer";
 import { AvailableExternalAuthenticationsQuery } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { CircularProgress, Divider, TextField } from "@material-ui/core";
 import { EyeIcon, IconButton } from "@saleor/macaw-ui";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 import { Link } from "react-router-dom";
@@ -50,13 +49,21 @@ const LoginPage: React.FC<LoginCardProps> = props => {
     <LoginForm onSubmit={onSubmit}>
       {({ change: handleChange, data, submit }) => (
         <Box display="flex" flexDirection="column" alignItems="flex-start" width="100%">
-          <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+          <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={4}>
             <FormattedMessage id="vzgZ3U" defaultMessage="Sign In" description="card header" />
           </Text>
           {errors.map(error => (
-            <div className={classes.panel} key={error} data-test-id="login-error-message">
-              {getErrorMessage(error, intl)}
-            </div>
+            <Box
+              borderRadius={4}
+              padding={4}
+              backgroundColor="critical1"
+              width="100%"
+              marginBottom={2}
+              key={error}
+              data-test-id="login-error-message"
+            >
+              <Text>{getErrorMessage(error, intl)}</Text>
+            </Box>
           ))}
           <TextField
             autoFocus
@@ -118,7 +125,7 @@ const LoginPage: React.FC<LoginCardProps> = props => {
           </Text>
           <div className={classes.buttonContainer}>
             <Button
-              className={classes.loginButton}
+              width="100%"
               disabled={disabled}
               variant="primary"
               onClick={submit}
@@ -146,7 +153,7 @@ const LoginPage: React.FC<LoginCardProps> = props => {
             <React.Fragment key={externalAuthentication.id}>
               <FormSpacer />
               <Button
-                fullWidth
+                width="100%"
                 variant="secondary"
                 onClick={() => onExternalAuthentication(externalAuthentication.id)}
                 data-test-id="external-authentication"

diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
@@ -1,16 +1,13 @@
-import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
 import { AccountErrorFragment } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import getAccountErrorMessage from "@dashboard/utils/errors/account";
 import { TextField } from "@material-ui/core";
-import { Text } from "@saleor/macaw-ui-next";
+import { Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface NewPasswordPageFormData {
   password: string;
   confirmPassword: string;
@@ -27,7 +24,6 @@ const initialForm: NewPasswordPageFormData = {
 };
 const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
   const { loading, errors, onSubmit } = props;
-  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
@@ -37,17 +33,24 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
 
         return (
           <>
-            <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+            <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={2}>
               <FormattedMessage
                 id="WhKGPA"
                 defaultMessage="Set up new password"
                 description="page title"
               />
             </Text>
             {errors.map(error => (
-              <div className={classes.panel} key={`${error.code}-${error.field}`}>
+              <Box
+                borderRadius={4}
+                padding={4}
+                backgroundColor="critical1"
+                width="100%"
+                marginBottom={2}
+                key={`${error.code}-${error.field}`}
+              >
                 {getAccountErrorMessage(error, intl)}
-              </div>
+              </Box>
             ))}
             <Text size={2} fontWeight="light" color="default2">
               <FormattedMessage
@@ -105,7 +108,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
             <FormSpacer />
             <Button
               data-test-id="button-bar-confirm"
-              className={classes.submit}
+              width="100%"
               disabled={loading || data.password.length === 0 || passwordError}
               variant="primary"
               onClick={handleSubmit}

diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -1,19 +1,14 @@
-import { Button } from "@dashboard/components/Button";
 import Form from "@dashboard/components/Form";
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { IconButton } from "@dashboard/components/IconButton";
 import { getAppMountUri } from "@dashboard/config";
 import { AccountErrorCode } from "@dashboard/graphql";
 import { SubmitPromise } from "@dashboard/hooks/useForm";
 import { commonMessages } from "@dashboard/intl";
 import { TextField } from "@material-ui/core";
-import { ArrowRightIcon } from "@saleor/macaw-ui";
-import { Box, Text } from "@saleor/macaw-ui-next";
+import { ArrowLeftIcon, Box, Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface ResetPasswordPageFormData {
   email: string;
 }
@@ -25,21 +20,35 @@ export interface ResetPasswordPageProps {
 
 const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
   const { disabled, error, onSubmit } = props;
-  const classes = useStyles(props);
   const intl = useIntl();
 
   return (
     <Form initial={{ email: "" }} onSubmit={onSubmit}>
       {({ change: handleChange, data, submit: handleSubmit }) => (
         <Box display="flex" flexDirection="column" alignItems="flex-start">
-          <IconButton className={classes.backBtn} href={getAppMountUri()} variant="secondary">
-            <ArrowRightIcon className={classes.arrow} />
-          </IconButton>
-          <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+          <Button
+            as="a"
+            icon={<ArrowLeftIcon />}
+            href={getAppMountUri()}
+            variant="secondary"
+            marginBottom={4}
+          />
+
+          <Text size={6} fontWeight="bold" lineHeight={3} marginBottom={2}>
             <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
           </Text>
-          {!!error && <div className={classes.panel}>{error}</div>}
-          <Text size={2} fontWeight="light" color="default2">
+          {!!error && (
+            <Box
+              borderRadius={4}
+              padding={4}
+              backgroundColor="critical1"
+              width="100%"
+              marginBottom={2}
+            >
+              <Text>{error}</Text>
+            </Box>
+          )}
+          <Text fontWeight="light" color="default2" display="block">
             <FormattedMessage
               id="54M0Gu"
               defaultMessage="Provide us with an email - if we find it in our database we will send you a link to reset your password. You should be able to find it in your inbox in the next couple of minutes."
@@ -63,11 +72,11 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
           <FormSpacer />
           <Button
             data-test-id="submit"
-            className={classes.submit}
             disabled={disabled}
             variant="primary"
             onClick={handleSubmit}
             type="submit"
+            width="100%"
           >
             <FormattedMessage
               id="lm9NSK"

diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx
@@ -1,11 +1,8 @@
-import { Button } from "@dashboard/components/Button";
 import FormSpacer from "@dashboard/components/FormSpacer";
-import { Text } from "@saleor/macaw-ui-next";
+import { Button, Text } from "@saleor/macaw-ui-next";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 
-import useStyles from "../styles";
-
 export interface ResetPasswordSuccessPageFormData {
   email: string;
 }
@@ -15,26 +12,25 @@ export interface ResetPasswordSuccessPageProps {
 
 const ResetPasswordSuccessPage: React.FC<ResetPasswordSuccessPageProps> = props => {
   const { onBack } = props;
-  const classes = useStyles(props);
 
   return (
     <>
-      <Text size={6} fontWeight="bold" lineHeight={3} className={classes.header}>
+      <Text size={6} fontWeight="bold" lineHeight={3}>
         <FormattedMessage id="Yy/yDL" defaultMessage="Reset password" />
       </Text>
-      <Text>
+      <Text display="block" marginTop={4}>
         <FormattedMessage
           id="2ob30/"
           defaultMessage="Success! In a few minutes you’ll receive a message with instructions on how to reset your password."
         />
       </Text>
       <FormSpacer />
       <Button
-        className={classes.submit}
         variant="primary"
         onClick={onBack}
         type="submit"
         data-test-id="back-to-login-button"
+        width="100%"
       >
         <FormattedMessage id="2oyWT9" defaultMessage="Back to login" description="button" />
       </Button>

diff --git a/src/auth/components/styles.ts b/src/auth/components/styles.ts
@@ -5,18 +5,11 @@ const useStyles = makeStyles(
     arrow: {
       transform: "rotate(180deg)",
     },
-    backBtn: {
-      marginBottom: theme.spacing(3),
-    },
     buttonContainer: {
       display: "flex",
       justifyContent: "flex-end",
       width: "100%",
     },
-    header: {
-      fontWeight: 700,
-      marginBottom: theme.spacing(2),
-    },
     link: {
       color: theme.palette.primary.main,
       cursor: "pointer",
@@ -34,16 +27,6 @@ const useStyles = makeStyles(
     loginButton: {
       width: "100%",
     },
-    panel: {
-      "& span": {
-        color: theme.palette.error.contrastText,
-      },
-      ...theme.typography.body1,
-      background: theme.palette.alert.paper.error,
-      borderRadius: 8,
-      marginBottom: theme.spacing(2),
-      padding: theme.spacing(2.5),
-    },
     passwordWrapper: {
       position: "relative",
       width: "100%",
@@ -53,9 +36,6 @@ const useStyles = makeStyles(
       top: 6,
       right: 8,
     },
-    submit: {
-      width: "100%",
-    },
   }),
   { name: "Login" },
 );