@visns-studio/visns-components 5.14.6 → 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 +8 -44
  3. package/src/components/styles/Notification.module.scss +56 -26
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.6",
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
@@ -325,50 +325,14 @@ function Notification(props) {
325
325
  </div>
326
326
 
327
327
  <div className={styles.notiboxActions}>
328
- <div className={styles.buttonWrapper}>
329
- <button
330
- className={styles.viewAllBtn}
331
- onClick={showAllNotifications}
332
- aria-label="View all notifications"
333
- type="button"
334
- style={{
335
- backgroundColor: 'var(--primary-color)',
336
- color: 'var(--tertiary-color, white)',
337
- padding: '10px 20px',
338
- borderRadius: 'var(--br, 6px)',
339
- border: 'none',
340
- width: 'auto',
341
- minWidth: '200px',
342
- textAlign: 'center',
343
- fontWeight: '500',
344
- fontSize: '14px',
345
- boxShadow:
346
- '0 2px 4px rgba(0, 0, 0, 0.1)',
347
- cursor: 'pointer',
348
- transition: 'all 0.2s ease',
349
- }}
350
- onMouseOver={(e) =>
351
- (e.target.style.backgroundColor =
352
- 'var(--secondary-color)')
353
- }
354
- onMouseOut={(e) =>
355
- (e.target.style.backgroundColor =
356
- 'var(--primary-color)')
357
- }
358
- onFocus={(e) => {
359
- e.target.style.backgroundColor =
360
- 'var(--primary-color)';
361
- e.target.style.boxShadow =
362
- '0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
363
- }}
364
- onBlur={(e) => {
365
- e.target.style.boxShadow =
366
- '0 2px 4px rgba(0, 0, 0, 0.1)';
367
- }}
368
- >
369
- View all notifications
370
- </button>
371
- </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>
372
336
  </div>
373
337
  </div>
374
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 */
@@ -303,7 +322,7 @@
303
322
 
304
323
  /* Mark All as Read Button */
305
324
  .markAllBtn {
306
- background-color: var(--primary-color);
325
+ background-color: var(--primary-color, #0056b3);
307
326
  color: var(--tertiary-color, white);
308
327
  padding: 8px 16px;
309
328
  border-radius: var(--br, 6px);
@@ -320,20 +339,29 @@
320
339
  outline: none;
321
340
  white-space: nowrap;
322
341
  flex-shrink: 0;
342
+ /* Ensure visibility */
343
+ opacity: 1;
323
344
  }
324
345
 
325
346
  .markAllBtn:hover:not(:disabled) {
326
- background-color: var(--secondary-color);
347
+ background-color: var(--secondary-color, #004494);
327
348
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
349
+ transform: translateY(-1px);
328
350
  }
329
351
 
330
352
  .markAllBtn:focus:not(:disabled) {
331
353
  box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4);
332
354
  }
333
355
 
356
+ .markAllBtn:active:not(:disabled) {
357
+ transform: translateY(0);
358
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
359
+ }
360
+
334
361
  .markAllBtn:disabled {
335
- opacity: 0.7;
362
+ opacity: 0.6;
336
363
  cursor: not-allowed;
364
+ background-color: #6c757d;
337
365
  }
338
366
 
339
367
  /* Footer Actions */
@@ -345,14 +373,8 @@
345
373
  background-color: rgba(0, 0, 0, 0.02);
346
374
  }
347
375
 
348
- .buttonWrapper {
349
- display: inline-block;
350
- position: relative;
351
- z-index: 5;
352
- }
353
-
354
376
  .viewAllBtn {
355
- background-color: var(--primary-color);
377
+ background-color: var(--primary-color, #0056b3);
356
378
  color: var(--tertiary-color, white);
357
379
  font-size: 14px;
358
380
  font-weight: 500;
@@ -365,22 +387,30 @@
365
387
  text-align: center;
366
388
  transition: all 0.2s ease;
367
389
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
368
- /* Ensure the button is always visible */
369
390
  outline: none;
370
391
  position: relative;
371
392
  z-index: 1;
393
+ /* Ensure visibility and proper contrast */
394
+ opacity: 1;
395
+ display: block;
372
396
  }
373
397
 
374
- .viewAllBtn:hover {
375
- background-color: var(--secondary-color);
398
+ .viewAllBtn:hover:not(:disabled) {
399
+ background-color: var(--secondary-color, #004494);
376
400
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
401
+ transform: translateY(-1px);
377
402
  }
378
403
 
379
- .viewAllBtn:focus {
380
- 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);
381
406
  outline: none;
382
407
  }
383
408
 
409
+ .viewAllBtn:active:not(:disabled) {
410
+ transform: translateY(0);
411
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
412
+ }
413
+
384
414
  /* Bell Animation */
385
415
  .noti {
386
416
  animation: pulse 2s infinite;