opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-24 15:04:27 +08: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) => ({ const useStyles = makeStyles((theme) => ({
dialogWrapper: (props: StyleProps) => ({ dialogWrapper: (props: StyleProps) => ({
"& .MuiPaper-root": { "& .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) => ({ 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), padding: theme.spacing(6),
textAlign: "center", textAlign: "center",
}), }),
@@ -61,16 +65,14 @@ const useStyles = makeStyles((theme) => ({
}, },
description: (props: StyleProps) => ({ description: (props: StyleProps) => ({
color: color:
props.type === "info" props.type === "info" ? fade(theme.palette.primary.contrastText, 0.75) : fade(theme.palette.text.secondary, 0.75),
? fade(theme.palette.primary.contrastText, 0.75)
: fade(theme.palette.error.contrastText, 0.75),
lineHeight: "160%", lineHeight: "160%",
"& strong": { "& strong": {
color: color:
props.type === "info" props.type === "info"
? fade(theme.palette.primary.contrastText, 0.95) ? 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} disabled={confirmLoading}
onClick={onCancel} onClick={onCancel}
variant="contained" variant="outlined"
> >
{cancelText} {cancelText}
</LoadingButton> </LoadingButton>
@@ -145,10 +145,10 @@ interface StyleProps {
const useButtonStyles = makeStyles((theme) => ({ const useButtonStyles = makeStyles((theme) => ({
dialogButton: { dialogButton: {
borderRadius: 0, borderRadius: theme.shape.borderRadius,
fontSize: theme.typography.h6.fontSize, fontSize: theme.typography.h6.fontSize,
fontWeight: theme.typography.h5.fontWeight, fontWeight: theme.typography.h5.fontWeight,
padding: theme.spacing(2.25), padding: `${theme.spacing(0.75)}px ${theme.spacing(2)}px`,
width: "100%", width: "100%",
boxShadow: "none", 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, color: theme.palette.error.contrastText,
}, },
snackbarContent: { snackbarContent: {
border: `1px solid ${theme.palette.divider}`,
borderLeft: `4px solid ${theme.palette.primary.main}`, 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`, padding: `${theme.spacing(1)}px ${theme.spacing(3)}px ${theme.spacing(1)}px ${theme.spacing(2)}px`,
boxShadow: theme.shadows[6], boxShadow: theme.shadows[6],
alignItems: "inherit", alignItems: "inherit",
@@ -94,8 +95,8 @@ const useStyles = makeStyles((theme) => ({
color: theme.palette.info.contrastText, color: theme.palette.info.contrastText,
}, },
snackbarContentError: { snackbarContentError: {
backgroundColor: theme.palette.error.dark, backgroundColor: theme.palette.background.paper,
borderLeftColor: theme.palette.error.main, borderLeftColor: theme.palette.error.main,
color: theme.palette.error.contrastText, color: theme.palette.text.secondary,
}, },
})) }))