@visns-studio/visns-components 5.14.5 → 5.14.7

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.
Files changed (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Notification.jsx +9 -90
  3. package/src/components/styles/Notification.module.scss +88 -23
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.5",
91
+ "version": "5.14.7",
92
92
  "description": "Various packages to assist in the development of our Custom Applications.",
93
93
  "main": "src/index.js",
94
94
  "files": [
package/src/components/Notification.jsx CHANGED
@@ -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}
@@ -370,50 +325,14 @@ function Notification(props) {
370
325
  </div>
371
326
 
372
327
  <div className={styles.notiboxActions}>
373
- <div className={styles.buttonWrapper}>
374
- <button
375
- className={styles.viewAllBtn}
376
- onClick={showAllNotifications}
377
- aria-label="View all notifications"
378
- type="button"
379
- style={{
380
- backgroundColor: 'var(--primary-color)',
381
- color: 'var(--tertiary-color, white)',
382
- padding: '10px 20px',
383
- borderRadius: 'var(--br, 6px)',
384
- border: 'none',
385
- width: 'auto',
386
- minWidth: '200px',
387
- textAlign: 'center',
388
- fontWeight: '500',
389
- fontSize: '14px',
390
- boxShadow:
391
- '0 2px 4px rgba(0, 0, 0, 0.1)',
392
- cursor: 'pointer',
393
- transition: 'all 0.2s ease',
394
- }}
395
- onMouseOver={(e) =>
396
- (e.target.style.backgroundColor =
397
- 'var(--secondary-color)')
398
- }
399
- onMouseOut={(e) =>
400
- (e.target.style.backgroundColor =
401
- 'var(--primary-color)')
402
- }
403
- onFocus={(e) => {
404
- e.target.style.backgroundColor =
405
- 'var(--primary-color)';
406
- e.target.style.boxShadow =
407
- '0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
408
- }}
409
- onBlur={(e) => {
410
- e.target.style.boxShadow =
411
- '0 2px 4px rgba(0, 0, 0, 0.1)';
412
- }}
413
- >
414
- View all notifications
415
- </button>
416
- </div>
328
+ <button
329
+ className={styles.viewAllBtn}
330
+ onClick={showAllNotifications}
331
+ aria-label="View all notifications"
332
+ type="button"
333
+ >
334
+ View all notifications
335
+ </button>
417
336
  </div>
418
337
  </div>
419
338
  </div>
package/src/components/styles/Notification.module.scss CHANGED
@@ -10,23 +10,33 @@
10
10
  background: transparent;
11
11
  border: none;
12
12
  cursor: pointer;
13
- padding: 6px;
13
+ padding: 8px;
14
14
  display: flex;
15
15
  align-items: center;
16
16
  justify-content: center;
17
- color: var(--paragraph-color);
17
+ color: var(--paragraph-color, #333);
18
18
  border-radius: 50%;
19
19
  transition: all 0.2s ease;
20
20
  outline: none;
21
+ width: 40px;
22
+ height: 40px;
23
+ /* Ensure minimum contrast */
24
+ opacity: 1;
21
25
  }
22
26
 
23
27
  .notificationTrigger:hover {
24
- background-color: rgba(0, 0, 0, 0.05);
25
- color: var(--primary-color);
28
+ background-color: rgba(var(--primary-color-rgb, 0, 86, 179), 0.1);
29
+ color: var(--primary-color, #0056b3);
30
+ transform: scale(1.05);
26
31
  }
27
32
 
28
33
  .notificationTrigger:focus {
29
- box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
34
+ box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 0, 86, 179), 0.3);
35
+ background-color: rgba(var(--primary-color-rgb, 0, 86, 179), 0.05);
36
+ }
37
+
38
+ .notificationTrigger:active {
39
+ transform: scale(0.95);
30
40
  }
31
41
 
32
42
  /* Badge for unread notifications */
@@ -226,7 +236,7 @@
226
236
  top: 10px;
227
237
  background: transparent;
228
238
  border: none;
229
- color: #666; /* Darker color to ensure visibility */
239
+ color: #666;
230
240
  cursor: pointer;
231
241
  padding: 0;
232
242
  display: flex;
@@ -236,7 +246,7 @@
236
246
  height: 24px;
237
247
  border-radius: 50%;
238
248
  transition: all 0.2s;
239
- opacity: 0.6; /* Start with some opacity to ensure visibility */
249
+ opacity: 0.7;
240
250
  }
241
251
 
242
252
  .notiContent:hover .notiDismiss {
@@ -244,10 +254,19 @@
244
254
  }
245
255
 
246
256
  .notiDismiss:hover {
247
- background-color: rgba(0, 0, 0, 0.05);
248
- color: var(
249
- --secondary-color
250
- ); /* Use secondary color on hover for better visibility */
257
+ background-color: rgba(220, 53, 69, 0.1);
258
+ color: #dc3545;
259
+ transform: scale(1.1);
260
+ }
261
+
262
+ .notiDismiss:focus {
263
+ outline: none;
264
+ box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.3);
265
+ background-color: rgba(220, 53, 69, 0.05);
266
+ }
267
+
268
+ .notiDismiss:active {
269
+ transform: scale(0.95);
251
270
  }
252
271
 
253
272
  /* Empty State */
@@ -301,6 +320,50 @@
301
320
  font-size: 14px;
302
321
  }
303
322
 
323
+ /* Mark All as Read Button */
324
+ .markAllBtn {
325
+ background-color: var(--primary-color, #0056b3);
326
+ color: var(--tertiary-color, white);
327
+ padding: 8px 16px;
328
+ border-radius: var(--br, 6px);
329
+ border: none;
330
+ display: flex;
331
+ align-items: center;
332
+ justify-content: center;
333
+ gap: 6px;
334
+ font-size: 14px;
335
+ font-weight: 500;
336
+ cursor: pointer;
337
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
338
+ transition: all 0.2s ease;
339
+ outline: none;
340
+ white-space: nowrap;
341
+ flex-shrink: 0;
342
+ /* Ensure visibility */
343
+ opacity: 1;
344
+ }
345
+
346
+ .markAllBtn:hover:not(:disabled) {
347
+ background-color: var(--secondary-color, #004494);
348
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
349
+ transform: translateY(-1px);
350
+ }
351
+
352
+ .markAllBtn:focus:not(:disabled) {
353
+ box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
354
+ }
355
+
356
+ .markAllBtn:active:not(:disabled) {
357
+ transform: translateY(0);
358
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
359
+ }
360
+
361
+ .markAllBtn:disabled {
362
+ opacity: 0.6;
363
+ cursor: not-allowed;
364
+ background-color: #6c757d;
365
+ }
366
+
304
367
  /* Footer Actions */
305
368
  .notiboxActions {
306
369
  border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -310,14 +373,8 @@
310
373
  background-color: rgba(0, 0, 0, 0.02);
311
374
  }
312
375
 
313
- .buttonWrapper {
314
- display: inline-block;
315
- position: relative;
316
- z-index: 5;
317
- }
318
-
319
376
  .viewAllBtn {
320
- background-color: var(--primary-color);
377
+ background-color: var(--primary-color, #0056b3);
321
378
  color: var(--tertiary-color, white);
322
379
  font-size: 14px;
323
380
  font-weight: 500;
@@ -330,22 +387,30 @@
330
387
  text-align: center;
331
388
  transition: all 0.2s ease;
332
389
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
333
- /* Ensure the button is always visible */
334
390
  outline: none;
335
391
  position: relative;
336
392
  z-index: 1;
393
+ /* Ensure visibility and proper contrast */
394
+ opacity: 1;
395
+ display: block;
337
396
  }
338
397
 
339
- .viewAllBtn:hover {
340
- background-color: var(--secondary-color);
398
+ .viewAllBtn:hover:not(:disabled) {
399
+ background-color: var(--secondary-color, #004494);
341
400
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
401
+ transform: translateY(-1px);
342
402
  }
343
403
 
344
- .viewAllBtn:focus {
345
- box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.4);
404
+ .viewAllBtn:focus:not(:disabled) {
405
+ box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
346
406
  outline: none;
347
407
  }
348
408
 
409
+ .viewAllBtn:active:not(:disabled) {
410
+ transform: translateY(0);
411
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
412
+ }
413
+
349
414
  /* Bell Animation */
350
415
  .noti {
351
416
  animation: pulse 2s infinite;