Merge pull request #14937 from prlanzarin/u26-ineffable-instants

refactor(audio): style adjustments to AudioSettings device selectors

bigbluebutton-html5/imports/ui/components/audio/audio-settings/component.jsx

@@ -8,6 +8,7 @@ import Styled from './styles';
 import logger from '/imports/startup/client/logger';
 import AudioStreamVolume from '/imports/ui/components/audio/audio-stream-volume/component';
 import LocalEchoContainer from '/imports/ui/components/audio/local-echo/container';
+import DeviceSelector from '/imports/ui/components/audio/device-selector/component';
 import {
   getAudioConstraints,
 } from '/imports/api/audio/client/bridge/service';
@@ -254,7 +255,7 @@ class AudioSettings extends React.Component {
           <Styled.FormElement>
             <Styled.LabelSmall htmlFor="inputDeviceSelector">
               {intl.formatMessage(intlMessages.micSourceLabel)}
-              <Styled.DeviceSelectorSelect
+              <DeviceSelector
                 id="inputDeviceSelector"
                 deviceId={inputDeviceId}
                 kind="audioinput"
@@ -269,7 +270,7 @@ class AudioSettings extends React.Component {
           <Styled.FormElement>
             <Styled.LabelSmall htmlFor="outputDeviceSelector">
               {intl.formatMessage(intlMessages.speakerSourceLabel)}
-              <Styled.DeviceSelectorSelect
+              <DeviceSelector
                 id="outputDeviceSelector"
                 deviceId={outputDeviceId}
                 kind="audiooutput"

bigbluebutton-html5/imports/ui/components/audio/audio-settings/styles.js

@@ -1,13 +1,6 @@
 import styled from 'styled-components';
 import Button from '/imports/ui/components/common/button/component';
-import DeviceSelector from '/imports/ui/components/audio/device-selector/component';
 import { smallOnly } from '/imports/ui/stylesheets/styled-components/breakpoints';
-import {
-  colorWhite,
-  colorGrayLight,
-  colorText,
-} from '/imports/ui/stylesheets/styled-components/palette';
-import { borderSize } from '/imports/ui/stylesheets/styled-components/general';
 
 const FormWrapper = styled.div`
   min-width: 0;
@@ -170,30 +163,6 @@ const BackButton = styled(Button)`
   }
 `;
 
-const DeviceSelectorSelect = styled(DeviceSelector)`
-  -webkit-appearance: none;
-  -webkit-border-radius: 0px;
-  background: ${colorWhite} url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='#667189' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>") no-repeat right .35rem center/.4rem .5rem;
-  background-repeat: no-repeat;
-  border: 0.07rem solid ${colorGrayLight};
-  border-radius: .125rem;
-  color: ${colorText};
-  width: 100%;
-  padding: .4rem;
-
-  &:hover {
-    outline: transparent;
-    outline-style: dotted;
-    outline-width: ${borderSize};
-  }
-
-  &:focus {
-    outline: transparent;
-    outline-width: ${borderSize};
-    outline-style: solid;
-  }
-`;
-
 export default {
   FormWrapper,
   Form,
@@ -206,5 +175,4 @@ export default {
   LabelSmallFullWidth,
   SpacedLeftCol,
   BackButton,
-  DeviceSelectorSelect,
 };

bigbluebutton-html5/imports/ui/components/audio/device-selector/component.jsx

@@ -6,6 +6,7 @@ import browserInfo from '/imports/utils/browserInfo';
 import {
   defineMessages,
 } from 'react-intl';
+import Styled from './styles';
 
 const propTypes = {
   intl: PropTypes.shape({
@@ -124,7 +125,7 @@ class DeviceSelector extends Component {
 
   render() {
     const {
-      intl, kind, blocked, deviceId, ...props
+      intl, kind, blocked, deviceId,
     } = this.props;
 
     const { options } = this.state;
@@ -143,8 +144,7 @@ class DeviceSelector extends Component {
     }
 
     return (
-      <select
-        {...props}
+      <Styled.Select
         value={deviceId}
         onChange={this.handleSelectChange}
         disabled={!options.length}
@@ -161,7 +161,7 @@ class DeviceSelector extends Component {
             ))
             : notFoundOption
         }
-      </select>
+      </Styled.Select>
     );
   }
 }

bigbluebutton-html5/imports/ui/components/audio/device-selector/styles.js

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+import {
+  borderSize,
+} from '/imports/ui/stylesheets/styled-components/general';
+import {
+  colorGrayLabel,
+  colorWhite,
+  colorGrayLighter,
+  colorPrimary,
+} from '/imports/ui/stylesheets/styled-components/palette';
+
+const Select = styled.select`
+  background-color: ${colorWhite};
+  border: 0.1rem solid ${colorGrayLighter};
+  border-radius: ${borderSize};
+  color: ${colorGrayLabel};
+  width: 100%;
+  height: 2rem;
+  padding: 1px;
+
+  &:focus {
+    outline: none;
+    border-radius: ${borderSize};
+    box-shadow: 0 0 0 ${borderSize} ${colorPrimary}, inset 0 0 0 1px ${colorPrimary};
+  }
+
+  &:hover,
+  &:focus {
+    outline: transparent;
+    outline-style: dotted;
+    outline-width: ${borderSize};
+  }
+`;
+
+export default {
+  Select,
+};