Large compress select

src/components/Options/index.tsx

@@ -40,6 +40,7 @@ import { DownloadIcon } from '../../lib/icons';
 import { SourceImage } from '../App';
 import Checkbox from '../checkbox';
 import Expander from '../expander';
+import Select from '../select';
 
 const encoderOptionsComponentMap = {
   [identity.type]: undefined,
@@ -177,18 +178,23 @@ export default class Options extends Component<Props, State> {
           : null}
         </Expander>
 
-        {/*<section class={style.picker}>
+        <h2 class={style.optionsTitle}>Compress</h2>
+
+        <section class={`${style.optionOneCell} ${style.optionsSection}`}>
           {encoderSupportMap ?
-            <select value={encoderState.type} onChange={this.onEncoderTypeChange}>
+            <Select value={encoderState.type} onChange={this.onEncoderTypeChange} large>
               {encoders.filter(encoder => encoderSupportMap[encoder.type]).map(encoder => (
                 <option value={encoder.type}>{encoder.label}</option>
               ))}
-            </select>
+            </Select>
             :
-            <select><option>Loading…</option></select>
+            <Select large><option>Loading…</option></Select>
           }
         </section>
 
+
+        {/*
+
         {EncoderOptionComponent &&
           <EncoderOptionComponent
             options={

src/components/select/index.tsx

@@ -1,14 +1,18 @@
 import { h, Component } from 'preact';
 import * as style from './style.scss';
 
-interface Props extends JSX.HTMLAttributes {}
+interface Props extends JSX.HTMLAttributes {
+  large?: boolean;
+}
 interface State {}
 
 export default class Select extends Component<Props, State> {
   render(props: Props) {
+    const { large, ...otherProps } = props;
+
     return (
       <div class={style.select}>
-        <select class={style.nativeSelect} {...props}/>
+        <select class={`${style.nativeSelect} ${large ? style.large : ''}`} {...otherProps}/>
         <svg class={style.arrow} viewBox="0 0 10 5"><path d="M0 0l5 5 5-5z"/></svg>
       </div>
     );

src/components/select/style.scss

@@ -22,3 +22,12 @@
   fill: #fff;
   width: 10px;
 }
+
+.large {
+  padding: 10px 35px 10px 10px;
+  background: #151515;
+
+  & .arrow {
+    right: 13px;
+  }
+}