Skip to content

Commit e193ab0

Browse files
svrmnkHaarolean
svrmnk
and
Haarolean
authored
FE: UX: Redesign dropdown (#387)
Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>
1 parent 7409d4e commit e193ab0

File tree

3 files changed

+137
-6
lines changed

3 files changed

+137
-6
lines changed

‎frontend/src/components/common/MultiSelect/MultiSelect.styled.ts

Lines changed: 114 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,123 @@ const MultiSelect = styled(ReactMultiSelect)<{
2828
background-color: ${({ theme }) =>
2929
theme.select.backgroundColor.active} !important;
3030
}
31-
.options li {
31+
32+
.options li .select-item,
33+
.options .select-item {
34+
display: flex;
35+
align-items: center;
36+
3237
background-color: ${({ theme }) =>
3338
theme.select.backgroundColor.normal} !important;
39+
40+
input[type='checkbox'] {
41+
appearance: none;
42+
-webkit-appearance: none;
43+
position: relative;
44+
45+
display: flex;
46+
align-items: center;
47+
}
48+
49+
.item-renderer span {
50+
color: ${({ theme }) => theme.select.color.normal} !important;
51+
}
52+
53+
&::before {
54+
content: ' ';
55+
flex-shrink: 0;
56+
display: block;
57+
margin: 0 8px 0 0;
58+
width: 16px;
59+
height: 16px;
60+
border-radius: 3px;
61+
62+
vertical-align: middle;
63+
64+
border: 1px solid
65+
${({ theme }) => theme.select.multiSelectOption.checkbox.borderColor} !important;
66+
background-color: ${({ theme }) =>
67+
theme.select.multiSelectOption.checkbox.backgroundColor} !important;
68+
}
69+
70+
&:hover {
71+
background-color: ${({ theme }) =>
72+
theme.select.backgroundColor.hover} !important;
73+
74+
.item-renderer span {
75+
color: ${({ theme }) => theme.select.color.hover} !important;
76+
}
77+
}
78+
79+
&.selected {
80+
background-color: ${({ theme }) =>
81+
theme.select.backgroundColor.active} !important;
82+
83+
.item-renderer span {
84+
color: ${({ theme }) => theme.select.color.active} !important;
85+
}
86+
87+
&::before {
88+
border-width: 2px !important;
89+
border-radius: 4px !important;
90+
border-color: ${({ theme }) => theme.select.color.active} !important;
91+
background-color: ${({ theme }) =>
92+
theme.select.backgroundColor.active} !important;
93+
}
94+
95+
input[type='checkbox']::before {
96+
content: ' ';
97+
position: absolute;
98+
top: -5px;
99+
left: -24px;
100+
101+
width: 17px;
102+
height: 1px;
103+
transform: rotate(45deg);
104+
background-color: ${({ theme }) =>
105+
theme.select.color.active} !important;
106+
}
107+
input[type='checkbox']::after {
108+
content: ' ';
109+
position: absolute;
110+
top: -5px;
111+
left: -25px;
112+
113+
width: 17px;
114+
height: 1px;
115+
transform: rotate(-45deg);
116+
background-color: ${({ theme }) =>
117+
theme.select.color.active} !important;
118+
}
119+
120+
&:hover {
121+
background-color: ${({ theme }) =>
122+
theme.select.backgroundColor.hover} !important;
123+
124+
.item-renderer span {
125+
color: ${({ theme }) => theme.select.color.hover} !important;
126+
}
127+
128+
input[type='checkbox']::before,
129+
input[type='checkbox']::after {
130+
background-color: ${({ theme }) =>
131+
theme.select.color.hover} !important;
132+
}
133+
134+
&::before {
135+
border-color: ${({ theme }) => theme.select.color.hover} !important;
136+
background-color: ${({ theme }) =>
137+
theme.select.backgroundColor.hover} !important;
138+
}
139+
}
140+
}
141+
142+
&.disabled:before {
143+
background: #eee;
144+
color: #aaa;
145+
}
34146
}
147+
35148
& > .dropdown-container {
36149
background-color: ${({ theme }) =>
37150
theme.input.backgroundColor.normal} !important;

‎frontend/src/components/common/Select/Select.styled.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const OptionList = styled.ul`
7575
max-height: 228px;
7676
margin-top: 4px;
7777
background-color: ${({ theme }) => theme.select.backgroundColor.normal};
78-
border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
78+
border: 1px ${({ theme }) => theme.select.optionList.borderColor} solid;
7979
border-radius: 4px;
8080
font-size: 14px;
8181
line-height: 18px;
@@ -116,11 +116,15 @@ export const Option = styled.li<OptionProps>`
116116
theme.select.color[disabled ? 'disabled' : 'normal']};
117117
118118
&:hover {
119+
color: ${({ theme, disabled }) =>
120+
theme.select.color[disabled ? 'disabled' : 'hover']};
119121
background-color: ${({ theme, disabled }) =>
120122
theme.select.backgroundColor[disabled ? 'normal' : 'hover']};
121123
}
122124
123125
&:active {
126+
color: ${({ theme, disabled }) =>
127+
theme.select.color[disabled ? 'disabled' : 'active']};
124128
background-color: ${({ theme }) => theme.select.backgroundColor.active};
125129
}
126130
`;

‎frontend/src/theme/theme.ts

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -478,7 +478,7 @@ export const theme = {
478478
},
479479
dropdown: {
480480
backgroundColor: Colors.brand[0],
481-
borderColor: Colors.brand[5],
481+
borderColor: Colors.brand[10],
482482
shadow: Colors.transparency[20],
483483
item: {
484484
color: {
@@ -765,11 +765,11 @@ export const theme = {
765765
select: {
766766
backgroundColor: {
767767
normal: Colors.neutral[0],
768-
hover: Colors.neutral[10],
768+
hover: Colors.neutral[5],
769769
active: Colors.neutral[10],
770770
},
771771
color: {
772-
normal: Colors.neutral[90],
772+
normal: Colors.neutral[70],
773773
hover: Colors.neutral[90],
774774
active: Colors.neutral[90],
775775
disabled: Colors.neutral[30],
@@ -781,10 +781,17 @@ export const theme = {
781781
disabled: Colors.neutral[10],
782782
},
783783
optionList: {
784+
borderColor: Colors.neutral[10],
784785
scrollbar: {
785786
backgroundColor: Colors.neutral[30],
786787
},
787788
},
789+
multiSelectOption: {
790+
checkbox: {
791+
backgroundColor: Colors.neutral[0],
792+
borderColor: Colors.neutral[50],
793+
},
794+
},
788795
label: Colors.neutral[50],
789796
},
790797
input: {
@@ -1359,7 +1366,7 @@ export const darkTheme: ThemeType = {
13591366
active: Colors.neutral[70],
13601367
},
13611368
color: {
1362-
normal: Colors.neutral[0],
1369+
normal: Colors.neutral[20],
13631370
hover: Colors.neutral[0],
13641371
active: Colors.neutral[0],
13651372
disabled: Colors.neutral[60],
@@ -1371,10 +1378,17 @@ export const darkTheme: ThemeType = {
13711378
disabled: Colors.neutral[70],
13721379
},
13731380
optionList: {
1381+
borderColor: Colors.neutral[70],
13741382
scrollbar: {
13751383
backgroundColor: Colors.neutral[30],
13761384
},
13771385
},
1386+
multiSelectOption: {
1387+
checkbox: {
1388+
backgroundColor: Colors.neutral[90],
1389+
borderColor: Colors.neutral[50],
1390+
},
1391+
},
13781392
label: Colors.neutral[50],
13791393
},
13801394
input: {

0 commit comments

Comments
 (0)