From 41aa869c33cc36fcfc87d16f7623a845b75f8e8b Mon Sep 17 00:00:00 2001
From: narcolepticinsomniac <therealdoctorgonzo@gmail.com>
Date: Thu, 14 Nov 2019 00:50:38 -0500
Subject: [PATCH] Style sync select (#803)

* Style sync select

* Style sync select

* cleanup
---
 global.css          |  5 +++++
 options.html        | 19 +++++++++++++------
 options/options.css |  4 ++++
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/global.css b/global.css
index 16c49b88..c010a958 100644
--- a/global.css
+++ b/global.css
@@ -198,6 +198,11 @@ select[disabled] > option {
   color: graytext;
 }
 
+select:disabled + .select-arrow,
+select[disabled] + .select-arrow {
+  fill: hsl(0, 0%, 50%);
+}
+
 /* global stuff we use everywhere */
 .hidden {
   display: none !important;
diff --git a/options.html b/options.html
index f7c51576..3f3511a7 100644
--- a/options.html
+++ b/options.html
@@ -142,12 +142,15 @@
       <div class="items">
         <label>
           <span class="sync-status"></span>
-          <select class="cloud-name">
-            <option value="none" i18n-text="optionsSyncNone"></option>
-            <option value="dropbox">Dropbox</option>
-            <option value="google">Google Drive</option>
-            <option value="onedrive">OneDrive</option>
-          </select>
+          <div class="select-resizer">
+            <select class="cloud-name">
+              <option value="none" i18n-text="optionsSyncNone"></option>
+              <option value="dropbox">Dropbox</option>
+              <option value="google">Google Drive</option>
+              <option value="onedrive">OneDrive</option>
+            </select>
+            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+          </div>
         </label>
         <div class="actions">
           <button type="button" class="connect" i18n-text="optionsSyncConnect"></button>
@@ -216,6 +219,10 @@
     <symbol id="svg-icon-help" viewBox="0 0 14 16">
       <path fill-rule="evenodd" d="M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z"></path>
     </symbol>
+
+    <symbol id="svg-icon-select-arrow" viewBox="0 0 1792 1792">
+      <path fill-rule="evenodd" d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/>
+    </symbol>
   </svg>
 
   <script src="options/options.js"></script>
diff --git a/options/options.css b/options/options.css
index 570c6341..ca8a2520 100644
--- a/options/options.css
+++ b/options/options.css
@@ -109,6 +109,10 @@ select,
   flex-shrink: 0;
 }
 
+select.cloud-name {
+  width: auto;
+}
+
 button {
   text-align: center;
 }