Skip to content

Commit

Permalink
[docs] Migrate paperbase premium template to emotion (#26658)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicasas
vicasas authored Jun 11, 2021
1 parent 07f638f commit 40fb67f
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 397 deletions.
53 changes: 11 additions & 42 deletions docs/src/pages/premium-themes/paperbase/Content.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
Expand All @@ -9,85 +8,55 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';

import { withStyles } from '@material-ui/styles';
import SearchIcon from '@material-ui/icons/Search';
import RefreshIcon from '@material-ui/icons/Refresh';
import Box from 'packages/material-ui-system/src/Box';

const styles = (theme) => ({
paper: {
maxWidth: 936,
margin: 'auto',
overflow: 'hidden',
},
searchBar: {
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
},
searchInput: {
fontSize: theme.typography.fontSize,
},
block: {
display: 'block',
},
addUser: {
marginRight: theme.spacing(1),
},
contentWrapper: {
margin: '40px 16px',
},
});

function Content(props) {
const { classes } = props;

function Content() {
return (
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 936, margin: 'auto', overflow: 'hidden' }}>
<AppBar
className={classes.searchBar}
position="static"
color="default"
elevation={0}
sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.12)' }}
>
<Toolbar>
<Grid container spacing={2} alignItems="center">
<Grid item>
<SearchIcon className={classes.block} color="inherit" />
<SearchIcon color="inherit" sx={{ display: 'block' }} />
</Grid>
<Grid item xs>
<TextField
fullWidth
placeholder="Search by email address, phone number, or user UID"
InputProps={{
disableUnderline: true,
className: classes.searchInput,
sx: { fontSize: 'default' },
}}
variant="standard"
/>
</Grid>
<Grid item>
<Button variant="contained" className={classes.addUser}>
<Button variant="contained" sx={{ mr: 1 }}>
Add user
</Button>
<Tooltip title="Reload">
<IconButton>
<RefreshIcon className={classes.block} color="inherit" />
<RefreshIcon color="inherit" sx={{ display: 'block' }} />
</IconButton>
</Tooltip>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<div className={classes.contentWrapper}>
<Box sx={{ m: '40px 16px' }}>
<Typography color="text.secondary" align="center">
No users for this project yet
</Typography>
</div>
</Box>
</Paper>
);
}

Content.propTypes = {
classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Content);
export default Content;
50 changes: 11 additions & 39 deletions docs/src/pages/premium-themes/paperbase/Content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,83 +8,55 @@ import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import { Theme } from '@material-ui/core/styles';
import { withStyles, WithStyles } from '@material-ui/styles';
import SearchIcon from '@material-ui/icons/Search';
import RefreshIcon from '@material-ui/icons/Refresh';
import Box from 'packages/material-ui-system/src/Box';

const styles = (theme: Theme) => ({
paper: {
maxWidth: 936,
margin: 'auto',
overflow: 'hidden',
},
searchBar: {
borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
},
searchInput: {
fontSize: theme.typography.fontSize,
},
block: {
display: 'block',
},
addUser: {
marginRight: theme.spacing(1),
},
contentWrapper: {
margin: '40px 16px',
},
});

export interface ContentProps extends WithStyles<typeof styles> {}

function Content(props: ContentProps) {
const { classes } = props;

function Content() {
return (
<Paper className={classes.paper}>
<Paper sx={{ maxWidth: 936, margin: 'auto', overflow: 'hidden' }}>
<AppBar
className={classes.searchBar}
position="static"
color="default"
elevation={0}
sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.12)' }}
>
<Toolbar>
<Grid container spacing={2} alignItems="center">
<Grid item>
<SearchIcon className={classes.block} color="inherit" />
<SearchIcon color="inherit" sx={{ display: 'block' }} />
</Grid>
<Grid item xs>
<TextField
fullWidth
placeholder="Search by email address, phone number, or user UID"
InputProps={{
disableUnderline: true,
className: classes.searchInput,
sx: { fontSize: 'default' },
}}
variant="standard"
/>
</Grid>
<Grid item>
<Button variant="contained" className={classes.addUser}>
<Button variant="contained" sx={{ mr: 1 }}>
Add user
</Button>
<Tooltip title="Reload">
<IconButton>
<RefreshIcon className={classes.block} color="inherit" />
<RefreshIcon color="inherit" sx={{ display: 'block' }} />
</IconButton>
</Tooltip>
</Grid>
</Grid>
</Toolbar>
</AppBar>
<div className={classes.contentWrapper}>
<Box sx={{ m: '40px 16px' }}>
<Typography color="text.secondary" align="center">
No users for this project yet
</Typography>
</div>
</Box>
</Paper>
);
}

export default withStyles(styles)(Content);
export default Content;
51 changes: 17 additions & 34 deletions docs/src/pages/premium-themes/paperbase/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,10 @@ import Toolbar from '@material-ui/core/Toolbar';
import Tooltip from '@material-ui/core/Tooltip';
import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/styles';

const lightColor = 'rgba(255, 255, 255, 0.7)';

const styles = (theme) => ({
secondaryBar: {
zIndex: 0,
},
iconButtonAvatar: {
padding: 4,
},
link: {
textDecoration: 'none',
color: lightColor,
'&:hover': {
color: theme.palette.common.white,
},
},
button: {
borderColor: lightColor,
},
});

function Header(props) {
const { classes, onDrawerToggle } = props;
const { onDrawerToggle } = props;

return (
<React.Fragment>
Expand All @@ -58,7 +37,17 @@ function Header(props) {
</Grid>
<Grid item xs />
<Grid item>
<Link className={classes.link} href="#" variant="body2">
<Link
href="#"
variant="body2"
sx={{
textDecoration: 'none',
color: lightColor,
'&:hover': {
color: 'common.white',
},
}}
>
Go to docs
</Link>
</Grid>
Expand All @@ -70,7 +59,7 @@ function Header(props) {
</Tooltip>
</Grid>
<Grid item>
<IconButton color="inherit" className={classes.iconButtonAvatar}>
<IconButton color="inherit" sx={{ p: 0.5 }}>
<Avatar src="/static/images/avatar/1.jpg" alt="My Avatar" />
</IconButton>
</Grid>
Expand All @@ -79,10 +68,10 @@ function Header(props) {
</AppBar>
<AppBar
component="div"
className={classes.secondaryBar}
color="primary"
position="static"
elevation={0}
sx={{ zIndex: 0 }}
>
<Toolbar>
<Grid container alignItems="center" spacing={1}>
Expand All @@ -93,7 +82,7 @@ function Header(props) {
</Grid>
<Grid item>
<Button
className={classes.button}
sx={{ borderColor: lightColor }}
variant="outlined"
color="inherit"
size="small"
Expand All @@ -111,12 +100,7 @@ function Header(props) {
</Grid>
</Toolbar>
</AppBar>
<AppBar
component="div"
className={classes.secondaryBar}
position="static"
elevation={0}
>
<AppBar component="div" position="static" elevation={0} sx={{ zIndex: 0 }}>
<Tabs value={0} textColor="inherit">
<Tab label="Users" />
<Tab label="Sign-in method" />
Expand All @@ -129,8 +113,7 @@ function Header(props) {
}

Header.propTypes = {
classes: PropTypes.object.isRequired,
onDrawerToggle: PropTypes.func.isRequired,
};

export default withStyles(styles)(Header);
export default Header;
Loading

0 comments on commit 40fb67f

Please sign in to comment.