Skip to content

Commit 812e544

Browse files
Adamj1232Adamj1232
authored
[common-v2.0.6, core-v2.2.4, magic-v2.0.2, react-v2.1.4] : Enhancement - Modal positioning variables and background color variable for main scroll container (#939)
* Add modal positioning variables to main modal, account select and magic login modal * Update package versions * Update styles and fallback variables along with documentation * Refine naming convention * Fix naming of coinbase package name in walletlink README * Add variable for customizing the background color of the main scroll container * change new variable from background-colo to background for more flexibility * Update variables in AccountSelect to have global onboard variable fallback * Update fall back styles on child components * Update readmes * Merge in v2-web3-onboard and update versions * Prettier-ify
1 parent 6df3a20 commit 812e544

File tree

16 files changed

+432
-113
lines changed

16 files changed

+432
-113
lines changed

‎packages/common/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/common",
3-
"version": "2.0.5",
3+
"version": "2.0.6",
44
"scripts": {
55
"build": "rollup -c",
66
"dev": "rollup -c -w",

‎packages/common/src/account-select.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,11 @@ const mountAccountSelect = (
8989
--margin-5: 0.5rem;
9090
9191
/* MODAL POSITION */
92-
--top-1: 1rem;
93-
--right-1: 1rem;
92+
--account-select-modal-z-index: 20;
93+
--account-select-modal-top: unset;
94+
--account-select-modal-right: unset;
95+
--account-select-modal-bottom: unset;
96+
--account-select-modal-left: unset;
9497
9598
/* SHADOWS */
9699
--shadow-1: 0px 4px 12px rgba(0, 0, 0, 0.1);

‎packages/common/src/elements/AddressTable.svelte‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
position: sticky;
2525
inset-block-start: 0; /* "top" */
2626
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
27-
background-color: var(--account-select-white, var(--white));
27+
background: var(--account-select-white, var(--onboard-white, var(--white)));
2828
}
2929
3030
th,
@@ -40,10 +40,13 @@
4040
);
4141
font-style: normal;
4242
font-weight: normal;
43-
font-size: var(--account-select-font-size-5, var(--font-size-5));
43+
font-size: var(
44+
--account-select-font-size-5,
45+
var(--onboard-font-size-5, var(--font-size-5))
46+
);
4447
line-height: var(
4548
--account-select-font-line-height-1,
46-
var(--font-line-height-1)
49+
var(--onboard-font-line-height-1, var(--font-line-height-1))
4750
);
4851
}
4952
@@ -52,8 +55,11 @@
5255
}
5356
5457
tbody tr:hover {
55-
background-color: var(--account-select-primary-100, var(--primary-100));
56-
color: var(--account-select-black, var(--black));
58+
background-color: var(
59+
--account-select-primary-100,
60+
var(--onboard-primary-100, var(--primary-100))
61+
);
62+
color: var(--account-select-black, var(--onboard-black, var(--black)));
5763
}
5864
5965
.address-table {
@@ -64,8 +70,14 @@
6470
6571
.selected-row,
6672
.selected-row:hover {
67-
background-color: var(--account-select-primary-500, var(--primary-500));
68-
color: var(--account-select-primary-100, var(--primary-100));
73+
background-color: var(
74+
--account-select-primary-500,
75+
var(--onboard-primary-500, var(--primary-500))
76+
);
77+
color: var(
78+
--account-select-primary-100,
79+
var(--onboard-primary-100, var(--primary-100))
80+
);
6981
}
7082
7183
.asset-td {

‎packages/common/src/elements/TableHeader.svelte‎

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,49 +15,81 @@
1515
button {
1616
align-items: center;
1717
padding: 0.75rem 1.5rem;
18-
color: var(--account-select-white, var(--white));
18+
color: var(--account-select-white, var(--onboard-white, var(--white)));
1919
border-radius: 1.5rem;
2020
font-family: var(
2121
--account-select-font-family-normal,
22-
var(--font-family-normal)
22+
var(--font-family-normal, var(--font-family-normal))
2323
);
2424
font-style: normal;
2525
font-weight: bold;
26-
font-size: var(--account-select-font-size-5, var(--font-size-5));
27-
line-height: var(--account-select-font-line-height-1, var(--line-height-1));
26+
font-size: var(
27+
--account-select-font-size-5,
28+
var(--onboard-font-size-5, var(--font-size-5))
29+
);
30+
line-height: var(
31+
--account-select-font-line-height-1,
32+
var(--onboard-line-height-1, var(--line-height-1))
33+
);
2834
border: none;
2935
}
3036
3137
.scan-accounts-btn {
32-
line-height: var(--account-select-font-line-height-1, var(--line-height-1));
33-
background-color: var(--account-select-gray-500, var(--gray-500));
34-
color: var(--account-select-primary-100, var(--primary-100));
38+
line-height: var(
39+
--account-select-font-line-height-1,
40+
var(--onboard-line-height-1, var(--line-height-1))
41+
);
42+
background: var(
43+
--account-select-gray-500,
44+
var(--onboard-gray-500, var(--gray-500))
45+
);
46+
color: var(
47+
--account-select-primary-100,
48+
var(--onboard-primary-100, var(--primary-100))
49+
);
3550
display: flex;
3651
justify-content: center;
3752
align-items: center;
3853
cursor: pointer;
3954
}
4055
4156
input:hover {
42-
border-color: var(--account-select-primary-500, var(--primary-300));
57+
border-color: var(
58+
--account-select-primary-500,
59+
var(--onboard-primary-300, var(--primary-300))
60+
);
4361
}
4462
4563
input:focus {
46-
border-color: var(--primary-500);
47-
box-shadow: 0 0 1px 1px var(--primary-500);
64+
border-color: var(
65+
--account-select-primary-500,
66+
var(--onboard-primary-500, var(--primary-500))
67+
);
68+
box-shadow: 0 0 1px 1px
69+
var(
70+
--account-select-primary-500,
71+
var(--onboard-primary-500, var(--primary-500))
72+
);
4873
box-shadow: 0 0 0 1px -moz-mac-focusring;
4974
outline: none;
5075
}
5176
5277
input:disabled {
53-
background-color: var(--gray-100);
78+
background-color: var(
79+
--account-select-gray-100,
80+
var(--onboard-gray-100, var(--gray-100))
81+
);
5482
}
5583
5684
input[type='checkbox'] {
5785
-webkit-appearance: none;
5886
width: auto;
59-
background-color: var(--account-select-white, var(--white));
60-
border: 1px solid var(--account-select-gray-300, var(--gray-300));
87+
background-color: var(
88+
--account-select-white,
89+
var(--onboard-white, var(--white))
90+
);
91+
border: 1px solid
92+
var(--account-select-gray-300, var(--onboard-gray-300, var(--gray-300)));
6193
padding: 0.5em;
6294
border-radius: 3px;
6395
display: flex;
@@ -70,20 +102,32 @@
70102
}
71103
72104
input[type='checkbox']:hover {
73-
border-color: var(--account-select-primary-500, var(--primary-500));
105+
border-color: var(
106+
--account-select-primary-500,
107+
var(--onboard-primary-500, var(--primary-500))
108+
);
74109
}
75110
76111
input[type='checkbox']:checked {
77-
background-color: var(--account-select-primary-500, var(--primary-500));
78-
border-color: var(--account-select-primary-500, var(--primary-500));
79-
color: var(--account-select-white, var(--white));
112+
background-color: var(
113+
--account-select-primary-500,
114+
var(--onboard-primary-500, var(--primary-500))
115+
);
116+
border-color: var(
117+
--account-select-primary-500,
118+
var(--onboard-primary-500, var(--primary-500))
119+
);
120+
color: var(--account-select-white, var(--onboard-white, var(--white)));
80121
}
81122
82123
input[type='checkbox']:checked:after {
83124
content: url("data:image/svg+xml,%3Csvg width='0.885em' height='0.6em' viewBox='0 0 14 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 6L5 11L14 2L12.59 0.58L5 8.17L1.41 4.59L0 6Z' fill='white'/%3E%3C/svg%3E");
84-
font-size: var(--account-select-font-size-7, var(--font-size-7));
125+
font-size: var(
126+
--account-select-font-size-7,
127+
var(--onboard-font-size-7, var(--font-size-7))
128+
);
85129
position: absolute;
86-
color: var(--account-select-white, var(--white));
130+
color: var(--account-select-white, var(--onboard-white, var(--white)));
87131
}
88132
89133
.checkbox-container {
@@ -96,7 +140,10 @@
96140
}
97141
98142
.error-msg {
99-
color: var(--account-select-danger-500, var(--danger-500));
143+
color: var(
144+
--account-select-danger-500,
145+
var(--onboard-danger-500, var(--danger-500))
146+
);
100147
font-family: var(
101148
--account-select-font-family-light,
102149
var(--font-family-light)
@@ -111,8 +158,12 @@
111158
align-items: center;
112159
padding: 0.5rem;
113160
border-radius: 0.4rem 0.4rem 0 0;
114-
background: var(--account-select-gray-100, var(--gray-100));
115-
border-bottom: 1px solid var(--account-select-gray-200, var(--gray-200));
161+
background: var(
162+
--account-select-gray-100,
163+
var(--onboard-gray-100, var(--gray-100))
164+
);
165+
border-bottom: 1px solid
166+
var(--account-select-gray-200, var(--onboard-gray-200, var(--gray-200)));
116167
}
117168
118169
.cursor-pointer {

0 commit comments

Comments
 (0)