fix(client): tighten the toast appearance
- Drop the per-type icon - Lower min-height to 40px and tighten padding - Thin both the active progress bar and its track to 2px and pin them to the same baseline so they sit on top of each other
This commit is contained in:
1 parent
48328c0e94
commit
42cd6847a8
1 file changed
+10
@@ -33,6 +33,11 @@ function App() {
|
||||
body: {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
".Toastify__progress-bar, .Toastify__progress-bar--bg": {
|
||||
height: 2,
|
||||
bottom: 0,
|
||||
top: "auto",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<AppLayout>
|
||||
@@ -41,12 +46,17 @@ function App() {
|
||||
<ToastContainer
|
||||
newestOnTop={true}
|
||||
theme={mode}
|
||||
icon={false}
|
||||
style={
|
||||
{
|
||||
"--toastify-color-progress-light": theme.palette.primary.main,
|
||||
"--toastify-color-progress-dark": theme.palette.primary.main,
|
||||
"--toastify-toast-min-height": "40px",
|
||||
"--toastify-toast-padding": "8px 12px",
|
||||
} as CSSProperties
|
||||
}
|
||||
toastStyle={{ minHeight: 40, padding: "8px 12px" }}
|
||||
progressStyle={{ height: 2 }}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</SWRConfig>
|
||||
|
||||
Reference in new issue
Block a user