diff --git a/assets/images/login-background.svg b/assets/images/login-background.svg index 30389401f64..fa9be13c191 100644 --- a/assets/images/login-background.svg +++ b/assets/images/login-background.svg @@ -1,201 +1,144 @@ - - - - - - - - - - - - - - - - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +ks \ No newline at end of file diff --git a/assets/images/logo-dark.svg b/assets/images/logo-dark.svg index d0fe1c52344..aedd05ac948 100644 --- a/assets/images/logo-dark.svg +++ b/assets/images/logo-dark.svg @@ -1,9 +1,15 @@ - - - - - - - - + + + + + + + + + + + + + + diff --git a/assets/images/logo-light.svg b/assets/images/logo-light.svg index 60f63262312..f3388557de2 100644 --- a/assets/images/logo-light.svg +++ b/assets/images/logo-light.svg @@ -1 +1,15 @@ - \ No newline at end of file + + + + + + + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 30c2542d079..6c50426e70a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4319,9 +4319,9 @@ } }, "@saleor/macaw-ui": { - "version": "0.3.0-a.5", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.0-a.5.tgz", - "integrity": "sha512-oZuOlqgyphSn7W+NKEQZ6zKczJpl4zET+m9iDMrurKxwmUmh2ovO7TphtM8wM4gPlpP/QU43pqG+22KMVjJnLw==", + "version": "0.3.0-a.6", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.0-a.6.tgz", + "integrity": "sha512-LnGsocG5Lk6I8puqhIHIChrBG3gLn76by0OPQXfkOS5AEIjHQpdj0qA4cBO2jfxu0MRYlVZoNJoKH/ykXiC7eg==", "requires": { "clsx": "^1.1.1", "lodash": "^4.17.21", diff --git a/package.json b/package.json index 77064cc3245..446ea57dc67 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.11.4", - "@saleor/macaw-ui": "^0.3.0-a.5", + "@saleor/macaw-ui": "^0.3.0-a.6", "@saleor/sdk": "^0.4.1", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", diff --git a/src/auth/components/Layout.tsx b/src/auth/components/Layout.tsx index 94c9b658d33..686d1b16016 100644 --- a/src/auth/components/Layout.tsx +++ b/src/auth/components/Layout.tsx @@ -8,6 +8,10 @@ import SVG from "react-inlinesvg"; const useStyles = makeStyles( theme => ({ + footer: { + position: "absolute", + bottom: theme.spacing(4) + }, logo: { display: "block", height: 40, @@ -22,7 +26,7 @@ const useStyles = makeStyles( flexDirection: "column", height: "100vh", justifyContent: "center", - padding: theme.spacing(6), + padding: theme.spacing(5, 6, 4, 6), width: "100%" }, mainPanelContent: { @@ -33,27 +37,30 @@ const useStyles = makeStyles( width: 328 }, "@media (min-width: 1440px)": { - width: 464 + width: 380 }, margin: "auto", width: "100%" }, root: { [theme.breakpoints.up("lg")]: { - gridTemplateColumns: "376px 1fr" + gridTemplateColumns: "560px 1fr" }, "@media (min-width: 1440px)": { - gridTemplateColumns: "520px 1fr" + gridTemplateColumns: "780px 1fr" }, display: "grid", gridTemplateColumns: "1fr", + gap: theme.spacing(3), height: "100vh", overflow: "hidden", + position: "relative", width: "100vw" }, sidebar: { [theme.breakpoints.up("lg")]: { - display: "block" + alignItems: "center", + display: "flex" }, display: "none" }, @@ -76,18 +83,19 @@ const Layout: React.FC = props => { return (
+
+ +
{children}
+
+ ©2021 Saleor Commerce. All rights reserved +
+
-
-
- - {children} -
-
); }; diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx index 5fbe28b7714..5a2f505ce1d 100644 --- a/src/auth/components/LoginPage/LoginPage.tsx +++ b/src/auth/components/LoginPage/LoginPage.tsx @@ -9,46 +9,14 @@ import { AvailableExternalAuthentications_shop_availableExternalAuthentications import { FormSpacer } from "@saleor/components/FormSpacer"; import { SubmitPromise } from "@saleor/hooks/useForm"; import { commonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button, EyeIcon, IconButton } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import useStyles from "../styles"; import LoginForm, { LoginFormData } from "./form"; import { getErrorMessage } from "./messages"; -const useStyles = makeStyles( - theme => ({ - buttonContainer: { - display: "flex", - justifyContent: "flex-end" - }, - link: { - color: theme.palette.primary.main, - cursor: "pointer", - textDecoration: "underline" - }, - loading: { - alignItems: "center", - display: "flex", - minHeight: "80vh", - justifyContent: "center" - }, - loginButton: { - width: 140 - }, - panel: { - "& span": { - color: theme.palette.error.contrastText - }, - background: theme.palette.error.main, - borderRadius: theme.spacing(), - marginBottom: theme.spacing(3), - padding: theme.spacing(1.5) - } - }), - { name: "LoginCard" } -); - export interface LoginCardProps { error?: UserContextError; disabled: boolean; @@ -72,6 +40,7 @@ const LoginCard: React.FC = props => { const classes = useStyles(props); const intl = useIntl(); + const [showPassword, setShowPassword] = React.useState(false); if (loading) { return ( @@ -85,11 +54,15 @@ const LoginCard: React.FC = props => { {({ change: handleChange, data, submit }) => ( <> + + + {error && (
- - {getErrorMessage(error, intl)} - + {getErrorMessage(error, intl)}
)} = props => { disabled={disabled} /> - - +
+ + {/* Not using endAdornment as it looks weird with autocomplete */} + setShowPassword(true)} + onMouseUp={() => setShowPassword(false)} + > + + +
+ + +
- - - - - - ) - }} - /> - + {externalAuthentications.length > 0 && ( <> diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx index f7c8b764d4e..0aa73a2221d 100644 --- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx +++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx @@ -1,31 +1,13 @@ -import { SetPasswordData } from "@saleor/sdk"; import { TextField, Typography } from "@material-ui/core"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/macaw-ui"; +import { SetPasswordData } from "@saleor/sdk"; import getAccountErrorMessage from "@saleor/utils/errors/account"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -const useStyles = makeStyles( - theme => ({ - errorText: { - color: theme.palette.error.contrastText - }, - panel: { - background: theme.palette.error.main, - borderRadius: theme.spacing(), - marginBottom: theme.spacing(3), - padding: theme.spacing(1.5) - }, - submit: { - width: "100%" - } - }), - { - name: "NewPasswordPage" - } -); +import useStyles from "../styles"; export interface NewPasswordPageFormData { password: string; @@ -60,13 +42,7 @@ const NewPasswordPage: React.FC = props => { return ( <> - {!!error && ( -
- - {error} - -
- )} + {!!error &&
{error}
} diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx index f4254fba0af..9218b0f3f15 100644 --- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx +++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx @@ -2,29 +2,11 @@ import { TextField, Typography } from "@material-ui/core"; import Form from "@saleor/components/Form"; import FormSpacer from "@saleor/components/FormSpacer"; import { commonMessages } from "@saleor/intl"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -const useStyles = makeStyles( - theme => ({ - errorText: { - color: theme.palette.error.contrastText - }, - panel: { - background: theme.palette.error.main, - borderRadius: theme.spacing(), - marginBottom: theme.spacing(3), - padding: theme.spacing(1.5) - }, - submit: { - width: "100%" - } - }), - { - name: "ResetPasswordPage" - } -); +import useStyles from "../styles"; export interface ResetPasswordPageFormData { email: string; @@ -45,13 +27,7 @@ const ResetPasswordPage: React.FC = props => {
{({ change: handleChange, data, submit: handleSubmit }) => ( <> - {!!error && ( -
- - {error} - -
- )} + {!!error &&
{error}
} diff --git a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx index 908d266c393..620aeaf8ba3 100644 --- a/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx +++ b/src/auth/components/ResetPasswordSuccessPage/ResetPasswordSuccessPage.tsx @@ -1,19 +1,10 @@ import { Typography } from "@material-ui/core"; import FormSpacer from "@saleor/components/FormSpacer"; -import { Button, makeStyles } from "@saleor/macaw-ui"; +import { Button } from "@saleor/macaw-ui"; import React from "react"; import { FormattedMessage } from "react-intl"; -const useStyles = makeStyles( - { - submit: { - width: "100%" - } - }, - { - name: "ResetPasswordSuccessPage" - } -); +import useStyles from "../styles"; export interface ResetPasswordSuccessPageFormData { email: string; diff --git a/src/auth/components/styles.ts b/src/auth/components/styles.ts new file mode 100644 index 00000000000..6593bfbde80 --- /dev/null +++ b/src/auth/components/styles.ts @@ -0,0 +1,55 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +const useStyles = makeStyles( + theme => ({ + buttonContainer: { + display: "flex", + justifyContent: "flex-end" + }, + header: { + fontWeight: 700, + marginBottom: theme.spacing(2) + }, + link: { + color: theme.palette.primary.main, + cursor: "pointer", + display: "block", + margin: theme.spacing(2, 0), + textDecoration: "underline", + textAlign: "right" + }, + loading: { + alignItems: "center", + display: "flex", + minHeight: "80vh", + justifyContent: "center" + }, + loginButton: { + width: "100%" + }, + panel: { + "& span": { + color: theme.palette.error.contrastText + }, + ...theme.typography.body1, + background: theme.palette.saleor.fail.light, + borderRadius: 8, + marginBottom: theme.spacing(2), + padding: theme.spacing(2.5) + }, + passwordWrapper: { + position: "relative" + }, + showPasswordBtn: { + position: "absolute", + top: 6, + right: 8 + }, + submit: { + width: "100%" + } + }), + { name: "Login" } +); + +export default useStyles; diff --git a/src/intl.ts b/src/intl.ts index 2fcbfa06da8..d3da50b8b11 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -38,7 +38,7 @@ export const commonMessages = defineMessages({ defaultMessage: "Drafts" }, email: { - defaultMessage: "E-mail Address" + defaultMessage: "Email address" }, endDate: { defaultMessage: "End Date"