aboutsummaryrefslogtreecommitdiffstats
path: root/webui/src
diff options
context:
space:
mode:
Diffstat (limited to 'webui/src')
-rw-r--r--webui/src/App.js2
-rw-r--r--webui/src/Label.js7
-rw-r--r--webui/src/bug/Bug.js26
-rw-r--r--webui/src/bug/LabelChange.js4
-rw-r--r--webui/src/bug/Message.js6
-rw-r--r--webui/src/bug/SetStatus.js4
-rw-r--r--webui/src/bug/SetTitle.js4
-rw-r--r--webui/src/bug/Timeline.js2
-rw-r--r--webui/src/index.js6
-rw-r--r--webui/src/list/BugRow.js29
-rw-r--r--webui/src/list/List.js2
11 files changed, 50 insertions, 42 deletions
diff --git a/webui/src/App.js b/webui/src/App.js
index b2eb6bf0..4a52eca1 100644
--- a/webui/src/App.js
+++ b/webui/src/App.js
@@ -11,7 +11,7 @@ import ListQuery from './list/ListQuery';
const useStyles = makeStyles(theme => ({
appTitle: {
- ...theme.typography.title,
+ ...theme.typography.h6,
color: 'white',
textDecoration: 'none',
},
diff --git a/webui/src/Label.js b/webui/src/Label.js
index fc8a3a22..e5b00b12 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -27,10 +27,11 @@ const createStyle = color => ({
const useStyles = makeStyles(theme => ({
label: {
- ...theme.typography.body2,
- padding: '0 6px',
+ ...theme.typography.body1,
+ padding: '1px 6px 0.5px',
fontSize: '0.9em',
- margin: '0 1px',
+ fontWeight: '500',
+ margin: '0.05em 1px calc(-1.5px + 0.05em)',
borderRadius: '3px',
display: 'inline-block',
borderBottom: 'solid 1.5px',
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.js
index ff57dfa9..19b8b9ce 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.js
@@ -11,29 +11,29 @@ const useStyles = makeStyles(theme => ({
main: {
maxWidth: 800,
margin: 'auto',
- marginTop: theme.spacing.unit * 4,
+ marginTop: theme.spacing(4),
},
header: {
- marginLeft: theme.spacing.unit + 40,
+ marginLeft: theme.spacing(1) + 40,
},
title: {
- ...theme.typography.headline,
+ ...theme.typography.h5,
},
id: {
- ...theme.typography.subheading,
- marginLeft: theme.spacing.unit,
+ ...theme.typography.subtitle1,
+ marginLeft: theme.spacing(1),
},
container: {
display: 'flex',
- marginBottom: theme.spacing.unit,
+ marginBottom: theme.spacing(1),
},
timeline: {
flex: 1,
- marginTop: theme.spacing.unit * 2,
- marginRight: theme.spacing.unit * 2,
+ marginTop: theme.spacing(2),
+ marginRight: theme.spacing(2),
},
sidebar: {
- marginTop: theme.spacing.unit * 2,
+ marginTop: theme.spacing(2),
flex: '0 0 200px',
},
labelList: {
@@ -42,8 +42,8 @@ const useStyles = makeStyles(theme => ({
margin: 0,
},
label: {
- marginTop: theme.spacing.unit,
- marginBottom: theme.spacing.unit,
+ marginTop: theme.spacing(1),
+ marginBottom: theme.spacing(1),
'& > *': {
display: 'block',
},
@@ -70,10 +70,10 @@ function Bug({ bug }) {
<TimelineQuery id={bug.id} />
</div>
<div className={classes.sidebar}>
- <Typography variant={'subheading'}>Labels</Typography>
+ <Typography variant={'subtitle1'}>Labels</Typography>
<ul className={classes.labelList}>
{bug.labels.map(l => (
- <li className={classes.label}>
+ <li className={classes.label} key={l.name}>
<Label label={l} key={l.name} />
</li>
))}
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 2405fdb5..4773e7eb 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -7,8 +7,8 @@ import Label from '../Label';
const useStyles = makeStyles(theme => ({
main: {
- ...theme.typography.body2,
- marginLeft: theme.spacing.unit + 40,
+ ...theme.typography.body1,
+ marginLeft: theme.spacing(1) + 40,
},
author: {
fontWeight: 'bold',
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 64498135..db67a3f5 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -19,10 +19,10 @@ const useStyles = makeStyles(theme => ({
},
bubble: {
flex: 1,
- marginLeft: theme.spacing.unit,
+ marginLeft: theme.spacing(1),
},
header: {
- ...theme.typography.body2,
+ ...theme.typography.body1,
color: '#444',
padding: '0.5rem 1rem',
borderBottom: '1px solid #ddd',
@@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({
marginLeft: '0.5rem',
},
body: {
- ...theme.typography.body1,
+ ...theme.typography.body2,
padding: '0 1rem',
},
}));
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index eeff1a7b..070bbb8f 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -6,8 +6,8 @@ import Date from '../Date';
const useStyles = makeStyles(theme => ({
main: {
- ...theme.typography.body2,
- marginLeft: theme.spacing.unit + 40,
+ ...theme.typography.body1,
+ marginLeft: theme.spacing(1) + 40,
},
}));
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index 9ba5a76e..e4c30a8d 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -6,8 +6,8 @@ import Date from '../Date';
const useStyles = makeStyles(theme => ({
main: {
- ...theme.typography.body2,
- marginLeft: theme.spacing.unit + 40,
+ ...theme.typography.body1,
+ marginLeft: theme.spacing(1) + 40,
},
bold: {
fontWeight: 'bold',
diff --git a/webui/src/bug/Timeline.js b/webui/src/bug/Timeline.js
index d77e0d4b..7d1946f2 100644
--- a/webui/src/bug/Timeline.js
+++ b/webui/src/bug/Timeline.js
@@ -8,7 +8,7 @@ import SetTitle from './SetTitle';
const useStyles = makeStyles(theme => ({
main: {
'& > *:not(:last-child)': {
- marginBottom: theme.spacing.unit * 2,
+ marginBottom: theme.spacing(2),
},
},
}));
diff --git a/webui/src/index.js b/webui/src/index.js
index 885911f5..f71e82f3 100644
--- a/webui/src/index.js
+++ b/webui/src/index.js
@@ -1,4 +1,3 @@
-import { install } from '@material-ui/styles';
import ThemeProvider from '@material-ui/styles/ThemeProvider';
import { createMuiTheme } from '@material-ui/core/styles';
import ApolloClient from 'apollo-boost';
@@ -7,10 +6,7 @@ import { ApolloProvider } from 'react-apollo';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
-install();
-
-// TODO(sandhose): this is temporary until Material-UI v4 goes out
-const App = React.lazy(() => import('./App'));
+import App from './App';
const theme = createMuiTheme();
diff --git a/webui/src/list/BugRow.js b/webui/src/list/BugRow.js
index c5fc7647..7b601916 100644
--- a/webui/src/list/BugRow.js
+++ b/webui/src/list/BugRow.js
@@ -13,13 +13,13 @@ import Author from '../Author';
const Open = ({ className }) => (
<Tooltip title="Open">
- <ErrorOutline nativeColor="#28a745" className={className} />
+ <ErrorOutline htmlColor="#28a745" className={className} />
</Tooltip>
);
const Closed = ({ className }) => (
<Tooltip title="Closed">
- <ErrorOutline nativeColor="#cb2431" className={className} />
+ <ErrorOutline htmlColor="#cb2431" className={className} />
</Tooltip>
);
@@ -38,21 +38,34 @@ const useStyles = makeStyles(theme => ({
cell: {
display: 'flex',
alignItems: 'center',
+ padding: theme.spacing(1),
'& a': {
textDecoration: 'none',
},
},
status: {
- margin: 10,
+ margin: theme.spacing(1, 2),
},
expand: {
width: '100%',
+ lineHeight: '20px',
},
title: {
display: 'inline',
+ color: theme.palette.text.primary,
+ fontSize: '1.3rem',
+ fontWeight: 500,
+ },
+ details: {
+ ...theme.typography.textSecondary,
+ lineHeight: '1.5rem',
+ color: theme.palette.text.secondary,
},
labels: {
- paddingLeft: theme.spacing.unit,
+ paddingLeft: theme.spacing(1),
+ '& > *': {
+ display: 'inline-block',
+ },
},
}));
@@ -65,9 +78,7 @@ function BugRow({ bug }) {
<div className={classes.expand}>
<Link to={'bug/' + bug.humanId}>
<div className={classes.expand}>
- <Typography variant={'title'} className={classes.title}>
- {bug.title}
- </Typography>
+ <span className={classes.title}>{bug.title}</span>
{bug.labels.length > 0 && (
<span className={classes.labels}>
{bug.labels.map(l => (
@@ -77,11 +88,11 @@ function BugRow({ bug }) {
)}
</div>
</Link>
- <Typography color={'textSecondary'}>
+ <div className={classes.details}>
{bug.humanId} opened
<Date date={bug.createdAt} />
by {bug.author.displayName}
- </Typography>
+ </div>
</div>
</TableCell>
</TableRow>
diff --git a/webui/src/list/List.js b/webui/src/list/List.js
index 45c2c963..54b2fe97 100644
--- a/webui/src/list/List.js
+++ b/webui/src/list/List.js
@@ -11,7 +11,7 @@ const useStyles = makeStyles(theme => ({
main: {
maxWidth: 600,
margin: 'auto',
- marginTop: theme.spacing.unit * 4,
+ marginTop: theme.spacing(4),
},
pagination: {
...theme.typography.overline,
generated by cgit (git 2.34.1) at 2024-09-20 11:53:12 +0000