shishantbiswas/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-06-05 14:08:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Update UI for error dialog and snackbar (#1971)

Browse Source 
* feat: update ui for error dialog and snackbar

* update padding for buttons
This commit is contained in:
Abhineet Jain
2022-06-02 11:23:52 -04:00
committed by GitHub
parent 47c7eda670
commit e09cd3e9cf
3 changed files with 15 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ConfirmDialog/ConfirmDialog.tsx
+8 -6
View File
@@ -48,11 +48,15 @@ interface StyleProps {
const useStyles = makeStyles((theme) => ({
dialogWrapper: (props: StyleProps) => ({
"& .MuiPaper-root": {
background: props.type === "info" ? theme.palette.primary.main : theme.palette.error.dark,
background: props.type === "info" ? theme.palette.primary.main : theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
},
"& .MuiDialogActions-spacing": {
padding: `0 ${theme.spacing(3.75)}px ${theme.spacing(3.75)}px`,
},
}),
dialogContent: (props: StyleProps) => ({
color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.error.contrastText,
color: props.type === "info" ? theme.palette.primary.contrastText : theme.palette.text.secondary,
padding: theme.spacing(6),
textAlign: "center",
}),
@@ -61,16 +65,14 @@ const useStyles = makeStyles((theme) => ({
},
description: (props: StyleProps) => ({
color:
props.type === "info"
? fade(theme.palette.primary.contrastText, 0.75)
: fade(theme.palette.error.contrastText, 0.75),
props.type === "info" ? fade(theme.palette.primary.contrastText, 0.75) : fade(theme.palette.text.secondary, 0.75),
lineHeight: "160%",
"& strong": {
color:
props.type === "info"
? fade(theme.palette.primary.contrastText, 0.95)
: fade(theme.palette.error.contrastText, 0.95),
: fade(theme.palette.text.secondary, 0.95),
},
}),
}))
site/src/components/Dialog/Dialog.tsx
+3 -3
View File
@@ -114,7 +114,7 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
})}
disabled={confirmLoading}
onClick={onCancel}
variant="contained"
variant="outlined"
>
{cancelText}
</LoadingButton>
@@ -145,10 +145,10 @@ interface StyleProps {
const useButtonStyles = makeStyles((theme) => ({
dialogButton: {
borderRadius: 0,
borderRadius: theme.shape.borderRadius,
fontSize: theme.typography.h6.fontSize,
fontWeight: theme.typography.h5.fontWeight,
padding: theme.spacing(2.25),
padding: `${theme.spacing(0.75)}px ${theme.spacing(2)}px`,
width: "100%",
boxShadow: "none",
},
site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx
+4 -3
View File
@@ -81,8 +81,9 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.error.contrastText,
},
snackbarContent: {
border: `1px solid ${theme.palette.divider}`,
borderLeft: `4px solid ${theme.palette.primary.main}`,
borderRadius: 0,
borderRadius: theme.shape.borderRadius,
padding: `${theme.spacing(1)}px ${theme.spacing(3)}px ${theme.spacing(1)}px ${theme.spacing(2)}px`,
boxShadow: theme.shadows[6],
alignItems: "inherit",
@@ -94,8 +95,8 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.info.contrastText,
},
snackbarContentError: {
backgroundColor: theme.palette.error.dark,
backgroundColor: theme.palette.background.paper,
borderLeftColor: theme.palette.error.main,
color: theme.palette.error.contrastText,
color: theme.palette.text.secondary,
},
}))