@material-ui/core/colors#amber JavaScript Examples
The following examples show how to use
@material-ui/core/colors#amber.
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: Notification.jsx From archeage-tools with The Unlicense | 6 votes |
|
useStyles = makeStyles(theme => ({
[NOTIFICATION_TYPE.SUCCESS]: {
backgroundColor: green[600],
},
[NOTIFICATION_TYPE.ERROR]: {
backgroundColor: theme.palette.error.dark,
color: '#FFFFFF',
},
[NOTIFICATION_TYPE.INFO]: {
backgroundColor: theme.palette.primary.main,
},
[NOTIFICATION_TYPE.WARNING]: {
backgroundColor: amber[700],
},
icon: {
fontSize: 20,
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing(1),
},
message: {
display: 'flex',
alignItems: 'center',
},
}))
Example #2
| Source File: MessagePage.js From management-center with Apache License 2.0 | 6 votes |
|
MessagePage = ({ message, buttonText, buttonIcon, callToAction, image = '/smilethink.png' }) => {
const classes = useStyles();
return (
<Paper>
<Grid container spacing={24} justify="center" style={{ minHeight: '500px', maxWidth: '100%' }}>
<Grid item xs={12} align="center"></Grid>
<Grid item xs={12} align="center">
<img src={image} />
<Typography variant="h6" gutterBottom>
{message}
</Typography>
</Grid>
<Grid item xs={12} align="center">
{buttonText ? (
<Button
variant="contained"
style={{ backgroundColor: amber[500] }}
className={classes.button}
startIcon={buttonIcon || <DownloadIcon />}
onClick={(event) => {
event.stopPropagation();
callToAction();
}}
size="small"
>
{buttonText}
</Button>
) : (
''
)}
</Grid>
</Grid>
</Paper>
);
}
Example #3
| Source File: PremiumFeatureDialog.js From management-center with Apache License 2.0 | 6 votes |
|
PremiumFeatureDialog = ({ open, handleClose }) => {
const classes = useStyles();
return (
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="not-connected-dialog-title"
aria-describedby="not-connected-dialog-description"
>
{
getDialogContent()
}
<DialogActions classes={{root: classes.actions}}>
<Button
variant="outlined"
color="default"
size="small"
href="https://www.cedalo.com"
target="_blank"
startIcon={<PremiumPluginIcon style={{ color: amber[500] }} fontSize="small" />}
>
Get premium version
</Button>
</DialogActions>
</Dialog>
);
}
Example #4
| Source File: notification.js From treetracker-admin-client with GNU Affero General Public License v3.0 | 5 votes |
|
export default function notification(message, type = 'info', delay = 3000) {
return new Promise((resolve) => {
const Icon = icons[type];
function handleClose(isConfirmed) {
d3.select('.confirm-container').remove();
d3.select('#confirmDialog').remove();
resolve(isConfirmed);
}
setTimeout(() => {
handleClose();
}, delay);
let style = {
backgroundColor: theme.palette.primary.main,
maxWidth: 400,
position: 'fixed',
bottom: 10,
left: 10,
};
switch (type) {
case 'success': {
style.backgroundColor = green[600];
break;
}
case 'warning': {
style.backgroundColor = amber[700];
break;
}
case 'error': {
style.backgroundColor = theme.palette.error.main;
break;
}
}
const dialog = (
<ThemeProvider theme={theme}>
<SnackbarContent
style={style}
aria-describedby="client-snackbar"
message={
<Grid
container
spacing={1}
justify="flex-start"
alignItems="center"
>
<Grid item>
<Icon />
</Grid>
<Grid item>{message}</Grid>
</Grid>
}
action={[
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={handleClose}
>
<CloseIcon />
</IconButton>,
]}
/>
</ThemeProvider>
);
d3.select('body')
.append('div')
.classed('confirm-container', true)
.append('div')
.classed('confirm-dialog', true);
ReactDOM.render(dialog, d3.select('.confirm-dialog').node());
});
}
Example #5
| Source File: CustomSnackbar.js From aws-perspective with Apache License 2.0 | 5 votes |
|
useStyles = makeStyles((theme) => ({
success: {
backgroundColor: green[600],
},
error: {
width: 'fit-content',
backgroundColor: theme.palette.error.dark,
},
info: {
backgroundColor: '#0073bb',
},
warning: {
backgroundColor: amber[700],
},
icon: {
fontSize: 20,
},
iconVariant: {
opacity: 0.9,
marginRight: theme.spacing(1),
},
message: {
display: 'flex',
alignItems: 'center',
width: '100%',
marginRight: '5px'
},
root: {
width: 'fit-content',
},
div: { display: 'inline-flex', width: '100%' },
menuButton: {
margin: 'auto',
padding: 'unset',
margin: ['0 0 0 5px'].join(','),
'&:hover': {
outline: 'none',
},
'&:focus': {
outline: 'none',
},
},
externalIcon: {
width: '18px',
},
}))
Example #6
| 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 #7
| 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 #8
| 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 #9
| Source File: Plugins.js From management-center with Apache License 2.0 | 4 votes |
|
Plugins = (props) => {
const classes = useStyles();
const context = useContext(WebSocketContext);
const dispatch = useDispatch();
const confirm = useConfirm();
const { enqueueSnackbar } = useSnackbar();
const { client } = context;
const [response, loading, hasError] = useFetch(`${process.env.PUBLIC_URL}/api/plugins`);
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(10);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
const handlePluginLoad = async (pluginId, load) => {
if (load) {
await confirm({
title: 'Confirm enabling of plugin',
description: `Do you really want to enable the plugin "${pluginId}"?`,
cancellationButtonProps: {
variant: 'contained'
},
confirmationButtonProps: {
color: 'primary',
variant: 'contained'
}
});
try {
await client.loadPlugin(pluginId);
window.location.reload();
} catch (error) {
enqueueSnackbar(`Error enabling plugin. Reason: ${error.message || error}.`, {
variant: 'error'
});
}
} else {
await confirm({
title: 'Confirm disabling of plugin',
description: `Do you really want to disable the plugin "${pluginId}"?`,
cancellationButtonProps: {
variant: 'contained'
},
confirmationButtonProps: {
color: 'primary',
variant: 'contained'
}
});
try {
await client.unloadPlugin(pluginId);
window.location.reload();
} catch (error) {
enqueueSnackbar(`Error disabling plugin. Reason: ${error.message || error}.`, {
variant: 'error'
});
}
}
};
if (response) {
return (
<div>
<Breadcrumbs aria-label="breadcrumb">
<RouterLink className={classes.breadcrumbLink} to="/home">
Home
</RouterLink>
<Typography className={classes.breadcrumbItem} color="textPrimary">
Plugins
</Typography>
</Breadcrumbs>
<br />
<TableContainer component={Paper} className={classes.tableContainer}>
<Table size="medium">
<TableHead>
<TableRow>
<TableCell>Type</TableCell>
<TableCell>ID</TableCell>
<TableCell>Version</TableCell>
<TableCell>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Feature</TableCell>
<TableCell>Status</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{(rowsPerPage > 0
? response.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
: response
).map((plugin) => (
<TableRow>
<TableCell>
{plugin.type === 'premium' ? (
<PremiumPluginIcon style={{ color: amber[500] }} fontSize="small" />
) : (
<OpenSourcePluginIcon fontSize="small" />
)}
</TableCell>
<TableCell>{plugin.id}</TableCell>
<TableCell>{plugin.version}</TableCell>
<TableCell>{plugin.name}</TableCell>
<TableCell>{plugin.description}</TableCell>
<TableCell>{plugin.feature}</TableCell>
<TableCell>
{plugin.status.type === 'loaded' ? (
<PluginEnabledIcon fontSize="small" style={{ color: green[500] }} />
) : (
<Tooltip title={plugin.status.message ? plugin.status.message : null}>
<PluginDisabledIcon fontSize="small" style={{ color: red[500] }} />
</Tooltip>
)}
</TableCell>
<TableCell>
<Tooltip title={plugin.status.type === 'loaded' ? 'Disable' : 'Enable'}>
<Switch
disabled={plugin.status.type === 'error' || !plugin.actions.enable}
checked={plugin.status.type === 'loaded'}
name="pluginEnabled"
onChange={(event) => {
handlePluginLoad(plugin.id, event.target.checked);
}}
inputProps={{ 'aria-label': 'Plugin enabled' }}
/>
</Tooltip>
</TableCell>
</TableRow>
))}
</TableBody>
<TableFooter>
<TableRow>
<TablePagination
// rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
colSpan={8}
count={response?.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
// onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</TableRow>
</TableFooter>
</Table>
</TableContainer>
</div>
);
} else {
return null;
}
}
Example #10
| Source File: Streamsheets.js From management-center with Apache License 2.0 | 4 votes |
|
Streamsheets = (props) => {
const classes = useStyles();
const context = useContext(WebSocketContext);
const dispatch = useDispatch();
const confirm = useConfirm();
const [previewOpen, setPreviewOpen] = React.useState(false);
const [selectedInstance, setSelectedInstance] = React.useState({});
const { client } = context;
const [response, loading, hasError] = useFetch(
`${process.env.PUBLIC_URL}/api/config/tools/streamsheets`
);
const onPreviewInstance = async (instance) => {
setSelectedInstance(instance);
setPreviewOpen(true);
};
const onClosePreviewInstance = () => {
setSelectedInstance({});
setPreviewOpen(false);
};
const onSelectInstance = async (instance) => {
window.open(instance.url, '_blank');
};
const onDownloadStreamsheets = async (instance) => {
window.open('https://www.cedalo.com', '_blank');
};
if (response) {
return (
<div>
<Dialog
onClose={onClosePreviewInstance}
aria-labelledby="Streamsheets preview"
open={previewOpen}
maxWidth={false}
// style={{
// width: '1400px',
// }}
>
<DialogTitle id="streamsheets-preview">
{selectedInstance?.name}
<Button
variant="contained"
color="primary"
className={classes.button}
startIcon={<OpenStreamsheetsIcon />}
onClick={(event) => {
event.stopPropagation();
onSelectInstance(selectedInstance);
}}
size="small"
>
Open in new tab
</Button>
{/* <IconButton
size="small"
aria-label="Open Streamsheets instance"
onClick={(event) => {
event.stopPropagation();
onSelectInstance(selectedInstance);
}}
>
<OpenStreamsheetsIcon fontSize="small" />
</IconButton> */}
<IconButton aria-label="close" className={classes.closeButton} onClick={onClosePreviewInstance}>
<CloseIcon />
</IconButton>
</DialogTitle>
<iframe
width="1100px"
height="600px"
src={selectedInstance?.url}
title={selectedInstance?.name}
></iframe>
</Dialog>
<Breadcrumbs aria-label="breadcrumb">
<RouterLink className={classes.breadcrumbLink} to="/home">
Home
</RouterLink>
<Typography className={classes.breadcrumbItem} color="textPrimary">
Streamsheets
</Typography>
</Breadcrumbs>
<br />
{response?.instances && response?.instances?.length > 0 ? (
<TableContainer component={Paper} className={classes.tableContainer}>
<Table size="medium">
<TableHead>
<TableRow>
<TableCell>Type</TableCell>
<TableCell>ID</TableCell>
<TableCell>Version</TableCell>
<TableCell>Name</TableCell>
<TableCell>Description</TableCell>
<TableCell>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{response?.instances?.map((streamsheets) => (
<TableRow
// hover
// onClick={(event) => {
// onSelectInstance(streamsheets);
// }}
// style={{ cursor: 'pointer' }}
>
<TableCell>
{streamsheets.type === 'premium' ? (
<PremiumPluginIcon style={{ color: amber[500] }} fontSize="small" />
) : (
<OpenSourcePluginIcon fontSize="small" />
)}
</TableCell>
<TableCell>{streamsheets.id}</TableCell>
<TableCell>{streamsheets.version}</TableCell>
<TableCell>{streamsheets.name}</TableCell>
<TableCell>{streamsheets.description}</TableCell>
<TableCell align="right">
<Tooltip title="Open Streamsheets instance">
<Button
variant="contained"
color="primary"
className={classes.button}
startIcon={<PreviewStreamsheetsIcon />}
onClick={(event) => {
event.stopPropagation();
onPreviewInstance(streamsheets);
}}
size="small"
>
Open
</Button>
{/* <IconButton
size="small"
aria-label="Preview Streamsheets instance"
onClick={(event) => {
event.stopPropagation();
onPreviewInstance(streamsheets);
}}
size="small"
variant="contained"
>
<PreviewStreamsheetsIcon fontSize="small" />
</IconButton> */}
</Tooltip>
{/* <Tooltip title="Open Streamsheets instance">
<Button
variant="contained"
color="primary"
className={classes.button}
startIcon={<OpenStreamsheetsIcon />}
onClick={(event) => {
event.stopPropagation();
onSelectInstance(streamsheets);
}}
size="small"
>
Open
</Button> */}
{/* <IconButton
size="small"
aria-label="Open Streamsheets instance"
onClick={(event) => {
event.stopPropagation();
onSelectInstance(streamsheets);
}}
>
<OpenStreamsheetsIcon fontSize="small" />
</IconButton> */}
{/* </Tooltip> */}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
) : (
<MessagePage
message="We could not find any Streamsheets installation."
buttonIcon={<DownloadIcon />}
buttonText="Get Streamsheets now!"
callToAction={onDownloadStreamsheets}
/>
)}
</div>
);
} else {
return null;
}
}
Example #11
| Source File: ThemeCorona.js From corona-board with MIT License | 4 votes |
|
ThemeCorona = {
palette: {
type: 'light',
// Essential
primary: deepPurple,
secondary: purple,
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[50],
contentText: grey[800],
// AppBar
appBarContentText: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: deepPurple[100],
drawerMenuSelectedPin: deepPurple[500],
// Speed dial
speedDialColor: deepPurple[500],
// Progress
progress: deepPurple[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
deepPurple[500],
pink[500],
teal[500],
deepPurple[700],
pink[700],
teal[700],
deepPurple[300],
pink[300],
teal[300],
deepPurple[900],
pink[900],
teal[900],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: purple[900], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[300], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: deepPurple[500],
color: grey[200],
'&:hover': {
backgroundColor: deepPurple[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[800],
color: '#ffffff',
}
}
},
}
Example #12
| 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 #13
| 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',
}
}
},
}
