Skip to content

Commit dc92bea

Browse files
yashovardhanyashovardhan
committed
Update pane
1 parent d90cbc8 commit dc92bea

File tree

4 files changed

+154
-80
lines changed

4 files changed

+154
-80
lines changed

‎src/pages/quick-start/builder/choices.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ export const DELEGATION_TOOLKIT = 'DELEGATION_TOOLKIT'
77

88
// Product choices
99
export const PRODUCTS: DisplayChoice[] = [
10-
{ key: EMBEDDED_WALLETS, displayName: 'Embedded Wallets' },
1110
{ key: METAMASK_SDK, displayName: 'Metamask SDK' },
11+
{ key: EMBEDDED_WALLETS, displayName: 'Embedded Wallets' },
1212
{ key: DELEGATION_TOOLKIT, displayName: 'Delegation Toolkit' },
1313
]
1414

‎src/pages/quick-start/builder/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,9 +70,9 @@ const builder: IntegrationBuilder = {
7070
},
7171
framework: {
7272
displayName: 'Platform/ Framework',
73-
default: LANGS_EMBEDDED_WALLETS[0].key,
73+
default: LANGS_METAMASK_SDK[0].key,
7474
type: 'dropdown',
75-
choices: LANGS_EMBEDDED_WALLETS,
75+
choices: LANGS_METAMASK_SDK,
7676
},
7777
},
7878

‎src/pages/quick-start/index.tsx

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,40 @@ export default function IntegrationBuilderPage(props: any) {
311311
url="https://web3auth.io/docs/quick-start"
312312
/>
313313
<div className={styles.container}>
314+
{/* Top Control Pane */}
315+
<div className={styles.topControlPane}>
316+
<div className={styles.topControlContainer}>
317+
{/* Product Selection */}
318+
{Object.entries(builder.options).map(([key, option]) =>
319+
option.type === 'product_selection' ? optionRender(key, option) : null
320+
)}
321+
322+
{/* Dropdown and Actions */}
323+
<div className={styles.controlActions}>
324+
{Object.entries(builder.options).map(([key, option]) =>
325+
option.type === 'dropdown' ? optionRender(key, option) : null
326+
)}
327+
328+
<button
329+
className={styles.copyButton2}
330+
onClick={() => window.open(integration.sourceCodeLink, "_blank")}
331+
type="button"
332+
>
333+
Source Code
334+
</button>
335+
{integration.embedLink && (
336+
<button
337+
className={styles.previewButton2}
338+
onClick={() => togglePreviewModal(integration.embedLink)}
339+
type="button"
340+
>
341+
Preview
342+
</button>
343+
)}
344+
</div>
345+
</div>
346+
</div>
347+
314348
{showPreviewModal && (
315349
<div className={styles.previewModalContainer} onClick={() => togglePreviewModal()}>
316350
<div className={styles.previewModal} onClick={handleModalClick}>
@@ -365,40 +399,7 @@ export default function IntegrationBuilderPage(props: any) {
365399
</div>
366400
</div>
367401
)}
368-
<div className={styles.optionsPane}>
369-
<div className={styles.optionsContainer}>
370-
{/* Product Selection Row */}
371-
<div className={styles.productSelectionRow}>
372-
{Object.entries(builder.options).map(([key, option]) =>
373-
option.type === 'product_selection' ? optionRender(key, option) : null
374-
)}
375-
</div>
376402

377-
{/* Controls Row */}
378-
<div className={styles.controlsRow}>
379-
{Object.entries(builder.options).map(([key, option]) =>
380-
option.type === 'dropdown' ? optionRender(key, option) : null
381-
)}
382-
383-
<button
384-
className={styles.copyButton2}
385-
onClick={() => window.open(integration.sourceCodeLink, "_blank")}
386-
type="button"
387-
>
388-
Source Code
389-
</button>
390-
{integration.embedLink && (
391-
<button
392-
className={styles.previewButton2}
393-
onClick={() => togglePreviewModal(integration.embedLink)}
394-
type="button"
395-
>
396-
Preview
397-
</button>
398-
)}
399-
</div>
400-
</div>
401-
</div>
402403

403404
<div className={styles.cols} ref={ref}>
404405
<div className={styles.leftCol} onScroll={onScrollLeft}>

‎src/pages/quick-start/styles.module.css

Lines changed: 117 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,8 @@
3939
.previewModal {
4040
display: block;
4141
background: var(--ifm-background-surface-color);
42-
border: 1px solid var(--w3a-border-color);
43-
box-shadow: 0px 1px 2px var(--w3a-border-color);
42+
border: 1px solid var(--ifm-color-emphasis-200);
43+
box-shadow: 0px 1px 2px var(--ifm-color-emphasis-200);
4444
border-radius: 16px;
4545
padding: 24px;
4646
margin: 5%;
@@ -136,6 +136,33 @@
136136
flex-wrap: wrap;
137137
}
138138

139+
/* Top Control Pane */
140+
.topControlPane {
141+
width: 100%;
142+
background: var(--ifm-background-surface-color);
143+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
144+
padding: 8px 16px;
145+
top: 0;
146+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
147+
}
148+
149+
.topControlContainer {
150+
display: flex;
151+
flex-direction: row;
152+
justify-content: space-between;
153+
align-items: center;
154+
margin: 0;
155+
gap: 20px;
156+
}
157+
158+
.controlActions {
159+
display: flex;
160+
flex-direction: row;
161+
align-items: center;
162+
gap: 8px;
163+
flex-shrink: 0;
164+
}
165+
139166
.cols {
140167
width: 100%;
141168
display: block;
@@ -273,7 +300,7 @@ input:checked+.slider:before {
273300
}
274301

275302
.w3DropdownMenu li:hover {
276-
background-color: var(--w3a-color-product-selection-menu-background);
303+
background-color: var(--ifm-color-emphasis-100);
277304
}
278305

279306

@@ -305,35 +332,39 @@ input:checked+.slider:before {
305332
.cardContainer {
306333
display: flex;
307334
flex-direction: row;
308-
gap: 8px;
335+
gap: 6px;
336+
flex-wrap: wrap;
337+
min-width: 300px;
309338
}
310339

311340
.card,
312341
.selectedCard {
313-
padding: 14px 24px 14px 24px;
314-
/* white */
342+
padding: 8px 16px;
315343
background: var(--ifm-background-surface-color);
316-
/* gray/200 */
317-
border: 1px solid var(--w3a-border-color);
318-
/* shadow-sm */
319-
box-shadow: 0px 1px 2px var(--w3a-border-color);
320-
border-radius: 8px;
321-
width: fit-content;
344+
border: 1px solid var(--ifm-color-emphasis-200);
345+
border-radius: 6px;
346+
min-width: 90px;
322347
text-decoration: none;
323348
color: var(--ifm-color-content);
324349
cursor: pointer;
350+
transition: all 0.2s ease;
351+
}
352+
353+
.card:hover {
354+
border-color: var(--ifm-color-primary-light);
325355
}
326356

327357
.selectedCard {
328-
border: 1px solid var(--ifm-color-primary) !important;
358+
border: 1px solid var(--ifm-color-primary);
329359
}
330360

331361
.cardTitle {
332-
font-size: 14px;
333-
line-height: 21px;
362+
font-size: 13px;
363+
line-height: 18px;
334364
color: var(--ifm-color-content);
335365
font-weight: 500 !important;
336366
margin: 0;
367+
text-align: center;
337368
}
338369

339370
.list {
@@ -354,34 +385,35 @@ input:checked+.slider:before {
354385
}
355386

356387
.list select {
357-
padding: 8px 12px 8px 12px;
388+
padding: 8px 16px;
358389
font-weight: 500 !important;
359390
font-size: 14px;
360-
line-height: 21px;
391+
line-height: 20px;
361392
color: var(--ifm-color-content);
362-
border-radius: 8px;
393+
border-radius: 6px;
363394
outline: none;
364395
cursor: pointer;
365-
width: fit-content;
366-
/* white */
396+
min-width: 140px;
367397
background: var(--ifm-background-surface-color);
368-
/* gray/200 */
369-
border: 1px solid var(--w3a-border-color);
370-
/* shadow-sm */
371-
box-shadow: 0px 1px 2px var(--w3a-border-color);
398+
border: 1px solid var(--ifm-color-emphasis-200);
372399
-webkit-appearance: none;
373400
-moz-appearance: none;
374401
background-image: url("data:image/svg+xml;utf8,<svg width='10' height='17' viewBox='0 0 10 17' fill='gray' xmlns='http://www.w3.org/2000/svg'><path d='M0.937273 11.1465C1.04471 11.0528 1.19041 11.0001 1.34233 11.0001C1.49424 11.0001 1.63994 11.0528 1.74738 11.1465L4.58331 13.6215L7.41925 11.1465C7.52731 11.0554 7.67203 11.005 7.82224 11.0062C7.97246 11.0073 8.11615 11.0599 8.22238 11.1526C8.3286 11.2453 8.38885 11.3707 8.39016 11.5018C8.39146 11.6329 8.33372 11.7592 8.22936 11.8535L4.98837 14.682C4.88093 14.7758 4.73523 14.8284 4.58331 14.8284C4.4314 14.8284 4.2857 14.7758 4.17826 14.682L0.937273 11.8535C0.829868 11.7598 0.769531 11.6326 0.769531 11.5C0.769531 11.3674 0.829868 11.2403 0.937273 11.1465Z' fill='gray'/><path d='M0.937273 5.85348C1.04471 5.94722 1.19041 5.99988 1.34233 5.99988C1.49424 5.99988 1.63994 5.94722 1.74738 5.85348L4.58331 3.37848L7.41925 5.85348C7.52731 5.94456 7.67203 5.99496 7.82224 5.99382C7.97246 5.99268 8.11615 5.9401 8.22238 5.84739C8.3286 5.75469 8.38885 5.62928 8.39016 5.49819C8.39146 5.36709 8.33372 5.24079 8.22936 5.14648L4.98837 2.31798C4.88093 2.22425 4.73523 2.17159 4.58331 2.17159C4.4314 2.17159 4.2857 2.22425 4.17826 2.31798L0.937273 5.14648C0.829868 5.24025 0.769531 5.3674 0.769531 5.49998C0.769531 5.63257 0.829868 5.75972 0.937273 5.85348Z' fill='gray'/></svg>");
375402
background-repeat: no-repeat;
376-
background-position: center right 24px;
403+
background-position: center right 12px;
404+
transition: all 0.2s ease;
405+
}
406+
407+
.list select:hover {
408+
border-color: var(--ifm-color-primary-light);
377409
}
378410

379411
.list select::-ms-expand {
380412
display: none;
381413
}
382414

383415
.list :disabled {
384-
color: var(--w3a-color-icon-gray);
416+
color: var(--ifm-color-emphasis-600);
385417
}
386418

387419
.copyButton,
@@ -392,26 +424,42 @@ input:checked+.slider:before {
392424
flex-direction: row;
393425
align-items: center;
394426
justify-content: center;
395-
gap: 8px;
396-
padding: 8px 12px 8px 12px;
397-
border-radius: 8px;
427+
gap: 6px;
428+
padding: 8px 16px;
429+
border-radius: 6px;
398430
background: var(--ifm-background-surface-color);
399-
border: 1px solid var(--w3a-border-color);
400-
box-shadow: 0px 1px 2px var(--w3a-border-color);
431+
border: 1px solid var(--ifm-color-emphasis-200);
401432
cursor: pointer;
402433
font-size: 14px;
403-
line-height: 21px;
404-
font-weight: 500 !important;
434+
line-height: 20px;
435+
font-weight: 600 !important;
436+
min-width: 100px;
437+
transition: all 0.2s ease;
438+
text-decoration: none;
439+
color: var(--ifm-color-content);
440+
}
441+
442+
.copyButton:hover,
443+
.copyButton2:hover {
444+
border-color: var(--ifm-color-primary-light);
445+
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
446+
transform: translateY(-1px);
405447
}
406448

407449
.previewButton,
408450
.previewButton2 {
409-
background: var(--ifm-color-primary-light);
410-
border: 1px solid var(--ifm-color-primary-light);
411-
box-shadow: 0px 1px 2px var(--ifm-color-primary-light);
412-
color: var(--ifm-color-primary-darkest);
413-
padding: 8px 12px 7px 12px;
451+
background: var(--ifm-color-primary);
452+
border: 1px solid var(--ifm-color-primary);
453+
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
454+
color: var(--ifm-background-surface-color);
455+
}
414456

457+
.previewButton:hover,
458+
.previewButton2:hover {
459+
background: var(--ifm-color-primary-light);
460+
border-color: var(--ifm-color-primary-light);
461+
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
462+
transform: translateY(-1px);
415463
}
416464

417465
.hideButton {
@@ -444,19 +492,44 @@ input:checked+.slider:before {
444492
border: none;
445493
}
446494

447-
@media (max-width: 959px) {
495+
@media (max-width: 768px) {
496+
.topControlPane {
497+
padding: 6px 12px;
498+
}
499+
500+
.topControlContainer {
501+
flex-direction: column;
502+
align-items: stretch;
503+
gap: 12px;
504+
}
505+
506+
.cardContainer {
507+
justify-content: center;
508+
min-width: auto;
509+
}
510+
511+
.controlActions {
512+
justify-content: center;
513+
flex-wrap: wrap;
514+
gap: 8px;
515+
}
516+
517+
.copyButton2,
518+
.previewButton2 {
519+
min-width: 80px;
520+
padding: 8px 12px;
521+
font-size: 13px;
522+
}
448523

449-
.optionsPane {
450-
right: 50%;
451-
transform: translateX(50%);
452-
padding: 12px;
524+
.list select {
525+
min-width: 120px;
453526
}
454527
}
455528

456529
@media (min-width: 960px) {
457530
.cols {
458531
display: flex;
459-
height: calc(100vh - 86px);
532+
height: calc(100vh - 86px - 45px);
460533
}
461534

462535
.leftCol {

0 commit comments

Comments
 (0)