Making language switcher a styled select list

src/components/Header/style.css

@@ -56,7 +56,7 @@
       text-decoration: underline;
     }
 
-    & svg {
+    & a svg {
       display: inline-block;
       width: 1em;
       height: 1em;

src/components/LocaleSwitcher/__snapshots__/test.js.snap

@@ -5,10 +5,14 @@ exports[`LocaleSwitcher rendering 1`] = `
   <Trans>
     Language
   </Trans>
-  <select
+  <div
     className="switcher"
-    onChange={[Function]}
+  >
-    value="en"
+    <select
-  />
+      onChange={[Function]}
+      value="en"
+    />
+    <SvgMock />
+  </div>
 </label>
 `;

src/components/LocaleSwitcher/index.js

@@ -3,6 +3,7 @@ import { translate, Trans } from 'react-i18next';
 import i18n from 'i18next';
 
 import style from './style.css';
+import ExpandIcon from 'feather-icons/dist/icons/chevrons-down.svg';
 
 import locales from 'locales';
 
@@ -52,11 +53,14 @@ class LocaleSwitcher extends React.PureComponent {
 
     return <label>
       <Trans>Language</Trans>
-      <select className={ style.switcher } value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
+      <div className={ style.switcher }>
-        { Object.keys(locales).map(locale => (
+        <select value={ current } ref={ this.localeSelector } onChange={ this.handleSelectChange }>
-          <option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
+          { Object.keys(locales).map(locale => (
-        )) }
+            <option value={ locale } key={ locale }>{ i18n.getFixedT(locale)('/displayName') }</option>
-      </select>
+          )) }
+        </select>
+        <ExpandIcon/>
+      </div>
     </label>;
   }
 }

src/components/LocaleSwitcher/style.css

@@ -1,3 +1,11 @@
-.switcher {
+@import url('../../globals.css');
-  margin-left: 1ex;
+
+:root {
+  --control-gradient: var(--color-tan) var(--gradient-tan);
+  --select-height: 2.4rem;
+  --select-width: 10rem;
+}
+
+.switcher {
+  @apply --fancy-select;
 }

src/globals.css

@@ -11,6 +11,9 @@
   --gradient-green: linear-gradient(to bottom,
     var(--color-green) 0%,
     color(var(--color-green) shade(40%)) 100%);
+  --gradient-tan: linear-gradient(to bottom,
+    var(--color-tan) 0%,
+    color(var(--color-tan) shade(40%)) 100%);
 
   --header-height: 6rem;
   --content-margin: 2rem;