style: added icons to notifications
mellbacon committed
Jun 16, 2024 at 12:13 UTC
b4fb6d1cec852b76becc2c8bbe0ca031c980e105
4 files changed
+51
-10
src/lib/Notifications/Notification.svelte
+23
-3
@@ -1,6 +1,9 @@
1
<script lang="ts">
2
import { getTime } from "../../config/config";
3
import { closeNotification, updateReadStatus } from "./notifications";
4
+ import Info from "carbon-icons-svelte/lib/Information.svelte";
5
+ import Warning from "carbon-icons-svelte/lib/WarningAlt.svelte";
6
+ import Error from "carbon-icons-svelte/lib/CloseOutline.svelte";
7
8
export let id;
9
export let type = "";
@@ -30,7 +33,15 @@
33
<div bind:this={notification} class="notification" class:error={type === "Error"} class:warning={type === "Warning"} class:read>
34
<div class="notification-info">
35
<div class="details">
33
- <div class="icon"></div>
36
+ <div class="icon">
37
+ {#if type === "Error"}
38
+ <Error />
39
+ {:else if type === "Warning"}
40
+ <Warning />
41
+ {:else}
42
+ <Info />
43
+ {/if}
44
+ </div>
45
<div class="title">{type}: {title}</div>
46
</div>
47
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -80,16 +91,25 @@
91
position: relative;
92
flex-direction: column;
93
justify-content: center;
94
+ .icon {
95
+ display: flex;
96
+ align-items: center;
97
+ justify-content: center;
98
+ :global(svg) {
99
+ height: 22px;
100
+ width: 22px;
101
+ }
102
+ }
103
&.warning {
104
border-top: 3px solid $warning-color;
105
.icon {
86
- background-color: $warning-color !important;
106
+ color: $warning-color;
107
}
108
}
109
&.error {
110
border-top: 3px solid $error-color;
111
.icon {
92
- background-color: $error-color !important;
112
+ color: $error-color;
113
}
114
}
115
&.read {
src/lib/Notifications/NotificationToast.svelte
+24
-4
@@ -2,6 +2,9 @@
2
import { onMount } from "svelte";
3
import { closeToast } from "./notifications";
4
import { fade } from "svelte/transition";
5
+ import Info from "carbon-icons-svelte/lib/Information.svelte";
6
+ import Warning from "carbon-icons-svelte/lib/WarningAlt.svelte";
7
+ import Error from "carbon-icons-svelte/lib/CloseOutline.svelte";
8
9
export let id: number;
10
export let type = "";
@@ -15,7 +18,7 @@
18
let timer = setTimeout(() => {
19
notification.remove();
20
clearTimeout(timer);
18
- }, 10000)
21
+ }, 100000)
22
return () => {
23
clearTimeout(timer)
24
}
@@ -25,7 +28,15 @@
28
<div bind:this={notification} class="notification-toast" class:error={type === "Error"} class:warning={type === "Warning"} transition:fade={{ duration: 150 }}>
29
<div class="notification-info">
30
<div class="details">
28
- <div class="icon"></div>
31
+ <div class="icon">
32
+ {#if type === "Error"}
33
+ <Error />
34
+ {:else if type === "Warning"}
35
+ <Warning />
36
+ {:else}
37
+ <Info />
38
+ {/if}
39
+ </div>
40
<div class="title">{type}: {title}</div>
41
</div>
42
<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -57,16 +68,25 @@
68
flex-direction: column;
69
justify-content: center;
70
z-index: 10;
71
+ .icon {
72
+ display: flex;
73
+ align-items: center;
74
+ justify-content: center;
75
+ :global(svg) {
76
+ height: 22px;
77
+ width: 22px;
78
+ }
79
+ }
80
&.warning {
81
border-top: 3px solid $warning-color;
82
.icon {
63
- background-color: $warning-color !important;
83
+ color: $warning-color !important;
84
}
85
}
86
&.error {
87
border-top: 3px solid $error-color;
88
.icon {
69
- background-color: $error-color !important;
89
+ color: $error-color !important;
90
}
91
}
92
&::before {
src/lib/Notifications/NotificationToasts.svelte
+1
@@ -20,5 +20,6 @@
20
display: flex;
21
justify-content: flex-end;
22
flex-direction: column;
23
+ padding-bottom: 1.5rem;
24
}
25
</style>
src/theme.scss
+3
-3
@@ -347,17 +347,17 @@ button:focus {
347
border-top: 3px solid var(--notification-defaultBorderColor);
348
color: var(--notification-foreground);
349
&.read {
350
- border-top-color: var(--notification-unreadBorderColor);
350
+ border-top-color: var(--notification-unreadBorderColor) !important;
351
color: var(--notification-unreadColor);
352
.icon {
353
- background-color: var(--notification-unreadBorderColor) !important;
353
+ color: var(--notification-unreadBorderColor) !important;
354
}
355
.message {
356
color: var(--notification-unreadBorderColor);
357
}
358
}
359
.details .icon {
360
- background-color: var(--notification-defaultBorderColor);
360
+ color: var(--notification-defaultBorderColor);
361
}
362
&::before {
363
border-color: var(--window-inputBackground);