Skip to content

Commit 90b3903

Browse files
ArneiArnei
authored
Merge pull request #1431 from Arnei/css-color-consistency
Css color consistency
2 parents 83c1d71 + 01fab4c commit 90b3903

26 files changed

Lines changed: 100 additions & 304 deletions

‎src/components/events/partials/PublishedCell.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const PublishCell = ({
7878
return (
7979
<>
8080
{ publications.length > 0 &&
81-
<div className="popover-wrapper">
81+
<>
8282
{onlyEngage && (
8383
// <Tooltip title={t("EVENTS.EVENTS.TABLE.TOOLTIP.PLAYER")}> // Disabled due to performance concerns
8484
<a className="crosslink" href={publications[0].url} rel="noreferrer" target="_blank">
@@ -88,7 +88,7 @@ const PublishCell = ({
8888
)}
8989
{!onlyEngage &&
9090
<>
91-
<ButtonLikeAnchor className="popover-wrapper__trigger">
91+
<ButtonLikeAnchor className="crosslink">
9292
<span onClick={() => setShowPopup(!showPopup)}>{t("YES")}</span>
9393
</ButtonLikeAnchor>
9494
{showPopup && (
@@ -123,7 +123,7 @@ const PublishCell = ({
123123
)}
124124
</>
125125
}
126-
</div>
126+
</>
127127
}
128128
</>
129129
);

‎src/components/shared/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ const TableHeadRows = ({ forceDeselectAll }: { forceDeselectAll: () => unknown }
211211
className={cn("chevron-up", { active: reverse === "ASC" && column.name === sortBy })}
212212
/>
213213
<LuChevronDown
214-
className={cn("chevron-down", { active: reverse === "ASC" && column.name === sortBy })}
214+
className={cn("chevron-down", { active: reverse === "DESC" && column.name === sortBy })}
215215
/>
216216
</div>
217217
</span>

‎src/styles/base/_variables.scss‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ $off-white: $primary-color-white;
5151

5252
$bright-blue: #4da1f7;
5353
$ref-blue: #1d5888;
54+
$ref-blue-button: #069;
5455
$red: #fa1919;
5556
$alt-red: #e45253;
5657
$orange: #ff8c00;
@@ -65,25 +66,24 @@ $color-silver: #CCC;
6566
$color-lightgray: #F8F8F8;
6667
$color-white: #fff;
6768

69+
$l-blue-gradient: #2b77b9;
70+
$b-blue-gradient: #55cef2;
71+
6872

6973

7074
// Primary color with light/medium/darker shades
7175
$prim-color: color.adjust(#fff, $lightness: -50%);
72-
$light-prim-color: color.adjust($prim-color, $lightness: 15%);
73-
$medium-prim-color: color.adjust($prim-color, $lightness: -10%);
74-
$dark-prim-color: color.adjust($prim-color, $lightness: -30%);
76+
$light-prim-color: color.adjust($prim-color, $lightness: 15%); //#a6a6a6
77+
$medium-prim-color: color.adjust($prim-color, $lightness: -10%); //#666666
78+
$dark-prim-color: color.adjust($prim-color, $lightness: -30%); //#333333
7579

7680
$global-text-color: $medium-prim-color;
7781

78-
// Alpha Channel
79-
$light-black-alpha: rgba($black, 0.04);
80-
81-
82-
8382
// Element Colors
8483
// ----------------------------------------
8584

8685
$body-background: $off-white;
86+
$table-title-color: #46647e;
8787
$header-link-color: #435263;
8888
$color-link: $medium-prim-color;
8989
$color-link-hover: $dark-prim-color;
@@ -105,6 +105,7 @@ $table-highlight: color.adjust($light-prim-color, $lightness: 28%);
105105

106106
$main-border-color: #c9d0d3;
107107
$light-border-color: #cfd3d5;
108+
$lighter-border-color: #e2e2e2;
108109
$main-border-radius: 4px;
109110
$thin-border: 1px;
110111
$thin-border-stroke: $thin-border solid;
@@ -147,8 +148,8 @@ $modal-nav-bg-color: #eeeff0;
147148
$modal-nav-border-color: #d6d6d6;
148149
$modal-nav-link-color: #646E75;
149150
$modal-nav-link-active-color: $header-link-color;
150-
$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%);
151-
$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%);
151+
$subpage-navigation-link-color: color.adjust($header-link-color, $lightness: 25%); //#fafafa
152+
$subpage-navigation-link-hover-color: color.adjust($header-link-color, $lightness: 35%); //#9cabbc
152153

153154
// Stats
154155
// ----------------------------------------

‎src/styles/components/_datepicker-custom.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,12 @@
6161
border-color: color.adjust(variables.$color-silver, $lightness: -15%);
6262
}
6363
}
64+
65+
.react-datepicker__month-read-view,
66+
.react-datepicker__year-read-view {
67+
color: variables.$color-white;
68+
background: variables.$color-gray;
69+
&:hover {
70+
background: variables.$color-darkgray;
71+
}
72+
}

‎src/styles/components/_dropdowns.scss‎

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@
9999
line-height: 20px;
100100

101101
&:hover, &:focus {
102-
color: variables.$global-text-color;
103-
background: #f2f2f2;
102+
color: variables.$off-white;
103+
background: variables.$bright-blue;
104104
}
105105

106106
&.more-link {
@@ -155,21 +155,12 @@
155155
z-index: variables.$max-z + 10;
156156

157157
> li {
158-
text-decoration: none;
159-
text-shadow: 0 1px 0 variables.$white;
160158
color: variables.$medium-prim-color;
161159
font-size: 12px;
162160
line-height: 20px;
163161
font-weight: 600;
164162
cursor: default;
165163
display: block;
166-
position: relative;
167-
transition: all 200ms;
168-
169-
span {
170-
padding: 3px 15px 3px 45px;
171-
display: block;
172-
}
173164

174165
span > span {
175166
display: block;
@@ -181,21 +172,6 @@
181172
button {
182173
display: block;
183174
padding: 4px 15px;
184-
185-
&:hover, &:focus {
186-
color: variables.$global-text-color;
187-
background: #f2f2f2;
188-
}
189-
190-
&.more-link {
191-
text-align: center;
192-
color: variables.$l-blue;
193-
}
194-
}
195-
196-
&:last-child a {
197-
border-bottom-left-radius: variables.$main-border-radius;
198-
border-bottom-right-radius: variables.$main-border-radius;
199175
}
200176
}
201177
}

‎src/styles/components/_header.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
height: $height;
3737
box-shadow: 0 1px 3px 1px rgba(variables.$black, 0.3);
3838
position: relative;
39-
border-bottom: 1px solid #1d3041;
40-
background: linear-gradient(to bottom, #388ed6, #2075b1);
39+
border-bottom: 1px solid color.adjust(variables.$d-blue, $lightness: -5%); //1d3041;
40+
background: linear-gradient(to bottom, variables.$l-blue, color.adjust(variables.$l-blue, $lightness: -9%)); //2075b1
4141

4242
.header-branding {
4343
float: left;
@@ -220,10 +220,10 @@
220220
.menu-top {
221221
width: 80px;
222222
height: 42px;
223-
background: #243e55;
223+
background: color.adjust(variables.$d-blue, $lightness: -3%);
224224
border-top-left-radius: 4px;
225225
border-top-right-radius: 4px;
226-
border: variables.$thin-border-stroke color.adjust(#1e364b, $lightness: -3%);
226+
border: variables.$thin-border-stroke color.adjust(variables.$d-blue, $lightness: -12%);
227227
border-bottom: none;
228228
margin: 0 variables.$side-margin;
229229
position: relative;
@@ -232,13 +232,13 @@
232232
width: 100%;
233233
height: 100%;
234234
font-size: 22px;
235-
color: #9badbb;
235+
color: variables.$color-silver; //9badbb;
236236
display: flex;
237237
align-items: center;
238238
justify-content: center;
239239

240240
&:hover {
241-
color: #b9c6d0;
241+
color: variables.$off-white; //b9c6d0;
242242
}
243243
}
244244
}

‎src/styles/components/_inputs.scss‎

Lines changed: 0 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -94,55 +94,6 @@ select[multiple] {
9494
}
9595
}
9696

97-
// Input made by Joshua Hibbert | http://codepen.io/joshnh/pen/hjbuH
98-
input[type="checkbox"].ios,
99-
input[type="radio"].ios {
100-
101-
$white: variables.$white;
102-
$grey: #d3d3d3;
103-
$transition-duration: 250ms;
104-
105-
background-color: color.adjust($white, $lightness: -2%);
106-
border: 1px solid $grey;
107-
border-radius: 26px;
108-
box-shadow: inset 0 0 0 1px $grey;
109-
cursor: pointer;
110-
height: 28px;
111-
position: relative;
112-
transition: border $transition-duration 150ms, box-shadow $transition-duration 300ms, padding $transition-duration;
113-
width: 44px;
114-
vertical-align: top;
115-
116-
&:after {
117-
background-color: $white;
118-
border: 1px solid $grey;
119-
border-radius: 24px;
120-
box-shadow: inset 0 -3px 3px hsla(0, 0%, 0%, 0.025), 0 1px 4px hsla(0, 0%, 0%, 0.15), 0 4px 4px hsla(0, 0%, 0%, 0.1);
121-
content: '';
122-
display: block;
123-
height: 24px;
124-
left: 0;
125-
position: absolute;
126-
right: 16px;
127-
top: 0;
128-
transition: border 250ms 150ms, left 250ms 100ms, right 150ms 175ms;
129-
}
130-
131-
&:checked {
132-
border-color: variables.$green;
133-
box-shadow: inset 0 0 0 13px variables.$green;
134-
padding-left: 18px;
135-
transition: border 250ms, box-shadow 250ms, padding 250ms 150ms;
136-
137-
&:after {
138-
border-color: variables.$green;
139-
left: 16px;
140-
right: 0;
141-
transition: border 250ms, left 150ms 250ms, right 250ms 175ms;
142-
}
143-
}
144-
}
145-
14697
.search-container {
14798
width: 100% !important;
14899
height: 40px;

‎src/styles/components/_menu-dropdown.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
$point-position-from-right: 10px;
4141

4242
// Link Properties (List Items)
43-
$link-hover-color: rgba(variables.$black, 0.05);
4443
$link-padding: 8px 15px;
4544
$link-transition-property: background, color;
4645
$link-transition-duration: 250ms;
@@ -68,7 +67,8 @@
6867
text-align: left;
6968

7069
&:hover, &:focus {
71-
background: $link-hover-color;
70+
color: variables.$off-white;
71+
background: variables.$bright-blue;
7272
}
7373
}
7474

‎src/styles/components/_menu.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
float: left;
3030
width: 80px;
3131
background: variables.$white;
32-
border: variables.$thin-border-stroke #c3cbd0;
32+
border: variables.$thin-border-stroke variables.$color-silver;
3333
border-top: none;
3434
border-bottom-left-radius: 4px;
3535
border-bottom-right-radius: 4px;
@@ -64,7 +64,7 @@
6464
font-size: 29px;
6565
vertical-align: middle;
6666
transition: all .2s;
67-
color: #818181;
67+
color: variables.$color-gray;
6868
}
6969

7070
&:hover > .main-nav-icon,

‎src/styles/components/_multi-value.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
}
2020

2121
&-green {
22-
background: #4bcc8f;
22+
background: variables.$primary-color-green-light-1;
2323
}
2424

2525
&-red {
26-
background: #ff0000;
26+
background: variables.$red;
2727
}
2828
}

0 commit comments

Comments
 (0)