Skip to content

Commit e9476a9

Browse files
kkartunovkkartunov
committed
GUI challenge fixes
1 parent 2f14cfb commit e9476a9

File tree

11 files changed

+62
-34
lines changed

11 files changed

+62
-34
lines changed

‎src/shared/components/GUIKit/Assets/Styles/Includes/_mixin.scss

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
// GUIKit colors
2+
$gui-kit-gray-30: #aaa;
3+
$gui-kit-gray-90: #2a2a2a;
4+
$gui-kit-level-2: #0ab88a;
5+
16
@mixin textInputLabel {
27
font-size: 12px;
38
line-height: 24px;
@@ -6,12 +11,12 @@
611
top: 0;
712
left: 8px;
813
padding: 0 8px;
9-
color: $tc-gray-30;
14+
color: $gui-kit-gray-30;
1015
display: none;
1116
}
1217

1318
@mixin textInput {
14-
border: 1px solid $tc-gray-30;
19+
border: 1px solid $gui-kit-gray-30;
1520
border-radius: 6px;
1621
font-size: 16px;
1722
padding: 15px;
@@ -20,26 +25,31 @@
2025

2126
&::-webkit-input-placeholder {
2227
/* Edge */
23-
color: $tc-gray-30;
28+
color: $gui-kit-gray-30;
2429
opacity: 1;
2530
text-transform: none;
2631
font-size: 16px;
2732
}
2833

2934
&:-ms-input-placeholder {
3035
/* Internet Explorer 10-11 */
31-
color: $tc-gray-30;
36+
color: $gui-kit-gray-30;
3237
opacity: 1;
3338
text-transform: none;
3439
font-size: 16px;
3540
}
3641

3742
&::placeholder {
38-
color: $tc-gray-30;
43+
color: $gui-kit-gray-30;
3944
opacity: 1;
4045
text-transform: none;
4146
font-size: 16px;
4247
}
48+
49+
&:focus {
50+
border: 1px solid $gui-kit-gray-30;
51+
box-shadow: none;
52+
}
4353
}
4454

4555
@mixin textInputXs {

‎src/shared/components/GUIKit/Checkbox/style.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
top: 0;
77
left: 0;
88
background-color: $tc-white;
9-
border: 1px solid $tc-gray-30;
9+
border: 1px solid $gui-kit-gray-30;
1010

1111
/* Create the checkmark/indicator (hidden when not checked) */
1212
.after {
@@ -96,7 +96,7 @@
9696

9797
/* When the checkbox is checked, add a blue background */
9898
&:checked ~ .checkmark {
99-
background-color: $tc-level-2;
99+
background-color: $gui-kit-level-2;
100100
border: none;
101101
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
102102

‎src/shared/components/GUIKit/Datepicker/style.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
}
1616

1717
&.isFocused .label {
18-
color: $tc-level-2;
18+
color: $gui-kit-level-2;
1919
}
2020

2121
&.haveError .label,
@@ -64,7 +64,7 @@
6464
top: 64px !important;
6565

6666
.DayPicker__withBorder {
67-
border: 1px solid $tc-gray-30;
67+
border: 1px solid $gui-kit-gray-30;
6868
box-shadow: 2px 2px 3px 0 $tc-gray-neutral-light;
6969
overflow: hidden;
7070
}
@@ -79,7 +79,7 @@
7979

8080
svg {
8181
path {
82-
fill: $tc-level-2;
82+
fill: $gui-kit-level-2;
8383
}
8484
}
8585

@@ -115,7 +115,7 @@
115115
.DayPicker_weekHeader_ul {
116116
.DayPicker_weekHeader_li {
117117
small {
118-
color: $tc-gray-90;
118+
color: $gui-kit-gray-90;
119119
font-weight: 500 !important;
120120
}
121121
}
@@ -157,7 +157,7 @@
157157
background: transparent !important;
158158

159159
div {
160-
background: $tc-level-2;
160+
background: $gui-kit-level-2;
161161
}
162162
}
163163

‎src/shared/components/GUIKit/Dropdown/style.scss

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333

3434
&.isFocused {
3535
.label {
36-
color: $tc-level-2;
36+
color: $gui-kit-level-2;
3737
}
3838

3939
.iconDropdown {
@@ -54,7 +54,7 @@
5454
.Select-control {
5555
margin: 0;
5656
padding: 0;
57-
border: 1px solid $tc-gray-30 !important;
57+
border: 1px solid $gui-kit-gray-30 !important;
5858
border-radius: 6px !important;
5959
height: 52px;
6060
outline: none !important;
@@ -67,6 +67,11 @@
6767
padding: 0;
6868
height: 22px;
6969
line-height: 22px;
70+
71+
&:focus {
72+
border: none;
73+
box-shadow: none;
74+
}
7075
}
7176
}
7277

@@ -88,7 +93,7 @@
8893
}
8994

9095
.Select-placeholder {
91-
color: $tc-gray-30;
96+
color: $gui-kit-gray-30;
9297
opacity: 1;
9398
text-transform: none;
9499
font-size: 16px;
@@ -127,7 +132,7 @@
127132

128133
.Select-menu-outer {
129134
top: calc(100% + 2px) !important;
130-
border: 1px solid $tc-gray-30 !important;
135+
border: 1px solid $gui-kit-gray-30 !important;
131136
border-radius: 0 !important;
132137
max-height: 269px;
133138
z-index: 7;
@@ -139,15 +144,15 @@
139144
padding: 0 15px !important;
140145
font-size: 16px !important;
141146
line-height: 30px !important;
142-
color: $tc-gray-90 !important;
147+
color: $gui-kit-gray-90 !important;
143148
background-color: transparent !important;
144149

145150
&.is-selected {
146151
font-weight: bold !important;
147152
}
148153

149154
&:hover {
150-
background-color: $tc-level-2 !important;
155+
background-color: #229173 !important;
151156
color: $tc-white !important;
152157
}
153158
}
@@ -169,6 +174,12 @@
169174
.Select-control {
170175
height: 52px;
171176
}
177+
178+
.Select-input {
179+
input {
180+
height: 52px;
181+
}
182+
}
172183
}
173184
}
174185

@@ -182,6 +193,7 @@
182193
.Select-input {
183194
input {
184195
font-size: 14px;
196+
height: 40px;
185197
}
186198
}
187199

‎src/shared/components/GUIKit/DropdownTerms/index.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@ function DropdownTerms({
4747
selectInput[0].style.top = focused ? `${height1 + height2 - 1}px` : '0';
4848
inputField = selectInput[0].getElementsByTagName('input');
4949
inputField[0].placeholder = focused ? addNewOptionPlaceholder : '';
50+
inputField[0].style.border = 'none';
51+
inputField[0].style.boxShadow = 'none';
5052
}
5153
}, [focused, selectedOption]);
5254

‎src/shared/components/GUIKit/DropdownTerms/style.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
padding: 0 !important;
5252
border-radius: 5px !important;
5353
font-size: 12 !important;
54-
color: $tc-gray-90 !important;
54+
color: $gui-kit-gray-90 !important;
5555
padding-left: 7px !important;
5656
margin-top: 0 !important;
5757
margin-bottom: 5px !important;
@@ -64,7 +64,7 @@
6464
border-right: none !important;
6565
padding: 0 7px !important;
6666
margin: 0 !important;
67-
color: $tc-gray-90 !important;
67+
color: $gui-kit-gray-90 !important;
6868
background: transparent !important;
6969
}
7070

@@ -74,8 +74,9 @@
7474
white-space: nowrap;
7575
overflow: hidden;
7676
text-overflow: ellipsis;
77-
color: $tc-gray-90 !important;
77+
color: $gui-kit-gray-90 !important;
7878
text-decoration: none !important;
79+
font-size: 12px;
7980
}
8081
}
8182

@@ -107,7 +108,7 @@
107108
.Select-input {
108109
background: $tc-white;
109110
height: 40px !important;
110-
border: 1px solid $tc-gray-30;
111+
border: 1px solid $gui-kit-gray-30;
111112
right: -1px;
112113
left: -1px;
113114
cursor: auto;
@@ -119,22 +120,22 @@
119120

120121
&::-webkit-input-placeholder {
121122
/* Edge */
122-
color: $tc-gray-30;
123+
color: $gui-kit-gray-30;
123124
opacity: 1;
124125
text-transform: none;
125126
font-size: 16px;
126127
}
127128

128129
&:-ms-input-placeholder {
129130
/* Internet Explorer 10-11 */
130-
color: $tc-gray-30;
131+
color: $gui-kit-gray-30;
131132
opacity: 1;
132133
text-transform: none;
133134
font-size: 16px;
134135
}
135136

136137
&::placeholder {
137-
color: $tc-gray-30;
138+
color: $gui-kit-gray-30;
138139
opacity: 1;
139140
text-transform: none;
140141
font-size: 16px;

‎src/shared/components/GUIKit/RadioButton/style.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
left: 0;
88
background-color: $tc-white;
99
border-radius: 50%;
10-
border: 1px solid $tc-gray-30;
10+
border: 1px solid $gui-kit-gray-30;
1111

1212
/* Create the indicator (the dot/circle - hidden when not checked) */
1313
&::after {
@@ -44,7 +44,7 @@
4444
-moz-user-select: none;
4545
-ms-user-select: none;
4646
user-select: none;
47-
color: $tc-gray-90;
47+
color: $gui-kit-gray-90;
4848

4949
/* Hide the browser's default radio button */
5050
input {
@@ -54,7 +54,7 @@
5454

5555
/* When the radio button is checked, add a blue background */
5656
&:checked ~ .checkmark {
57-
background-color: $tc-level-2;
57+
background-color: $gui-kit-level-2;
5858
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
5959
border: none;
6060

‎src/shared/components/GUIKit/TextInput/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
}
4747

4848
input:not([type='checkbox']):focus + label {
49-
color: $tc-level-2;
49+
color: $gui-kit-level-2;
5050
}
5151

5252
input:not([type='checkbox']).haveError + label,

‎src/shared/components/GUIKit/Textarea/style.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
}
2626

2727
&:focus ~ label {
28-
color: $tc-level-2;
28+
color: $gui-kit-level-2;
2929
}
3030

3131
&.haveError ~ label,

‎src/shared/components/GUIKit/Toggles/style.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
left: 0;
1313
right: 0;
1414
bottom: 0;
15-
background-color: $tc-gray-30;
15+
background-color: $gui-kit-gray-30;
1616
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
1717

1818
&::before {
@@ -81,11 +81,11 @@
8181
height: 0;
8282

8383
&:focus + .slider {
84-
box-shadow: 0 0 1px $tc-level-2;
84+
box-shadow: 0 0 1px $gui-kit-level-2;
8585
}
8686

8787
&:checked + .slider {
88-
background-color: $tc-level-2;
88+
background-color: $gui-kit-level-2;
8989
}
9090
}
9191

‎src/shared/utils/useWindowSize.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ export default function useWindowSize() {
1111
});
1212

1313
function changeWindowSize() {
14-
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
14+
setWindowSize({
15+
width: isSSR ? window.innerWidth : 1200,
16+
height: isSSR ? window.innerHeight : 800,
17+
});
1518
}
1619

1720
React.useEffect(() => {

0 commit comments

Comments
 (0)