update millix bar: fix dark mode

chrome/browser/resources/millix/millix_bar.css

@@ -13,7 +13,8 @@ a {
     text-decoration: none;
 }
 
-a:hover {
+.theme_dark a {
+    color: #dadada;
 }
 
 .badge {
@@ -40,6 +41,7 @@ a:hover {
     width: 100%;
 }
 
+.theme_dark .advertisement_bar_container,
 .advertisement_bar_container.status_warning,
 .advertisement_bar_container.status_danger {
     background-color: #171827;
@@ -140,6 +142,10 @@ a:hover {
     padding: 0 1rem;
 }
 
+input:focus {
+    outline: none;
+}
+
 svg {
     height: 1rem;
     width: 1rem;
@@ -216,7 +222,6 @@ svg {
     border-color: #9400ce;
 }
 
-
 .btn-outline-primary {
     color: #a9a9a9;
     border-color: #9400ce;
@@ -228,6 +233,15 @@ svg {
     background-color: #9400ce;
 }
 
+.btn-disabled,
+.btn-disabled:hover,
+.btn-disabled:focus,
+.btn-disabled:active {
+    background-color: rgba(205, 207, 214, 0.1);
+    border-color: rgba(205, 207, 214, 0.1);
+    color: #a9a9a9;
+}
+
 .btn-xs {
     border-radius: 0.3rem;
     font-size: 1rem;
@@ -260,111 +274,17 @@ svg {
     flex-direction: column;
 }
 
-.advertisement_bar_item:hover {
-    cursor: pointer;
-    background-color: rgba(210, 210, 210, 0.1);
-    border-color: #eee;
-    color: #333;
-}
-
-/* -------------------------------------------------------- reviewed above ---------------------------------------------------------------------- */
-
-
-.noselect {
-    -webkit-touch-callout: none;
-    /* iOS Safari */
-    -webkit-user-select: none;
-    /* Safari */
-    -khtml-user-select: none;
-    /* Konqueror HTML */
-    -moz-user-select: none;
-    /* Firefox */
-    -ms-user-select: none;
-    /* Internet Explorer/Edge */
-    user-select: none;
-    /* Non-prefixed version, currently
-                                supported by Chrome and Opera */
-}
-
-.btn:focus, .btn:active:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
+.theme_dark .advertisement_bar_item .text {
+    color: #dadada;
 }
 
-.btn:active {
-    background-image: none;
-    outline: 0;
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .07);
-    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .07);
-}
-
-/* default
----------------------------- */
-
-
-.btn-default:hover {
-    color: #333;
+.advertisement_bar_item:hover {
     background-color: rgba(210, 210, 210, 0.1);
-    border-color: #eee;
-}
-
-.dark .btn-default:hover {
-    background-color: transparent;
-    border-color: #555;
-}
-
-.btn-default:active {
-    color: #333;
-    background-color: rgb(230 230 230 / 10%);
-}
-
-.dark .btn-default:active {
-    background-color: transparent;
-    border-color: #666;
-}
-
-.btn-unlock-text {
-    font-size: 14px;
-    line-height: 27px;
-    color: #656565;
-}
-
-.dark .btn-unlock-text {
-    color: #d5d5d5;
-}
-
-.btn-disabled:hover, .btn-disabled:focus, .btn-disabled:active {
-    background-color: transparent;
-    border-color: transparent;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-    outline: none;
-    outline-offset: 0;
-    cursor: default;
-}
-
-/**
-dark mode
-*/
-
-.dark .container {
-    color: rgba(241, 243, 244, 1);
-    background-color: #323639;
-}
-
-.dark .btn {
-    color: rgba(241, 243, 244, 1);
-    background-color: transparent;
+    cursor: pointer;
 }
 
-.dark a {
-    color: rgba(241, 243, 244, 1);
-}
+/* -------------------------------------------------------- reviewed above ---------------------------------------------------------------------- */
 
-input:focus {
-    outline: none;
-}
 
 .loader {
     margin-top: 5px;
@@ -379,18 +299,6 @@ input:focus {
 }
 
 
-.dark .btn-unlock, .btn-unlock {
-    line-height: 30px;
-    color: #b5b5b5;
-    font-size: 13px;
-    margin-left: 0px !important;
-    width: 111px;
-    padding-left: 6px;
-    padding-right: 6px;
-    margin-top: 8px;
-    max-height: 26px;
-}
-
 /* Safari */
 
 @-webkit-keyframes spin {

chrome/browser/resources/millix/millix_bar.html

@@ -66,7 +66,7 @@
                             class="fa-primary"/>
                 </svg>
 
-                <span>restart node</span>
+                <span class="label">restart node</span>
             </div>
 
             <div id="wallet" class="advertisement_bar_item hidden">

chrome/browser/resources/millix/millix_bar.js

@@ -40,10 +40,10 @@ cr.define('millix_bar', function() {
 
     function refreshThemeStyles(data) {
         if (data.is_dark_theme) {
-            document.body.classList.add('dark');
+            document.body.classList.add('theme_dark');
         }
         else {
-            document.body.classList.remove('dark');
+            document.body.classList.remove('theme_dark');
         }
 
         isDarkTheme = data.is_dark_theme;
@@ -120,7 +120,6 @@ cr.define('millix_bar', function() {
                 }
             }
 
-
             $headline.addClass('placeholder');
             $targetPhrase.addClass('placeholder');
 
@@ -280,11 +279,14 @@ cr.define('millix_bar', function() {
         $('#message_container').addClass('hidden');
         $('.advertisement_bar_container').removeClass('status_warning status_danger');
         if (status === 'danger') {
+            toggle_status_area(false);
+
             $('.advertisement_bar_container').addClass('status_danger');
             $('#advertisement_container').addClass('hidden');
             $('#message_container').removeClass('hidden');
         }
         else if (status === 'warning') {
+            toggle_status_area(false);
             $('.advertisement_bar_container').addClass('status_warning');
             $('#advertisement_container').addClass('hidden');
             $('#message_container').removeClass('hidden');
@@ -310,12 +312,14 @@ cr.define('millix_bar', function() {
     }
 
     function doNodeRestart() {
-        clearTimeout(reloadTimeout);
-        $('#btn-restart-label').text('restarting');
-        $('.wallet_restart_icon_power').addClass('hidden');
-        $('.wallet_restart_icon_loader').removeClass('hidden');
-        $('#wallet_restart > .btn').addClass('btn-disabled');
-        chrome.send('restartMillixNode');
+        if (!$('#wallet_restart').hasClass('btn-disabled')) {
+            clearTimeout(reloadTimeout);
+            $('.wallet_restart_icon_power').addClass('hidden');
+            $('.wallet_restart_icon_loader').removeClass('hidden');
+            $('#wallet_restart').addClass('btn-disabled');
+            $('#wallet_restart .label').text('restarting');
+            chrome.send('restartMillixNode');
+        }
     }
 
     function restartWallet() {
@@ -327,7 +331,7 @@ cr.define('millix_bar', function() {
 
         let counter                = 10;
         const updateRestartTimeout = () => {
-            $('#btn-restart-label').text(`restart node (${counter}s)`);
+            $('#wallet_restart .label').text(`restart node (${counter}s)`);
             counter--;
             if (counter == 0) {
                 doNodeRestart();
@@ -348,8 +352,7 @@ cr.define('millix_bar', function() {
 
         $('.wallet_restart_icon_power').removeClass('hidden');
         $('.wallet_restart_icon_loader').addClass('hidden');
-        $('#wallet_restart > .btn').removeClass('btn-disabled');
-        $('#wallet_restart').removeClass('hidden');
+        $('#wallet_restart').removeClass('btn-disabled').removeClass('hidden');
         set_advertisement_bar_container_status('danger');
     }
 
@@ -452,8 +455,8 @@ cr.define('millix_bar', function() {
         audioDeposit.play();
     }
 
-    function expandView(expanded) {
-        if (expanded) {
+    function toggle_status_area(show) {
+        if (show) {
             $('#btn_expand_status_area').addClass('open');
             $('.expandable_view').removeClass('hidden');
             $('#advertisement_container').addClass('hidden');
@@ -514,7 +517,7 @@ cr.define('millix_bar', function() {
         onLastTransactionTimestampUpdate,
         onTotalAdvertisementPaymentUpdate,
         refreshThemeStyles,
-        expandView,
+        toggle_status_area,
         onTransaction,
         showNewAdvertisement,
         onVisibilityChange,
@@ -590,10 +593,10 @@ $(document).ready(() => {
     $('#btn_expand_status_area').click(function() {
         const $this = $(this);
         if ($this.hasClass('open')) {
-            millix_bar.expandView(false);
+            millix_bar.toggle_status_area(false);
         }
         else {
-            millix_bar.expandView(true);
+            millix_bar.toggle_status_area(true);
         }
     });
 });

chrome/browser/resources/millix/millix_ws.js

@@ -325,9 +325,9 @@ function check_latest_version() {
     API.getLatestMillixVersion()
        .then(response => {
            send_window_parent_post_message('available_version', response);
-           check_latest_version_timeout_id = setTimeout(() => apiCheck(), 300);
+           check_latest_version_timeout_id = setTimeout(() => check_latest_version(), 30000);
        })
-       .catch(() => check_latest_version_timeout_id = setTimeout(() => apiCheck(), 10));
+       .catch(() => check_latest_version_timeout_id = setTimeout(() => check_latest_version(), 10000));
 }
 
 let apiCheckHandlerID = null;