Skip to content

Commit 7e581b6

Browse files
seriouscatsoseriousseriouscatsoserious
committed
resize advanced wallet modal
1 parent 4e7fc15 commit 7e581b6

File tree

2 files changed

+124
-79
lines changed

2 files changed

+124
-79
lines changed

‎src/components/WelcomeModal.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -299,15 +299,11 @@ const WelcomeModal = ({ isOpen, onClose }) => {
299299
}
300300
}}
301301
placeholder={isHexMode
302-
? "Enter hex (16/32/64 chars) or use Generate Random for valid entropy"
303-
: "Enter text to be hashed into entropy"
302+
? "Enter hex or use Generate Random"
303+
: "Enter text for entropy"
304304
}
305305
className={styles.input}
306306
/>
307-
</div>
308-
309-
<div className={styles.buttonContainer}>
310-
{error && <div className={styles.error} style={{ margin: 0, textAlign: 'left', flex: 1 }}>{error}</div>}
311307
<button
312308
className={styles.randomButton}
313309
onClick={async () => {
@@ -330,6 +326,8 @@ const WelcomeModal = ({ isOpen, onClose }) => {
330326
</button>
331327
</div>
332328

329+
{error && <div className={styles.error} style={{ margin: 0, textAlign: 'left', flex: 1 }}>{error}</div>}
330+
333331
<div className={styles.previewSection}>
334332
{preview ? (
335333
<>

‎src/components/WelcomeModal.module.css

+120-73
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,58 @@
44
left: 0;
55
right: 0;
66
bottom: 0;
7-
background-color: rgba(0, 0, 0, 0.5);
8-
backdrop-filter: blur(15px);
9-
-webkit-backdrop-filter: blur(15px);
10-
display: flex;
11-
justify-content: center;
12-
align-items: center;
7+
background-color: var(--modal-bg);
138
z-index: 1000;
149
}
1510

1611
.modalContent {
17-
background-color: var(--modal-bg);
18-
padding: 32px;
1912
width: 100%;
20-
height: 100vh;
13+
height: 100%;
2114
color: var(--modal-text);
2215
overflow-y: auto;
2316
display: flex;
2417
flex-direction: column;
2518
align-items: center;
2619
justify-content: center;
2720
box-sizing: border-box;
21+
padding: 24px;
2822
}
2923

3024
.modalContent[data-mode="advanced"] {
3125
align-items: stretch;
32-
max-width: none;
26+
padding: 16px;
27+
justify-content: flex-start;
28+
}
29+
30+
.modalContent[data-mode="advanced"] h2 {
31+
margin: 0 0 4px;
32+
font-size: 24px;
33+
}
34+
35+
.modalContent[data-mode="advanced"] p {
36+
margin: 0 0 8px;
3337
}
3438

3539
.modalContent h2 {
36-
margin: 0 0 32px;
40+
margin: 0 0 24px;
3741
color: var(--modal-text);
38-
font-size: 32px;
42+
font-size: 28px;
3943
text-align: center;
4044
}
4145

4246
.pageHeader {
4347
display: flex;
4448
align-items: center;
45-
margin-bottom: 32px;
49+
margin-bottom: 24px;
4650
position: relative;
4751
width: 100%;
4852
max-width: 800px;
4953
}
5054

55+
.modalContent[data-mode="advanced"] .pageHeader {
56+
margin-bottom: 8px;
57+
}
58+
5159
.pageHeader h2 {
5260
flex: 1;
5361
text-align: center;
@@ -105,10 +113,17 @@
105113
.buttonContainer {
106114
display: flex;
107115
justify-content: center;
108-
margin-top: 32px;
116+
margin-top: 24px;
109117
width: 100%;
110118
}
111119

120+
.modalContent[data-mode="advanced"] .buttonContainer {
121+
margin-top: 0;
122+
display: flex;
123+
gap: 12px;
124+
align-items: center;
125+
}
126+
112127
.actionButton {
113128
min-width: 200px;
114129
padding: 16px 32px;
@@ -136,7 +151,7 @@
136151
}
137152

138153
.modalBody {
139-
margin-bottom: 3rem;
154+
margin-bottom: 2rem;
140155
color: var(--modal-text);
141156
text-align: center;
142157
max-width: 800px;
@@ -148,7 +163,6 @@
148163
line-height: 1.6;
149164
}
150165

151-
/* Generate button with shimmer effect */
152166
.generateButton {
153167
display: block;
154168
width: 300px;
@@ -213,26 +227,79 @@
213227
}
214228

215229
.inputGroup {
216-
margin-bottom: 24px;
230+
margin-bottom: 20px;
217231
max-width: 600px;
218232
width: 100%;
219233
margin-left: auto;
220234
margin-right: auto;
235+
display: flex;
236+
gap: 12px;
237+
align-items: flex-start;
238+
}
239+
240+
.modalContent[data-mode="advanced"] .inputGroup {
241+
margin-bottom: 8px;
242+
}
243+
244+
.modalContent[data-mode="advanced"] .input {
245+
flex: 1;
246+
margin: 0;
247+
}
248+
249+
.modalContent[data-mode="advanced"] .error {
250+
display: none;
251+
}
252+
253+
.modalContent[data-mode="advanced"] .buttonContainer .error {
254+
display: block;
255+
margin: 0;
256+
text-align: left;
257+
flex: 1;
258+
}
259+
260+
.randomButton {
261+
min-width: 140px;
262+
padding: 12px;
263+
background-color: var(--download-btn);
264+
color: white;
265+
border: none;
266+
border-radius: 4px;
267+
cursor: pointer;
268+
font-weight: 600;
269+
font-size: 0.95rem;
270+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
271+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
272+
sans-serif;
273+
transition: background-color 0.2s ease, opacity 0.2s ease;
274+
text-align: center;
275+
height: 42px;
276+
white-space: nowrap;
277+
margin: 0;
278+
}
279+
280+
.randomButton:hover:not(:disabled) {
281+
background-color: var(--download-btn-hover);
282+
}
283+
284+
.randomButton:disabled {
285+
opacity: 0.8;
286+
cursor: wait;
221287
}
222288

223289
.input {
224290
width: 100%;
225-
padding: 16px;
291+
padding: 12px;
226292
box-sizing: border-box;
227293
border: 1px solid var(--btn-bg);
228294
border-radius: 4px;
229295
background-color: var(--bg-color);
230296
color: var(--text-color);
231-
font-size: 1rem;
297+
font-size: 0.95rem;
232298
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
233299
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
234300
sans-serif;
235301
transition: all 0.2s;
302+
height: 42px;
236303
}
237304

238305
.input:focus {
@@ -244,8 +311,8 @@
244311
.modeToggle {
245312
display: flex;
246313
gap: 24px;
247-
margin-bottom: 24px;
248-
padding: 16px;
314+
margin-bottom: 12px;
315+
padding: 8px;
249316
background-color: rgba(128, 128, 128, 0.05);
250317
border-radius: 4px;
251318
justify-content: center;
@@ -261,7 +328,7 @@
261328
padding: 8px 16px;
262329
border-radius: 4px;
263330
transition: background-color 0.2s;
264-
font-size: 1rem;
331+
font-size: 0.95rem;
265332
}
266333

267334
.modeToggle label:hover {
@@ -270,75 +337,51 @@
270337

271338
.modeToggle input[type="radio"] {
272339
margin: 0;
273-
width: 18px;
274-
height: 18px;
275-
}
276-
277-
.randomButton {
278-
min-width: 180px;
279-
padding: 16px;
280-
background-color: var(--download-btn);
281-
color: white;
282-
border: none;
283-
border-radius: 4px;
284-
cursor: pointer;
285-
font-weight: 600;
286-
font-size: 1rem;
287-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
288-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
289-
sans-serif;
290-
transition: background-color 0.2s ease, opacity 0.2s ease;
291-
text-align: center;
292-
}
293-
294-
.randomButton:hover:not(:disabled) {
295-
background-color: var(--download-btn-hover);
296-
}
297-
298-
.randomButton:disabled {
299-
opacity: 0.8;
300-
cursor: wait;
340+
width: 16px;
341+
height: 16px;
301342
}
302343

303344
.previewSection {
304-
margin: 32px auto;
305-
padding: 24px;
345+
margin: 12px auto;
346+
padding: 16px;
306347
background-color: rgba(128, 128, 128, 0.05);
307348
border-radius: 8px;
308-
max-width: 1200px;
309349
width: 100%;
350+
box-sizing: border-box;
310351
}
311352

312353
.previewGrid {
313354
display: grid;
314-
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
315-
gap: 24px;
316-
margin-bottom: 32px;
355+
grid-template-columns: repeat(4, 1fr);
356+
gap: 10px;
357+
margin-bottom: 20px;
317358
width: 100%;
318359
}
319360

320361
.wordCell {
321-
padding: 12px;
362+
padding: 8px;
322363
background-color: rgba(128, 128, 128, 0.05);
323364
border-radius: 6px;
324365
}
325366

326367
.word {
327368
font-weight: 500;
328-
margin-bottom: 8px;
369+
margin-bottom: 4px;
329370
color: var(--text-color);
330-
font-size: 1.1rem;
371+
font-size: 0.9rem;
331372
}
332373

333374
.binary {
334375
font-family: monospace;
335-
font-size: 0.9rem;
376+
font-size: 0.65rem;
336377
color: rgba(128, 128, 128, 0.8);
378+
word-break: break-all;
379+
line-height: 1.1;
337380
}
338381

339382
.decimal {
340383
font-family: monospace;
341-
font-size: 0.9rem;
384+
font-size: 0.65rem;
342385
color: #0088cc;
343386
margin-top: 4px;
344387
}
@@ -348,42 +391,46 @@
348391
}
349392

350393
.technicalInfo {
351-
margin-top: 24px;
352-
padding-top: 24px;
394+
margin-top: 16px;
395+
padding-top: 16px;
353396
border-top: 1px solid rgba(128, 128, 128, 0.2);
397+
font-size: 0.9rem;
354398
}
355399

356400
.technicalInfo div {
357401
margin-bottom: 12px;
358402
display: flex;
359-
flex-direction: row;
360-
align-items: center;
361-
gap: 16px;
403+
flex-direction: column;
404+
gap: 8px;
362405
}
363406

364407
.technicalInfo strong {
365408
color: var(--text-color);
366-
font-size: 0.95rem;
367-
min-width: 120px;
409+
font-size: 0.9rem;
410+
min-width: 100px;
411+
white-space: nowrap;
368412
}
369413

370414
.technicalInfo code {
371415
font-family: monospace;
372-
font-size: 0.9rem;
373-
padding: 6px 12px;
416+
font-size: 0.85rem;
417+
padding: 6px 10px;
374418
background-color: rgba(128, 128, 128, 0.1);
375419
border-radius: 4px;
376420
word-break: break-all;
377-
flex: 1;
421+
width: 100%;
422+
box-sizing: border-box;
423+
overflow-x: auto;
424+
white-space: pre-wrap;
378425
}
379426

380427
.error {
381428
color: #dc3545;
382429
background-color: rgba(220, 53, 69, 0.1);
383430
padding: 12px 16px;
384431
border-radius: 4px;
385-
margin: 0 auto 24px;
386-
font-size: 1rem;
432+
margin: 0 auto 16px;
433+
font-size: 0.95rem;
387434
text-align: center;
388435
max-width: 600px;
389436
}

0 commit comments

Comments
 (0)