App bar

app/assets/templates/frontend/footer.html.haml

@@ -1,33 +1,40 @@
-#footer-bar
-  .pull-left
-    .footer-bar-link{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
-      %a.label{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
-      %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
+.sn-component
+  #footer-bar.app-bar.no-edges
+    .left
+      .item{"click-outside" => "ctrl.showAccountMenu = false;", "is-open" => "ctrl.showAccountMenu"}
+        .column
+          .circle.small.info
+        .column
+          .label.title{"ng-click" => "ctrl.accountMenuPressed()", "ng-class" => "{red: ctrl.error}"} Account
+        %account-menu{"ng-if" => "ctrl.showAccountMenu", "on-successful-auth" => "ctrl.onAuthSuccess"}
 
-    .footer-bar-link{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
-      %a.label{"ng-click" => "ctrl.toggleExtensions()"} Extensions
-      %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
+      .item{"click-outside" => "ctrl.showExtensionsMenu = false;", "is-open" => "ctrl.showExtensionsMenu"}
+        .label.title{"ng-click" => "ctrl.toggleExtensions()"} Extensions
+        %global-extensions-menu{"ng-if" => "ctrl.showExtensionsMenu"}
 
-    .footer-bar-link
-      %a.label{"href" => "https://standardnotes.org/help", "target" => "_blank"}
-        Help
+      .item
+        .label.title{"href" => "https://standardnotes.org/help", "target" => "_blank"}
+          Help
 
-    %room-bar#room-bar
+      %room-bar#room-bar
 
-  .pull-right
+    .right
 
-    .footer-bar-link{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
-      %span.tinted.normal New update downloaded. Installs on app restart.
+      .item{"ng-if" => "ctrl.newUpdateAvailable", "ng-click" => "ctrl.clickedNewUpdateAnnouncement()"}
+        %span.tinted.normal New update downloaded. Installs on app restart.
 
-    .footer-bar-link{"style" => "margin-right: 5px;"}
-      %span{"ng-if" => "ctrl.lastSyncDate", "style" => "float: left; font-weight: normal; margin-right: 8px;"}
-        %span.label{"ng-if" => "!ctrl.isRefreshing"}
-          Last refreshed {{ctrl.lastSyncDate | appDateTime}}
-        %span{"ng-if" => "ctrl.isRefreshing"}
-          .spinner{"style" => "margin-top: 2px;"}
+      .item{"ng-if" => "ctrl.lastSyncDate"}
+        .label
+          %span{"ng-if" => "!ctrl.isRefreshing"}
+            Last refreshed {{ctrl.lastSyncDate | appDateTime}}
+          %span{"ng-if" => "ctrl.isRefreshing"}
+            .spinner
 
-      %strong.label{"ng-if" => "ctrl.offline"} Offline
-      %a.label{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"} Refresh
+      .item{"ng-if" => "ctrl.offline"}
+        .label Offline
+      .item{"ng-if" => "!ctrl.offline", "ng-click" => "ctrl.refreshData()"}
+        .label Refresh
 
-      %span.label{"ng-if" => "ctrl.hasPasscode()"}
-        %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}
+      .item{"ng-if" => "ctrl.hasPasscode()"}
+        .label
+          %i.icon.ion-locked{"ng-if" => "ctrl.hasPasscode()", "ng-click" => "ctrl.lockApp()"}