Add style to Media menu

src/client/components/Media.tsx

@@ -56,7 +56,6 @@ export const Media = c(React.memo(function Media(props: MediaProps) {
 
   return (
     <form className='media' onSubmit={onSave}>
-      <label htmlFor='video-input'>Video</label>
       <select
         name='video-input'
         onChange={onVideoChange}
@@ -69,7 +68,6 @@ export const Media = c(React.memo(function Media(props: MediaProps) {
         />
       </select>
 
-      <label htmlFor='video-input'>Audio</label>
       <select
         name='audio-input'
         onChange={onAudioChange}
@@ -95,11 +93,17 @@ interface OptionsProps {
   default: string
 }
 
+const labels = {
+  audioinput: 'Audio',
+  videoinput: 'Video',
+}
+
 function Options(props: OptionsProps) {
+  const label = labels[props.type]
   return (
     <React.Fragment>
-      <option value='false'>Disabled</option>
+      <option value='false'>{label} disabled</option>
-      <option value={props.default}>Default</option>
+      <option value={props.default}>Default {label}</option>
       {
         props.devices
         .filter(device => device.type === props.type)

src/scss/_media.scss

@@ -0,0 +1,41 @@
+form.media {
+  max-width: 440px;
+  text-align: center;
+  position: absolute;
+  z-index: 100;
+  left: 50%;
+  top: 100px;
+  transform: translateX(-50%);
+
+  & > * {
+    margin: 0.25rem;
+  }
+
+  select {
+    padding: 15px 10px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;       /* Remove default arrow */
+    border: none;
+    border-radius: 4px;
+    border-bottom: 2px solid darken(#fff, 10%);
+    text-align: center;
+  }
+
+  select, button {
+    font-size: 1.2rem;
+  }
+
+  button {
+    @include button($color-primary, $color-warning);
+    padding: 1rem;
+
+    &:hover {
+      @include button($color-primary, darken($color-warning, 5%));
+    }
+
+    &:active {
+      @include button($color-primary, darken($color-warning, 10%));
+    }
+  }
+}

src/scss/style.scss

@@ -49,6 +49,17 @@ body.call {
   border: 0;
 }
 
+@mixin button($color-fg, $color-bg) {
+  background-color: $color-bg;
+  border: none;
+  border-bottom: 2px solid darken($color-bg, 10%);
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: $color-fg;
+  // font-size: 1.2rem;
+  text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.6);
+}
+
 #form {
   padding-top: 50px;
   text-align: center;
@@ -68,22 +79,11 @@ body.call {
     color: $color-primary;
   }
 
-  @mixin button($color-fg, $color-bg) {
-    background-color: $color-bg;
-    border: none;
-    border-bottom: 2px solid darken($color-bg, 10%);
-    border-radius: 4px;
-    box-sizing: border-box;
-    color: $color-fg;
-    // font-size: 1.2rem;
-    text-shadow: 0 0 0.35rem rgba(0, 0, 0, 0.6);
-    padding: 1rem 1rem;
-  }
-
   input {
     font-family: $font-monospace;
     @include button($color-primary, $color-warning);
     font-size: 1.1rem;
+    padding: 1rem 1rem;
   }
 
   input:hover {
@@ -142,6 +142,7 @@ body.call {
   @import '_notification';
   @import '_video';
   @import '_chat';
+  @import '_media';
   @import '_toolbar';
 }