@waweb/uikit.theme.theme-provider
Version:
73 lines • 4.02 kB
JavaScript
"use strict";
/** @format */
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LightTheme = exports.DarkTheme = exports.MockComponent = void 0;
const react_1 = __importDefault(require("react"));
const core_1 = require("@material-ui/core");
const icons_1 = require("@material-ui/icons");
const theme_provider_1 = require("./theme-provider");
function Copyright() {
return (react_1.default.createElement(core_1.Typography, { variant: "body2", color: "textSecondary", align: "center", className: "copyright" },
"Copyright © ",
react_1.default.createElement(core_1.Link, { color: "inherit", href: "https://watheia.app/" }, "Watheia Labs, LLC"),
" ",
new Date().getFullYear(),
"."));
}
const useStyles = core_1.makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: "100%",
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
copyright: {
marginTop: theme.spacing(2),
},
}));
function MockComponent() {
const classes = useStyles();
return (react_1.default.createElement(core_1.Container, { component: "main", maxWidth: "xs" },
react_1.default.createElement(core_1.CssBaseline, null),
react_1.default.createElement("div", { className: classes.paper },
react_1.default.createElement(core_1.Avatar, { className: classes.avatar },
react_1.default.createElement(icons_1.LockOutlined, null)),
react_1.default.createElement(core_1.Typography, { component: "h1", variant: "h5" }, "Sign in"),
react_1.default.createElement("form", { className: classes.form, noValidate: true },
react_1.default.createElement(core_1.TextField, { variant: "outlined", margin: "normal", required: true, fullWidth: true, id: "email", label: "Email Address", name: "email", autoComplete: "email", autoFocus: true }),
react_1.default.createElement(core_1.TextField, { variant: "outlined", margin: "normal", required: true, fullWidth: true, name: "password", label: "Password", type: "password", id: "password", autoComplete: "current-password" }),
react_1.default.createElement(core_1.FormControlLabel, { control: react_1.default.createElement(core_1.Checkbox, { value: "remember", color: "primary" }), label: "Remember me" }),
react_1.default.createElement(core_1.Button, { type: "submit", fullWidth: true, variant: "contained", color: "primary", className: classes.submit }, "Sign In"),
react_1.default.createElement(core_1.Grid, { container: true },
react_1.default.createElement(core_1.Grid, { item: true, xs: true },
react_1.default.createElement(core_1.Link, { href: "#", variant: "body2" }, "Forgot password?")),
react_1.default.createElement(core_1.Grid, { item: true },
react_1.default.createElement(core_1.Link, { href: "#", variant: "body2" }, "Don't have an account? Sign Up"))))),
react_1.default.createElement(Copyright, null)));
}
exports.MockComponent = MockComponent;
const DarkTheme = () => {
return (react_1.default.createElement(theme_provider_1.ThemeProvider, { colorScheme: "dark" },
react_1.default.createElement(MockComponent, null)));
};
exports.DarkTheme = DarkTheme;
const LightTheme = () => {
return (react_1.default.createElement(theme_provider_1.ThemeProvider, { colorScheme: "light" },
react_1.default.createElement(MockComponent, null)));
};
exports.LightTheme = LightTheme;
//# sourceMappingURL=theme.composition.js.map