From 36ce6ea5b168cfe6357d43ce35e441320fb1fb8e Mon Sep 17 00:00:00 2001
From: svrmnk <153510907+svrmnk@users.noreply.github.com>
Date: Tue, 14 May 2024 10:14:01 +0300
Subject: [PATCH] feat: add redesign of dropdown

---
 .../common/MultiSelect/MultiSelect.styled.ts  | 115 +++++++++++++++++-
 .../components/common/Select/Select.styled.ts |   6 +-
 frontend/src/theme/theme.ts                   |  24 +++-
 3 files changed, 138 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/MultiSelect/MultiSelect.styled.ts b/frontend/src/components/common/MultiSelect/MultiSelect.styled.ts
index b05bb6d03..8e3191cd1 100644
--- a/frontend/src/components/common/MultiSelect/MultiSelect.styled.ts
+++ b/frontend/src/components/common/MultiSelect/MultiSelect.styled.ts
@@ -28,10 +28,123 @@ const MultiSelect = styled(ReactMultiSelect)<{
     background-color: ${({ theme }) =>
       theme.select.backgroundColor.active} !important;
   }
-  .options li {
+
+  .options li .select-item,
+  .options .select-item {
+    display: flex;
+    align-items: center;
+
     background-color: ${({ theme }) =>
       theme.select.backgroundColor.normal} !important;
+
+    input[type='checkbox'] {
+      appearance: none;
+      -webkit-appearance: none;
+      position: relative;
+
+      display: flex;
+      align-items: center;
+    }
+
+    .item-renderer span {
+      color: ${({ theme }) => theme.select.color.normal} !important;
+    }
+
+    &::before {
+      content: ' ';
+      flex-shrink: 0;
+      display: block;
+      margin: 0 8px 0 0;
+      width: 16px;
+      height: 16px;
+      border-radius: 3px;
+
+      vertical-align: middle;
+
+      border: 1px solid
+        ${({ theme }) => theme.select.multiSelectOption.checkbox.borderColor} !important;
+      background-color: ${({ theme }) =>
+        theme.select.multiSelectOption.checkbox.backgroundColor} !important;
+    }
+
+    &:hover {
+      background-color: ${({ theme }) =>
+        theme.select.backgroundColor.hover} !important;
+
+      .item-renderer span {
+        color: ${({ theme }) => theme.select.color.hover} !important;
+      }
+    }
+
+    &.selected {
+      background-color: ${({ theme }) =>
+        theme.select.backgroundColor.active} !important;
+
+      .item-renderer span {
+        color: ${({ theme }) => theme.select.color.active} !important;
+      }
+
+      &::before {
+        border-width: 2px !important;
+        border-radius: 4px !important;
+        border-color: ${({ theme }) => theme.select.color.active} !important;
+        background-color: ${({ theme }) =>
+          theme.select.backgroundColor.active} !important;
+      }
+
+      input[type='checkbox']::before {
+        content: ' ';
+        position: absolute;
+        top: -5px;
+        left: -24px;
+
+        width: 17px;
+        height: 1px;
+        transform: rotate(45deg);
+        background-color: ${({ theme }) =>
+          theme.select.color.active} !important;
+      }
+      input[type='checkbox']::after {
+        content: ' ';
+        position: absolute;
+        top: -5px;
+        left: -25px;
+
+        width: 17px;
+        height: 1px;
+        transform: rotate(-45deg);
+        background-color: ${({ theme }) =>
+          theme.select.color.active} !important;
+      }
+
+      &:hover {
+        background-color: ${({ theme }) =>
+          theme.select.backgroundColor.hover} !important;
+
+        .item-renderer span {
+          color: ${({ theme }) => theme.select.color.hover} !important;
+        }
+
+        input[type='checkbox']::before,
+        input[type='checkbox']::after {
+          background-color: ${({ theme }) =>
+            theme.select.color.hover} !important;
+        }
+
+        &::before {
+          border-color: ${({ theme }) => theme.select.color.hover} !important;
+          background-color: ${({ theme }) =>
+            theme.select.backgroundColor.hover} !important;
+        }
+      }
+    }
+
+    &.disabled:before {
+      background: #eee;
+      color: #aaa;
+    }
   }
+
   & > .dropdown-container {
     background-color: ${({ theme }) =>
       theme.input.backgroundColor.normal} !important;
diff --git a/frontend/src/components/common/Select/Select.styled.ts b/frontend/src/components/common/Select/Select.styled.ts
index 9be7ed3db..627366235 100644
--- a/frontend/src/components/common/Select/Select.styled.ts
+++ b/frontend/src/components/common/Select/Select.styled.ts
@@ -75,7 +75,7 @@ export const OptionList = styled.ul`
   max-height: 228px;
   margin-top: 4px;
   background-color: ${({ theme }) => theme.select.backgroundColor.normal};
-  border: 1px ${({ theme }) => theme.select.borderColor.normal} solid;
+  border: 1px ${({ theme }) => theme.select.optionList.borderColor} solid;
   border-radius: 4px;
   font-size: 14px;
   line-height: 18px;
@@ -116,11 +116,15 @@ export const Option = styled.li<OptionProps>`
     theme.select.color[disabled ? 'disabled' : 'normal']};
 
   &:hover {
+    color: ${({ theme, disabled }) =>
+      theme.select.color[disabled ? 'disabled' : 'hover']};
     background-color: ${({ theme, disabled }) =>
       theme.select.backgroundColor[disabled ? 'normal' : 'hover']};
   }
 
   &:active {
+    color: ${({ theme, disabled }) =>
+      theme.select.color[disabled ? 'disabled' : 'active']};
     background-color: ${({ theme }) => theme.select.backgroundColor.active};
   }
 `;
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 53293da32..6a4fb9a86 100644
--- a/frontend/src/theme/theme.ts
+++ b/frontend/src/theme/theme.ts
@@ -372,7 +372,7 @@ export const theme = {
   },
   dropdown: {
     backgroundColor: Colors.neutral[0],
-    borderColor: Colors.neutral[5],
+    borderColor: Colors.neutral[10],
     shadow: Colors.transparency[20],
     item: {
       color: {
@@ -597,11 +597,11 @@ export const theme = {
   select: {
     backgroundColor: {
       normal: Colors.neutral[0],
-      hover: Colors.neutral[10],
+      hover: Colors.neutral[5],
       active: Colors.neutral[10],
     },
     color: {
-      normal: Colors.neutral[90],
+      normal: Colors.neutral[70],
       hover: Colors.neutral[90],
       active: Colors.neutral[90],
       disabled: Colors.neutral[30],
@@ -613,10 +613,17 @@ export const theme = {
       disabled: Colors.neutral[10],
     },
     optionList: {
+      borderColor: Colors.neutral[10],
       scrollbar: {
         backgroundColor: Colors.neutral[30],
       },
     },
+    multiSelectOption: {
+      checkbox: {
+        backgroundColor: Colors.neutral[0],
+        borderColor: Colors.neutral[50],
+      },
+    },
     label: Colors.neutral[50],
   },
   input: {
@@ -822,7 +829,7 @@ export const darkTheme: ThemeType = {
   },
   dropdown: {
     backgroundColor: Colors.neutral[85],
-    borderColor: Colors.neutral[80],
+    borderColor: Colors.neutral[70],
     shadow: Colors.transparency[20],
     item: {
       color: {
@@ -1061,7 +1068,7 @@ export const darkTheme: ThemeType = {
       active: Colors.neutral[70],
     },
     color: {
-      normal: Colors.neutral[0],
+      normal: Colors.neutral[20],
       hover: Colors.neutral[0],
       active: Colors.neutral[0],
       disabled: Colors.neutral[60],
@@ -1073,10 +1080,17 @@ export const darkTheme: ThemeType = {
       disabled: Colors.neutral[70],
     },
     optionList: {
+      borderColor: Colors.neutral[70],
       scrollbar: {
         backgroundColor: Colors.neutral[30],
       },
     },
+    multiSelectOption: {
+      checkbox: {
+        backgroundColor: Colors.neutral[90],
+        borderColor: Colors.neutral[50],
+      },
+    },
     label: Colors.neutral[50],
   },
   input: {