Add color to error messages shown from addMessage()

src/js/account/index.js

@@ -26,11 +26,23 @@ export function syncImportedDictionary() {
 }
 
 export function uploadDetailsDirect() {
+  uploadDetails().catch(err => {
+    console.error(err);
+    addMessage('Could not connect to account. Trying again in 10 seconds.', undefined, 'error');
+    setTimeout(() => {
       uploadDetails();
+    }, 10000);
+  });
 }
 
 export function uploadWord(word) {
-  uploadWords([word]);
+  uploadWords([word]).catch(err => {
+    console.error(err);
+    addMessage('Could not connect to account. Trying again in 10 seconds.', undefined, 'error');
+    setTimeout(() => {
+      uploadWord(word);
+    }, 10000);
+  });
 }
 
 export function syncImportedWords(words) {
@@ -41,7 +53,7 @@ export function deleteWord(wordId) {
   deleteWords([wordId]).catch(err => {
     console.error(err);
     saveDeletedWordLocally(wordId);
-    addMessage('Could not connect. Trying again in 10 seconds.');
+    addMessage('Could not connect to account. Trying again in 10 seconds.', undefined, 'error');
     setTimeout(() => {
       deleteWord(wordId);
     }, 10000);

src/js/account/sync.js

@@ -48,7 +48,7 @@ export function syncDictionary() {
       const detailsSynced = syncDetails(remote.details);
       
       if (detailsSynced === false) {
-        addMessage('Could not sync');
+        addMessage('Could not sync', 10000, 'error');
       } else {
         detailsSynced.then(success => {
           renderAll();
@@ -99,7 +99,7 @@ export function uploadWholeDictionary(asNew = false) {
       addMessage('Dictionary Uploaded Successfully');
     }, errorData => {
       console.error(errorData);
-      addMessage(errorData);
+      addMessage(errorData, 10000, 'error');
     })
     .catch(err => console.error('set-whole-current-dictionary: ', err));
   })
@@ -138,7 +138,7 @@ export function uploadDetails() {
     return successful;
   }, error => {
     console.error(error);
-    addMessage('Could not sync dictionary');
+    addMessage('Could not sync dictionary', 10000, 'undefined');
     return false;
   });
 }
@@ -220,7 +220,7 @@ export function uploadWords(words) {
     return successful;
   }, error => {
     console.error(error);
-    addMessage('Could not upload words');
+    addMessage('Could not upload words', 10000, 'error');
     return false;
   });
 }
@@ -234,7 +234,7 @@ export function deleteWords(wordIds) {
     return successful;
   }, error => {
     console.error(error);
-    addMessage('Could not delete words');
+    addMessage('Could not delete words', 10000, 'error');
     saveDeletedWordsLocally(wordIds);
     return false;
   });

src/js/dictionaryManagement.js

@@ -164,7 +164,7 @@ export function importDictionary() {
             });
           }
         } else {
-          addMessage('Dictionary could not be imported', 10000);
+          addMessage('Dictionary could not be imported', 10000, 'error');
         }
       };
 
@@ -187,7 +187,7 @@ export function importWords() {
           step: results => {
             if (results.errors.length > 0) {
               results.errors.forEach(err => {
-                addMessage('Error Importing Word: ' + err);
+                addMessage('Error Importing Word: ' + err, undefined, 'error');
                 console.error('Error Importing Word: ', err)
               });
             } else {
@@ -218,7 +218,7 @@ export function importWords() {
             }
           },
           error: err => {
-            addMessage('Error Importing Words: ' + err);
+            addMessage('Error Importing Words: ' + err, undefined, 'error');
             console.error('Error Importing Words: ', err);
           },
           skipEmptyLines: true,

src/js/hotkeys.js

@@ -16,7 +16,7 @@ export function disableHotKeys() {
 
 export function hotKeyActions(event) {
   if (typeof event.key === 'undefined' || typeof event.ctrlKey === 'undefined' || typeof event.altKey === 'undefined') {
-    addMessage('Hotkeys disabled');
+    addMessage('Hotkeys disabled', undefined, 'error');
     console.warn('Browser does not have required event properties for hotkeys.');
     window.settings.useHotkeys = false;
     saveSettings();

src/js/utilities.js

@@ -132,10 +132,13 @@ export function generateRandomWords(numberOfWords) {
   console.log('done');
 }
 
-export function addMessage(messageText, time = 5000) {
+export function addMessage(messageText, time = 5000, extraClass = false) {
   const messagingSection = document.getElementById('messagingSection');
   const element = document.createElement('div');
   element.classList.add('message');
+  if (extraClass !== false) {
+    element.classList.add(extraClass);
+  }
   element.innerHTML = '<a class="close-button">&times;&#xFE0E;</a>' + messageText;
   messagingSection.appendChild(element);
 

src/scss/_structure.scss

@@ -328,7 +328,7 @@ $nav-font-height: 16px;
   position: fixed;
   bottom: $general-padding;
   right: $general-padding;
-  max-width: 250px;
+  max-width: 300px;
 
   .message {
     position: relative;
@@ -343,6 +343,10 @@ $nav-font-height: 16px;
       margin-bottom: 0;
     }
 
+    &.error {
+      background-color: lighten($red, 0.75);
+    }
+
     .close-button {
       position: absolute;
       top: 5px;