diff --git a/src/sidebar/editor.js b/src/sidebar/editor.js
index b9a139bd4..f0b1a8c74 100644
--- a/src/sidebar/editor.js
+++ b/src/sidebar/editor.js
@@ -136,7 +136,7 @@ function getPadStats(editor) {
  *                                  if false, animate to savingLayout (sync icon on left)
  * @param {Boolean} warning         Apply yellow warning styling on toolbar
  */
-function setAnimation( animateSyncIcon = true, syncingLayout, warning ) { // animateSyncIcon, syncingLayout, warning
+function setAnimation( animateSyncIcon = true, syncingLayout, warning, syncSuccess ) { // animateSyncIcon, syncingLayout, warning, syncSuccess
   const footerButtons = document.getElementById('footer-buttons');
   const enableSync = document.getElementById('enable-sync');
   const savingIndicator = document.getElementById('saving-indicator');
@@ -170,6 +170,12 @@ function setAnimation( animateSyncIcon = true, syncingLayout, warning ) { // ani
   } else if (warning === false && footerButtons.classList.contains('warning')) {
     footerButtons.classList.remove('warning');
   }
+
+  if (syncSuccess === true) {
+    footerButtons.classList.add('actionable');
+  } else {
+    footerButtons.classList.remove('actionable');
+  }
 }
 
 /**
diff --git a/src/sidebar/panel.js b/src/sidebar/panel.js
index 714ed19ed..25731462a 100644
--- a/src/sidebar/panel.js
+++ b/src/sidebar/panel.js
@@ -326,13 +326,11 @@ function getLastSyncedTime() {
 
   if (isAuthenticated) {
     giveFeedbackButton.style.display = 'none';
-    savingIndicator.classList.add('actionable');
     savingIndicator.innerHTML = browser.i18n.getMessage('syncComplete3', formatFooterTime(lastModified)); 
     disconnectSync.style.display = 'block';
     isAuthenticated = true;
-    setAnimation(false, true);
+    setAnimation(false, true, false, true);  // animateSyncIcon, syncingLayout, warning, syncSuccess
   } else {
-    savingIndicator.classList.remove('actionable');
     savingIndicator.textContent = browser.i18n.getMessage('changesSaved', formatFooterTime());
   }
 }
diff --git a/src/sidebar/styles-dark.css b/src/sidebar/styles-dark.css
index 8e9abd6ff..ed783b881 100644
--- a/src/sidebar/styles-dark.css
+++ b/src/sidebar/styles-dark.css
@@ -68,6 +68,11 @@ body {
   background-color: #3d4352;
 }
 
+#footer-buttons.actionable div:first-child
+{
+  color: white;
+}
+
 ::-moz-selection {
   background-color: #5675B9;
   color: #fff;
diff --git a/src/sidebar/styles.css b/src/sidebar/styles.css
index 5582e7329..2f4f1aee4 100644
--- a/src/sidebar/styles.css
+++ b/src/sidebar/styles.css
@@ -122,10 +122,6 @@ footer {
   transition: background var(--sync-animation-duration) cubic-bezier(.07,.95,0,1);
 }
 
-#footer-buttons.warning div:first-child {
-  color: black;
-}
-
 #footer-buttons div:first-child {
   position: relative;
   flex: 1 0;
@@ -144,6 +140,12 @@ footer {
   transition: padding 0s .2s;
 }
 
+#footer-buttons.warning div:first-child,
+#footer-buttons.actionable div:first-child
+{
+  color: black;
+}
+
 /* Hide saving-indication then move enable-sync then show saving-indicator */
 @keyframes blink {
   0% { opacity: 1; }
@@ -425,7 +427,3 @@ CKEditor overrides
   padding: 0.1em;
   box-shadow: none;
 }
-
-.actionable {
-  color: black;
-}