Merge pull request #1088 from mozilla/vnext-ui-changes

Update UI

app/main.css

@@ -185,3 +185,62 @@ progress::-webkit-progress-value {
     padding-right: 1rem;
   }
 }
+
+progress[value]::-webkit-progress-value {
+  /* stylelint-disable */
+  background-image: -webkit-linear-gradient(
+      -45deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -webkit-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  -webkit-animation: animate-stripes 1s linear infinite;
+}
+
+progress[value]::-moz-progress-bar {
+  /* stylelint-disable */
+  background-image: -moz-linear-gradient(
+      135deg,
+      transparent 20%,
+      rgba(255, 255, 255, 0.4) 20%,
+      rgba(255, 255, 255, 0.4) 40%,
+      transparent 40%,
+      transparent 60%,
+      rgba(255, 255, 255, 0.4) 60%,
+      rgba(255, 255, 255, 0.4) 80%,
+      transparent 80%
+    ),
+    -moz-linear-gradient(left, #0a84ff, #0a84ff);
+  /* stylelint-enable */
+  border-radius: 2px;
+  background-size: 21px 20px, 100% 100%, 100% 100%;
+  animation: animate-stripes 1s linear infinite;
+}
+
+@-webkit-keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+@keyframes animate-stripes {
+  100% {
+    background-position: -21px 0;
+  }
+}
+
+:not(input) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

app/ui/archiveTile.js

@@ -163,7 +163,7 @@ module.exports = function(state, emit, archive) {
     ${archiveDetails(state.translate, archive)}
     <hr class="w-full border-t my-4">
     <button
-      class="text-blue self-end font-medium flex items-center"
+      class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium flex items-center"
       onclick=${copy}>
       <img src="${assets.get('copy-16.svg')}" class="mr-2"/>
       ${state.translate('copyUrlHover')}
@@ -304,7 +304,7 @@ module.exports.uploading = function(state, emit) {
     <div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
     <progress class="my-3" value="${progress}">${progressPercent}</progress>
     <button
-      class="text-blue self-end font-medium"
+      class="text-blue hover:text-blue-dark focus:text-blue-darker self-end font-medium"
       onclick=${cancel}>
       ${state.translate('uploadingPageCancel')}
     </button>

app/ui/copyDialog.js

@@ -24,7 +24,9 @@ module.exports = function(name, url) {
         >
           ${state.translate('copyUrlFormButton')}
         </button>
-        <a class="text-blue my-4 font-medium cursor-pointer" onclick="${close}"
+        <a
+          class="text-blue hover:text-blue-dark focus:text-blue-darker my-4 font-medium cursor-pointer"
+          onclick="${close}"
           >${state.translate('okButton')}</a
         >
       </send-copy-dialog>

app/ui/download.js

@@ -108,7 +108,9 @@ module.exports = function(state, emit) {
               ${state.translate('downloadFinish')}
             </h1>
             <p class="mb-4">
-              <a href="/" class="text-blue font-medium"
+              <a
+                href="/"
+                class="text-blue hover:text-blue-dark focus:text-blue-darker font-medium"
                 >${state.translate('sendYourFilesLink')}</a
               >
             </p>