@visns-studio/visns-components 5.14.4 → 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
@@ -16,16 +16,16 @@
16
16
  "@uiw/react-color": "^2.7.1",
17
17
  "@visns-studio/visns-datagrid-community": "1.1.0",
18
18
  "@visns-studio/visns-datagrid-enterprise": "1.1.0",
19
- "@vitejs/plugin-react": "^4.6.0",
19
+ "@vitejs/plugin-react": "^4.7.0",
20
20
  "add": "^2.0.6",
21
21
  "array-move": "^4.0.0",
22
22
  "awesome-debounce-promise": "^2.1.0",
23
23
  "browser-image-compression": "^2.0.2",
24
24
  "dayjs": "^1.11.13",
25
- "fabric": "^6.7.0",
25
+ "fabric": "^6.7.1",
26
26
  "file-saver": "^2.0.5",
27
27
  "framer-motion": "^12.23.6",
28
- "html-react-parser": "^5.2.5",
28
+ "html-react-parser": "^5.2.6",
29
29
  "lodash": "^4.17.21",
30
30
  "lodash.debounce": "^4.0.8",
31
31
  "lucide-react": "^0.525.0",
@@ -66,7 +66,7 @@
66
66
  "validator": "^13.15.15",
67
67
  "vite": "^6.3.5",
68
68
  "yarn": "^1.22.22",
69
- "yet-another-react-lightbox": "^3.24.0"
69
+ "yet-another-react-lightbox": "^3.25.0"
70
70
  },
71
71
  "devDependencies": {
72
72
  "@babel/core": "^7.28.0",
@@ -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.4",
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}
@@ -26,7 +26,7 @@ const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
26
26
 
27
27
  if (!email.trim()) {
28
28
  setInputError(true);
29
- toast.error('Please enter your email address');
29
+ toast.error('Please enter your email address or mobile number');
30
30
  return;
31
31
  }
32
32
 
@@ -61,14 +61,14 @@ const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
61
61
  });
62
62
  toast.success(
63
63
  result.data.message ||
64
- 'Verification code sent to your email'
64
+ 'Verification code sent'
65
65
  );
66
66
  } else {
67
67
  setSystemAuth(false);
68
68
  setInputError(true);
69
69
  toast.error(
70
70
  (result.data && result.data.message) ||
71
- 'Could not find an account with this email address.'
71
+ 'Could not find an account with this email address or mobile number.'
72
72
  );
73
73
  }
74
74
  } catch (error) {
@@ -85,25 +85,25 @@ const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
85
85
 
86
86
  <h1 className={styles.title}>Client Login</h1>
87
87
  <p className={styles.subtitle}>
88
- Enter your email address to receive a verification code
88
+ Enter your email address or mobile number to receive a verification code
89
89
  </p>
90
90
 
91
91
  <form onSubmit={handleSubmit}>
92
92
  <div className={styles.formGroup}>
93
93
  <label htmlFor="email" className={styles.inputLabel}>
94
- Email
94
+ Email or Mobile
95
95
  </label>
96
96
  <input
97
97
  id="email"
98
- type="email"
98
+ type="text"
99
99
  name="email"
100
100
  value={email}
101
101
  onChange={handleChange}
102
102
  className={`${styles.input} ${
103
103
  inputError ? styles.error : ''
104
104
  }`}
105
- placeholder="Enter your email address"
106
- autoComplete="email"
105
+ placeholder="Enter your email address or mobile number"
106
+ autoComplete="username"
107
107
  />
108
108
  <span className={styles.inputIcon}>
109
109
  <User strokeWidth={2} size={18} />
@@ -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);