Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2026-02-24 04:01:17 +01:00
Code Issues Packages Projects Releases Wiki Activity

update auth background

Browse Source
This commit is contained in:
Sidney Alcantara
2021-09-08 15:00:50 +10:00
parent 257400f23a
commit 5f43e2a593
5 changed files with 93 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -49,6 +49,7 @@
"react-dom": "^17.0.2",
"react-dropzone": "^10.1.8",
"react-firebaseui": "^5.0.2",
"react-helmet": "^6.1.0",
"react-hook-form": "^6",
"react-image": "^4.0.3",
"react-joyride": "^2.3.0",
@@ -106,6 +107,7 @@
"@types/react-color": "^3.0.1",
"@types/react-div-100vh": "^0.3.0",
"@types/react-dom": "^17.0.8",
"@types/react-helmet": "^6.1.2",
"@types/react-router-dom": "^5.1.7",
"@types/react-router-hash-link": "^2.4.1",
"@types/use-persisted-state": "^0.3.0",

5
src/assets/bg-pattern-dark.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="#FFF" stroke-width="1.5">
<path d="M37 337h6a6 6 0 010 12h-6 0v-12zM296.447 20.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM406 51h12v6a6 6 0 01-12 0v-6h0zM394 200h6a6 6 0 010 12h-6 0v-12zM341.447 119.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM249.652 206.757l11.59-3.105 1.554 5.795a6 6 0 01-11.592 3.106l-1.552-5.796h0zM322.757 278.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM449 295a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM439 425h3v12h-12v-3a9 9 0 019-9zM333.447 409.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM197.804 422.804l10.392 6-6 10.392-10.392-6zM261.45 352.98l2.898.777h0l-3.105 11.591-11.591-3.105.776-2.898a9 9 0 0111.023-6.364zM73.652 440.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM147.804 332.804l10.392-6 3 5.196a6 6 0 01-10.392 6l-3-5.196h0zM211.757 102.652l11.591 3.105-1.552 5.796a6 6 0 01-11.592-3.106l1.553-5.795h0zM150.652 44.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM31 200a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM106.757 131.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM91.652 232.757l11.59-3.105 3.106 11.59-11.59 3.106zM57.598 38.304l2.598-1.5h0l6 10.392-10.392 6-1.5-2.598a9 9 0 013.294-12.294z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

2
src/assets/bg-pattern.svg
View File

@@ -1,5 +1,5 @@
<svg width="480" height="480" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="rgba(128, 128, 128, 0.25)" stroke-width="1.5">
<g fill="none" fill-rule="evenodd" stroke="#000" stroke-width="1.5">
<path d="M37 337h6a6 6 0 010 12h-6 0v-12zM296.447 20.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM406 51h12v6a6 6 0 01-12 0v-6h0zM394 200h6a6 6 0 010 12h-6 0v-12zM341.447 119.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM249.652 206.757l11.59-3.105 1.554 5.795a6 6 0 01-11.592 3.106l-1.552-5.796h0zM322.757 278.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM449 295a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM439 425h3v12h-12v-3a9 9 0 019-9zM333.447 409.204a6 6 0 017.349 4.243l1.552 5.796h0l-11.59 3.105-1.554-5.795a6 6 0 014.243-7.349zM197.804 422.804l10.392 6-6 10.392-10.392-6zM261.45 352.98l2.898.777h0l-3.105 11.591-11.591-3.105.776-2.898a9 9 0 0111.023-6.364zM73.652 440.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM147.804 332.804l10.392-6 3 5.196a6 6 0 01-10.392 6l-3-5.196h0zM211.757 102.652l11.591 3.105-1.552 5.796a6 6 0 01-11.592-3.106l1.553-5.795h0zM150.652 44.757l5.795-1.553a6 6 0 013.106 11.592l-5.796 1.552h0l-3.105-11.59zM31 200a6 6 0 016 6v6h0-12v-6a6 6 0 016-6zM106.757 131.652l5.796 1.552a6 6 0 01-3.106 11.592l-5.795-1.553h0l3.105-11.591zM91.652 232.757l11.59-3.105 3.106 11.59-11.59 3.106zM57.598 38.304l2.598-1.5h0l6 10.392-10.392 6-1.5-2.598a9 9 0 013.294-12.294z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

96
src/components/Auth/AuthLayout.tsx
View File

@@ -1,9 +1,11 @@
import Helmet from "react-helmet";
import { use100vh } from "react-div-100vh";
import { Box, Paper, Typography, LinearProgress } from "@material-ui/core";
import { useTheme, Paper, Typography, LinearProgress } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import bgPattern from "assets/bg-pattern.svg";
import bgPatternDark from "assets/bg-pattern-dark.svg";
import Logo from "assets/Logo";
export interface IAuthLayoutProps {
@@ -12,43 +14,72 @@ export interface IAuthLayoutProps {
}
export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
const theme = useTheme();
const fullScreenHeight = use100vh() ?? "100vh";
return (
<Box
sx={{
minHeight: fullScreenHeight,
backgroundBlendMode: "normal, overlay, normal, normal",
// backgroundImage: `
// linear-gradient(to bottom, rgba(255,255,255,0), #fff),
// linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
// url('${bgPattern}'),
// linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
// `,
backgroundImage: (theme) => `
linear-gradient(to bottom, ${alpha(
theme.palette.background.default,
0
)}, ${theme.palette.background.default} 75%),
linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
theme.palette.secondary.main
} 90%),
url('${bgPattern}'),
linear-gradient(161deg, ${alpha(
theme.palette.background.default,
0.95
)} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
`,
<>
<Helmet>
<style type="text/css">
{`
body {
background-blend-mode: ${
// prettier-ignore
[
"normal",
"normal",
"normal",
display: "grid",
placeItems: "center",
p: 1,
"overlay",
"normal",
"normal",
].join(", ")
};
background-size: ${
// prettier-ignore
[
"100%",
"100%",
"100%",
`${480 * 10 / 14}px`,
"100%",
"100%",
].join(", ")
};
background-image: ${
// prettier-ignore
[
`radial-gradient(circle at 85% 100%, ${theme.palette.background.paper} 20%, ${alpha(theme.palette.background.paper, 0)})`,
`radial-gradient(80% 80% at 15% 100%, ${alpha("#FA0", 0.1)} 25%, ${alpha("#F0A", 0.1)} 50%, ${alpha("#F0A", 0)} 100%)`,
`linear-gradient(to top, ${alpha(theme.palette.background.paper, 1)}, ${alpha(theme.palette.background.paper, 0)})`,
`url('${theme.palette.mode==="dark" ? bgPatternDark : bgPattern}')`,
`radial-gradient(60% 180% at 100% 15%, ${alpha("#0FA", 0.3)} 25%, ${alpha("#0AF", 0.2)} 50%, ${alpha("#0AF", 0)} 100%)`,
`linear-gradient(${alpha(theme.palette.primary.main, 0.2)}, ${alpha(theme.palette.primary.main, 0.2)})`,
].join(", ")
};
}
#root {
display: grid;
place-items: center;
padding: ${theme.spacing(1)};
cursor: default;
min-height: ${
fullScreenHeight > 0 ? `${fullScreenHeight}px` : "100vh"
};
}
`}
</style>
</Helmet>
cursor: "default",
}}
>
<Paper
component="main"
elevation={8}
sx={
{
position: "relative",
@@ -57,7 +88,6 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
maxWidth: 400,
width: "100%",
p: 4,
bgcolor: "background.paper",
"--spacing-contents": (theme) => theme.spacing(4),
"& > * + *": { marginTop: "var(--spacing-contents)" },
@@ -92,6 +122,6 @@ export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
/>
)}
</Paper>
</Box>
</>
);
}

22
yarn.lock
View File

@@ -3184,6 +3184,13 @@
dependencies:
"@types/react" "*"
"@types/react-helmet@^6.1.2":
version "6.1.2"
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
dependencies:
"@types/react" "*"
"@types/react-is@^16.7.1 || ^17.0.0":
version "17.0.2"
resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.2.tgz#abc4d910bff5b0bc6b3e1bec57575f6b63fd4e05"
@@ -13559,6 +13566,16 @@ react-floater@^0.7.3:
react-proptype-conditional-require "^1.0.4"
tree-changes "^0.5.1"
react-helmet@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
dependencies:
object-assign "^4.1.1"
prop-types "^15.7.2"
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-hook-form@^6:
version "6.15.8"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.8.tgz#725c139d308c431c4611e4b9d85a49f01cfc0e7a"
@@ -13744,6 +13761,11 @@ react-scroll-sync@^0.8.0:
resolved "https://registry.yarnpkg.com/react-scroll-sync/-/react-scroll-sync-0.8.0.tgz#61fabed2afc47d41e6938819d620799da3610548"
integrity sha512-Ms9srm41UM+lWexuqdocXjqaqqt6ZRSFxcudgB0sYhC7Or+m12WemTwY8BaQCRf7hA8zHDk55FHvMkqsH7gF+w==
react-side-effect@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
react-textarea-autosize@^8.3.2:
version "8.3.3"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"