@visns-studio/visns-components 5.7.3 → 5.7.4
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
|
@@ -82,7 +82,7 @@
|
|
|
82
82
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
83
83
|
},
|
|
84
84
|
"name": "@visns-studio/visns-components",
|
|
85
|
-
"version": "5.7.
|
|
85
|
+
"version": "5.7.4",
|
|
86
86
|
"description": "Various packages to assist in the development of our Custom Applications.",
|
|
87
87
|
"main": "src/index.js",
|
|
88
88
|
"files": [
|
|
@@ -205,11 +205,61 @@ function Notification(props) {
|
|
|
205
205
|
<h3>Notifications</h3>
|
|
206
206
|
{hasNotifications && (
|
|
207
207
|
<button
|
|
208
|
-
className={styles.markAllReadBtn}
|
|
209
208
|
onClick={markAllAsRead}
|
|
210
209
|
disabled={loading}
|
|
210
|
+
aria-label="Mark all notifications as read"
|
|
211
|
+
style={{
|
|
212
|
+
backgroundColor: 'var(--primary-color)',
|
|
213
|
+
color: 'var(--tertiary-color, white)',
|
|
214
|
+
padding: '8px 16px',
|
|
215
|
+
borderRadius: 'var(--br, 6px)',
|
|
216
|
+
border: 'none',
|
|
217
|
+
display: 'flex',
|
|
218
|
+
alignItems: 'center',
|
|
219
|
+
justifyContent: 'center',
|
|
220
|
+
gap: '6px',
|
|
221
|
+
fontSize: '14px',
|
|
222
|
+
fontWeight: '500',
|
|
223
|
+
cursor: 'pointer',
|
|
224
|
+
boxShadow:
|
|
225
|
+
'0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
226
|
+
transition: 'all 0.2s ease',
|
|
227
|
+
opacity: loading ? '0.7' : '1',
|
|
228
|
+
}}
|
|
229
|
+
onMouseOver={(e) => {
|
|
230
|
+
if (!loading) {
|
|
231
|
+
e.target.style.backgroundColor =
|
|
232
|
+
'var(--secondary-color)';
|
|
233
|
+
e.target.style.boxShadow =
|
|
234
|
+
'0 4px 8px rgba(0, 0, 0, 0.15)';
|
|
235
|
+
}
|
|
236
|
+
}}
|
|
237
|
+
onMouseOut={(e) => {
|
|
238
|
+
if (!loading) {
|
|
239
|
+
e.target.style.backgroundColor =
|
|
240
|
+
'var(--primary-color)';
|
|
241
|
+
e.target.style.boxShadow =
|
|
242
|
+
'0 2px 4px rgba(0, 0, 0, 0.1)';
|
|
243
|
+
}
|
|
244
|
+
}}
|
|
245
|
+
onFocus={(e) => {
|
|
246
|
+
if (!loading) {
|
|
247
|
+
e.target.style.boxShadow =
|
|
248
|
+
'0 0 0 3px rgba(var(--primary-color-rgb, 0, 86, 179), 0.4)';
|
|
249
|
+
}
|
|
250
|
+
}}
|
|
251
|
+
onBlur={(e) => {
|
|
252
|
+
if (!loading) {
|
|
253
|
+
e.target.style.boxShadow =
|
|
254
|
+
'0 2px 4px rgba(0, 0, 0, 0.1)';
|
|
255
|
+
}
|
|
256
|
+
}}
|
|
211
257
|
>
|
|
212
|
-
<Check
|
|
258
|
+
<Check
|
|
259
|
+
size={16}
|
|
260
|
+
strokeWidth={2}
|
|
261
|
+
color="white"
|
|
262
|
+
/>
|
|
213
263
|
<span>Mark all as read</span>
|
|
214
264
|
</button>
|
|
215
265
|
)}
|
|
@@ -257,7 +307,10 @@ function Notification(props) {
|
|
|
257
307
|
data-index={index}
|
|
258
308
|
aria-label="Dismiss notification"
|
|
259
309
|
>
|
|
260
|
-
<CircleX
|
|
310
|
+
<CircleX
|
|
311
|
+
size={18}
|
|
312
|
+
strokeWidth={2}
|
|
313
|
+
/>
|
|
261
314
|
</button>
|
|
262
315
|
</div>
|
|
263
316
|
</div>
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
justify-content: space-between;
|
|
81
81
|
padding: 12px 16px;
|
|
82
82
|
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
|
|
83
|
+
gap: 10px;
|
|
83
84
|
}
|
|
84
85
|
|
|
85
86
|
.notiboxHeader h3 {
|
|
@@ -87,29 +88,7 @@
|
|
|
87
88
|
font-size: 16px;
|
|
88
89
|
font-weight: 600;
|
|
89
90
|
color: var(--heading-color, #333);
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
.markAllReadBtn {
|
|
93
|
-
background: transparent;
|
|
94
|
-
border: none;
|
|
95
|
-
display: flex;
|
|
96
|
-
align-items: center;
|
|
97
|
-
gap: 4px;
|
|
98
|
-
font-size: 12px;
|
|
99
|
-
color: var(--primary-color);
|
|
100
|
-
cursor: pointer;
|
|
101
|
-
padding: 4px 8px;
|
|
102
|
-
border-radius: 4px;
|
|
103
|
-
transition: background-color 0.2s;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.markAllReadBtn:hover {
|
|
107
|
-
background-color: rgba(var(--primary-color-rgb), 0.08);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.markAllReadBtn:disabled {
|
|
111
|
-
opacity: 0.5;
|
|
112
|
-
cursor: not-allowed;
|
|
91
|
+
flex-shrink: 0;
|
|
113
92
|
}
|
|
114
93
|
|
|
115
94
|
/* Notification Scroll Wrap */
|
|
@@ -204,7 +183,7 @@
|
|
|
204
183
|
top: 10px;
|
|
205
184
|
background: transparent;
|
|
206
185
|
border: none;
|
|
207
|
-
color:
|
|
186
|
+
color: #666; /* Darker color to ensure visibility */
|
|
208
187
|
cursor: pointer;
|
|
209
188
|
padding: 0;
|
|
210
189
|
display: flex;
|
|
@@ -214,7 +193,7 @@
|
|
|
214
193
|
height: 24px;
|
|
215
194
|
border-radius: 50%;
|
|
216
195
|
transition: all 0.2s;
|
|
217
|
-
opacity: 0;
|
|
196
|
+
opacity: 0.6; /* Start with some opacity to ensure visibility */
|
|
218
197
|
}
|
|
219
198
|
|
|
220
199
|
.notiContent:hover .notiDismiss {
|
|
@@ -223,7 +202,9 @@
|
|
|
223
202
|
|
|
224
203
|
.notiDismiss:hover {
|
|
225
204
|
background-color: rgba(0, 0, 0, 0.05);
|
|
226
|
-
color: var(
|
|
205
|
+
color: var(
|
|
206
|
+
--secondary-color
|
|
207
|
+
); /* Use secondary color on hover for better visibility */
|
|
227
208
|
}
|
|
228
209
|
|
|
229
210
|
/* Empty State */
|