@material-ui/core/colors#green JavaScript Examples
The following examples show how to use
@material-ui/core/colors#green.
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: index.js From whaticket with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap",
},
textField: {
marginRight: theme.spacing(1),
flex: 1,
},
btnWrapper: {
position: "relative",
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
colorAdorment: {
width: 20,
height: 20,
},
}))
Example #2
| Source File: SaveCancelButtons.js From management-center with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
alignItems: 'center',
},
wrapper: {
margin: theme.spacing(0.5),
position: 'relative',
'& > *': {
marginRight: theme.spacing(1)
}
},
buttonSuccess: {
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[700],
},
},
buttonProgress: {
color: green[500],
position: 'absolute',
top: '50%',
left: '25%',
marginTop: -12,
marginLeft: -12,
},
}))
Example #3
| 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 #4
| Source File: Form.jsx From redive_linebot with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
"& > *": {
marginBottom: theme.spacing(1),
},
},
wrapper: {
margin: theme.spacing(1),
position: "relative",
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
}))
Example #5
| Source File: ButtonWithLoadingProgress.js From management-center with Apache License 2.0 | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
alignItems: 'center',
},
wrapper: {
margin: theme.spacing(0.5),
position: 'relative',
'& > *': {
marginRight: theme.spacing(1)
}
},
buttonSuccess: {
backgroundColor: green[500],
'&:hover': {
backgroundColor: green[700],
},
},
buttonProgress: {
color: green[500],
position: 'absolute',
top: '50%',
left: '25%',
marginTop: -12,
marginLeft: -12,
},
}))
Example #6
| Source File: Categories.js From Doto with MIT License | 6 votes |
|
categoryData = [
{
text: "Homework",
id: 1,
color: pink,
},
{
text: "Work",
id: 2,
color: deepPurple,
},
{
text: "Household",
id: 3,
color: blue,
},
{
text: "Personal",
id: 4,
color: green,
},
]
Example #7
| Source File: ClusterDetail.js From management-center with Apache License 2.0 | 6 votes |
|
getNodeIcon = (node) => {
if (node?.error) {
return <Tooltip title={node.error.message} aria-label="Leader">
<ErrorIcon style={{ color: red[500] }} />
</Tooltip>
} else {
if (node?.leader) {
return <Tooltip title="Leader" aria-label="Leader">
<LeaderIcon style={{ color: green[500] }} />
</Tooltip>
} else {
return <Tooltip title="Follower" aria-label="Follower">
<FollowerIcon />
</Tooltip>
}
}
}
Example #8
| Source File: index.jsx From redive_linebot with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
wrapper: {
margin: theme.spacing(1),
position: "relative",
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
}))
Example #9
| Source File: index.js From whaticket with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
mainPaper: {
flex: 1,
padding: theme.spacing(1),
overflowY: "scroll",
...theme.scrollbarStyles,
},
customTableCell: {
display: "flex",
alignItems: "center",
justifyContent: "center",
},
tooltip: {
backgroundColor: "#f5f5f9",
color: "rgba(0, 0, 0, 0.87)",
fontSize: theme.typography.pxToRem(14),
border: "1px solid #dadde9",
maxWidth: 450,
},
tooltipPopper: {
textAlign: "center",
},
buttonProgress: {
color: green[500],
},
}))
Example #10
| Source File: SignMessage.jsx From redive_linebot with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
block: {
padding: theme.spacing(1),
"& > *": {
margin: theme.spacing(1),
},
},
messageBox: {
padding: theme.spacing(0.5),
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
wrapper: {
position: "relative",
},
buttonSuccess: {
backgroundColor: green[500],
"&:hover": {
backgroundColor: green[700],
},
},
}))
Example #11
| Source File: index.js From whaticket with MIT License | 6 votes |
|
useStyles = makeStyles((theme) => ({
root: {
flexWrap: "wrap",
},
textField: {
marginRight: theme.spacing(1),
width: "100%",
},
btnWrapper: {
position: "relative",
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
textQuickAnswerContainer: {
width: "100%",
},
}))
Example #12
| Source File: BattleTime.jsx From redive_linebot with MIT License | 6 votes |
|
ActionPannel = ({ changeType, timeline }) => {
const classes = useStyles();
const [, send] = useSendMessage();
const handleSendLine = () => {
const lines = timeline.map(({ minute, seconds, text }) => {
let line;
if (minute < 0 || seconds < 0) {
line = `0:00 ${text}`;
} else {
line = `${minute}:${seconds < 10 ? `0${seconds}` : seconds} ${text}`;
}
return line;
});
send(lines.join("\n"));
};
return (
<ButtonGroup className={classes.buttonGroup} size="medium">
<Button onClick={() => changeType("timeline")}>
<TimelapseIcon style={{ color: blue[500] }} />
</Button>
<Button onClick={() => changeType("text")}>
<DehazeIcon style={{ color: blue[500] }} />
</Button>
<Button>
<ShareIcon style={{ color: blue[500] }} />
</Button>
<Button onClick={handleSendLine}>
發送到LINE
<SendIcon style={{ color: green[500], marginLeft: "2px" }} />
</Button>
</ButtonGroup>
);
}
Example #13
| 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 #14
| Source File: index.js From whaticket with MIT License | 6 votes |
|
useStyles = makeStyles(theme => ({
root: {
display: "flex",
flexWrap: "wrap",
},
textField: {
marginRight: theme.spacing(1),
flex: 1,
},
extraAttr: {
display: "flex",
justifyContent: "center",
alignItems: "center",
},
btnWrapper: {
position: "relative",
},
buttonProgress: {
color: green[500],
position: "absolute",
top: "50%",
left: "50%",
marginTop: -12,
marginLeft: -12,
},
}))
Example #15
| 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 #16
| Source File: CauseView.jsx From amazon-connect-snippets with MIT No Attribution | 6 votes |
|
render() {
const { message, cause } = this.props;
const { isOpen } = this.state;
return (
<span>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link color="inherit" onClick={() => this.handleClickOpen()}>
<HelpIcon style={{ fontSize: 18, color: green[500], verticalAlign: 'middle' }} />
{message}
</Link>
<Dialog
open={isOpen}
onClose={() => this.handleClickClose()}
fullWidth
maxWidth="lg"
>
<DialogTitle>{ message }</DialogTitle>
<DialogContent>
<DialogContentText>
{ parse(cause) }
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => this.handleClickClose()} color="primary" autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
</span>
);
}
Example #17
| Source File: index.jsx From telar-cli with MIT License | 6 votes |
|
GreenCheckbox = withStyles({
root: {
color: green[400],
'&$checked': {
color: green[600],
},
},
checked: {},
})(props => <Checkbox color="default" {...props} />)
Example #18
| 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 #19
| Source File: AppComponent.js From FLINT.JSON_Interface with Mozilla Public License 2.0 | 5 votes |
|
theme = createMuiTheme({
palette: {
primary: green,
},
})
Example #20
| 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 #21
| Source File: OpenFile.js From FLINT.JSON_Interface with Mozilla Public License 2.0 | 5 votes |
|
theme = createMuiTheme({
palette: {
primary: green,
},
})
Example #22
| 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 #23
| Source File: ThemeGrass.js From corona-board with MIT License | 5 votes |
|
ThemeGrass = {
palette: {
type: 'light',
// Essential
primary: green,
secondary: teal,
error: red,
// Optional
sample: {
// light: will be calculated from palette.sample,
main: green[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: '#ffffff',
// Drawer menu
drawerMenuCategoryText: grey[500],
drawerMenuSelectedBackground: grey[300],
drawerMenuSelectedPin: green[500],
// Progress
progress: green[500],
// Color set for StickyBoard components (e.g., charts, number...)
colorArray: [
green[500],
cyan[500],
teal[500],
lightGreen[500],
lime[500],
green[600],
cyan[600],
teal[600],
lightGreen[600],
lime[600],
green[700],
],
},
overrides: {
MuiAppBar: {
colorPrimary: {
backgroundColor: green[500], // AppBar background color
color: '#ffffff',
},
},
MuiDrawer: {
paper: {
backgroundColor: grey[100], // Drawer background color
}
},
MuiIconButton: {
root: {
color: '#ffffff',
}
},
MuiFab: {
primary: {
backgroundColor: green[500],
color: '#ffffff',
'&:hover': {
backgroundColor: green[700],
}
}
},
MuiSpeedDialAction:{
fab: {
backgroundColor: grey[50],
color: grey[800],
}
},
},
}
Example #24
| 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 #25
| 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 #26
| Source File: BrokerStatusIcon.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 #27
| Source File: AccountDialogCreate.js From crypto-red.github.io with MIT License | 5 votes |
|
styles = theme => ({
backdrop: {
color: "#fff",
zIndex: "1400 !important"
},
dialog: {
[theme.breakpoints.down("xs")]: {
"& .MuiDialog-container .MuiDialog-paper": {
margin: "0px 0px",
maxHeight: "100%",
borderRadius: 0
},
}
},
dialogBody: {
overflowY: "auto",
display: "flex",
flexDirection: "column"
},
generationLoader: {
textAlign: "center"
},
generationFabSuccess: {
boxShadow: "none",
backgroundColor: green[500],
"&:hover": {
backgroundColor: green[700],
},
color: "#FFFFFF"
},
generationFabError: {
boxShadow: "none",
backgroundColor: red[500],
"&:hover": {
backgroundColor: red[700],
},
color: "#FFFFFF"
},
chip: {
margin: theme.spacing(0.5)
},
red: {
color: red[500]
},
green: {
color: green[500]
}
})
Example #28
| Source File: App.js From FLINT.JSON_Interface with Mozilla Public License 2.0 | 5 votes |
|
theme = createMuiTheme({
palette: {
primary: green,
},
})
Example #29
| Source File: OnBoardingDialog.js From management-center with Apache License 2.0 | 4 votes |
|
OnBoardingDialog = ({ settings }) => {
const classes = useStyles();
const theme = useTheme();
const { enqueueSnackbar } = useSnackbar();
const dispatch = useDispatch();
const context = useContext(WebSocketContext);
const { client: brokerClient } = context;
const [activeStep, setActiveStep] = React.useState(0);
const [email, setEMail] = React.useState('');
const [subscribed, setSubscribed] = useLocalStorage('cedalo.managementcenter.subscribedToNewsletter');
const steps = getSteps();
const [showOnBoardingDialog, setShowOnBoardingDialog] = useLocalStorage(
'cedalo.managementcenter.showOnBoardingDialog'
);
const onChangeAllowTrackingUsageData = async (allowTrackingUsageData) => {
try {
const updatedSettings = await brokerClient.updateSettings({
allowTrackingUsageData
});
dispatch(updateSettings(updatedSettings));
} catch (error) {
enqueueSnackbar(`Error disconnecting broker. Reason: ${error.message ? error.message : error}`, {
variant: 'error'
});
}
};
const handleClose = () => {
setShowOnBoardingDialog('false');
};
const handleNext = () => {
if (activeStep + 1 < steps.length) {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
} else {
handleClose();
}
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
const subscribeNewsletter = async () => {
try {
const response = await fetch(`/api/newsletter/subscribe`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email
})
});
setSubscribed('true');
} catch (error) {
// TODO: add error handling
console.error(error);
}
};
return (
<Dialog
open={showOnBoardingDialog === '' || showOnBoardingDialog === 'true'}
// onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
{/* <DialogTitle id="alert-dialog-title">{steps[activeStep].label}</DialogTitle> */}
<DialogContent>
{/* <Paper square elevation={0} className={classes.header}>
</Paper> */}
<div style={{ textAlign: 'center' }}>
<img
style={{ width: '555px' }}
className={classes.img}
src={steps[activeStep].imgPath}
alt={steps[activeStep].label}
/>
</div>
<br />
<Typography variant="h6" style={{ textAlign: 'center' }}>
<strong>{steps[activeStep].label}</strong>
</Typography>
<Typography style={{ textAlign: 'center' }}>{steps[activeStep].description}</Typography>
{steps[activeStep].newsletter && subscribed !== 'true' ? (
<div style={{ textAlign: 'center' }}>
<Grid container spacing={3} alignItems="flex-end">
<Grid item xs={9}>
<TextField
id="email"
label="E-Mail"
type="email"
value={email}
onChange={(event) => {
event.stopPropagation();
setEMail(event.target.value);
}}
style={{
width: '100%'
}}
/>
</Grid>
<Grid item xs={3}>
<Button
disabled={email === ''}
onClick={subscribeNewsletter}
variant="contained"
color="primary"
>
Subscribe
</Button>
</Grid>
</Grid>
</div>
) : null}
{steps[activeStep].newsletter && subscribed === 'true' ? (
<div style={{ textAlign: 'center' }}>
<SubscribedIcon style={{ color: green[500] }} />
<Typography>
<strong>Thanks for subscribing!</strong>
</Typography>
</div>
) : null}
{steps[activeStep].usageData ? (
<div style={{ textAlign: 'center' }}>
<Grid container spacing={3} alignItems="flex-end">
<Grid item xs={12}>
<FormGroup row>
<FormControlLabel
control={
<Switch
checked={settings?.allowTrackingUsageData}
onClick={(event) => {
event.stopPropagation();
if (event.target.checked) {
onChangeAllowTrackingUsageData(true);
} else {
onChangeAllowTrackingUsageData(false);
}
}}
name="allowTrackingUsageData"
color="primary"
/>
}
label="Allow tracking of usage data"
/>
</FormGroup>
</Grid>
</Grid>
</div>
) : null}
<DialogContentText id="alert-dialog-description"></DialogContentText>
<MobileStepper
steps={6}
activeStep={activeStep}
variant="dots"
position="static"
className={classes.root}
nextButton={
<Button size="small" onClick={handleNext} disabled={activeStep + 1 >= steps.length}>
Next
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
</Button>
}
backButton={
<Button size="small" onClick={handleBack} disabled={activeStep === 0}>
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
Back
</Button>
}
>
{steps.map((label, index) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
<StepContent>
<div className={classes.actionsContainer}>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
color="primary"
onClick={handleNext}
className={classes.button}
>
{activeStep === 5 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
</StepContent>
</Step>
))}
</MobileStepper>
{activeStep === steps.length && (
<Paper square elevation={0} className={classes.resetContainer}>
<Typography>All steps completed - you're finished</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</Paper>
)}
</DialogContent>
<DialogActions>
{/* <Button onClick={handleClose} color="primary">
Disagree
</Button> */}
<Button onClick={handleClose} color="secondary" autoFocus>
Get started!
</Button>
</DialogActions>
</Dialog>
);
}
