Skip to content

Commit 04e7b4a

Browse files
kulgavykulgavy
committed
Typography page design improvements
1 parent 5ebb46a commit 04e7b4a

File tree

8 files changed

+231
-115
lines changed

8 files changed

+231
-115
lines changed

‎src/components/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import React from 'react';
22
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
33
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
44

5-
import themes from '../themes';
5+
import themes, { overrides } from '../themes';
66
import Layout from './Layout';
77
import Error from '../pages/error';
88
import Login from '../pages/login';
99

10-
const theme = createMuiTheme(themes.default.theme);
10+
const theme = createMuiTheme({...themes.default, ...overrides});
1111

1212
const PrivateRoute = ({ component, ...rest }) => {
1313
return (

‎src/components/Sidebar/components/SidebarLink.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,11 @@ const styles = theme => ({
154154
paddingTop: theme.spacing.unit * 2,
155155
paddingBottom: theme.spacing.unit * 2,
156156
"&:hover, &:focus": {
157-
backgroundColor: theme.palette.primary.light
157+
backgroundColor: theme.palette.background.light
158158
}
159159
},
160160
linkActive: {
161-
backgroundColor: theme.palette.primary.light
161+
backgroundColor: theme.palette.background.light
162162
},
163163
linkNested: {
164164
paddingLeft: 0,

‎src/components/Widget/WidgetView.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,23 @@ import { Paper, IconButton, Menu, MenuItem, withStyles } from "@material-ui/core
44
import { MoreVert as MoreIcon } from '@material-ui/icons';
55
import Typography from "@material-ui/core/es/Typography/Typography";
66

7-
const Widget = ({ classes, children, title, noBodyPadding, bodyClass, className, ...props }) => (
7+
const Widget = ({ classes, children, title, noBodyPadding, bodyClass, className, disableWidgetMenu, ...props }) => (
88
<div className={classes.widgetWrapper}>
99
<Paper className={classes.paper} classes={{ root: classes.widgetRoot }}>
1010
<div className={classes.widgetHeader}>
1111
<Typography variant="headline" color="textSecondary">{title}</Typography>
12-
<IconButton
13-
color="primary"
14-
classes={{ root: classes.moreButton }}
15-
aria-owns="widget-menu"
16-
aria-haspopup="true"
17-
onClick={() => props.setMoreMenuOpen(true)}
18-
buttonRef={props.setMoreButtonRef}
19-
>
20-
<MoreIcon />
21-
</IconButton>
12+
{!disableWidgetMenu && (
13+
<IconButton
14+
color="primary"
15+
classes={{ root: classes.moreButton }}
16+
aria-owns="widget-menu"
17+
aria-haspopup="true"
18+
onClick={() => props.setMoreMenuOpen(true)}
19+
buttonRef={props.setMoreButtonRef}
20+
>
21+
<MoreIcon />
22+
</IconButton>
23+
)}
2224
</div>
2325
<div className={classnames(classes.widgetBody, { [classes.noPadding]: noBodyPadding, [bodyClass]: bodyClass })}>
2426
{children}

‎src/components/Wrappers/Wrappers.js‎

Lines changed: 89 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,99 @@
11
import React from "react";
2-
import { withStyles, Badge as BadgeBase } from "@material-ui/core";
2+
import { withStyles, withTheme, Badge as BadgeBase, Typography as TypographyBase } from "@material-ui/core";
33
import classnames from "classnames";
44

5-
const BadgeExtended = ({ classes, children, ...props }) => (
6-
<BadgeBase
7-
classes={{
8-
badge: classnames(classes.badge, {
9-
[classes[props.color]]: classes[props.color]
10-
})
11-
}}
12-
{...props}
13-
>
14-
{children}
15-
</BadgeBase>
16-
);
5+
const getColor = (color, theme, brigtness = 'main') => {
6+
if (color && theme.palette[color] && theme.palette[color][brigtness]) {
7+
return theme.palette[color][brigtness];
8+
}
9+
};
10+
11+
const getFontWeight = (style) => {
12+
switch (style) {
13+
case 'light':
14+
return 300;
15+
case 'medium':
16+
return 500;
17+
case 'bold':
18+
return 600;
19+
default:
20+
return 400;
21+
}
22+
};
23+
24+
const getFontSize = (size, variant = '', theme) => {
25+
let multiplier;
26+
27+
switch (size) {
28+
case 'sm':
29+
multiplier = .8;
30+
break;
31+
case 'md':
32+
multiplier = 1.5;
33+
break;
34+
case 'xl':
35+
multiplier = 2;
36+
break;
37+
case 'xxl':
38+
multiplier = 3;
39+
break;
40+
default:
41+
multiplier = 1;
42+
break;
43+
}
44+
45+
const defaultSize = variant && theme.typography[variant] ? theme.typography[variant].fontSize : theme.typography.fontSize + 'px';
46+
47+
return `calc(${defaultSize} * ${multiplier})`;
48+
}
49+
50+
const createStyled = (styles, options) => {
51+
const Styled = props => {
52+
const { children, ...other } = props;
53+
return children(other);
54+
}
55+
56+
return withStyles(styles, options)(Styled);
57+
}
58+
59+
const BadgeExtended = ({ classes, theme, children, ...props }) => {
60+
const Styled = createStyled({
61+
badge: {
62+
backgroundColor: getColor(props.color, theme, props.colorBrightness)
63+
},
64+
});
65+
66+
return (
67+
<Styled>
68+
{(styledProps) => <BadgeBase
69+
classes={{ badge: classnames(classes.badge, styledProps.classes.badge) }}
70+
{...props}
71+
>
72+
{children}
73+
</BadgeBase>}
74+
</Styled>
75+
);
76+
}
1777

1878
export const Badge = withStyles(theme => ({
1979
badge: {
2080
fontWeight: 600,
2181
height: 16,
2282
minWidth: 16,
2383
},
24-
warning: {
25-
backgroundColor: theme.palette.warning.main
26-
}
27-
}))(BadgeExtended);
84+
}), { withTheme: true })(BadgeExtended);
85+
86+
const TypographyExtended = ({ theme, children, weight, size, ...props }) => (
87+
<TypographyBase
88+
style={{
89+
color: getColor(props.color, theme, props.colorBrightness),
90+
fontWeight: getFontWeight(weight),
91+
fontSize: getFontSize(size, props.variant, theme),
92+
}}
93+
{...props}
94+
>
95+
{children}
96+
</TypographyBase>
97+
);
98+
99+
export const Typography = withTheme()(TypographyExtended);

‎src/pages/login/LoginView.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,17 +158,17 @@ const styles = theme => ({
158158
},
159159
textFieldUnderline: {
160160
'&:before': {
161-
borderBottomColor: theme.palette.primary.light,
161+
borderBottomColor: theme.palette.background.light,
162162
},
163163
'&:after': {
164164
borderBottomColor: theme.palette.primary.main,
165165
},
166166
'&:hover:before': {
167-
borderBottomColor: `${theme.palette.primary.light} !important`,
167+
borderBottomColor: `${theme.palette.background.light} !important`,
168168
}
169169
},
170170
textField: {
171-
borderBottomColor: theme.palette.primary.light,
171+
borderBottomColor: theme.palette.background.light,
172172
},
173173
formButtons: {
174174
width: '100%',

‎src/pages/typography/Typography.js‎

Lines changed: 95 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,103 @@
11
import React from 'react';
2-
import { Grid, Typography } from '@material-ui/core';
2+
import { Grid, withStyles } from '@material-ui/core';
33

4+
import PageTitle from '../../components/PageTitle';
45
import Widget from '../../components/Widget';
6+
import { Typography } from '../../components/Wrappers';
57

6-
const TypographyPage = (props) => (
7-
<Grid container spacing={32}>
8-
<Grid item xs={12} md={6}>
9-
<Widget title="Headings" upperTitle>
10-
<Typography variant="h1" gutterBottom>
11-
h1. Heading
12-
</Typography>
13-
<Typography variant="h2" gutterBottom>
14-
h2. Heading
15-
</Typography>
16-
<Typography variant="h3" gutterBottom>
17-
h3. Heading
18-
</Typography>
19-
<Typography variant="h4" gutterBottom>
20-
h4. Heading
21-
</Typography>
22-
<Typography variant="h5" gutterBottom>
23-
h5. Heading
24-
</Typography>
25-
<Typography variant="h6" gutterBottom>
26-
h6. Heading
27-
</Typography>
28-
</Widget>
8+
const TypographyPage = ({ classes }) => (
9+
<React.Fragment>
10+
<PageTitle title="Typography"/>
11+
<Grid container spacing={32}>
12+
<Grid item xs={12} md={6}>
13+
<Widget title="Headings" disableWidgetMenu>
14+
<div className={classes.dashedBorder}>
15+
<Typography variant="h1" className={classes.text}>
16+
h1. Heading
17+
</Typography>
18+
<Typography variant="h2" className={classes.text}>
19+
h2. Heading
20+
</Typography>
21+
<Typography variant="h3" className={classes.text}>
22+
h3. Heading
23+
</Typography>
24+
<Typography variant="h4" className={classes.text}>
25+
h4. Heading
26+
</Typography>
27+
<Typography variant="h5" className={classes.text}>
28+
h5. Heading
29+
</Typography>
30+
<Typography variant="h6">
31+
h6. Heading
32+
</Typography>
33+
</div>
34+
</Widget>
35+
</Grid>
36+
<Grid item xs={12} md={6}>
37+
<Widget title="Typography Colors" disableWidgetMenu>
38+
<div className={classes.dashedBorder}>
39+
<Typography variant="h1" color="primary" className={classes.text}>
40+
h1. Heading
41+
</Typography>
42+
<Typography variant="h2" color="success" className={classes.text}>
43+
h2. Heading
44+
</Typography>
45+
<Typography variant="h3" color="secondary" className={classes.text}>
46+
h3. Heading
47+
</Typography>
48+
<Typography variant="h4" color="warning" className={classes.text}>
49+
h4. Heading
50+
</Typography>
51+
<Typography variant="h5" color="primary" colorBrightness="light" className={classes.text}>
52+
h5. Heading
53+
</Typography>
54+
<Typography variant="h6" color="info">
55+
h6. Heading
56+
</Typography>
57+
</div>
58+
</Widget>
59+
</Grid>
60+
<Grid item xs={12} md={6}>
61+
<Widget title="Basic Text Settings" disableWidgetMenu>
62+
<div className={classes.dashedBorder}>
63+
<Typography className={classes.text}>Basic text</Typography>
64+
<Typography className={classes.text} weight="light">Basic light text</Typography>
65+
<Typography className={classes.text} weight="medium">Basic medium text</Typography>
66+
<Typography className={classes.text} weight="bold">Basic bold text</Typography>
67+
<Typography className={classes.text}>BASIC UPPERCASE TEXT</Typography>
68+
<Typography className={classes.text}>basic lowercase text</Typography>
69+
<Typography className={classes.text}>Basic Capitalized Text</Typography>
70+
<Typography><i>Basic Cursive Text</i></Typography>
71+
</div>
72+
</Widget>
73+
</Grid>
74+
<Grid item xs={12} md={6}>
75+
<Widget title="Text Size" disableWidgetMenu>
76+
<div className={classes.dashedBorder}>
77+
<Typography className={classes.text} size="sm">Heading Typography SM Font Size</Typography>
78+
<Typography className={classes.text}>Heading Typography Regular Font Size</Typography>
79+
<Typography className={classes.text} size="md">Heading Typography MD Font Size</Typography>
80+
<Typography className={classes.text} size="xl">Heading Typography XL Font Size</Typography>
81+
<Typography className={classes.text} size="xxl">Heading Typography XXL Font Size</Typography>
82+
</div>
83+
</Widget>
84+
</Grid>
2985
</Grid>
30-
<Grid item xs={12} md={6}>
31-
<Widget title="Content" upperTitle>
32-
<Typography variant="subtitle1" gutterBottom>
33-
subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
34-
</Typography>
35-
<Typography variant="subtitle2" gutterBottom>
36-
subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
37-
</Typography>
38-
<Typography variant="body1" gutterBottom>
39-
body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
40-
unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
41-
dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
42-
</Typography>
43-
<Typography variant="body2" gutterBottom>
44-
body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
45-
unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
46-
dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
47-
</Typography>
48-
<Typography variant="button" gutterBottom>
49-
button text
50-
</Typography>
51-
<Typography variant="caption" gutterBottom>
52-
caption text
53-
</Typography>
54-
<Typography variant="overline" gutterBottom>
55-
overline text
56-
</Typography>
57-
</Widget>
58-
</Grid>
59-
<Grid item xs={12} md={6}>
60-
<Widget title="Typography Colors" upperTitle>
61-
<Typography variant="h4" color="error" gutterBottom>
62-
Error Color
63-
</Typography>
64-
<Typography variant="h4" color="primary" gutterBottom>
65-
Primary Color
66-
</Typography>
67-
<Typography variant="h4" color="secondary" gutterBottom>
68-
Secondary Color
69-
</Typography>
70-
<Typography variant="h4" color="textPrimary" gutterBottom>
71-
TextPrimary Color
72-
</Typography>
73-
<Typography variant="h4" color="textSecondary" gutterBottom>
74-
TextSecondary Color
75-
</Typography>
76-
</Widget>
77-
</Grid>
78-
</Grid>
86+
</React.Fragment>
7987
);
8088

89+
const styles = theme => ({
90+
dashedBorder: {
91+
border: '1px dashed',
92+
borderColor: theme.palette.primary.main,
93+
padding: theme.spacing.unit * 2,
94+
paddingTop: theme.spacing.unit * 4,
95+
paddingBottom: theme.spacing.unit * 4,
96+
marginTop: theme.spacing.unit,
97+
},
98+
text: {
99+
marginBottom: theme.spacing.unit * 2,
100+
},
101+
})
81102

82-
83-
export default TypographyPage;
103+
export default withStyles(styles)(TypographyPage);

0 commit comments

Comments
 (0)