@material-ui/core#colors TypeScript Examples
The following examples show how to use
@material-ui/core#colors.
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: ReleasesTableView.tsx From github-deploy-center with MIT License | 6 votes |
getButtonStyle = (state?: DeploymentState) => {
switch (state) {
case DeploymentState.Active:
return { backgroundColor: colors.blue[400] }
case DeploymentState.Failure:
return { color: colors.red[400] }
case DeploymentState.Pending:
return { color: colors.orange[400] }
case DeploymentState.InProgress:
return { color: colors.yellow[400] }
case undefined:
return {}
default:
return { color: colors.grey[50] }
}
}
Example #2
Source File: SidebarNav.tsx From knests with MIT License | 6 votes |
useStyles = makeStyles((theme: typeof CustomTheme) => ({
root: {
},
item: {
display: 'flex',
paddingTop: 0,
paddingBottom: 0,
},
button: {
color: colors.blueGrey[800],
padding: '10px 8px',
justifyContent: 'flex-start',
textTransform: 'none',
letterSpacing: 0,
width: '100%',
// fontWeight: theme.typography.fontWeightMedium,
},
icon: {
color: theme.palette.primary.main,
width: 24,
height: 24,
display: 'flex',
alignItems: 'center',
marginRight: theme.spacing(1),
},
active: {
color: theme.palette.primary.main,
// fontWeight: theme.typography.fontWeightMedium,
'& $icon': {
color: theme.palette.primary.main,
},
},
}))
Example #3
Source File: UpgradePlan.tsx From knests with MIT License | 6 votes |
useStyles = makeStyles((theme: typeof CustomTheme) => ({
root: {
backgroundColor: colors.grey[50],
},
media: {
paddingTop: theme.spacing(2),
height: 80,
textAlign: 'center',
'& > img': {
height: '100%',
width: 'auto',
},
},
content: {
padding: theme.spacing(1, 2),
},
actions: {
padding: theme.spacing(1, 2),
display: 'flex',
justifyContent: 'center',
},
}))
Example #4
Source File: ResponseStepListItem.tsx From backstage with Apache License 2.0 | 5 votes |
ResponseStepListItem = ({
responseStep,
animationDelay = 300,
}: ResponseStepListItemProps) => {
const classes = useStyles({ animationDelay });
function ItemIcon() {
if (responseStep.icon === 'success') {
return (
<CheckCircleOutline
data-testid={TEST_IDS.components.responseStepListItemIconSuccess}
style={{ color: colors.green[500] }}
/>
);
}
if (responseStep.icon === 'failure') {
return (
<ErrorOutlineIcon
data-testid={TEST_IDS.components.responseStepListItemIconFailure}
style={{ color: colors.red[500] }}
/>
);
}
if (responseStep.link) {
return (
<IconButton
data-testid={TEST_IDS.components.responseStepListItemIconLink}
style={{ padding: 0 }}
aria-label="link"
onClick={() => {
const newTab = window.open(responseStep.link, '_blank');
newTab?.focus();
}}
>
<OpenInNewIcon color="primary" />
</IconButton>
);
}
return (
<FiberManualRecordIcon
data-testid={TEST_IDS.components.responseStepListItemIconDefault}
fontSize="small"
style={{ opacity: 0.85 }}
/>
);
}
return (
<ListItem
className={`${classes.item}`}
data-testid={TEST_IDS.components.responseStepListItem}
>
<ListItemIcon>
<ItemIcon />
</ListItemIcon>
<ListItemText
primary={responseStep.message}
secondary={responseStep.secondaryMessage}
/>
</ListItem>
);
}