Fix search input UI (#5769)

* fix code warnings

* change search UI

frontend/src/components/common/switch/index.js

@@ -5,8 +5,7 @@ import classnames from 'classnames';
 import '../../../css/switch.css';
 
 function Switch(props) {
-  const { onChange, checked, placeholder, disabled, className, size } = props;
-
+  const { onChange, checked, placeholder, disabled, className, size, textPosition } = props;
   return(
     <div className={classnames('seahub-switch position-relative', className, size)}>
       <label className="custom-switch">
@@ -18,8 +17,13 @@ function Switch(props) {
           name="custom-switch-checkbox"
           disabled={disabled}
         />
-        <span className="custom-switch-description text-truncate">{placeholder}</span>
-        <span className="custom-switch-indicator"></span>
+        {textPosition === 'left' &&
+          <span className="custom-switch-description text-truncate">{placeholder}</span>
+        }
+        <span className={classnames('custom-switch-indicator', {'disabled': disabled})}></span>
+        {textPosition === 'right' &&
+          <span className="custom-switch-description text-truncate">{placeholder}</span>
+        }
       </label>
     </div>
   );
@@ -31,7 +35,12 @@ Switch.propTypes = {
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   className: PropTypes.string,
   size: PropTypes.oneOf(['large', 'small', undefined]),
-  onChange: PropTypes.func.isRequired,
+  textPosition: PropTypes.oneOf(['left', 'right', undefined]),
+  onChange: PropTypes.func,
+};
+
+Switch.defaultProps = {
+  textPosition: 'left',
 };
 
 export default Switch;