From f0a60d8c8e70ad7855ec64979d4388a556cd2367 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 20 Feb 2019 19:59:29 -0800
Subject: [PATCH] added control titles

---
 app/ui/account.js      |  2 ++
 app/ui/archiveTile.js  | 34 ++++++++++++++++++++++------------
 app/ui/copyDialog.js   |  2 ++
 app/ui/download.js     |  1 +
 app/ui/okDialog.js     |  6 +++++-
 app/ui/signupDialog.js |  1 +
 tailwind.js            |  1 +
 7 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/app/ui/account.js b/app/ui/account.js
index f0443456..d63569d3 100644
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -64,6 +64,7 @@ class Account extends Component {
           <button
             class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline"
             onclick="${e => this.login(e)}"
+            title="${translate('signInMenuOption')}"
           >
             ${translate('signInMenuOption')}
           </button>
@@ -89,6 +90,7 @@ class Account extends Component {
             <button
               class="block w-full text-left px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer focus:outline"
               onclick="${e => this.logout(e)}"
+              title="${translate('logOut')}"
             >
               ${translate('logOut')}
             </button>
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index 9450c883..750d4f0f 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -159,6 +159,7 @@ module.exports = function(state, emit, archive) {
           <button
             class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
             onclick=${copy}
+            title="${state.translate('copyUrlHover')}"
           >
             <img src="${assets.get('copy-16.svg')}" class="mr-2" />
             ${state.translate('copyUrlHover')}
@@ -168,6 +169,7 @@ module.exports = function(state, emit, archive) {
           <button
             class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-center"
             onclick=${share}
+            title="Share"
           >
             <img src="${assets.get('share-24.svg')}" class="mr-2" /> Share
           </button>
@@ -196,7 +198,8 @@ module.exports = function(state, emit, archive) {
       <input
         type="image"
         class="float-right self-center text-white hover:opacity-75 focus:outline"
-        alt="Delete"
+        alt="${state.translate('deleteButtonHover')}"
+        title="${state.translate('deleteButtonHover')}"
         src="${assets.get('close-16.svg')}"
         onclick=${del}/>
       <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
@@ -243,7 +246,9 @@ module.exports.wip = function(state, emit) {
       ${list(
         Array.from(state.archive.files)
           .reverse()
-          .map(f => fileInfo(f, remove(f))),
+          .map(f =>
+            fileInfo(f, remove(f, state.translate('deleteButtonHover')))
+          ),
         'bg-grey-lightest rounded-t list-reset overflow-y-auto px-6 py-4 md:h-full md:max-h-half-screen',
         'bg-white px-2 my-2 shadow-light rounded'
       )}
@@ -252,26 +257,29 @@ module.exports.wip = function(state, emit) {
       >
         <input
           id="file-upload"
-          class="opacity-0 w-0"
+          class="opacity-0 w-0 h-0 appearance-none"
           type="file"
           multiple
           onfocus="${focus}"
           onblur="${blur}"
           onchange="${add}"
         />
-        <label
-          for="file-upload"
-          class="flex flex-row items-center justify-between w-full p-2 cursor-pointer"
+        <div
+          class="flex flex-row items-center justify-between w-full p-2"
           title="${state.translate('addFilesButton')}"
         >
-          <div class="flex items-center">
+          <label
+            for="file-upload"
+            class="flex items-center cursor-pointer"
+            title="${state.translate('addFilesButton')}"
+          >
             <img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2" />
             ${state.translate('addFilesButton')}
-          </div>
+          </label>
           <div class="font-normal text-sm text-grey-darker">
             ${state.translate('totalSize', { size: bytes(state.archive.size) })}
           </div>
-        </label>
+        </div>
       </div>
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
@@ -316,12 +324,13 @@ module.exports.wip = function(state, emit) {
     });
   }
 
-  function remove(file) {
+  function remove(file, desc) {
     return html`
       <input
         type="image"
         class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
-        alt="Delete"
+        alt="${desc}"
+        title="${desc}"
         src="${assets.get('close-16.svg')}"
         onclick="${del}"
       />
@@ -359,7 +368,8 @@ module.exports.uploading = function(state, emit) {
     <progress class="my-3" value="${progress}">${progressPercent}</progress>
     <button
       class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end font-medium"
-      onclick=${cancel}>
+      onclick=${cancel}
+      title="${state.translate('uploadingPageCancel')}">
       ${state.translate('uploadingPageCancel')}
     </button>
   </send-upload-area>`;
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
index 362355f4..0d2e6485 100644
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -21,12 +21,14 @@ module.exports = function(name, url) {
         <button
           class="btn rounded-lg w-full flex-no-shrink focus:outline"
           onclick="${copy}"
+          title="${state.translate('copyUrlFormButton')}"
         >
           ${state.translate('copyUrlFormButton')}
         </button>
         <button
           class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
           onclick="${close}"
+          title="${state.translate('okButton')}"
         >
           ${state.translate('okButton')}
         </button>
diff --git a/app/ui/download.js b/app/ui/download.js
index 5c591625..825c3023 100644
--- a/app/ui/download.js
+++ b/app/ui/download.js
@@ -36,6 +36,7 @@ function password(state, emit) {
             ? 'bg-red hover:bg-red focus:bg-red'
             : ''}"
           value="${state.translate('unlockButtonLabel')}"
+          title="${state.translate('unlockButtonLabel')}"
         />
       </form>
       <label
diff --git a/app/ui/okDialog.js b/app/ui/okDialog.js
index 399ad11b..2e945d4b 100644
--- a/app/ui/okDialog.js
+++ b/app/ui/okDialog.js
@@ -5,7 +5,11 @@ module.exports = function(message) {
     return html`
       <send-ok-dialog class="flex flex-col max-w-xs p-4">
         <div class="text-center m-8 leading-normal">${message}</div>
-        <button class="btn rounded-lg w-full flex-no-shrink" onclick="${close}">
+        <button
+          class="btn rounded-lg w-full flex-no-shrink"
+          onclick="${close}"
+          title="${state.translate('okButton')}"
+        >
           ${state.translate('okButton')}
         </button>
       </send-ok-dialog>
diff --git a/app/ui/signupDialog.js b/app/ui/signupDialog.js
index 02488947..0182cfea 100644
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@@ -30,6 +30,7 @@ module.exports = function(trigger) {
         <input
           class="btn rounded-lg w-full flex flex-no-shrink items-center justify-center"
           value="${state.translate('signInMenuOption')}"
+          title="${state.translate('signInMenuOption')}"
           id="email-submit"
           type="submit" />
       </form>
diff --git a/tailwind.js b/tailwind.js
index b020cf89..0965908b 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -505,6 +505,7 @@ module.exports = {
   height: {
     auto: 'auto',
     px: '1px',
+    '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',