styled selectbox

app/main.css

@@ -231,6 +231,12 @@ progress::-moz-progress-bar {
   }
 }
 
+select {
+  background-image: url('../assets/select-arrow.svg');
+  background-position: calc(100% - 0.75rem);
+  background-repeat: no-repeat;
+}
+
 @screen md {
   .header-logo {
     background-image: url('../assets/logo.svg');
@@ -251,10 +257,6 @@ progress::-moz-progress-bar {
 
 @tailwind utilities;
 
-.word-break-all {
-  word-break: break-all;
-}
-
 @responsive {
   .shadow-light {
     box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1);
@@ -265,3 +267,7 @@ progress::-moz-progress-bar {
       0 2px 16px 0 rgba(12, 12, 13, 0.05);
   }
 }
+
+.word-break-all {
+  word-break: break-all;
+}

app/ui/archiveTile.js

@@ -46,7 +46,7 @@ function password(state) {
         id="password-input"
         class="${state.archive.password
           ? ''
-          : 'invisible'} border rounded-sm focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
+          : 'invisible'} border rounded focus:border-blue-dark leading-normal my-1 py-1 px-2 h-8"
         autocomplete="off"
         maxlength="${MAX_LENGTH}"
         type="password"

app/ui/copyDialog.js

@@ -14,7 +14,7 @@ module.exports = function(name, url) {
         <input
           type="text"
           id="share-url"
-          class="w-full my-4 border rounded leading-loose h-12 px-2 py-1"
+          class="w-full my-4 border rounded-lg leading-loose h-12 px-2 py-1"
           value="${url}"
           readonly="true"
         />
@@ -22,7 +22,7 @@ module.exports = function(name, url) {
           ${state.translate('copyUrlFormButton')}
         </button>
         <a
-          class="text-blue hover:text-blue-dark focus:text-blue-darker my-4 font-medium cursor-pointer"
+          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer"
           onclick="${close}"
           >${state.translate('okButton')}</a
         >

app/ui/selectbox.js

@@ -6,7 +6,7 @@ module.exports = function(selected, options, translate, changed, htmlId) {
   return html`
     <select
       id="${htmlId}"
-      class="appearance-none cursor-pointer border rounded-sm bg-grey-lightest hover:border-blue-dark focus:border-blue-dark px-2 py-1 my-1 h-8"
+      class="appearance-none cursor-pointer border rounded bg-grey-lightest hover:border-blue-dark focus:border-blue-dark pl-1 pr-8 py-1 my-1 h-8"
       onchange="${choose}"
     >
       ${options.map(

app/ui/signupDialog.js

@@ -25,7 +25,7 @@ module.exports = function(trigger) {
         <input
           id="email-input"
           type="text"
-          class="${hidden} border rounded w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
+          class="${hidden} border rounded-lg w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
           placeholder=${state.translate('emailEntryPlaceholder')} />
         <input
           class="hidden"
@@ -36,7 +36,7 @@ module.exports = function(trigger) {
         ${state.translate('signInMenuOption')}
       </label>
       <button
-        class="my-4 text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
+        class="my-4 text-blue-dark hover:text-blue-darker focus:text-blue-darker font-medium"
         title="${state.translate('deletePopupCancel')}"
         onclick=${cancel}>${state.translate('deletePopupCancel')}
       </button>

assets/select-arrow.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="6px" viewBox="0 0 8 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 53 (72520) - https://sketchapp.com -->
+    <title>37845F0A-2932-4C2D-98E1-89BE1B168092</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <path d="M6,8.48771202 C5.73480519,8.48765538 5.48049273,8.3822614 5.293,8.19471202 L2.293,5.19471202 C1.91402779,4.80233313 1.91944763,4.17862724 2.30518142,3.79289345 C2.69091522,3.40715965 3.31462111,3.40173981 3.707,3.78071202 L6,6.07371202 L8.293,3.78071202 C8.68537889,3.40173981 9.30908478,3.40715965 9.69481858,3.79289345 C10.0805524,4.17862724 10.0859722,4.80233313 9.707,5.19471202 L6.707,8.19471202 C6.51950727,8.3822614 6.26519481,8.48765538 6,8.48771202 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Components-Sheet" transform="translate(-199.000000, -489.000000)">
+            <g id="Dropdown-1" transform="translate(52.000000, 475.707031)">
+                <g id="Arrow-Icon" transform="translate(145.000000, 10.000000)">
+                    <rect id="bouding-box" x="0" y="0" width="12" height="12"></rect>
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="Shape" fill="#0C0C0D" fill-rule="nonzero" opacity="0.599283854" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>