@material-ui/core/colors#amber JavaScript Examples

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',
  },
}))

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>
	);
}

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>
	);
}

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());
  });
}

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',
  },
}))

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],
            }
        },
    },
}

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],
            }
        },
    },
}

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]
}

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;
	}
}

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;
	}
}

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',
            }
        }
    },
}

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',
            }
        }
    },
}

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',
            }
        }
    },
}