5b85d6c086
* Use generated hooks in apps * Remove unused files * Use proper types in apps * Use generated hooks in attributes * Use generated hooks in auth module * Use generated hooks in categories * Use generated hooks in channels * Use generated types in collections * Remove legacy types from background tasks * Use generated hooks in customers * Use generated hooks in discounts * Use generated hook in file upload * Use generated types in gift cards * Use generated types in home * Use generated hooks in navigation * Use generated hooks in orders * Use generated hooks in pages * Use generated hooks in page types * Use generated hooks in permission groups * Use generated hooks in plugins * Use generated hooks in products * Use fragment to mark product variants * Improve code a bit * Use generated hooks in page types * Use generated types in searches * Use generated hooks in shipping * Use generated hooks in site settings * Use generated hooks in staff members * Use generated hooks in taxes * Place all gql generated files in one directory * Use generated hooks in translations * Use global types from new generated module * Use generated hooks in warehouses * Use generated hooks in webhooks * Use generated fragment types * Unclutter types * Remove hoc components * Split hooks and types * Fetch introspection file * Delete obsolete schema file * Fix rebase artifacts * Fix autoreplace * Fix auth provider tests * Fix urls * Remove leftover types * Fix rebase artifacts
103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import backgroundArt from "@assets/images/login-background.svg";
|
|
import saleorDarkLogo from "@assets/images/logo-dark.svg";
|
|
import saleorLightLogo from "@assets/images/logo-light.svg";
|
|
import { makeStyles, useTheme } from "@saleor/macaw-ui";
|
|
import React from "react";
|
|
import SVG from "react-inlinesvg";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
footer: {
|
|
position: "absolute",
|
|
bottom: theme.spacing(4)
|
|
},
|
|
logo: {
|
|
display: "block",
|
|
height: 40,
|
|
marginBottom: theme.spacing(4)
|
|
},
|
|
mainPanel: {
|
|
[theme.breakpoints.down("sm")]: {
|
|
padding: theme.spacing(2)
|
|
},
|
|
background: theme.palette.background.paper,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
height: "100vh",
|
|
justifyContent: "center",
|
|
padding: theme.spacing(5, 6, 4, 6),
|
|
width: "100%"
|
|
},
|
|
mainPanelContent: {
|
|
[theme.breakpoints.up("xs")]: {
|
|
width: "100%"
|
|
},
|
|
[theme.breakpoints.up("sm")]: {
|
|
width: 328
|
|
},
|
|
"@media (min-width: 1440px)": {
|
|
width: 380
|
|
},
|
|
margin: "auto",
|
|
width: "100%"
|
|
},
|
|
root: {
|
|
[theme.breakpoints.up("lg")]: {
|
|
gridTemplateColumns: "560px 1fr"
|
|
},
|
|
"@media (min-width: 1440px)": {
|
|
gridTemplateColumns: "780px 1fr"
|
|
},
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr",
|
|
gap: theme.spacing(3),
|
|
height: "100vh",
|
|
overflow: "hidden",
|
|
position: "relative",
|
|
width: "100vw"
|
|
},
|
|
sidebar: {
|
|
[theme.breakpoints.up("lg")]: {
|
|
alignItems: "center",
|
|
display: "flex"
|
|
},
|
|
display: "none"
|
|
},
|
|
sidebarArt: {
|
|
"& svg": {
|
|
width: "100%"
|
|
}
|
|
}
|
|
}),
|
|
{
|
|
name: "Layout"
|
|
}
|
|
);
|
|
|
|
const Layout: React.FC = props => {
|
|
const { children } = props;
|
|
|
|
const classes = useStyles(props);
|
|
const { themeType } = useTheme();
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<div className={classes.mainPanel}>
|
|
<SVG
|
|
className={classes.logo}
|
|
src={themeType === "dark" ? saleorDarkLogo : saleorLightLogo}
|
|
/>
|
|
<div className={classes.mainPanelContent}>{children}</div>
|
|
<footer className={classes.footer}>
|
|
©2021 Saleor Commerce. All rights reserved
|
|
</footer>
|
|
</div>
|
|
<div className={classes.sidebar}>
|
|
<SVG className={classes.sidebarArt} src={backgroundArt} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Layout.displayName = "Layout";
|
|
export default Layout;
|