Skip to content

Commit 6a87a89

Browse files
Aniket-EnggAniket-Engg
authored
Merge pull request #6249 from ethereum/bs5darkfixes2
Bs5 dark theme fixes 2
2 parents 99d6439 + 27b3ad7 commit 6a87a89

File tree

22 files changed

+88
-72
lines changed

22 files changed

+88
-72
lines changed

‎apps/circuit-compiler/src/app/components/versions.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export function VersionList ({ currentVersion, versionList, downloadList, setVer
88
return (
99
<Dropdown>
1010
<Dropdown.Toggle as={CircomVersionMenuToggle} id="circomVersionList" className="btn btn-light btn-block w-100 d-inline-block border form-select">
11-
<div style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
11+
<div className="font-sm" style={{ flexGrow: 1, overflow: 'hidden', display:'flex', justifyContent:'left' }}>
1212
{ versionList[currentVersion].name }
1313
</div>
1414
</Dropdown.Toggle>

‎apps/contract-verification/src/app/components/SearchableChainDropdown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const CustomToggle = React.forwardRef(
4141
className={className.replace('dropdown-toggle', '')}
4242
>
4343
<div className="d-flex">
44-
<div className="me-auto text-nowrap text-truncate overflow-hidden" data-id={`dropdown-content`}>{children}</div>
44+
<div className="me-auto text-nowrap text-truncate overflow-hidden font-sm" data-id={`dropdown-content`}>{children}</div>
4545
{icon && (
4646
<div className="pe-1">
4747
<i className={`${icon} pe-1`}></i>

‎apps/remix-ide-e2e/src/tests/editor.test.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -110,13 +110,13 @@ module.exports = {
110110
.executeScriptInTerminal('remix.exeCurrent()')
111111
.scrollToLine(33)
112112
.waitForElementPresent('.highlightLine34', 60000)
113-
.checkElementStyle('.highlightLine34', 'background-color', 'rgba(0, 0, 0, 0)')
113+
.checkElementStyle('.highlightLine34', 'background-color', 'rgb(52, 152, 219)')
114114
.scrollToLine(40)
115115
.waitForElementPresent('.highlightLine41', 60000)
116-
.checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
116+
.checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
117117
.scrollToLine(50)
118118
.waitForElementPresent('.highlightLine51', 60000)
119-
.checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
119+
.checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
120120
},
121121

122122
'Should remove 1 highlight from source code #group1':
@@ -132,8 +132,8 @@ module.exports = {
132132
.waitForElementVisible('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
133133
.click('li[data-id="treeViewLitreeViewItemcontracts/3_Ballot.sol"]')
134134
.waitForElementNotPresent('.highlightLine33', 60000)
135-
.checkElementStyle('.highlightLine41', 'background-color', 'rgba(0, 0, 0, 0)')
136-
.checkElementStyle('.highlightLine51', 'background-color', 'rgba(0, 0, 0, 0)')
135+
.checkElementStyle('.highlightLine41', 'background-color', 'rgb(52, 152, 219)')
136+
.checkElementStyle('.highlightLine51', 'background-color', 'rgb(52, 152, 219)')
137137
},
138138

139139
'Should remove all highlights from source code #group1': function (browser: NightwatchBrowser) {

‎apps/remix-ide/src/app/plugins/templates-selection/templates-selection-plugin.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -361,7 +361,7 @@ export class TemplatesSelectionPlugin extends ViewPlugin {
361361
classList='TSCellStyle'
362362
>
363363
<div className='d-flex justify-content-between h-100 flex-column'>
364-
<span className='pt-4 px-1 h6 text-dark'>{template.description}</span>
364+
<span className='pt-2 px-1 h6 text-dark'>{template.description}</span>
365365
<span style={{ cursor: 'pointer' }} className='mt-2 mb-1 btn btn-sm border align-items-left' onClick={() => template.onClick()}>{template.onClickLabel}</span>
366366
</div>
367367
</RemixUIGridCell>}
@@ -409,7 +409,7 @@ const createModalMessage = async (
409409
<label
410410
htmlFor="initGitRepository"
411411
data-id="initGitRepositoryLabel"
412-
className="m-0 form-check-label udapp_checkboxAlign"
412+
className="ms-1 form-check-label udapp_checkboxAlign"
413413
title={window._intl.formatMessage({ id: 'filePanel.initGitRepoTitle' })}
414414
>
415415
<FormattedMessage id="filePanel.initGitRepositoryLabel" />
@@ -442,7 +442,7 @@ const createOptionsModal = (
442442
{['mintable', 'burnable', 'pausable'].map((feature) => (
443443
<div key={feature} className="d-flex ms-2 form-check">
444444
<input className="form-check-input" type="checkbox" name="feature" value={feature} id={feature} onChange={onChangeCheckBoxRefs} />
445-
<label className="form-check-label" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
445+
<label className="form-check-label ms-1" htmlFor={feature} data-id={`featureType${feature.charAt(0).toUpperCase() + feature.slice(1)}`}>
446446
<FormattedMessage id={`filePanel.${feature}`} />
447447
</label>
448448
</div>
@@ -456,7 +456,7 @@ const createOptionsModal = (
456456
{['transparent', 'uups'].map((type) => (
457457
<div key={type} className="d-flex ms-2 form-check">
458458
<input className="form-check-input" type="radio" name="upgradeability" value={type} id={type} onChange={onChangeRadioRefs} />
459-
<label className="form-check-label" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
459+
<label className="form-check-label ms-1" htmlFor={type} data-id={`upgradeType${type.charAt(0).toUpperCase() + type.slice(1)}`}>
460460
{type.toUpperCase()}
461461
</label>
462462
</div>

‎apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@
103103
--bs-tertiary-color-rgb: 255, 255, 255;
104104
--bs-tertiary-bg: #f8f9fa;
105105
--bs-tertiary-bg-rgb: 248, 249, 250;
106-
--bs-heading-color: inherit;
106+
--bs-heading-color: #fff;
107107
--bs-link-color: #747b90;
108108
--bs-link-color-rgb: 116, 123, 144;
109109
--bs-link-decoration: underline;
@@ -139,6 +139,10 @@
139139
--custom-onsurface-layer-3:#3b3c4d;
140140
--custom-onsurface-layer-4:#434454;
141141
--custom-ai-color: #2de7f3;
142+
--custom-border-light: #51536b;
143+
--custom-border-light-rgb: 81, 83, 107;
144+
--custom-border-dark: #2c3244;
145+
--custom-border-dark-rgb: 44, 50, 68;
142146
}
143147

144148
[data-bs-theme=dark] {
@@ -181,7 +185,7 @@
181185
--bs-danger-border-subtle: #8b2e24;
182186
--bs-light-border-subtle: #444;
183187
--bs-dark-border-subtle: #303030;
184-
--bs-heading-color: inherit;
188+
--bs-heading-color: #fff;
185189
--bs-link-color: #a2a3bd;
186190
--bs-link-hover-color: #b6b8d4;
187191
--bs-link-color-rgb: 162, 163, 189;
@@ -200,6 +204,10 @@
200204
--custom-onsurface-layer-3:#3b3c4d;
201205
--custom-onsurface-layer-4:#434454;
202206
--custom-ai-color: #2de7f3;
207+
--custom-border-light: #51536b;
208+
--custom-border-light-rgb: 81, 83, 107;
209+
--custom-border-dark: #2c3244;
210+
--custom-border-dark-rgb: 44, 50, 68;
203211
}
204212

205213
*,
@@ -241,6 +249,10 @@ body {
241249
color: var(--custom-ai-color) !important;
242250
}
243251

252+
.font-sm {
253+
font-size: 0.875em;
254+
}
255+
244256
hr {
245257
margin: 1rem 0;
246258
color: inherit;
@@ -252,7 +264,8 @@ hr {
252264
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
253265
margin-top: 0;
254266
margin-bottom: 0.5rem;
255-
font-weight: 500;
267+
font-weight: 400;
268+
font-family: inherit;
256269
line-height: 1.2;
257270
color: var(--bs-heading-color);
258271
}
@@ -358,7 +371,7 @@ strong {
358371
}
359372

360373
small, .small {
361-
font-size: 0.875em;
374+
font-size: 80%;
362375
}
363376

364377
mark, .mark {
@@ -2346,7 +2359,7 @@ textarea.form-control-lg {
23462359
display: block;
23472360
width: 100%;
23482361
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
2349-
font-size: 1rem;
2362+
font-size: .875rem;
23502363
font-weight: 400;
23512364
line-height: 1.5;
23522365
color: #fff;
@@ -3092,34 +3105,34 @@ textarea.form-control-lg {
30923105
--bs-btn-color: var(--bs-body-bg);
30933106
--bs-btn-bg: #64c4ff;
30943107
--bs-btn-border-color: #64c4ff;
3095-
--bs-btn-hover-color: #fff;
3096-
--bs-btn-hover-bg: #2f4d6c;
3097-
--bs-btn-hover-border-color: #2c4866;
3108+
--bs-btn-hover-color: var(--bs-body-bg);
3109+
--bs-btn-hover-bg: #64c4ff;
3110+
--bs-btn-hover-border-color: #64c4ff;
30983111
--bs-btn-focus-shadow-rgb: 85, 115, 146;
3099-
--bs-btn-active-color: #fff;
3100-
--bs-btn-active-bg: #2c4866;
3101-
--bs-btn-active-border-color: #29445f;
3112+
--bs-btn-active-color: var(--bs-body-bg);
3113+
--bs-btn-active-bg: #64c4ff;
3114+
--bs-btn-active-border-color: #64c4ff;
31023115
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
3103-
--bs-btn-disabled-color: #fff;
3116+
--bs-btn-disabled-color: var(--bs-body-bg);
31043117
--bs-btn-disabled-bg: #64c4ff;
31053118
--bs-btn-disabled-border-color: #64c4ff;
31063119
}
31073120

31083121
.btn-secondary {
31093122
--bs-btn-color: #fff;
31103123
--bs-btn-bg: #595c76;
3111-
--bs-btn-border-color: #444;
3124+
--bs-btn-border-color: #595c76;
31123125
--bs-btn-hover-color: #fff;
31133126
--bs-btn-hover-bg: #676a83;
3114-
--bs-btn-hover-border-color: #363636;
3127+
--bs-btn-hover-border-color: #676a83;
31153128
--bs-btn-focus-shadow-rgb: 96, 96, 96;
31163129
--bs-btn-active-color: #fff;
31173130
--bs-btn-active-bg: #4d516f;
3118-
--bs-btn-active-border-color: #333333;
3131+
--bs-btn-active-border-color: #4d516f;
31193132
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31203133
--bs-btn-disabled-color: #fff;
31213134
--bs-btn-disabled-bg: #596b76;
3122-
--bs-btn-disabled-border-color: #444;
3135+
--bs-btn-disabled-border-color: #596b76;
31233136
}
31243137

31253138
.btn-success {
@@ -3159,35 +3172,35 @@ textarea.form-control-lg {
31593172
.btn-warning {
31603173
--bs-btn-color: #fff;
31613174
--bs-btn-bg: #c97539;
3162-
--bs-btn-border-color: #f39c12;
3175+
--bs-btn-border-color: #c97539;
31633176
--bs-btn-hover-color: #fff;
31643177
--bs-btn-hover-bg: #d2844b;
3165-
--bs-btn-hover-border-color: #c27d0e;
3178+
--bs-btn-hover-border-color: #d2844b;
31663179
--bs-btn-focus-shadow-rgb: 245, 171, 54;
31673180
--bs-btn-active-color: #fff;
31683181
--bs-btn-active-bg: #c56F31;
3169-
--bs-btn-active-border-color: #b6750e;
3182+
--bs-btn-active-border-color: #c56F31;
31703183
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31713184
--bs-btn-disabled-color: #fff;
31723185
--bs-btn-disabled-bg: #c97539;
3173-
--bs-btn-disabled-border-color: #f39c12;
3186+
--bs-btn-disabled-border-color: #c97539;
31743187
}
31753188

31763189
.btn-danger {
31773190
--bs-btn-color: #fff;
31783191
--bs-btn-bg: #b84040;
3179-
--bs-btn-border-color: #e74c3c;
3192+
--bs-btn-border-color: #b84040;
31803193
--bs-btn-hover-color: #fff;
31813194
--bs-btn-hover-bg: #c44949;
3182-
--bs-btn-hover-border-color: #b93d30;
3195+
--bs-btn-hover-border-color: #c44949;
31833196
--bs-btn-focus-shadow-rgb: 235, 103, 89;
31843197
--bs-btn-active-color: #fff;
31853198
--bs-btn-active-bg: #b13838;
3186-
--bs-btn-active-border-color: #ad392d;
3199+
--bs-btn-active-border-color: #b13838;
31873200
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
31883201
--bs-btn-disabled-color: #fff;
31893202
--bs-btn-disabled-bg: #b84040;
3190-
--bs-btn-disabled-border-color: #e74c3c;
3203+
--bs-btn-disabled-border-color: #b84040;
31913204
}
31923205

31933206
.btn-light {
@@ -3465,7 +3478,7 @@ textarea.form-control-lg {
34653478
--bs-dropdown-padding-x: 0;
34663479
--bs-dropdown-padding-y: 0.5rem;
34673480
--bs-dropdown-spacer: 0.125rem;
3468-
--bs-dropdown-font-size: 1rem;
3481+
--bs-dropdown-font-size: .875rem;
34693482
--bs-dropdown-color: var(--bs-body-color);
34703483
--bs-dropdown-bg: var(--custom-onsurface-layer-1);
34713484
--bs-dropdown-border-color: #444;
@@ -7621,12 +7634,12 @@ textarea.form-control-lg {
76217634

76227635
.border-light {
76237636
--bs-border-opacity: 1;
7624-
border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
7637+
border-color: rgba(var(--custom-border-light-rgb), var(--bs-border-opacity)) !important;
76257638
}
76267639

76277640
.border-dark {
76287641
--bs-border-opacity: 1;
7629-
border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
7642+
border-color: rgba(var(--custom-border-dark-rgb), var(--bs-border-opacity)) !important;
76307643
}
76317644

76327645
.border-black {

‎apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,10 @@ body {
238238
color: var(--custom-ai-color) !important;
239239
}
240240

241+
.font-sm {
242+
font-size: 0.875em;
243+
}
244+
241245
hr {
242246
margin: 1rem 0;
243247
color: inherit;
@@ -2342,7 +2346,7 @@ textarea.form-control-lg {
23422346
display: block;
23432347
width: 100%;
23442348
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
2345-
font-size: 1rem;
2349+
font-size: .875rem;
23462350
font-weight: 400;
23472351
line-height: 1.5;
23482352
color: var(--bs-body-color);
@@ -3459,7 +3463,7 @@ textarea.form-control-lg {
34593463
--bs-dropdown-padding-x: 0;
34603464
--bs-dropdown-padding-y: 0.5rem;
34613465
--bs-dropdown-spacer: 0.125rem;
3462-
--bs-dropdown-font-size: 1rem;
3466+
--bs-dropdown-font-size: .875rem;
34633467
--bs-dropdown-color: var(--bs-body-color);
34643468
--bs-dropdown-bg: var(--bs-body-bg);
34653469
--bs-dropdown-border-color: #ced4da;

0 commit comments

Comments
 (0)