Fix toast styles

This commit is contained in:
Infinite
2020-02-13 22:11:06 +01:00
parent 750759e4bf
commit 6df25a2c5e
3 changed files with 31 additions and 5 deletions

View File

@@ -5,7 +5,7 @@ interface IToast {
header?: string; header?: string;
content: JSX.Element | string; content: JSX.Element | string;
delay?: number; delay?: number;
variant?: "success" | "danger" | "warning" | "info"; variant?: "success" | "danger" | "warning";
} }
interface IActiveToast extends IToast { interface IActiveToast extends IToast {
id: number; id: number;
@@ -29,7 +29,7 @@ export const ToastProvider: React.FC = ({ children }) => {
delay={toast.delay ?? 3000} delay={toast.delay ?? 3000}
> >
<Toast.Header> <Toast.Header>
<span className="mr-auto">{toast.header ?? "Stash"}</span> <span className="mr-auto">{toast.header}</span>
</Toast.Header> </Toast.Header>
<Toast.Body>{toast.content}</Toast.Body> <Toast.Body>{toast.content}</Toast.Body>
</Toast> </Toast>

View File

@@ -193,9 +193,32 @@ code {
top: 2rem; top: 2rem;
z-index: 1031; z-index: 1031;
.success {
background-color: $success;
}
.danger {
background-color: $danger;
}
.warning {
background-color: $warning;
}
.toast { .toast {
width: 350px; width: 350px;
} }
.toast-header {
background-color: transparent;
border: none;
color: $text-color;
.close {
color: $text-color;
text-shadow: none;
}
}
} }
.image-input { .image-input {

View File

@@ -3,13 +3,16 @@
$secondary: #394b59; $secondary: #394b59;
$muted-gray: #bfccd6; $muted-gray: #bfccd6;
$success: #0f9960;
$warning: #d9822b;
$danger: #db3737;
$theme-colors: ( $theme-colors: (
primary: #137cbd, primary: #137cbd,
secondary: $secondary, secondary: $secondary,
success: #0f9960, success: $success,
warning: #d9822b, warning: $warning,
danger: #db3737, danger: $danger,
dark: #394b59 dark: #394b59
); );