@material-ui/core/colors#red JavaScript Examples
The following examples show how to use
@material-ui/core/colors#red.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: dark.js From 8086-emulator-web with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
type: "dark",
primary: {
main: "#F4C430",
light: "rgb(255, 197, 112)",
dark: "rgb(200, 147, 89)",
contrastText: "rgba(0, 0, 0, 0.87)",
},
secondary: {
main: "#101010",
contrastText: "#FCFDFA",
},
background: {
paper: "#424242",
default: "#303030",
},
error: {
main: red.A400,
},
},
typography: {
fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
button: {
fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
},
},
})
Example #2
| Source File: theme.js From warsinhk with MIT License | 6 votes |
|
palette = {
primary: {
main: "#505096",
light: "#f5f5f6",
dark: "#000051",
text: "#ffffff",
contrastText: "#ffffff",
},
secondary: {
main: "#ef5350",
light: "#ff867c",
dark: "#b61827",
text: "#000000",
contrastText: "#000000",
},
background: {
default: "#f5f5f6",
paper: "#fff",
},
trafficLight: {
red: "#c0392b",
orange: "#e67e22",
green: "#27ae60",
},
}
Example #3
| Source File: theme.js From react-storefront-starter-app with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
overrides: {},
})
Example #4
| Source File: NavItem.js From youtube-clone with MIT License | 6 votes |
|
useStyles = makeStyles((theme) => ({
active: {
backgroundColor: grey[300],
"&:hover": { backgroundColor: grey[400] },
},
icon: {
padding: theme.spacing(0, 1),
},
iconActive: {
color: red[600],
},
text: {
color: "inherit" /* blue colors for links too */,
textDecoration: "none" /* no underline */,
"&:hover": {
color: "inherit" /* blue colors for links too */,
textDecoration: "none" /* no underline */,
},
},
}))
Example #5
| Source File: withTheme.js From yi-note with GNU General Public License v3.0 | 6 votes |
|
muiTheme = createMuiTheme({
zIndex: {
modal: 8000,
tooltip: 8050
},
palette: {
primary: { ...red, main: red[700] },
secondary: blue
}
})
Example #6
| Source File: auth-token.js From js-miniapp with MIT License | 6 votes |
|
useStyles = makeStyles((theme) => ({
wrapper: {
position: 'relative',
marginTop: 20,
},
buttonSuccess: {
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[700],
},
},
buttonFailure: {
backgroundColor: red[500],
'&:hover': {
backgroundColor: red[700],
},
},
buttonProgress: {
position: 'absolute',
top: 'calc(50% - 10px)',
left: 'calc(50% - 10px)',
},
error: {
color: red[500],
marginTop: 20,
},
success: {
color: green[500],
marginTop: 20,
textAlign: 'center',
wordBreak: 'break-all',
},
rootFormGroup: {
alignItems: 'center',
},
red: {
color: red[500],
},
}))
Example #7
| Source File: theme.js From product-collector with MIT License | 6 votes |
|
theme = createMuiTheme({
typography: {
fontFamily: ['Lato', 'sans-serif'].join(','),
},
palette: {
primary: {
main: '#fd7e14',
},
secondary: {
main: '#072856',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
overrides: {
MuiTab: {
root: {
textTransform: 'capitalize',
boxShadow: 'none',
},
},
},
})
Example #8
| Source File: theme.js From docs with BSD Zero Clause License | 6 votes |
|
theme = createMuiTheme({
props: {
MuiButtonBase: {
// The properties to apply
disableRipple: true, // No more ripple, on the whole application ?!
},
},
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: BLUE,
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
typography: {
fontFamily: [
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
],
},
})
Example #9
| Source File: theme.js From year-in-review with MIT License | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
})
Example #10
| Source File: theme.js From eSim-Cloud with GNU General Public License v3.0 | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6'
},
secondary: {
main: '#19857b'
},
error: {
main: red.A400
},
background: {
default: '#fff'
}
}
})
Example #11
| Source File: theme.js From webpage with MIT License | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: '#1b2bd1',
},
// secondary: {
// main: '#494b52',
// },
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
})
Example #12
| Source File: postCard.js From graphql-sample-apps with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
width: 345,
},
media: {
height: '100%',
paddingTop: '56.25%', // 16:9
width: '100%',
},
expand: {
transform: 'rotate(0deg)',
// marginLeft: "auto",
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
},
share: {
marginLeft: 'auto',
},
flag: {
marginRight: '10px',
},
likeCount: {
fontSize: 'large',
},
expandOpen: {
transform: 'rotate(180deg)',
},
avatar: {
backgroundColor: red[500],
},
}))
Example #13
| Source File: normal.js From 8086-emulator-web with Apache License 2.0 | 6 votes |
|
theme = createTheme({
palette: {
primary: {
main: "#F4C430",
},
secondary: {
main: "#fff",
contrastText: "#0f0f0f",
},
error: {
main: red.A400,
},
background: {
default: "#FCFCFC",
paper: "#FCFCFC",
},
titleBar: {
main: "#FCFCFC",
contrastText: "#0f0f0f",
},
},
typography: {
fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
button: {
fontFamily: ["JetBrains Mono", "Roboto", "Arial", "sans-serif"].join(","),
},
},
})
Example #14
| Source File: theme.js From Design-Initiative-Dashboard-frontend with GNU General Public License v3.0 | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: '#4054B2',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#F7F7F7',
},
},
})
Example #15
| Source File: theme.js From smart-contracts with MIT License | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
error: {
main: red.A400,
},
background: {
default: '#fff',
},
},
})
Example #16
| Source File: branding.js From aws-amplify-identity-broker with MIT License | 6 votes |
|
Branding = {
appName: "Amplify Identity Broker",
primary: blueGrey[900], // #263238,
secondary: blueGrey[300], // #90a4ae,
accent: orange[500], // #ff9800
neutral: blueGrey[50], // #eceff1
positive: green[700], // #689f38
negative: red[700], // #d32f2f
info: blue[700], // #1976d2
warning: orange[700], // #f57c00
cardHeaderColorPrimary: blueGrey[100], // #cfd8dc
cardHeaderColorAccent: orange[500], // #ff9800
white: '#fff', // #fff
black: '#000', // #000
opacityHover: 0.85,
}
Example #17
| Source File: theme.js From management-center with Apache License 2.0 | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
main: '#556cd6'
// main: '#00695f',
// main: '#ffc107',
// main: 'rgb(44, 19, 56)',
},
secondary: {
main: '#7c88cc'
// main: '#009688',
// main: '#ffcd38',
},
menuItem: {
color: '#2979ff',
},
error: {
main: red.A400
},
background: {
default: 'rgb(254, 249, 248)'
},
breadcrumbItem: {
fontSize: '12px',
fontWeight: '500',
textTransform: 'uppercase'
},
breadcrumbLink: {
color: 'inherit',
textDecoration: 'none',
textTransform: 'uppercase',
fontSize: '12px',
'&:hover': {
textDecoration: 'underline'
}
}
}
})
Example #18
| Source File: theme.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
|
theme = createMuiTheme({
typography: {
useNextVariants: true,
},
palette: {
primary: {
light: '#f05545',
main: '#b71c1c',
dark: '#7f0000',
contrastText: '#fff',
},
secondary: {
light: '#fbfffc',
main: '#c8e6c9',
dark: '#97b498',
contrastText: '#37474f',
},
openTitle: red['500'],
protectedTitle: brown['300'],
type: 'light'
},
})
Example #19
| Source File: app-close-alert.js From js-miniapp with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
root: {
height: '90%',
width: '100%',
},
grid: {
display: 'flex',
height: '20%',
flexDirection: 'column',
justifyContent: 'center',
padding: '20px',
},
table: {
minWidth: '80%',
},
content: {
height: '50%',
justifyContent: 'space-between',
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
fontSize: 18,
color: theme.color.primary,
fontWeight: 'bold',
},
contentSection: {
height: '30%',
padding: '10px',
},
label: {
display: 'block',
fontSize: 12,
width: '100%',
color: theme.color.primary,
},
imageBox: {
height: '250px',
margin: '20px',
},
imageBoxContent: {
height: '250px',
objectFit: 'contain',
},
error: {
color: red[500],
marginTop: 10,
},
red: {
color: red[500],
},
}))
Example #20
| Source File: Configurations.js From management-center with Apache License 2.0 | 5 votes |
|
createStatusIcon = (status) =>
status && status.connected ? (
<ConnectedIcon fontSize="small" style={{ color: green[500] }} />
) : (
<DisconnectedIcon fontSize="small" style={{ color: red[500] }} />
)
Example #21
| Source File: ThemeSunset.js From corona-board with MIT License | 5 votes |
|
ThemeSunset = {
palette: {
type: 'light',
// Essential
primary: red,
secondary: pink,
error: purple,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: amber[500],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: grey[800],
contentText: grey[800],
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[600],
drawerMenuSelectedBackground: red[200],
drawerMenuSelectedPin: red[500],
// Progress
progress: red[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
red[500],
purple[500],
amber[500],
red[600],
red[700],
purple[600],
red[800],
orange[500],
purple[700],
yellow[500],
deepOrange[600],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: red[500], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: red[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: red[500],
color: '#ffffff',
'&:hover': {
backgroundColor: red[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #22
| Source File: SubscribeBtn.js From youtube-clone with MIT License | 5 votes |
|
useStyles = makeStyles((theme) => ({
subscribeBtn: {
backgroundColor: red[700],
borderRadius: 2,
},
}))
Example #23
| Source File: ThemeLight.js From corona-board with MIT License | 5 votes |
|
ThemeLight = {
palette: {
type: 'light',
// Essential
primary: amber,
secondary: orange,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: amber[500],
// dark: will be calculated from palette.sample,
// contrastText: will be calculated to contrast with palette.sample
},
},
colors: {
// Base colors
colorLight: '#ffffff',
colorDark: grey[800],
// Content
contentBackground: '#ffffff',
contentText: grey[800],
// AppBar
appBarContentText: grey[800],
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: grey[300],
drawerMenuSelectedPin: amber[500],
// Progress
progress: amber[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
red[500],
cyan[500],
amber[500],
teal[500],
lightBlue[500],
green[500],
blue[500],
indigo[500],
orange[500],
yellow[500],
deepPurple[500],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: grey[50], // AppBar background color
color: grey[800],
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: grey[800],
}
},
MuiFab: {
primary: {
backgroundColor: amber[500],
color: grey[800],
'&:hover': {
backgroundColor: amber[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #24
| Source File: Transcript.js From symbl-twilio-video-react with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles(() => ({
root: {
display: "flex",
justifyContent: "center",
cursor: "grab",
alignItems: "center",
},
mainContainer: {
padding: 12,
overflow: "hidden",
minWidth: '200px',
height: '100%',
// maxWidth: '300px',
width: '20vw',
border: 'none',
borderRadius: 0,
position: 'fixed',
background: 'rgb(0, 0, 0, 0.5)',
right: 0,
zIndex: 1500
},
transcriptContainer: {
overflowY: "auto",
height: "100%"
},
item: {
display: "flex",
alignItems: "center",
margin: "0 10px"
},
avatarContainer: {
margin: 10,
},
p: {
margin: "5px 0",
fontSize: 14
},
avatar: {
backgroundColor: red[500],
},
transcriptsHeader: {
display: "flex",
justifyContent: "center",
paddingBottom: "20px"
}
}))
Example #25
| Source File: InfoPage.js From management-center with Apache License 2.0 | 5 votes |
|
createFeatureIcon = (feature, license) =>
license.features && license.features.includes(feature) ? (
<FeatureEnabledIcon fontSize="small" style={{ color: green[500] }} />
) : (
<FeatureDisabledIcon fontSize="small" style={{ color: red[500] }} />
)
Example #26
| Source File: palette.js From paper-and-ink with MIT License | 5 votes |
|
makePalette = type => {
const { contrastText, ...rest } = themePalette[type];
return {
...rest,
contrastText,
contrastThreshold: 2,
border: '#DFE3E8',
divider: '#DFE3E8',
common: {
black,
white,
contrastText,
commonBackground: 'rgb(45, 45, 45)',
neutral: '#E4E7EB',
muted: '#9EA0A4'
},
primary: {
light: lightBlue[300],
main: lightBlue[500],
dark: lightBlue[700],
contrastText
},
success: {
light: green[300],
main: green[500],
dark: green[700],
contrastText
},
info: {
light: blue[300],
main: blue[500],
dark: blue[700],
contrastText
},
warning: {
light: yellow[300],
main: yellow[500],
dark: yellow[700],
contrastText
},
danger: {
light: red[300],
main: red[500],
dark: red[700],
contrastText
}
};
}
Example #27
| Source File: theme.js From warsinhk with MIT License | 5 votes |
|
COLORS = {
main: {
text: "#fff",
primary: "#1a237e",
secondary: "#62adf0",
background: "#f5f5f6",
},
mainText: "black",
dark: {
backgroundColor: "#3e474f",
color: "white",
},
camp: {
democracy: {
background: "#ffcd00",
text: "black",
},
establishment: {
background: "#45b6ff",
text: "black",
},
localist: {
background: "#ffcd00",
text: "black",
},
other: {
background: "#a8a8ad",
text: "black",
},
uncertain: {
background: "#a8a8ad",
text: "black",
},
},
common: {
success: green[800],
failure: red[800],
},
secondaryBackgroundColor: "#f2f2f3", // grey
}
Example #28
| Source File: AccountDialogDelete.js From crypto-red.github.io with MIT License | 5 votes |
|
styles = theme => ({
red: {
color: red[500]
}
})
Example #29
| Source File: proposal.jsx From ygov-finance with MIT License | 4 votes |
|
render() {
const { classes, proposal } = this.props;
const {
account,
loading,
currentBlock,
currentTime,
votingStatus,
governanceContractVersion
} = this.state
const blocksTillEnd = proposal.end - currentBlock
const blocksSinceStart = currentBlock - proposal.start
const endTime = currentTime + (blocksTillEnd * 1000 * 13.8)
const startTime = currentTime - (blocksSinceStart * 1000 * 13.8)
const yipURL = `https://yips.yearn.finance/YIPS/yip-${proposal.id}`;
var address = null;
if (proposal.executor) {
address = proposal.executor.substring(0,8)+'...'+proposal.executor.substring(proposal.executor.length-6,proposal.executor.length)
}
const hashURL = proposal.hash
return (
<div className={ classes.root }>
<div className={ classes.assetSummary }>
<div className={ classes.headingName }>
<div className={classes.YIPheading}>
<Typography variant={ 'h3' }><a href={ yipURL } target="_blank">YIP</a></Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Link</Typography>
</div>
<div>
<div className={ classes.proposerAddressContainer }>
<Typography variant={'h3'}>{address}</Typography>
<Box ml={1} />
<CopyIcon onClick={(e) => { this.copyAddressToClipboard(e, proposal.executor) } } fontSize="small" />
</div>
<Typography variant={ 'h5' } className={ classes.grey }>Executor</Typography>
</div>
</div>
<div className={classes.heading}>
<Typography variant={ 'h3' }>~{ moment(startTime).format("YYYY/MM/DD kk:mm") }</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Vote Start: {proposal.start}</Typography>
</div>
</div>
<div className={ classes.assetSummary }>
<div className={ classes.headingName }>
<div className={classes.YIPheading}>
<Typography variant={ 'h3' }><a href={ hashURL } target="_blank">IPFS</a></Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Link</Typography>
</div>
<div>
<Typography variant={ 'h3' }>{ (proposal.quorum / 100).toFixed(2) }% / { (proposal.quorumRequired / 100).toFixed(2) }%</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Quorum/Required</Typography>
</div>
</div>
<div className={classes.heading}>
<Typography variant={ 'h3' }>~{ moment(endTime).format("YYYY/MM/DD kk:mm") }</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Vote End: {proposal.end}</Typography>
</div>
</div>
<div className={ classes.assetSummary }>
<div className={classes.headingName}>
<div className={ classes.YIPheading }>
{ proposal.myVotes > 0 && proposal.direction === "FOR" &&
<CheckCircleIcon style={{ fontSize: 20, color: green[500] }}/>
}
{ proposal.myVotes > 0 && proposal.direction === "AGAINST" &&
<CancelIcon style={{ fontSize: 20, color: red[500] }} />
}
{
proposal.myVotes === 0 &&
<WarningIcon style={{ fontSize: 20, color: orange[500] }}/>
}
</div>
<div>
<div className={ classes.proposerAddressContainer }>
<Typography variant={'h3'}>{ this.votingMessage(proposal) }</Typography>
</div>
<Typography variant={ 'h5' } className={ classes.grey }>Status</Typography>
</div>
</div>
<div className={ classes.votesHeading }>
<Typography variant={ 'h3' }>{ this.formatVotes(proposal.myVotes) }</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Used votes</Typography>
</div>
<div className={ classes.votesHeading }>
<Typography variant={ 'h3' }>{ proposal.canStillVote ? this.formatVotes(proposal.availableVotes): 0 }</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Available votes</Typography>
</div>
<div className={ classes.votesHeading }>
<Typography variant={ 'h3' }>{ this.formatAsPercent(proposal.myVotesRatio) }%</Typography>
<Typography variant={ 'h5' } className={ classes.grey }>Participation weight</Typography>
</div>
</div>
{ proposal.end > currentBlock &&
<div>
{ (governanceContractVersion === 2 && votingStatus !== true) &&
<div className={ classes.actionsContainer }>
<div className={ classes.tradeContainer }>
<Button
className={ classes.actionButton }
variant="outlined"
color="primary"
disabled={ loading }
onClick={ this.onRegister }
fullWidth
>
<Typography className={ classes.buttonText } variant={ 'h5'} color={'secondary'}>Register</Typography>
</Button>
</div>
</div>
}
{ (governanceContractVersion !== 2 || votingStatus === true) && proposal.canStillVote === true &&
<div className={ classes.actionsContainer }>
<div className={ classes.tradeContainer }>
<Button
className={ classes.actionButton }
variant="outlined"
color="primary"
disabled={ loading || proposal.end < currentBlock }
onClick={ this.onVoteFor }
fullWidth
>
<Typography className={ classes.buttonText } variant={ 'h5'} color={'secondary'}>Vote For</Typography>
</Button>
</div>
<div className={ classes.sepperator }></div>
<div className={classes.tradeContainer}>
<Button
className={ classes.actionButton }
variant="outlined"
color="primary"
disabled={ loading || proposal.end < currentBlock }
onClick={ this.onVoteAgainst }
fullWidth
>
<Typography className={ classes.buttonText } variant={ 'h5'} color='secondary'>Vote Against</Typography>
</Button>
</div>
</div>
}
</div>
}
</div>
)
}
