change select style (#7236)

frontend/src/components/common/group-select/index.css

@@ -11,13 +11,10 @@
   max-width: 900px;
   user-select: none;
   text-align: left;
-  border-color: hsl(0, 0%, 80%);
+  border-color: 1px solid rgba(0, 40, 100, 0.12);
   height: auto;
   min-height: 38px;
-}
-
-.group-select.custom-select:hover {
-  border-color: hsl(0, 0%, 70%);
+  cursor: pointer;
 }
 
 .group-select.custom-select:focus,
@@ -34,11 +31,6 @@
   cursor: default;
 }
 
-.group-select.custom-select:hover {
-  cursor: pointer;
-  border-color: rgb(179, 179, 179);
-}
-
 .group-select .sf3-font-down {
   display: inline-block;
   color: #999;

frontend/src/components/common/select/seahub-select-style.js

@@ -1,3 +1,44 @@
+// Seahub select is based on seafile-ui.css, so use the following content to override the default react-select style
+const DEFAULT_CONTROL_STYLE = {
+  border: '1px solid rgba(0, 40, 100, 0.12) !important',
+};
+
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  backgroundColor: '#ffffff',
+  borderColor: '#1991eb',
+  outline: '0',
+  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)',
+};
+
+const noneCallback = () => ({
+  display: 'none',
+});
+
+const controlCallback = (provided, state) => {
+  const { isDisabled, isFocused } = state;
+  if (isFocused && !isDisabled) {
+    return {
+      ...provided,
+      ...FOCUS_CONTROL_STYLE,
+      '&:hover': {
+        ...provided,
+        ...FOCUS_CONTROL_STYLE,
+      }
+    };
+  }
+  return {
+    ...provided,
+    fontSize: '14px',
+    lineHeight: '1.5',
+    cursor: 'pointer',
+    ...DEFAULT_CONTROL_STYLE,
+    '&:hover': {
+      ...DEFAULT_CONTROL_STYLE,
+    }
+  };
+};
+
 const MenuSelectStyle = {
   option: (provided, state) => {
     const { isDisabled, isSelected, isFocused } = state;
@@ -10,14 +51,9 @@ const MenuSelectStyle = {
       },
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
+  control: controlCallback,
   menuPortal: base => ({ ...base, zIndex: 9999 }),
-  indicatorSeparator: () => {},
+  indicatorSeparator: noneCallback,
 };
 
 const UserSelectStyle = {
@@ -29,21 +65,10 @@ const UserSelectStyle = {
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
-  indicatorSeparator: () => ({
-    display: 'none',
-  }),
-  dropdownIndicator: () => ({
-    display: 'none',
-  }),
-  clearIndicator: () => ({
-    display: 'none',
-  }),
+  control: controlCallback,
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
   // multi select style
   multiValue: (provided) => {
     return {