update select styles (#627)

Co-authored-by: Dominik Nowik <[email protected]>

Author: Horay

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@nordcloud/gnui",
   "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products",
-  "version": "8.13.1",
+  "version": "8.13.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -12,7 +12,7 @@ import theme from "../../theme";
 const SelectContainer = styled.div`
   .react-select {
     &-container {
-      & > div {
+      & > .react-select__control {
         background: ${theme.color.field.default};
         border: 1px solid ${theme.color.border.input};
         &:hover {
@@ -63,20 +63,37 @@ const SelectContainer = styled.div`
     }
     &__menu {
       box-shadow: ${theme.shadow.shadow04};
+      margin-top: ${theme.spacing.spacing01};
       z-index: ${theme.zindex.dropdown};
+      border-radius: ${theme.radiusDefault};
+      background: ${theme.color.background.ui01};
+      border: 1px solid ${theme.color.border.input};
+
+      &-list {
+        padding: ${theme.spacing.spacing02};
+      }
     }
     &__option {
+      margin-top: ${theme.spacing.spacing01};
+      border-radius: ${theme.radius.md};
+      &:active {
+        background: ${theme.color.interactive.secondaryActive};
+        color: ${theme.color.text.text01};
+      }
+      &--is-focused {
+        cursor: pointer;
+        background: ${theme.color.interactive.secondaryHover};
+        color: ${theme.color.text.text01};
+      }
       &--is-selected {
-        background-color: ${theme.color.support.grey};
+        cursor: not-allowed;
+        background: ${theme.color.interactive.secondaryHover};
         color: ${theme.color.text.text01};
-        &.react-select__option--is-focused {
-          background-color: ${theme.color.support.grey};
+        &:active {
+          background: ${theme.color.interactive.secondaryHover};
           color: ${theme.color.text.text01};
         }
       }
-      &--is-focused {
-        background-color: ${theme.color.interactive.secondary};
-      }
     }
   }
 `;