App bar

app/assets/stylesheets/app/_editor.scss

@@ -5,11 +5,6 @@ $heading-height: 75px;
   flex-direction: column;
   overflow-y: hidden;
   background-color: white;
-
-  .section-menu-bar {
-    flex: 1 0 28px;
-    max-height: 28px;
-  }
 }
 
 #editor-title-bar {

app/assets/stylesheets/app/_footer.scss

@@ -1,90 +1,34 @@
-.fake-link {
-  font-weight: bold;
-  cursor: pointer;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-h2 {
-  margin-bottom: 0px;
-  margin-top: 0px;
-}
-
 #footer-bar {
   position: relative;
   width: 100%;
-  padding: 5px;
-  background-color: #F6F6F6;
-  border-top: 1px solid #D3D3D3;
   height: $footer-height;
   max-height: $footer-height;
   z-index: 100;
-
-  .pull-left, .pull-right {
-    height: 100%;
-    display: flex;
-  }
-
-  section {
-    padding: 5px;
-    padding-bottom: 2px;
-    margin-top: 5px;
-
-    &.inline-h {
-      padding-top: 5px;
-      padding-left: 0;
-      padding-right: 0;
-    }
-
-  }
 }
 
-#footer-bar .footer-bar-link {
-  margin-left: 10px;
-  &:not(:first-child) {
-    margin-left: 12px;
-  }
-
+#footer-bar .item {
   z-index: 1000;
   position: relative;
-  height: 100%;
   user-select: none;
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  .panel {
+    max-height: 85vh;
+    position: absolute;
+    right: 0px;
+    left: 10px;
+    bottom: 40px;
+    min-width: 300px;
+    z-index: 1000;
+    margin-top: 15px;
+    background-color: white;
 
-  > .label {
-    font-size: 12px;
-    font-weight: bold;
-    color: #515263;
-    cursor: pointer;
-
-    &:hover {
-      text-decoration: none;
-      color: $blue-color;
+    .close-button {
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
-}
 
-.footer-bar-link .panel {
-  max-height: 85vh;
-  position: absolute;
-  right: 0px;
-  left: 10px;
-  bottom: 40px;
-  min-width: 300px;
-  z-index: 1000;
-  margin-top: 15px;
-  background-color: white;
-}
-
-.panel .close-button {
-  &:hover {
-    text-decoration: none;
-  }
 }
 
 #account-panel {
@@ -181,21 +125,21 @@ a.disabled {
 
 
 
-.spinner {
-  height: 10px;
-  width: 10px;
-  animation: rotate 0.8s infinite linear;
-  border: 1px solid #515263;
-  border-right-color: transparent;
-  border-radius: 50%;
-
-  &.tinted {
-    border: 1px solid $blue-color;
-    border-right-color: transparent;
-  }
-}
-
-@keyframes rotate {
-  0%    { transform: rotate(0deg); }
-  100%  { transform: rotate(360deg); }
-}
+// .spinner {
+//   height: 10px;
+//   width: 10px;
+//   animation: rotate 0.8s infinite linear;
+//   border: 1px solid #515263;
+//   border-right-color: transparent;
+//   border-radius: 50%;
+//
+//   &.tinted {
+//     border: 1px solid $blue-color;
+//     border-right-color: transparent;
+//   }
+// }
+//
+// @keyframes rotate {
+//   0%    { transform: rotate(0deg); }
+//   100%  { transform: rotate(360deg); }
+// }

app/assets/stylesheets/app/_menus.scss

@@ -1,61 +1,6 @@
-ul.section-menu-bar {
-  width: 100%;
-  padding-top: 0px;
-  padding-left: 6px;
-  padding-right: 21px;
-
-  &.no-h-padding {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  user-select: none;
-
-  background-color: #f1f1f1;
-  color: $selected-text-color;
-  height: 28px;
-  cursor: default;
-
-  margin-top: 0px;
-  margin-bottom: 0;
-  list-style: none;
-  font-weight: bold;
-  font-size: 0; /* trick to remove gaps between li inline-block elements */
-
-  > li {
-    padding: 6px 8px;
-    text-align: left;
-    display: inline-block;
+.app-bar {
+  .item {
     position: relative;
-
-    font-size: 13px;
-    font-weight: bold;
-    user-select: none;
-
-    &.full-width {
-      width: 100%;
-      padding-left: 14px;
-    }
-
-    &.item-with-subtitle {
-      label {
-        margin-right: 8px;
-      }
-
-      .subtitle {
-        margin-top: 1px;
-        opacity: 0.5;
-        font-weight: normal;
-        font-size: 12px;
-      }
-    }
-
-
-    &.selected {
-      background-color: $blue-color;
-      border-radius: 1px;
-      color: white;
-    }
   }
 }
 
@@ -67,12 +12,8 @@ ul.section-menu-bar {
     min-width: 160px;
     z-index: 100;
 
-    list-style: none;
-    font-size: 14px;
-    text-align: left;
+    margin-top: 5px;
 
-    padding: 0 0;
-    border: none;
     width: 280px;
 
     max-height: calc(85vh - 90px);

app/assets/stylesheets/app/_notes.scss

@@ -16,12 +16,12 @@
   }
 
   #notes-title-bar {
-    color: rgba(black, 0.40);
     padding-top: 16px;
     font-weight: normal;
     font-size: 18px;
 
     .title {
+      color: rgba(black, 0.40);
       width: calc(90% - 45px);
     }
   }
@@ -31,6 +31,7 @@
   }
 
   #notes-menu-bar {
+    color: default;
     position: relative;
     margin-top: 14px;
     height: auto;