mirror of
https://github.com/MichaelMure/git-bug.git
synced 2024-12-15 10:12:06 +03:00
Use proper semantic color values
Adjust header colors on light theme - Use adjusted background-color for header instead of text.hint. - Use slightly darker secondary font color for better readability against the head background color. Use more semantic theme colors for bug list Use more semantic theme colors for bug messages Fix usage of text hint for filter header
This commit is contained in:
parent
548febcbc7
commit
9f6dcc887d
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import { fade, makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
import Author, { Avatar } from 'src/components/Author';
|
||||
import Content from 'src/components/Content';
|
||||
@ -31,7 +31,9 @@ const useStyles = makeStyles((theme) => ({
|
||||
padding: '0.5rem 1rem',
|
||||
borderBottom: `1px solid ${theme.palette.divider}`,
|
||||
display: 'flex',
|
||||
backgroundColor: fade(theme.palette.text.hint, 0.05),
|
||||
borderTopRightRadius: theme.shape.borderRadius,
|
||||
borderTopLeftRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.info.main,
|
||||
},
|
||||
title: {
|
||||
flex: 1,
|
||||
|
@ -3,7 +3,7 @@ import { LocationDescriptor } from 'history';
|
||||
import React from 'react';
|
||||
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
import { fade, makeStyles } from '@material-ui/core/styles';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
|
||||
import ErrorOutline from '@material-ui/icons/ErrorOutline';
|
||||
|
||||
@ -19,7 +19,7 @@ import { useBugCountQuery } from './FilterToolbar.generated';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
toolbar: {
|
||||
backgroundColor: fade(theme.palette.text.hint, 0.05),
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
borderColor: theme.palette.divider,
|
||||
borderWidth: '1px 0',
|
||||
borderStyle: 'solid',
|
||||
|
@ -6,7 +6,7 @@ import { Button } from '@material-ui/core';
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import InputBase from '@material-ui/core/InputBase';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import { fade, makeStyles, Theme } from '@material-ui/core/styles';
|
||||
import { makeStyles, Theme } from '@material-ui/core/styles';
|
||||
import ErrorOutline from '@material-ui/icons/ErrorOutline';
|
||||
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
|
||||
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
|
||||
@ -56,10 +56,11 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
|
||||
},
|
||||
search: {
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
color: theme.palette.text.secondary,
|
||||
borderColor: theme.palette.divider,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1px',
|
||||
backgroundColor: fade(theme.palette.text.hint, 0.05),
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
padding: theme.spacing(0, 1),
|
||||
width: ({ searching }) => (searching ? '20rem' : '15rem'),
|
||||
transition: theme.transitions.create([
|
||||
@ -69,13 +70,11 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
|
||||
]),
|
||||
},
|
||||
searchFocused: {
|
||||
borderColor: fade(theme.palette.primary.main, 0.4),
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
width: '20rem!important',
|
||||
},
|
||||
placeholderRow: {
|
||||
padding: theme.spacing(1),
|
||||
borderBottomColor: theme.palette.grey['300'],
|
||||
borderBottomColor: theme.palette.divider,
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomStyle: 'solid',
|
||||
display: 'flex',
|
||||
@ -91,7 +90,8 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
|
||||
...theme.typography.h5,
|
||||
padding: theme.spacing(8),
|
||||
textAlign: 'center',
|
||||
borderBottomColor: theme.palette.grey['300'],
|
||||
color: theme.palette.text.hint,
|
||||
borderBottomColor: theme.palette.divider,
|
||||
borderBottomWidth: '1px',
|
||||
borderBottomStyle: 'solid',
|
||||
'& > p': {
|
||||
@ -99,12 +99,15 @@ const useStyles = makeStyles<Theme, StylesProps>((theme) => ({
|
||||
},
|
||||
},
|
||||
errorBox: {
|
||||
color: theme.palette.error.main,
|
||||
color: theme.palette.error.dark,
|
||||
'& > pre': {
|
||||
fontSize: '1rem',
|
||||
textAlign: 'left',
|
||||
backgroundColor: theme.palette.grey['900'],
|
||||
color: theme.palette.common.white,
|
||||
borderColor: theme.palette.divider,
|
||||
borderWidth: '1px',
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
borderStyle: 'solid',
|
||||
color: theme.palette.text.primary,
|
||||
marginTop: theme.spacing(4),
|
||||
padding: theme.spacing(2, 3),
|
||||
},
|
||||
|
@ -5,6 +5,14 @@ const defaultDarkTheme = createMuiTheme({
|
||||
type: 'dark',
|
||||
primary: {
|
||||
main: '#263238',
|
||||
light: '#525252',
|
||||
},
|
||||
error: {
|
||||
main: '#f44336',
|
||||
dark: '#ff4949',
|
||||
},
|
||||
info: {
|
||||
main: '#2a393e',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
@ -5,6 +5,13 @@ const defaultLightTheme = createMuiTheme({
|
||||
type: 'light',
|
||||
primary: {
|
||||
main: '#263238',
|
||||
light: '#f5f5f5',
|
||||
},
|
||||
info: {
|
||||
main: '#e2f1ff',
|
||||
},
|
||||
text: {
|
||||
secondary: '#555',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user