@material-ui/core/colors#orange JavaScript Examples
The following examples show how to use
@material-ui/core/colors#orange.
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: theme.js From Full-Stack-React-Projects-Second-Edition with MIT License | 6 votes |
|
theme = createMuiTheme({
palette: {
primary: {
light: '#52c7b8',
main: '#009688',
dark: '#00675b',
contrastText: '#fff',
},
secondary: {
light: '#ffd95b',
main: '#ffa726',
dark: '#c77800',
contrastText: '#000',
},
openTitle: teal['700'],
protectedTitle: orange['700'],
type: 'light'
}
})
Example #2
| 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 #3
| Source File: index.js From reminder-atomic-app-demo with MIT License | 6 votes |
|
baseTheme = createMuiTheme({
container: {
primary: {
borderRadius: defaultTheme.spacing(1),
padding: defaultTheme.spacing(2),
},
secondary: {
borderRadius: defaultTheme.spacing(1),
padding: defaultTheme.spacing(2),
},
},
palette: {
type: "dark",
primary: {
main: cyan[200],
},
secondary: {
main: orange[500],
},
containerPrimary: {
main: cyan[200],
light: "#b4ffff",
dark: "#4bacb8",
},
containerSecondary: {
main: grey[400],
light: "#f5f5f5",
dark: "#373737",
},
},
typography: {
fontSize: 12,
},
})
Example #4
| Source File: constants.js From pomodor with MIT License | 6 votes |
|
colors = [
{
normal: blue[500],
darkMode: blue[200],
},
{
normal: indigo[500],
darkMode: indigo[200],
},
{
normal: pink[500],
darkMode: pink[200],
},
{
normal: purple[500],
darkMode: purple[200],
},
{
normal: lightGreen[500],
darkMode: lightGreen[200],
},
{
normal: teal[500],
darkMode: teal[200],
},
{
normal: orange[500],
darkMode: orange[200],
},
]
Example #5
| 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 #6
| 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 #7
| Source File: colorHelper.js From warsinhk with MIT License | 5 votes |
|
mapColorForStatus = status => {
const mapping = {
hospitalised: {
main: amber[900],
contrastText: "#fff",
},
stable: {
main: amber[900],
contrastText: "#fff",
},
hospitalised_again: {
main: orange[900],
contrastText: "#fff",
},
pending_admission: {
main: "#f99f02",
contrastText: "#fff",
},
discharged: {
main: "#368e3b",
contrastText: "#fff",
},
serious: {
main: "#eb605e",
contrastText: "#fff",
},
critical: {
main: red[900],
contrastText: "#fff",
},
deceased: {
main: grey[700],
contrastText: "#fff",
},
no_admission: {
main: grey[500],
contrastText: "#fff",
},
asymptomatic: {
main: "#4f5096",
contrastText: "#fff",
},
default: {
main: "#cfcfcf",
contrastText: "#fff",
},
}
if (!mapping[status]) return mapping["default"]
return mapping[status]
}
Example #8
| Source File: ThemeDark.js From corona-board with MIT License | 4 votes |
|
ThemeDark = {
palette: {
type: 'dark',
// Essential
primary: grey,
secondary: blueGrey,
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: grey[600],
contentText: '#ffffff',
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[400],
drawerMenuSelectedBackground: grey[600],
drawerMenuSelectedPin: amber[500],
// Speed dial
speedDialColor: amber[500],
// Progress
progress: amber[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
red[500],
cyan[500],
amber[500],
teal[500],
yellow[500],
green[500],
blue[500],
indigo[500],
orange[500],
deepPurple[500],
lightBlue[500],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: grey[800], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[700], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: amber[500],
color: grey[800],
'&:hover': {
backgroundColor: amber[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
Example #9
| Source File: ThemeMoonlight.js From corona-board with MIT License | 4 votes |
|
ThemeMoonlight = {
palette: {
type: 'dark',
// Essential
primary: indigo,
secondary: blueGrey,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: indigo[900],
// 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: blueGrey[900],
contentText: '#ffffff',
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[400],
drawerMenuSelectedBackground: blueGrey[600],
drawerMenuSelectedPin: yellow[600],
// Speed dial
speedDialColor: indigo[900],
// Progress
progress: indigo[900],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
yellow[500],
indigo[500],
amber[500],
orange[500],
yellow[600],
indigo[600],
amber[600],
orange[600],
yellow[700],
indigo[700],
amber[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: blueGrey[700], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: blueGrey[800], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: yellow[600],
color: grey[800],
'&:hover': {
backgroundColor: yellow[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
Example #10
| 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>
)
}
