refactor UI layout

src/assets/css/BottomBar/BottomBar.scss

@@ -1,11 +1,12 @@
 .b-bar {
   height: 100%;
-  background-color: $gray;
+  padding: $small;
 
   .grid {
+    background-color: $gray;
     display: grid;
     height: 100%;
-    grid-template-columns: 1fr 2fr 1fr;
+    padding-right: $small;
 
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
@@ -45,7 +46,6 @@
       overflow: hidden;
       display: flex;
       align-items: center;
-      margin: $small;
       padding: $small;
 
       .progress-bottom {

src/assets/css/_variables.scss

@@ -26,7 +26,7 @@ $gray5: rgb(44, 44, 46);
 
 $red: rgb(255, 69, 58);
 $blue: rgb(10, 132, 255);
-$green: rgb(48, 209, 88);
+$green: rgb(20, 160, 55);
 $yellow: rgb(255, 214, 10);
 $orange: rgb(255, 159, 10);
 $pink: rgb(255, 55, 95);

src/assets/css/global.scss

@@ -87,14 +87,18 @@ button {
   grid-template-rows: 3rem 1fr 1fr;
   grid-auto-flow: row;
   grid-template-areas:
-    "l-sidebar nav nav"
+    "l-sidebar nav r-sidebar"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
-    "bottom-bar bottom-bar bottom-bar";
+    "l-sidebar bottom-bar tabs";
   width: 100vw;
   height: 100vh;
 }
 
+.tabs {
+  grid-area: tabs;
+}
+
 .topnav {
   grid-area: nav;
 }
@@ -103,6 +107,7 @@ button {
   width: 15rem;
   grid-area: l-sidebar;
   padding-top: 0.5rem;
+  border-right: solid 1px $gray;
 }
 
 .bottom-bar {
@@ -139,7 +144,7 @@ button {
   grid-area: content;
   overflow: hidden;
   padding: 0;
-  border-left: solid 1px $gray;
+  max-width: 1504px;
 
   .nav {
     border: solid;