Skip to content

Commit 9e4ebdf

Browse files
akushnirukakhlopiachyi
akushniruk
authored and
akhlopiachyi
committed
Fix: rework color palette
1 parent 4cb1f34 commit 9e4ebdf

File tree

70 files changed

+1641
-1548
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+1641
-1548
lines changed

‎src/components/Beneficiaries/Beneficiaries.pcss

+49-30
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.pg-beneficiaries {
22
&__title {
3-
color: var(--color-white);
3+
color: var(--rgb-primary-text-color);
44
font-style: normal;
55
font-weight: 500;
66
font-size: 16px;
@@ -19,7 +19,7 @@
1919
transition: .2s;
2020

2121
&__label {
22-
color: var(--color-white);
22+
color: var(--rgb-primary-text-color);
2323
font-style: normal;
2424
font-weight: 500;
2525
font-size: 12px;
@@ -68,7 +68,7 @@
6868

6969
&__text {
7070
align-items: center;
71-
color: var(--placeholder-text);
71+
color: var(--rgb-secondary-contrast-cta-color);
7272
display: flex;
7373
font-size: 14px;
7474
font-style: normal;
@@ -107,15 +107,15 @@
107107
width: 75%;
108108

109109
&__title {
110-
color: var(--placeholder-text);
110+
color: var(--rgb-secondary-contrast-cta-color);
111111
font-style: normal;
112112
font-weight: 500;
113113
font-size: 10px;
114114
line-height: 12px;
115115
}
116116

117117
&__address {
118-
color: var(--color-white);
118+
color: var(--rgb-primary-text-color);
119119
font-size: 13px;
120120
font-style: normal;
121121
font-weight: 500;
@@ -144,14 +144,14 @@
144144
&:hover {
145145
svg {
146146
path {
147-
fill: var(--accent);
147+
fill: var(--rgb-primary-cta-color);
148148
}
149149
}
150150
}
151151
}
152152

153153
&__select {
154-
color: var(--placeholder-text);
154+
color: var(--rgb-secondary-contrast-cta-color);
155155
font-style: normal;
156156
font-weight: normal;
157157
font-size: 12px;
@@ -184,9 +184,9 @@
184184
}
185185

186186
&__tip, .tip {
187-
background: var(--profile-box);
187+
background: var(--rgb-body-background-color);
188188
border-radius: 4px;
189-
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.35);
189+
box-shadow: 0px 8px 25px var(--shadow-color-level-3);
190190
display: flex;
191191
padding: 24px;
192192
position: absolute;
@@ -211,15 +211,15 @@
211211
}
212212

213213
&__label {
214-
color: var(--placeholder-text);
214+
color: var(--rgb-secondary-contrast-cta-color);
215215
font-size: 10px;
216216
font-style: normal;
217217
font-weight: 500;
218218
line-height: 12px;
219219
}
220220

221221
&__value {
222-
color: var(--color-white);
222+
color: var(--rgb-primary-text-color);
223223
font-size: 12px;
224224
font-style: normal;
225225
font-weight: 500;
@@ -240,15 +240,34 @@
240240
&--open {
241241
border-bottom-left-radius: 0;
242242
border-bottom-right-radius: 0;
243+
background: var(--rgb-primary-cta-color);
243244

244-
.select__right__chevron {
245-
transform: rotate(-180deg);
245+
.select__left {
246+
&__title {
247+
color: var(--rgb-cta-layer-color);
248+
}
249+
}
250+
251+
.select__right {
252+
&__tip {
253+
svg path {
254+
fill: var(--rgb-cta-layer-color);
255+
}
256+
}
257+
258+
&__select {
259+
color: var(--rgb-cta-layer-color);
260+
}
261+
262+
&__chevron {
263+
transform: rotate(-180deg);
264+
}
246265
}
247266
}
248267

249268
&__body {
250269
align-items: center;
251-
background-color: var(--background-wallet-item);
270+
background-color: var(--rgb-dropdown-background-color);
252271
border-bottom-left-radius: 4px;
253272
border-bottom-right-radius: 4px;
254273
display: flex;
@@ -277,15 +296,15 @@
277296
width: 75%;
278297

279298
&__title {
280-
color: var(--placeholder-text);
299+
color: var(--rgb-secondary-contrast-cta-color);
281300
font-style: normal;
282301
font-weight: 500;
283302
font-size: 10px;
284303
line-height: 12px;
285304
}
286305

287306
&__address {
288-
color: var(--color-white);
307+
color: var(--rgb-primary-text-color);
289308
font-size: 13px;
290309
font-style: normal;
291310
font-weight: 500;
@@ -315,7 +334,7 @@
315334
&:hover {
316335
svg {
317336
path {
318-
fill: var(--accent);
337+
fill: var(--rgb-primary-cta-color);
319338
}
320339
}
321340
}
@@ -329,7 +348,7 @@
329348

330349
&__add, .add {
331350
align-items: center;
332-
background-color: var(--background-wallet-item);
351+
background-color: var(--rgb-dropdown-background-color);
333352
border-top: 1px solid var(--wallets-item-border);
334353
border-bottom-left-radius: 4px;
335354
border-bottom-right-radius: 4px;
@@ -342,7 +361,7 @@
342361
width: 100%;
343362

344363
&__label {
345-
color: var(--color-white);
364+
color: var(--rgb-primary-text-color);
346365
font-style: normal;
347366
font-weight: 500;
348367
font-size: 12px;
@@ -375,18 +394,18 @@
375394
}
376395

377396
.cr-email-form {
378-
background: var(--email-form-bg);
379-
box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.35);
397+
background: var(--rgb-body-background-color);
398+
box-shadow: 0px 8px 25px var(--shadow-color-level-3);
380399
border-bottom-left-radius: 3px;
381400
border-bottom-right-radius: 3px;
382401

383402
&__option {
384-
background: var(--header);
403+
background: var(--rgb-subheader-background-color);
385404
border-top-left-radius: 3px;
386405
border-top-right-radius: 3px;
387406

388407
&-inner {
389-
color: var(--color-white);
408+
color: var(--rgb-primary-text-color);
390409
font-size: 16px;
391410
font-style: normal;
392411
font-weight: normal;
@@ -400,27 +419,27 @@
400419
}
401420

402421
&__label {
403-
background: var(--email-form-bg);
422+
background: var(--rgb-input-background-color);
404423
}
405424

406425
&__input {
407426
background: transparent;
408427
border-radius: 4px;
409428

410429
input {
411-
border: 1px solid var(--input-block-border-color) !important;
412-
color: var(--color-white);
430+
border: 1px solid var(--input-border-color) !important;
431+
color: var(--input-text-color);
413432
}
414433
}
415434

416435
&__group--focused {
417436
.cr-email-form__label {
418-
color: var(--accent);
437+
color: var(--input-legend-color-active);
419438
}
420439

421440
input {
422-
background: var(--email-form-bg);
423-
border: 1px solid var(--accent) !important;
441+
background: var(--rgb-input-background-color);
442+
border: 1px solid var(--input-border-color-active) !important;
424443
}
425444
}
426445

@@ -456,7 +475,7 @@
456475

457476
&__info {
458477
align-items: center;
459-
color: var(--color-white);
478+
color: var(--rgb-primary-text-color);
460479
font-weight: normal;
461480
font-size: 14px;
462481
position: absolute;

‎src/components/Beneficiaries/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ class BeneficiariesComponent extends React.Component<Props, State> {
282282
<div className="select__left">
283283
<span className="select__left__title">{this.translate('page.body.wallets.beneficiaries.dropdown.fiat.name')}</span>
284284
<span className="select__left__address">{currentWithdrawalBeneficiary.name}</span>
285-
<span className="select_left__title">{this.translate('page.body.wallets.beneficiaries.dropdown.fiat.fullName')}</span>
285+
<span className="select__left__title">{this.translate('page.body.wallets.beneficiaries.dropdown.fiat.fullName')}</span>
286286
<span className="select__left__address">{currentWithdrawalBeneficiary.data ? (currentWithdrawalBeneficiary.data as BeneficiaryBank).full_name : ''}</span>
287287
</div>
288288
<div className="select__right">

‎src/components/CombinedOrderBook/CombinedOrderBook.pcss

+7-9
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919

2020
&--data-loading {
21-
background: rgba(0, 0, 0, 0.2);
21+
background: transparent;
2222
display: block;
2323
}
2424

@@ -27,7 +27,6 @@
2727
flex-direction: column;
2828
margin-top: 5px;
2929
padding-bottom: 5px;
30-
color: var(--placeholder-text);
3130

3231
span {
3332
font-weight: normal;
@@ -43,17 +42,17 @@
4342
}
4443

4544
&-negative {
46-
color: var(--red);
45+
color: var(--rgb-asks);
4746
}
4847

4948
&-positive {
50-
color: var(--color-green);
49+
color: var(--rgb-bids);
5150
}
5251
}
5352

5453
.cr-order-book {
5554
td {
56-
color: var(--color-white);
55+
color: var(--order-book-table-text-color);
5756
}
5857
}
5958

@@ -62,13 +61,12 @@
6261
overflow: unset;
6362

6463
&-market {
65-
border-top: 1px solid var(--title-component-color);
64+
border-top: 1px solid var(--order-book-last-market-price-border-color);
6665
position: sticky;
6766
bottom: 0;
6867
right: 0;
6968
left: 0;
7069
z-index: 25;
71-
background: var(--base-bright);
7270
}
7371

7472
.cr-order-book {
@@ -99,7 +97,7 @@
9997
height: 154px;
10098

10199
&:first-child {
102-
border-bottom: 1px solid var(--title-component-color);
100+
border-bottom: 1px solid var(--order-book-last-market-price-border-color);
103101
height: 208px;
104102

105103
.cr-table-background {
@@ -108,7 +106,7 @@
108106
}
109107

110108
&:last-child {
111-
border-top: 1px solid var(--title-component-color);
109+
border-top: 1px solid var(--order-book-last-market-price-border-color);
112110

113111
.cr-table-background {
114112
top: 0;

‎src/components/CopyableTextField/CopyableTextField.pcss

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
.cr-copyable-text-field {
22
border: none;
3-
background: var(--background-dark);
3+
background: var(--rgb-input-background-color);
44
display: flex;
55
justify-content: space-between;
66
align-items: center;
@@ -10,7 +10,7 @@
1010
padding: 0;
1111

1212
legend {
13-
background: var(--background-dark);
13+
background: var(--input-legend-color);
1414
margin-bottom: auto;
1515
margin-top: calc(var(--gap) * -1.5);
1616
position: absolute;
@@ -21,14 +21,14 @@
2121
display: flex;
2222
flex-direction: row;
2323
flex: 1;
24-
color: var(--base-3);
25-
background: var(--background-dark);
24+
color: var(--input-text-color);
25+
background: var(--rgb-input-background-color);
2626
background: inherit;
2727
padding: calc(var(--gap) * 1.67) calc(var(--gap) * 0.83) calc(var(--gap) * 0.83) var(--gap) !important;
2828

2929
input {
3030
background: unset;
31-
color: var(--table-text-color);
31+
color: var(--input-text-color);
3232
}
3333
}
3434

@@ -40,8 +40,8 @@
4040
width: 100%;
4141
border-radius: 0;
4242
border-style: none;
43-
color: var(--base-3);
44-
background: var(--background-dark);
43+
color: var(--input-text-color);
44+
background: var(--rgb-input-background-color);
4545
outline: none;
4646
}
4747
}

‎src/components/CurrencyInfo/CurrencyInfo.pcss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
background: transparent;
33
display: flex;
44
padding: 0 0 calc(var(--gap) * 4);
5-
border-bottom: 1px solid var(--header-border);
5+
border-bottom: 1px solid var(--divider-color-level-2);
66
margin: 0 calc(var(--gap) * 3);
77
align-items: center;
88
&-balance {
@@ -17,7 +17,7 @@
1717
.cr-wallet-item {
1818
&__icon-code {
1919
font-size: calc(var(--gap) * 8);
20-
color: var(--bright-1);
20+
color: var(--rgb-primary-text-color);
2121
background: transparent;
2222
}
2323
&__amount-locked {
@@ -33,7 +33,7 @@
3333
line-height: 1;
3434
&-amount, &-locked {
3535
background: transparent;
36-
color: var(--wallets-balance);
36+
color: var(--wallets-balance-color);
3737
font-size: calc(var(--gap) * 5);
3838
font-weight: 300;
3939
}

0 commit comments

Comments
 (0)