Skip to content

Commit b43d8ef

Browse files
aliakseilatypdabeeeenster
aliakseilatyp
and
dabeeeenster
authored
chore: update dark theme (#2702)
Co-authored-by: Ben Rometsch <[email protected]>
1 parent 01d14d2 commit b43d8ef

17 files changed

+91
-33
lines changed

‎frontend/web/components/Aside.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -435,7 +435,7 @@ const Aside = class extends Component {
435435
<Loader />
436436
</div>
437437
) : (
438-
<div className='aside__environment-nav list-unstyled mb-0'>
438+
<div className='aside__environment-nav list-unstyled mb-0 mt-1'>
439439
<NavLink
440440
className='aside__environment-list-item'
441441
id='features-link'

‎frontend/web/components/pages/ChangeRequestPage.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ const ChangeRequestsPage = class extends Component {
531531
}
532532
className='no-pad mb-2'
533533
>
534-
<div className='search-list'>
534+
<div className='search-list change-request-list'>
535535
<Row className='list-item change-request-item px-4'>
536536
<div
537537
className='font-weight-medium mr-3'

‎frontend/web/components/pages/UsersPage.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,15 @@ const UsersPage: FC<UsersPageType> = (props) => {
204204
className='flex-row flex flex-1 table-column'
205205
>
206206
<div className='font-weight-medium'>{identifier}</div>
207-
<Icon name='chevron-right' width={22} />
207+
<Icon
208+
name='chevron-right'
209+
width={22}
210+
fill={
211+
Utils.getFlagsmithHasFeature('dark_mode')
212+
? '#FFF'
213+
: '#656D7B'
214+
}
215+
/>
208216
</Link>
209217
<div className='table-column'>
210218
<Button

‎frontend/web/styles/3rdParty/_hljs.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../mixins/custom-scrollbar";
1+
@import '../mixins/custom-scrollbar';
22

33
@mixin transition($transition...) {
44
-moz-transition: $transition;
@@ -37,11 +37,11 @@
3737
position: relative;
3838
textarea,
3939
.hljs {
40-
padding: $input-padding-lg;
41-
line-height: $line-height-lg;
40+
padding: $input-padding-lg;
41+
line-height: $line-height-lg;
4242
}
43-
&.code-medium{
44-
.hljs{
43+
&.code-medium {
44+
.hljs {
4545
padding: $input-padding;
4646
}
4747
}
@@ -62,8 +62,8 @@
6262
margin: 0;
6363
opacity: 1;
6464
}
65-
.language-icon{
66-
color:$text-icon-dark;
65+
.language-icon {
66+
color: $text-icon-dark;
6767
}
6868
}
6969
span {
@@ -305,6 +305,9 @@ code.txt {
305305
fill: white;
306306
}
307307
}
308+
.value-editor .select-language span.active {
309+
color: white;
310+
}
308311
}
309312

310313
code[contenteditable='false'].hljs {

‎frontend/web/styles/3rdParty/_react-select.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@
148148
cursor: pointer;
149149
&:hover {
150150
background: $bg-light200 !important;
151+
cursor:pointer;
151152
}
152153
&--is-selected {
153154
background-color: $primary-alfa-8 !important;
@@ -198,7 +199,12 @@
198199
color: white !important;
199200
background: $input-bg-dark !important;
200201
&:hover {
201-
background: $primary !important;
202+
background: $bg-dark200 !important;
203+
color: white !important;
204+
cursor:pointer;
205+
}
206+
&--is-selected {
207+
background-color: $primary-alfa-16 !important;
202208
}
203209
}
204210
}

‎frontend/web/styles/_variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ $alert-warning-bg: $warning-solid-alert;
8888
$alert-warning-border: $bt-brand-yellow;
8989

9090
$body-bg: #fff;
91-
$body-bg-dark: $dark-bg-5;
91+
9292

9393
$butter-bar-bg: #fdf1dd;
9494
$butter-bar-bg-dark: $dark-bg-10;

‎frontend/web/styles/components/_aside.scss

+5-2
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,10 @@ $animation-timing-function: ease-in-out;
175175
}
176176

177177
&:hover {
178-
color: $aside-nav-hover-dark;
178+
color: $aside-nav-active-color-dark;
179+
path {
180+
fill: $aside-nav-active-color-dark;
181+
}
179182
}
180183
}
181184

@@ -293,7 +296,7 @@ $animation-timing-function: ease-in-out;
293296
}
294297
&__environments-wrapper {
295298
.collapsible__header {
296-
padding: 8px 0px;
299+
padding: 12px 0px;
297300
&:hover {
298301
color: $aside-nav-hover;
299302
svg {

‎frontend/web/styles/components/_list-item.scss

+6-4
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
vertical-align: sub;
1010
}
1111
}
12-
&.change-request-item{
12+
&.change-request-item {
1313
min-height: auto;
1414
padding: 20px 0px;
1515
}
@@ -38,10 +38,12 @@
3838
.dark {
3939
.list-item {
4040
color: $text-icon-light;
41-
&.clickable:hover .btn-link {
42-
color: white;
41+
&.change-request-item {
42+
.btn-link {
43+
color: $primary;
44+
}
4345
}
44-
.btn-link {
46+
&.clickable:hover .btn-link {
4547
color: white;
4648
}
4749
}

‎frontend/web/styles/components/_paging.scss

+6
Original file line numberDiff line numberDiff line change
@@ -32,3 +32,9 @@
3232
}
3333
}
3434
}
35+
36+
.dark{
37+
.paging{
38+
border-top: 1px solid $white-alpha-16;
39+
}
40+
}

‎frontend/web/styles/components/_panel.scss

+18-3
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,20 @@
8787
}
8888
.panel-content {
8989
background-color: transparent;
90+
.search-list {
91+
background-color: $bg-dark400;
92+
border: 1px solid $white-alpha-16;
93+
.list-item {
94+
border-top: 1px solid $white-alpha-16;
95+
&:first-child {
96+
border-top: none;
97+
}
98+
}
99+
&.change-request-list{
100+
background-color: $bg-dark500;
101+
}
102+
}
103+
90104
.chip {
91105
background-color: $panel-bg-darker;
92106
}
@@ -120,8 +134,8 @@
120134
}
121135
}
122136
}
123-
.list-item:hover a {
124-
color: $dark-highlight-color !important;
137+
.list-item:hover a,.btn-link {
138+
color: $primary !important;
125139
}
126140
.panel-icon {
127141
background-color: $panel-icon-background-color-dark;
@@ -139,7 +153,7 @@
139153
}
140154
}
141155
&.segment-overrides {
142-
background-color: $bg-dark100;
156+
background-color: $bg-dark400;
143157
border: 1px solid $white-alpha-16;
144158
}
145159
}
@@ -194,6 +208,7 @@ a.text-white {
194208
.panel-content {
195209
.search-list {
196210
border: none;
211+
background-color: transparent;
197212
}
198213
}
199214
}

‎frontend/web/styles/new/_variables-new.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ $info-solid-dark-alert: rgba(15, 32, 52);
5454
$warning-solid-dark-alert: rgba(34, 31, 39);
5555
$danger-solid-dark-alert: rgba(34, 23, 40);
5656

57+
$bg-light100: #ffffff;
5758
$bg-light200: #fafafb;
5859
$bg-light300: #eff1f4;
5960
$bg-light500: #e0e3e9;
@@ -66,6 +67,7 @@ $bg-dark500: #0f1425;
6667
//Body
6768
$body-text: $text-icon-dark;
6869
$body-text-dark: white;
70+
$body-bg-dark: $bg-dark500;
6971

7072
$border-radius-sm: 4px;
7173
$border-radius: 6px;
@@ -120,11 +122,11 @@ $hr-opacity: 1;
120122

121123
//Modal
122124
$modal-content-color: $text-icon-grey;
123-
$modal-content-color-dark: $text-icon-light-grey;
125+
$modal-content-color-dark: $text-icon-light;
124126
$modal-sm: 500px;
125127
$modal-md: 620px;
126128
$modal-lg: 900px;
127-
$modal-bg-dark: $bg-dark100;
129+
$modal-bg-dark: $bg-dark400;
128130
$modal-border-radius: 18px;
129131
$modal-footer-border-width: 0;
130132
$modal-backdrop-bg: rgba(0, 0, 0, 0.870588);
@@ -331,4 +333,3 @@ $theme-colors: (
331333
dark: $text-icon-dark,
332334
// add any additional color below
333335
);
334-

‎frontend/web/styles/project/_PricingPage.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@
105105
.dark {
106106
.panel-footer {
107107

108-
background:darken($body-bg-dark,2)
108+
background:$body-bg-dark;
109109
}
110110
}
111111
.panel-footer{

‎frontend/web/styles/project/_buttons.scss

+8-4
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ button.btn {
147147
&.btn-sm {
148148
padding: 0 10px;
149149
}
150-
&.btn-lg{
150+
&.btn-lg {
151151
line-height: $btn-line-height-lg;
152152
}
153153
&.btn-remove {
@@ -296,7 +296,7 @@ button.btn {
296296
color: $text-icon-dark;
297297
font-weight: bold;
298298
}
299-
&.btn-with-icon{
299+
&.btn-with-icon {
300300
padding: 0 14px;
301301
background-color: $basic-alpha-8;
302302
border-radius: $border-radius;
@@ -440,16 +440,20 @@ $add-btn-size: 34px;
440440
}
441441
}
442442

443-
&.btn:hover {
443+
&.btn:hover,
444+
&.btn:focus,&.btn:active {
444445
background-color: $bg-dark200;
445446
color: $text-icon-light;
446447
& .btn-project-letter {
447448
background-color: $primary;
448449
}
449450
}
450451
}
451-
&.btn-with-icon{
452+
&.btn-with-icon {
452453
background-color: $basic-alpha-8;
454+
&.btn-remove {
455+
background-color: $danger-alfa-8;
456+
}
453457
}
454458
}
455459

‎frontend/web/styles/project/_forms.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,11 +42,11 @@
4242
.dark {
4343
.input-container {
4444
input.input {
45-
border: 1px solid $input-border-color-dark;
45+
border: 1px solid $input-hover-border-color-dark;
4646
background-color: $input-bg-dark;
4747
color: $text-icon-light;
4848
&:hover {
49-
border: 1px solid $input-hover-border-color-dark;
49+
border: 1px solid $input-focus-border-color-dark;
5050
}
5151
&:focus {
5252
border: 1px solid $input-focus-border-color-dark;

‎frontend/web/styles/project/_lists.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050

5151
.dark {
5252
.table-header {
53-
background-color: transparent;
53+
background-color: $bg-dark300;
5454
}
5555
}
5656

‎frontend/web/styles/project/_segments.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
}
2121
.dark {
2222
.panel-rule {
23-
background-color: $bg-dark300;
23+
background-color: $bg-dark200;
2424
}
2525
}
2626

‎frontend/web/styles/project/_tooltips.scss

+10
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,13 @@
4848
}
4949
}
5050
}
51+
.dark {
52+
.question-tooltip {
53+
.__react_component_tooltip {
54+
&.type-dark {
55+
background-color: $bg-light100;
56+
color: $text-icon-dark;
57+
}
58+
}
59+
}
60+
}

0 commit comments

Comments
 (0)