@visns-studio/visns-components 5.6.6 → 5.6.8
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/README.md +86 -1
- package/package.json +1 -1
- package/src/components/crm/DataGrid.jsx +114 -14
- package/src/components/crm/Field.jsx +1 -0
- package/src/components/crm/MultiSelect.jsx +2 -1
- package/src/components/crm/auth/Login.jsx +51 -39
- package/src/components/crm/auth/Reset.jsx +11 -5
- package/src/components/crm/auth/Verify.jsx +11 -5
- package/src/components/crm/auth/styles/Login.module.scss +110 -39
- package/src/components/crm/auth/styles/Reset.module.scss +51 -46
- package/src/components/crm/auth/styles/Verify.module.scss +51 -46
- package/src/components/crm/generic/GenericDetail.jsx +35 -16
- package/src/components/crm/generic/styles/GenericDetail.module.scss +102 -34
- package/src/components/crm/generic/styles/GenericMain.module.scss +2 -2
- package/src/components/crm/styles/DataGrid.module.scss +48 -1
- package/src/components/crm/styles/Navigation.module.scss +9 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
-
margin-bottom:
|
|
5
|
+
margin-bottom: 1rem;
|
|
6
6
|
|
|
7
7
|
.fi__label {
|
|
8
8
|
position: relative;
|
|
@@ -13,11 +13,13 @@
|
|
|
13
13
|
.fi__span {
|
|
14
14
|
position: absolute;
|
|
15
15
|
transition: all 200ms;
|
|
16
|
-
opacity:
|
|
16
|
+
opacity: 0.7;
|
|
17
17
|
left: 0;
|
|
18
18
|
transform-origin: top left;
|
|
19
19
|
cursor: text;
|
|
20
20
|
padding: 0 1rem;
|
|
21
|
+
font-size: 0.9rem;
|
|
22
|
+
color: #6b7280;
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
.fi__div {
|
|
@@ -25,8 +27,8 @@
|
|
|
25
27
|
opacity: 0.8;
|
|
26
28
|
left: 0;
|
|
27
29
|
padding: 19px 13px;
|
|
28
|
-
border-radius:
|
|
29
|
-
border: 1px solid
|
|
30
|
+
border-radius: 0.5rem;
|
|
31
|
+
border: 1px solid #e5e7eb;
|
|
30
32
|
box-shadow: none;
|
|
31
33
|
}
|
|
32
34
|
|
|
@@ -58,10 +60,10 @@
|
|
|
58
60
|
.loginlogo {
|
|
59
61
|
display: block;
|
|
60
62
|
width: 100%;
|
|
61
|
-
max-width:
|
|
63
|
+
max-width: 150px;
|
|
62
64
|
height: auto;
|
|
63
65
|
margin: 0 auto;
|
|
64
|
-
padding-bottom:
|
|
66
|
+
padding-bottom: 1.5rem;
|
|
65
67
|
}
|
|
66
68
|
|
|
67
69
|
.logincontainer {
|
|
@@ -70,15 +72,20 @@
|
|
|
70
72
|
display: grid;
|
|
71
73
|
place-items: center;
|
|
72
74
|
padding: 1rem;
|
|
75
|
+
background-color: #f9fafb;
|
|
73
76
|
}
|
|
74
77
|
|
|
75
78
|
.login {
|
|
76
|
-
width:
|
|
77
|
-
padding:
|
|
79
|
+
width: 28rem;
|
|
80
|
+
padding: 2rem;
|
|
78
81
|
margin: 0;
|
|
79
82
|
display: grid;
|
|
80
83
|
grid-template-columns: 1fr;
|
|
81
|
-
gap:
|
|
84
|
+
gap: 1rem;
|
|
85
|
+
background-color: white;
|
|
86
|
+
border-radius: 0.75rem;
|
|
87
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
88
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
82
89
|
|
|
83
90
|
> .formItem {
|
|
84
91
|
padding: 0;
|
|
@@ -87,9 +94,10 @@
|
|
|
87
94
|
position: absolute;
|
|
88
95
|
width: 18px;
|
|
89
96
|
height: 18px;
|
|
90
|
-
right:
|
|
91
|
-
top:
|
|
92
|
-
opacity: 0.
|
|
97
|
+
right: 14px;
|
|
98
|
+
top: 14px;
|
|
99
|
+
opacity: 0.4;
|
|
100
|
+
color: #6b7280;
|
|
93
101
|
}
|
|
94
102
|
}
|
|
95
103
|
|
|
@@ -110,24 +118,29 @@
|
|
|
110
118
|
.forgotten span {
|
|
111
119
|
display: block;
|
|
112
120
|
text-align: center;
|
|
113
|
-
color:
|
|
121
|
+
color: #6b7280;
|
|
114
122
|
padding: 1rem 0;
|
|
123
|
+
font-size: 0.875rem;
|
|
115
124
|
|
|
116
125
|
a {
|
|
117
|
-
color: var(--
|
|
126
|
+
color: var(--primary-color, #4f46e5);
|
|
118
127
|
text-decoration: none;
|
|
128
|
+
font-weight: 500;
|
|
129
|
+
|
|
130
|
+
&:hover {
|
|
131
|
+
text-decoration: underline;
|
|
132
|
+
}
|
|
119
133
|
}
|
|
120
134
|
}
|
|
121
135
|
|
|
122
136
|
.rememberMeContainer {
|
|
123
137
|
display: flex;
|
|
124
138
|
align-items: center;
|
|
125
|
-
justify-content:
|
|
139
|
+
justify-content: space-between;
|
|
126
140
|
width: 100%;
|
|
127
|
-
padding: 0.
|
|
128
|
-
margin-bottom: 0.75rem;
|
|
141
|
+
padding: 0 0.25rem;
|
|
129
142
|
box-sizing: border-box;
|
|
130
|
-
margin-top: -0.
|
|
143
|
+
margin-top: -0.5rem;
|
|
131
144
|
}
|
|
132
145
|
|
|
133
146
|
.rememberMeCheckboxWrapper {
|
|
@@ -140,18 +153,19 @@
|
|
|
140
153
|
.rememberMeLabel {
|
|
141
154
|
cursor: pointer;
|
|
142
155
|
user-select: none;
|
|
143
|
-
color:
|
|
144
|
-
font-size: 0.
|
|
156
|
+
color: #6b7280;
|
|
157
|
+
font-size: 0.875rem;
|
|
145
158
|
white-space: nowrap;
|
|
146
159
|
}
|
|
147
160
|
|
|
148
161
|
.rememberMeCheckbox {
|
|
149
|
-
/* Use the browser's default checkbox but with some styling */
|
|
150
162
|
width: 16px;
|
|
151
163
|
height: 16px;
|
|
152
164
|
cursor: pointer;
|
|
153
165
|
position: relative;
|
|
154
|
-
accent-color: var(--primary-color);
|
|
166
|
+
accent-color: var(--primary-color, #4f46e5);
|
|
167
|
+
border-radius: 0.25rem;
|
|
168
|
+
margin-right: 0.5rem;
|
|
155
169
|
}
|
|
156
170
|
|
|
157
171
|
.lcontainer {
|
|
@@ -159,11 +173,12 @@
|
|
|
159
173
|
display: flex;
|
|
160
174
|
align-items: center;
|
|
161
175
|
justify-content: center;
|
|
176
|
+
background-color: #f9fafb;
|
|
162
177
|
}
|
|
163
178
|
|
|
164
179
|
.lwrap {
|
|
165
180
|
display: grid;
|
|
166
|
-
grid-template-columns:
|
|
181
|
+
grid-template-columns: 1fr;
|
|
167
182
|
}
|
|
168
183
|
|
|
169
184
|
.aside {
|
|
@@ -178,33 +193,89 @@
|
|
|
178
193
|
width: max-content;
|
|
179
194
|
display: inline-block;
|
|
180
195
|
position: relative;
|
|
181
|
-
padding: 0.
|
|
196
|
+
padding: 0.75rem 1rem;
|
|
182
197
|
cursor: pointer;
|
|
183
|
-
font-size:
|
|
184
|
-
|
|
198
|
+
font-size: 0.875rem;
|
|
199
|
+
font-weight: 500;
|
|
200
|
+
color: white;
|
|
185
201
|
text-decoration: none;
|
|
186
202
|
overflow: hidden;
|
|
187
|
-
background: var(--primary-color);
|
|
188
|
-
border: 1px solid
|
|
189
|
-
border-radius:
|
|
203
|
+
background: var(--primary-color, #4f46e5);
|
|
204
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
205
|
+
border-radius: 0.5rem;
|
|
190
206
|
outline: none;
|
|
191
|
-
transition: all 0.2s
|
|
207
|
+
transition: all 0.2s ease;
|
|
208
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
192
209
|
|
|
193
210
|
&:hover {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
211
|
+
background: #4338ca;
|
|
212
|
+
border-color: #4338ca;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&:focus {
|
|
216
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
197
217
|
}
|
|
198
218
|
}
|
|
199
219
|
|
|
200
220
|
input:not(:placeholder-shown) + .fi__span,
|
|
201
221
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
202
222
|
select:not(:placeholder-shown) + .fi__span {
|
|
203
|
-
transform: translateY(-135%) translateX(10px) scale(0.
|
|
223
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
204
224
|
opacity: 1;
|
|
205
225
|
padding: 0;
|
|
206
|
-
background:
|
|
207
|
-
font-weight:
|
|
208
|
-
transition: all 0.
|
|
209
|
-
color:
|
|
226
|
+
background: white;
|
|
227
|
+
font-weight: 500;
|
|
228
|
+
transition: all 0.3s ease;
|
|
229
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Add divider styling for the OR section */
|
|
233
|
+
.divider {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
text-align: center;
|
|
237
|
+
margin: 1rem 0;
|
|
238
|
+
color: #9ca3af;
|
|
239
|
+
font-size: 0.875rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.divider::before,
|
|
243
|
+
.divider::after {
|
|
244
|
+
content: '';
|
|
245
|
+
flex: 1;
|
|
246
|
+
border-bottom: 1px solid #e5e7eb;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.divider::before {
|
|
250
|
+
margin-right: 1rem;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.divider::after {
|
|
254
|
+
margin-left: 1rem;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
/* SSO button styling */
|
|
258
|
+
.ssoButton {
|
|
259
|
+
display: flex;
|
|
260
|
+
align-items: center;
|
|
261
|
+
justify-content: center;
|
|
262
|
+
width: 100%;
|
|
263
|
+
padding: 0.75rem 1rem;
|
|
264
|
+
background-color: white;
|
|
265
|
+
border: 1px solid #e5e7eb;
|
|
266
|
+
border-radius: 0.5rem;
|
|
267
|
+
font-size: 0.875rem;
|
|
268
|
+
font-weight: 500;
|
|
269
|
+
color: #374151;
|
|
270
|
+
transition: all 0.2s ease;
|
|
271
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
272
|
+
|
|
273
|
+
&:hover {
|
|
274
|
+
background-color: #f9fafb;
|
|
275
|
+
border-color: #d1d5db;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
img {
|
|
279
|
+
margin-right: 0.5rem;
|
|
280
|
+
}
|
|
210
281
|
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
margin-bottom: 1rem;
|
|
5
6
|
|
|
6
7
|
h1 {
|
|
7
8
|
text-align: center;
|
|
8
|
-
font-size: 1.
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: #111827;
|
|
12
|
+
margin-bottom: 1.5rem;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.fi__label {
|
|
@@ -17,11 +21,13 @@
|
|
|
17
21
|
.fi__span {
|
|
18
22
|
position: absolute;
|
|
19
23
|
transition: all 200ms;
|
|
20
|
-
opacity: 0.
|
|
24
|
+
opacity: 0.7;
|
|
21
25
|
left: 0;
|
|
22
26
|
transform-origin: top left;
|
|
23
27
|
cursor: text;
|
|
24
28
|
padding: 0 1rem;
|
|
29
|
+
font-size: 0.9rem;
|
|
30
|
+
color: #6b7280;
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.fi__div {
|
|
@@ -29,8 +35,8 @@
|
|
|
29
35
|
opacity: 0.8;
|
|
30
36
|
left: 0;
|
|
31
37
|
padding: 19px 13px;
|
|
32
|
-
border-radius:
|
|
33
|
-
border: 1px solid
|
|
38
|
+
border-radius: 0.5rem;
|
|
39
|
+
border: 1px solid #e5e7eb;
|
|
34
40
|
box-shadow: none;
|
|
35
41
|
}
|
|
36
42
|
|
|
@@ -64,29 +70,10 @@
|
|
|
64
70
|
.loginlogo {
|
|
65
71
|
display: block;
|
|
66
72
|
width: 100%;
|
|
67
|
-
max-width:
|
|
73
|
+
max-width: 150px;
|
|
68
74
|
height: auto;
|
|
69
75
|
margin: 0 auto;
|
|
70
|
-
padding-bottom:
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.logincontainer {
|
|
74
|
-
min-height: 100vh;
|
|
75
|
-
flex-grow: 1;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-content: center;
|
|
80
|
-
flex-wrap: wrap;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.loginlogo {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 100%;
|
|
86
|
-
max-width: 200px;
|
|
87
|
-
height: auto;
|
|
88
|
-
margin: 0 auto;
|
|
89
|
-
padding-bottom: 1rem;
|
|
76
|
+
padding-bottom: 1.5rem;
|
|
90
77
|
}
|
|
91
78
|
|
|
92
79
|
.logincontainer {
|
|
@@ -95,15 +82,20 @@
|
|
|
95
82
|
display: grid;
|
|
96
83
|
place-items: center;
|
|
97
84
|
padding: 1rem;
|
|
85
|
+
background-color: #f9fafb;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
88
|
.login {
|
|
101
|
-
width:
|
|
102
|
-
padding:
|
|
89
|
+
width: 28rem;
|
|
90
|
+
padding: 2rem;
|
|
103
91
|
margin: 0;
|
|
104
92
|
display: grid;
|
|
105
93
|
grid-template-columns: 1fr;
|
|
106
|
-
gap:
|
|
94
|
+
gap: 1rem;
|
|
95
|
+
background-color: white;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
98
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
107
99
|
|
|
108
100
|
> .formItem {
|
|
109
101
|
padding: 0;
|
|
@@ -112,9 +104,10 @@
|
|
|
112
104
|
position: absolute;
|
|
113
105
|
width: 18px;
|
|
114
106
|
height: 18px;
|
|
115
|
-
right:
|
|
116
|
-
top:
|
|
117
|
-
opacity: 0.
|
|
107
|
+
right: 14px;
|
|
108
|
+
top: 14px;
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
color: #6b7280;
|
|
118
111
|
}
|
|
119
112
|
}
|
|
120
113
|
|
|
@@ -149,11 +142,12 @@
|
|
|
149
142
|
display: flex;
|
|
150
143
|
align-items: center;
|
|
151
144
|
justify-content: center;
|
|
145
|
+
background-color: #f9fafb;
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.lwrap {
|
|
155
149
|
display: grid;
|
|
156
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1fr;
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.aside {
|
|
@@ -168,27 +162,38 @@
|
|
|
168
162
|
width: max-content;
|
|
169
163
|
display: inline-block;
|
|
170
164
|
position: relative;
|
|
171
|
-
padding: 0.
|
|
165
|
+
padding: 0.75rem 1rem;
|
|
172
166
|
cursor: pointer;
|
|
173
|
-
font-size:
|
|
174
|
-
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
color: white;
|
|
175
170
|
text-decoration: none;
|
|
176
171
|
overflow: hidden;
|
|
177
|
-
background: var(--primary-color);
|
|
178
|
-
border: 1px solid
|
|
179
|
-
border-radius:
|
|
172
|
+
background: var(--primary-color, #4f46e5);
|
|
173
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
174
|
+
border-radius: 0.5rem;
|
|
180
175
|
outline: none;
|
|
181
|
-
transition: all 0.2s
|
|
182
|
-
|
|
176
|
+
transition: all 0.2s ease;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #4338ca;
|
|
181
|
+
border-color: #4338ca;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
186
|
+
}
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
input:not(:placeholder-shown) + .fi__span,
|
|
186
190
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
187
191
|
select:not(:placeholder-shown) + .fi__span {
|
|
188
|
-
transform: translateY(-
|
|
192
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
189
193
|
opacity: 1;
|
|
190
194
|
padding: 0;
|
|
191
|
-
background:
|
|
192
|
-
font-weight:
|
|
193
|
-
transition: all 0.
|
|
194
|
-
|
|
195
|
+
background: white;
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
transition: all 0.3s ease;
|
|
198
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
199
|
+
}
|
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
.formItem {
|
|
2
|
-
width:
|
|
2
|
+
width: 100%;
|
|
3
3
|
position: relative;
|
|
4
4
|
box-sizing: border-box;
|
|
5
|
+
margin-bottom: 1rem;
|
|
5
6
|
|
|
6
7
|
h1 {
|
|
7
8
|
text-align: center;
|
|
8
|
-
font-size: 1.
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
font-weight: 600;
|
|
11
|
+
color: #111827;
|
|
12
|
+
margin-bottom: 1.5rem;
|
|
9
13
|
}
|
|
10
14
|
|
|
11
15
|
.fi__label {
|
|
@@ -17,11 +21,13 @@
|
|
|
17
21
|
.fi__span {
|
|
18
22
|
position: absolute;
|
|
19
23
|
transition: all 200ms;
|
|
20
|
-
opacity: 0.
|
|
24
|
+
opacity: 0.7;
|
|
21
25
|
left: 0;
|
|
22
26
|
transform-origin: top left;
|
|
23
27
|
cursor: text;
|
|
24
28
|
padding: 0 1rem;
|
|
29
|
+
font-size: 0.9rem;
|
|
30
|
+
color: #6b7280;
|
|
25
31
|
}
|
|
26
32
|
|
|
27
33
|
.fi__div {
|
|
@@ -29,8 +35,8 @@
|
|
|
29
35
|
opacity: 0.8;
|
|
30
36
|
left: 0;
|
|
31
37
|
padding: 19px 13px;
|
|
32
|
-
border-radius:
|
|
33
|
-
border: 1px solid
|
|
38
|
+
border-radius: 0.5rem;
|
|
39
|
+
border: 1px solid #e5e7eb;
|
|
34
40
|
box-shadow: none;
|
|
35
41
|
}
|
|
36
42
|
|
|
@@ -64,29 +70,10 @@
|
|
|
64
70
|
.loginlogo {
|
|
65
71
|
display: block;
|
|
66
72
|
width: 100%;
|
|
67
|
-
max-width:
|
|
73
|
+
max-width: 150px;
|
|
68
74
|
height: auto;
|
|
69
75
|
margin: 0 auto;
|
|
70
|
-
padding-bottom:
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.logincontainer {
|
|
74
|
-
min-height: 100vh;
|
|
75
|
-
flex-grow: 1;
|
|
76
|
-
display: flex;
|
|
77
|
-
align-items: center;
|
|
78
|
-
justify-content: center;
|
|
79
|
-
align-content: center;
|
|
80
|
-
flex-wrap: wrap;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.loginlogo {
|
|
84
|
-
display: block;
|
|
85
|
-
width: 100%;
|
|
86
|
-
max-width: 200px;
|
|
87
|
-
height: auto;
|
|
88
|
-
margin: 0 auto;
|
|
89
|
-
padding-bottom: 1rem;
|
|
76
|
+
padding-bottom: 1.5rem;
|
|
90
77
|
}
|
|
91
78
|
|
|
92
79
|
.logincontainer {
|
|
@@ -95,15 +82,20 @@
|
|
|
95
82
|
display: grid;
|
|
96
83
|
place-items: center;
|
|
97
84
|
padding: 1rem;
|
|
85
|
+
background-color: #f9fafb;
|
|
98
86
|
}
|
|
99
87
|
|
|
100
88
|
.login {
|
|
101
|
-
width:
|
|
102
|
-
padding:
|
|
89
|
+
width: 28rem;
|
|
90
|
+
padding: 2rem;
|
|
103
91
|
margin: 0;
|
|
104
92
|
display: grid;
|
|
105
93
|
grid-template-columns: 1fr;
|
|
106
|
-
gap:
|
|
94
|
+
gap: 1rem;
|
|
95
|
+
background-color: white;
|
|
96
|
+
border-radius: 0.75rem;
|
|
97
|
+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
|
|
98
|
+
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
107
99
|
|
|
108
100
|
> .formItem {
|
|
109
101
|
padding: 0;
|
|
@@ -112,9 +104,10 @@
|
|
|
112
104
|
position: absolute;
|
|
113
105
|
width: 18px;
|
|
114
106
|
height: 18px;
|
|
115
|
-
right:
|
|
116
|
-
top:
|
|
117
|
-
opacity: 0.
|
|
107
|
+
right: 14px;
|
|
108
|
+
top: 14px;
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
color: #6b7280;
|
|
118
111
|
}
|
|
119
112
|
}
|
|
120
113
|
|
|
@@ -149,11 +142,12 @@
|
|
|
149
142
|
display: flex;
|
|
150
143
|
align-items: center;
|
|
151
144
|
justify-content: center;
|
|
145
|
+
background-color: #f9fafb;
|
|
152
146
|
}
|
|
153
147
|
|
|
154
148
|
.lwrap {
|
|
155
149
|
display: grid;
|
|
156
|
-
grid-template-columns:
|
|
150
|
+
grid-template-columns: 1fr;
|
|
157
151
|
}
|
|
158
152
|
|
|
159
153
|
.aside {
|
|
@@ -168,27 +162,38 @@
|
|
|
168
162
|
width: max-content;
|
|
169
163
|
display: inline-block;
|
|
170
164
|
position: relative;
|
|
171
|
-
padding: 0.
|
|
165
|
+
padding: 0.75rem 1rem;
|
|
172
166
|
cursor: pointer;
|
|
173
|
-
font-size:
|
|
174
|
-
|
|
167
|
+
font-size: 0.875rem;
|
|
168
|
+
font-weight: 500;
|
|
169
|
+
color: white;
|
|
175
170
|
text-decoration: none;
|
|
176
171
|
overflow: hidden;
|
|
177
|
-
background: var(--primary-color);
|
|
178
|
-
border: 1px solid
|
|
179
|
-
border-radius:
|
|
172
|
+
background: var(--primary-color, #4f46e5);
|
|
173
|
+
border: 1px solid var(--primary-color, #4f46e5);
|
|
174
|
+
border-radius: 0.5rem;
|
|
180
175
|
outline: none;
|
|
181
|
-
transition: all 0.2s
|
|
182
|
-
|
|
176
|
+
transition: all 0.2s ease;
|
|
177
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
178
|
+
|
|
179
|
+
&:hover {
|
|
180
|
+
background: #4338ca;
|
|
181
|
+
border-color: #4338ca;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
&:focus {
|
|
185
|
+
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.25);
|
|
186
|
+
}
|
|
183
187
|
}
|
|
184
188
|
|
|
185
189
|
input:not(:placeholder-shown) + .fi__span,
|
|
186
190
|
textarea:not(:placeholder-shown) + .fi__span,
|
|
187
191
|
select:not(:placeholder-shown) + .fi__span {
|
|
188
|
-
transform: translateY(-
|
|
192
|
+
transform: translateY(-135%) translateX(10px) scale(0.85);
|
|
189
193
|
opacity: 1;
|
|
190
194
|
padding: 0;
|
|
191
|
-
background:
|
|
192
|
-
font-weight:
|
|
193
|
-
transition: all 0.
|
|
194
|
-
|
|
195
|
+
background: white;
|
|
196
|
+
font-weight: 500;
|
|
197
|
+
transition: all 0.3s ease;
|
|
198
|
+
color: var(--primary-color, #4f46e5) !important;
|
|
199
|
+
}
|
|
@@ -1565,7 +1565,6 @@ function GenericDetail({
|
|
|
1565
1565
|
src={
|
|
1566
1566
|
imageSource
|
|
1567
1567
|
}
|
|
1568
|
-
width="300"
|
|
1569
1568
|
alt={
|
|
1570
1569
|
a.file_name
|
|
1571
1570
|
}
|
|
@@ -1590,6 +1589,17 @@ function GenericDetail({
|
|
|
1590
1589
|
styles.delete
|
|
1591
1590
|
}
|
|
1592
1591
|
/>
|
|
1592
|
+
{a.file_name && (
|
|
1593
|
+
<div
|
|
1594
|
+
className={
|
|
1595
|
+
styles.filename
|
|
1596
|
+
}
|
|
1597
|
+
>
|
|
1598
|
+
{
|
|
1599
|
+
a.file_name
|
|
1600
|
+
}
|
|
1601
|
+
</div>
|
|
1602
|
+
)}
|
|
1593
1603
|
</div>
|
|
1594
1604
|
</li>
|
|
1595
1605
|
)
|
|
@@ -1605,21 +1615,29 @@ function GenericDetail({
|
|
|
1605
1615
|
}
|
|
1606
1616
|
>
|
|
1607
1617
|
{files.map((a, b) => (
|
|
1608
|
-
<li
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1614
|
-
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
|
|
1621
|
-
|
|
1622
|
-
|
|
1618
|
+
<li key={'tf-' + b}>
|
|
1619
|
+
<div
|
|
1620
|
+
className="file-info"
|
|
1621
|
+
onClick={() => {
|
|
1622
|
+
downloadFile(
|
|
1623
|
+
a
|
|
1624
|
+
);
|
|
1625
|
+
}}
|
|
1626
|
+
>
|
|
1627
|
+
<File
|
|
1628
|
+
strokeWidth={
|
|
1629
|
+
2
|
|
1630
|
+
}
|
|
1631
|
+
size={
|
|
1632
|
+
20
|
|
1633
|
+
}
|
|
1634
|
+
/>
|
|
1635
|
+
<div className="filename">
|
|
1636
|
+
{
|
|
1637
|
+
a.file_name
|
|
1638
|
+
}
|
|
1639
|
+
</div>
|
|
1640
|
+
</div>
|
|
1623
1641
|
<button
|
|
1624
1642
|
onClick={(
|
|
1625
1643
|
event
|
|
@@ -1630,6 +1648,7 @@ function GenericDetail({
|
|
|
1630
1648
|
a.file_name
|
|
1631
1649
|
);
|
|
1632
1650
|
}}
|
|
1651
|
+
title="Delete file"
|
|
1633
1652
|
>
|
|
1634
1653
|
<TrashCan
|
|
1635
1654
|
strokeWidth={
|