@visns-studio/visns-components 5.14.5 → 5.14.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
89
89
|
},
|
|
90
90
|
"name": "@visns-studio/visns-components",
|
|
91
|
-
"version": "5.14.
|
|
91
|
+
"version": "5.14.6",
|
|
92
92
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
93
93
|
"main": "src/index.js",
|
|
94
94
|
"files": [
|
|
@@ -245,55 +245,10 @@ function Notification(props) {
|
|
|
245
245
|
<h3>Notifications</h3>
|
|
246
246
|
{hasNotifications && (
|
|
247
247
|
<button
|
|
248
|
+
className={styles.markAllBtn}
|
|
248
249
|
onClick={markAllAsRead}
|
|
249
250
|
disabled={loading}
|
|
250
251
|
aria-label="Mark all notifications as read"
|
|
251
|
-
style={{
|
|
252
|
-
backgroundColor: 'var(--primary-color)',
|
|
253
|
-
color: 'var(--tertiary-color, white)',
|
|
254
|
-
padding: '8px 16px',
|
|
255
|
-
borderRadius: 'var(--br, 6px)',
|
|
256
|
-
border: 'none',
|
|
257
|
-
display: 'flex',
|
|
258
|
-
alignItems: 'center',
|
|
259
|
-
justifyContent: 'center',
|
|
260
|
-
gap: '6px',
|
|
261
|
-
fontSize: '14px',
|
|
262
|
-
fontWeight: '500',
|
|
263
|
-
cursor: 'pointer',
|
|
264
|
-
boxShadow:
|
|
265
|
-
'0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
266
|
-
transition: 'all 0.2s ease',
|
|
267
|
-
opacity: loading ? '0.7' : '1',
|
|
268
|
-
}}
|
|
269
|
-
onMouseOver={(e) => {
|
|
270
|
-
if (!loading) {
|
|
271
|
-
e.target.style.backgroundColor =
|
|
272
|
-
'var(--secondary-color)';
|
|
273
|
-
e.target.style.boxShadow =
|
|
274
|
-
'0 4px 8px rgba(0, 0, 0, 0.15)';
|
|
275
|
-
}
|
|
276
|
-
}}
|
|
277
|
-
onMouseOut={(e) => {
|
|
278
|
-
if (!loading) {
|
|
279
|
-
e.target.style.backgroundColor =
|
|
280
|
-
'var(--primary-color)';
|
|
281
|
-
e.target.style.boxShadow =
|
|
282
|
-
'0 2px 4px rgba(0, 0, 0, 0.1)';
|
|
283
|
-
}
|
|
284
|
-
}}
|
|
285
|
-
onFocus={(e) => {
|
|
286
|
-
if (!loading) {
|
|
287
|
-
e.target.style.boxShadow =
|
|
288
|
-
'0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
|
|
289
|
-
}
|
|
290
|
-
}}
|
|
291
|
-
onBlur={(e) => {
|
|
292
|
-
if (!loading) {
|
|
293
|
-
e.target.style.boxShadow =
|
|
294
|
-
'0 2px 4px rgba(0, 0, 0, 0.1)';
|
|
295
|
-
}
|
|
296
|
-
}}
|
|
297
252
|
>
|
|
298
253
|
<Check
|
|
299
254
|
size={16}
|
|
@@ -301,6 +301,41 @@
|
|
|
301
301
|
font-size: 14px;
|
|
302
302
|
}
|
|
303
303
|
|
|
304
|
+
/* Mark All as Read Button */
|
|
305
|
+
.markAllBtn {
|
|
306
|
+
background-color: var(--primary-color);
|
|
307
|
+
color: var(--tertiary-color, white);
|
|
308
|
+
padding: 8px 16px;
|
|
309
|
+
border-radius: var(--br, 6px);
|
|
310
|
+
border: none;
|
|
311
|
+
display: flex;
|
|
312
|
+
align-items: center;
|
|
313
|
+
justify-content: center;
|
|
314
|
+
gap: 6px;
|
|
315
|
+
font-size: 14px;
|
|
316
|
+
font-weight: 500;
|
|
317
|
+
cursor: pointer;
|
|
318
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
319
|
+
transition: all 0.2s ease;
|
|
320
|
+
outline: none;
|
|
321
|
+
white-space: nowrap;
|
|
322
|
+
flex-shrink: 0;
|
|
323
|
+
}
|
|
324
|
+
|
|
325
|
+
.markAllBtn:hover:not(:disabled) {
|
|
326
|
+
background-color: var(--secondary-color);
|
|
327
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.markAllBtn:focus:not(:disabled) {
|
|
331
|
+
box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.markAllBtn:disabled {
|
|
335
|
+
opacity: 0.7;
|
|
336
|
+
cursor: not-allowed;
|
|
337
|
+
}
|
|
338
|
+
|
|
304
339
|
/* Footer Actions */
|
|
305
340
|
.notiboxActions {
|
|
306
341
|
border-top: 1px solid rgba(0, 0, 0, 0.06);
|