Polishing button colors and starting to create templates for different layouts

src/app/dashboard/dashboard.component.scss

@@ -139,6 +139,16 @@ $tao-gray-900: #000000;
 
 $tao-navbar-height: 67px;
 
+//
+// Layouts
+//
+
+// Default messages, webide, terminal, web component
+@mixin position($col-start, $col-end, $row-start, $row-end) {
+  grid-column: $col-start / $col-end;
+  grid-row: $row-start / $row-end;
+}
+
 .tao-grid-main-components {
 
   overflow-y: hidden;
@@ -154,6 +164,7 @@ $tao-navbar-height: 67px;
 
 .tao-web-component {
   padding: $space;
+  @include position(2, 4, 1, 4);
   grid-column: 2 / 4;
   grid-row: 1 / 4;
 }
@@ -161,17 +172,22 @@ $tao-navbar-height: 67px;
 .tao-messages-component {
   padding: $space;
   background-color: $tao-gray-50;
+  @include position(1, 2, 1, 4);
   grid-column: 1 / 2;
   grid-row: 1 / 4;
+
 }
 
 .tao-webide-component {
   background-color: $tao-plum-900;
+  @include position(4, -1, 1, -1);
   grid-column: 4 / -1;
   grid-row: 1 / -1;
+
 }
 
 .tao-terminal-component {
+  @include position(1, 4, 4, -1);
   grid-row: 4 / -1;
   grid-column: 1 / 4;
 }

src/app/messages/messages.component.scss

@@ -164,20 +164,20 @@ $font-size-base:          14px;
 .tao-grid-message {
   display: grid;
   grid-template-rows: 1fr auto;
-  grid-row-gap: $nano;
+  grid-row-gap: $hair;
   width: 100%;
 
   background-color: $tao-gray-100;
   border-radius: $tao-panel-border-radius-sm;
   padding: $tiny;
   font-size: $font-size-base;
-  margin-bottom: $small;
+  margin-bottom: $hair;
 }
 
 .tao-grid-message-header {
   display: grid;
   grid-template-columns: 1fr 5fr 8fr;
-  grid-column-gap: 0;
+  grid-column-gap: 4px;
   width: 100%;
 
   img {

src/app/webide/webide.component.scss

@@ -163,7 +163,7 @@ $tao-gray-900: #000000;
   .active,
   .disabled,
   &:disabled {
-    background-color: $tao-bright-green-100;
+    background-color: $tao-plum-200;
     color: black;
   }
 }
@@ -188,19 +188,23 @@ $tao-gray-900: #000000;
     }
 
     &:disabled,
-    .disabled,
+    &.disabled,
-    .deployed,
+    &.deployed,
-    .deploying
+    &.deploy
     {
       background-color: $tao-bright-green-100;
       color: black;
     }
 
+    &.deploy {
+      background-color: $tao-warm-yellow-200;
+    }
+
 
     .loader {
-      border: 2px solid #ffffff;
+      border: 2px solid $tao-warm-yellow-600;
       border-radius: 50%;
-      border-top: 2px solid $tao-bright-green-100;
+      border-top: 2px solid $tao-warm-yellow-200;
       width: 15px;
       height: 15px;
       animation: spin 2s linear infinite;