Update select styles

swiftyapp · Aug 11, 2021 · d264f88 · d264f88
1 parent f13af4f
commit d264f88
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/renderer/javascripts/components/main/sidebar/settings/language.js b/src/renderer/javascripts/components/main/sidebar/settings/language.js
@@ -19,16 +19,18 @@ const Language = ({ section }) => {
   return (
     <>
       <h1>{i18n('Language')}</h1>
-      <select
-        name="locale"
-        onChange={({ target }) => setLanguage(target.value)}
-      >
-        {Object.keys(languages).map(key => (
-          <option key={key} value={key}>
-            {languages[key]}
-          </option>
-        ))}
-      </select>
+      <div className="select">
+        <select
+          name="locale"
+          onChange={({ target }) => setLanguage(target.value)}
+        >
+          {Object.keys(languages).map(key => (
+            <option key={key} value={key}>
+              {languages[key]}
+            </option>
+          ))}
+        </select>
+      </div>
     </>
   )
 }

diff --git a/src/renderer/stylesheets/components/select.sass b/src/renderer/stylesheets/components/select.sass
@@ -1,7 +1,21 @@
+.select
+  position: relative
+  &::after
+    position: absolute
+    display: block
+    content: ""
+    width: 0.8em
+    height: 0.5em
+    top: 14px
+    right: 14px
+    background-color: #777
+    clip-path: polygon(100% 0%, 0 0%, 50% 100%)
+
 select
   font-size: 14px
   width: 100%
   padding: 8px 10px
   border: 1px solid #ddd
   border-radius: 5px
+  outline: none
   -webkit-appearance: none