Merge pull request #296 from mozilla/ui

restyle delete popup

frontend/src/upload.js

@@ -307,7 +307,6 @@ $(document).ready(function() {
         })
         .catch(err => {
           Raven.captureException(err);
-          console.log(err);
           $('#page-one').attr('hidden', true);
           $('#upload-progress').attr('hidden', true);
           $('#upload-error').removeAttr('hidden');
@@ -461,15 +460,16 @@ $(document).ready(function() {
 
     // create popup
     popupDiv.classList.add('popup');
-    const popupDelSpan = document.createElement('span');
-    $(popupDelSpan).addClass('del-file');
-    $(popupDelSpan).attr('data-l10n-id', 'sentFilesTitle4');
+    const $popupMessage = $('<div>', { class: 'popup-message' });
+    $popupMessage.attr('data-l10n-id', 'deletePopupText');
 
-    const popupNvmSpan = document.createElement('span');
-    $(popupNvmSpan).addClass('nvm');
-    $(popupNvmSpan).attr('data-l10n-id', 'nevermindButton');
+    const $popupDelSpan = $('<span>', { class: 'popup-yes' });
+    $popupDelSpan.attr('data-l10n-id', 'deletePopupYes');
 
-    $popupText.html([popupDelSpan, '&nbsp;', '&nbsp;', popupNvmSpan]);
+    const $popupNvmSpan = $('<span>', { class: 'popup-no' });
+    $popupNvmSpan.attr('data-l10n-id', 'deletePopupCancel');
+
+    $popupText.html([$popupMessage, $popupDelSpan,  $popupNvmSpan]);
 
     // add data cells to table row
     row.appendChild(name);
@@ -485,7 +485,7 @@ $(document).ready(function() {
     const unexpiredFiles = storage.numFiles;
 
     // delete file
-    $popupText.find('.del-file').click(e => {
+    $popupText.find('.popup-yes').click(e => {
       FileSender.delete(file.fileId, file.deleteToken).then(() => {
         $(e.target).parents('tr').remove();
         const timeToExpiry =
@@ -535,7 +535,7 @@ $(document).ready(function() {
       $popupText.focus();
     });
     // hide popup
-    $popupText.find('.nvm').click(function(e) {
+    $popupText.find('.popup-no').click(function(e) {
       e.stopPropagation();
       $popupText.removeClass('show');
     });

public/locales/send.en-US.ftl

@@ -83,7 +83,9 @@ sentFilesTitle2 = Copy URL
 sentFilesTitle3 = Expires In
 sentFilesTitle4 = Delete
 
-nevermindButton = Nevermind
+deletePopupText = Delete this file?
+deletePopupYes = Yes
+deletePopupCancel = Cancel
 deleteButtonHover.title = {sentFilesTitle4}
 copyUrlHover.title = {sentFilesTitle2}
 

public/main.css

@@ -183,6 +183,10 @@ a {
   cursor: pointer;
 }
 
+#browse:hover {
+  background-color: #0287e8;
+}
+
 input[type="file"] {
   display: none;
 }
@@ -212,6 +216,7 @@ td {
   color: #4a4a4a;
   padding: 17px 19px 0;
   line-height: 23px;
+  position: relative;
 }
 
 table {
@@ -221,6 +226,7 @@ table {
 
 tbody {
   word-wrap: break-word;
+  word-break: break-all;
 }
 
 #uploaded-files {
@@ -236,28 +242,28 @@ tbody {
 
 /* Popup container */
 .popup {
-  position: relative;
+  position: absolute;
   display: inline-block;
-  cursor: pointer;
 }
 
 /* The actual popup (appears on top) */
 .popup .popuptext {
   visibility: hidden;
-  width: 160px;
-  background-color: #555;
-  color: #fff;
+  min-width: 115px;
+  background-color: #fff;
+  color: #000;
+  border: 1px solid #0297f8;
   text-align: center;
-  border-radius: 6px;
-  padding: 8px 0;
+  border-radius: 5px;
+  padding: 7px 8px;
   position: absolute;
   z-index: 1;
-  bottom: 20px;
-  left: 50%;
-  margin-left: -88px;
+  bottom: 8px;
+  right: -28px;
   transition: opacity 0.5s;
   opacity: 0;
   outline: 0;
+  box-shadow: 3px 3px 7px #888;
 }
 
 /* Popup arrow */
@@ -265,11 +271,11 @@ tbody {
   content: "";
   position: absolute;
   top: 100%;
-  left: 50%;
+  right: 30px;
   margin-left: -5px;
   border-width: 5px;
   border-style: solid;
-  border-color: #555 transparent transparent;
+  border-color: #0297f8 transparent transparent;
 }
 
 .popup .show {
@@ -277,6 +283,29 @@ tbody {
   opacity: 1;
 }
 
+.popup-message {
+  margin-bottom: 4px;
+}
+
+.popup-yes {
+  color: #fff;
+  background-color: #0297f8;
+  border-radius: 5px;
+  padding: 2px 11px;
+  cursor: pointer;
+}
+
+.popup-yes:hover {
+  background-color: #0287e8;
+}
+
+.popup-no {
+  color: #4a4a4a;
+  border-radius: 6px;
+  padding: 3px 5px;
+  cursor: pointer;
+}
+
 /**   upload-progress   **/
 .progress-bar {
   margin-top: 3px;