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>