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:
gorkem-bwl authored and Alex Holliday committed 2026-04-27 10:52:23 -07:00
1 parent 48328c0e94
commit 42cd6847a8
1 file changed
+10
+10
View File
@@ -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>