Skip to content

Commit 36ce6ea

Browse files
svrmnksvrmnk
committed
feat: add redesign of dropdown
1 parent 79553e4 commit 36ce6ea

File tree

3 files changed

+138
-7
lines changed

3 files changed

+138
-7
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: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -372,7 +372,7 @@ export const theme = {
372372
},
373373
dropdown: {
374374
backgroundColor: Colors.neutral[0],
375-
borderColor: Colors.neutral[5],
375+
borderColor: Colors.neutral[10],
376376
shadow: Colors.transparency[20],
377377
item: {
378378
color: {
@@ -597,11 +597,11 @@ export const theme = {
597597
select: {
598598
backgroundColor: {
599599
normal: Colors.neutral[0],
600-
hover: Colors.neutral[10],
600+
hover: Colors.neutral[5],
601601
active: Colors.neutral[10],
602602
},
603603
color: {
604-
normal: Colors.neutral[90],
604+
normal: Colors.neutral[70],
605605
hover: Colors.neutral[90],
606606
active: Colors.neutral[90],
607607
disabled: Colors.neutral[30],
@@ -613,10 +613,17 @@ export const theme = {
613613
disabled: Colors.neutral[10],
614614
},
615615
optionList: {
616+
borderColor: Colors.neutral[10],
616617
scrollbar: {
617618
backgroundColor: Colors.neutral[30],
618619
},
619620
},
621+
multiSelectOption: {
622+
checkbox: {
623+
backgroundColor: Colors.neutral[0],
624+
borderColor: Colors.neutral[50],
625+
},
626+
},
620627
label: Colors.neutral[50],
621628
},
622629
input: {
@@ -822,7 +829,7 @@ export const darkTheme: ThemeType = {
822829
},
823830
dropdown: {
824831
backgroundColor: Colors.neutral[85],
825-
borderColor: Colors.neutral[80],
832+
borderColor: Colors.neutral[70],
826833
shadow: Colors.transparency[20],
827834
item: {
828835
color: {
@@ -1061,7 +1068,7 @@ export const darkTheme: ThemeType = {
10611068
active: Colors.neutral[70],
10621069
},
10631070
color: {
1064-
normal: Colors.neutral[0],
1071+
normal: Colors.neutral[20],
10651072
hover: Colors.neutral[0],
10661073
active: Colors.neutral[0],
10671074
disabled: Colors.neutral[60],
@@ -1073,10 +1080,17 @@ export const darkTheme: ThemeType = {
10731080
disabled: Colors.neutral[70],
10741081
},
10751082
optionList: {
1083+
borderColor: Colors.neutral[70],
10761084
scrollbar: {
10771085
backgroundColor: Colors.neutral[30],
10781086
},
10791087
},
1088+
multiSelectOption: {
1089+
checkbox: {
1090+
backgroundColor: Colors.neutral[90],
1091+
borderColor: Colors.neutral[50],
1092+
},
1093+
},
10801094
label: Colors.neutral[50],
10811095
},
10821096
input: {

0 commit comments

Comments
 (0)