Consistent colors for webide buttons

src/app/dashboard/dashboard.component.scss

@@ -141,6 +141,7 @@ $tao-navbar-height: 67px;
 
 .tao-grid-main-components {
 
+  overflow-y: hidden;
   display: grid;
   padding-top: $tao-navbar-height;
   width: 100vw;

src/app/webide/webide.component.html

@@ -1,4 +1,5 @@
-<div class="btn-group btn-group-sm flex-wrap">
+<div class="tao-grid-container">
+  <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
     <button *ngFor="let file of files"
             class="btn tao-tab-btn"
             (click)="tabSwitchButtonHandler(file)"
@@ -8,6 +9,26 @@
             [class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
       {{file}}
     </button>
+  </div>
+
+  <div class="btn-group-sm tao-deploy-btn-group">
+    <button type="submit"
+            class="btn tao-deploy-btn tao-grid-top-center"
+            (click)="sendCodeIfDirty(); deployCode()"
+            [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.deployed]="deployButtonState === 'DEPLOYED'"
+            [class.deploy]="deployButtonState === 'DEPLOYING'"
+            [class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
+            [class.failed]="deployButtonState === 'FAILED'"
+    >
+      <span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
+      <span *ngIf="deployButtonState === 'DEPLOYED'">
+        <img src="images/greentick_icon.svg"/>
+        <span>Deployed</span>
+      </span>
+      <span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
+      <span *ngIf="deployButtonState === 'FAILED'">Deployment failed. Retry</span></button>
+  </div>
 </div>
 
 <div (keyup)="setCodeState('DIRTY'); setDeployButtonState('TODEPLOY'); resetAutoSaveCountdown()"
@@ -18,18 +39,3 @@
   class="tfw-ace-editor"
 >
 </div>
-
-<div class="btn-group flex-wrap">
-<button type="submit"
-        class="btn btn-secondary"
-        (click)="sendCodeIfDirty(); deployCode()"
-        [disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
-        [class.btn-success]="deployButtonState === 'DEPLOYED'"
-        [class.btn-info]="deployButtonState === 'DEPLOYING'"
-        [class.disabled]="deployButtonState === 'DEPLOYING' || deployButtonState === 'DEPLOYED'"
-        [class.btn-danger]="deployButtonState === 'FAILED'"
-><span *ngIf="deployButtonState === 'TODEPLOY'">Deploy</span>
- <span *ngIf="deployButtonState === 'DEPLOYED'">Deploy</span>
- <span *ngIf="deployButtonState === 'DEPLOYING'"><div class="loader"></div>Reloading app...</span>
- <span *ngIf="deployButtonState === 'FAILED'">Deployment failed</span></button>
-</div>

src/app/webide/webide.component.scss

@@ -1,3 +1,21 @@
+//
+// Spaces
+//
+
+$space: 24px;
+
+$sxlarge: 9 * $space;
+$xxxlarge: 6 * $space;
+$xxlarge: 4 * $space;
+$xlarge: 2 * $space;
+$large: 1.5 * $space;
+$medium: $space;
+$small: 0.75 * $space;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+$nano: 0.125 * $space;
+
+
 // Tao blue palette
 $tao-blue-50:  #F2F7FE;
 $tao-blue-100: #C9DFFA;
@@ -118,44 +136,71 @@ $tao-gray-700: #232323;
 $tao-gray-800: #0C0C0C;
 $tao-gray-900: #000000;
 
+.tao-grid-container {
+  display: grid;
+  grid-template-columns: 8fr 1fr;
+}
+
 .tfw-ace-editor {
-  min-height: 85vh;
+  height: 100%;
-  height: 80%;
   width: 100%;
-  overflow: auto;
 }
 
 .btn-group {
   padding-left: 34px;
-  margin: 6px auto;
 }
 
 .tao-tab-btn {
+  background-color: white;
+  border: 1px solid $tao-plum-900;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 100px;
+  padding: 5px 19px;
+  z-index: 200;
+
+  .tao-tab-btn-saved,
+  .active,
+  .disabled,
+  &:disabled {
+    background-color: $tao-bright-green-100;
+    color: black;
+  }
+}
+
+.tao-deploy-btn-group {
+  margin: $small;
+
+  .tao-deploy-btn {
+    background: $tao-bright-green-200;
     border-radius: 100px;
     padding: 6px 19px;
-  z-index: 200;
-}
 
-.tao-tab-btn-saved {
+    img {
-  border: 1px solid $tao-plum-900;
+      position: relative;
-  background: white !important;
+      bottom: 1px;
-}
+      height: $small;
+    }
 
-.active {
+    &.failed {
-  background-color: white !important;
+      background-color: $tao-red-500;
-  color: $tao-gray-900;
+      color:white;
-}
+    }
 
-.disabled {
+    &:disabled,
-  background: white !important;
+    .disabled,
-  color: $tao-gray-900;
+    .deployed,
+    .deploying
+    {
+      background-color: $tao-bright-green-100;
+      color: black;
+    }
 
-}
 
-.loader {
+    .loader {
       border: 2px solid #ffffff;
       border-radius: 50%;
-  border-top: 2px solid #212529;
+      border-top: 2px solid $tao-bright-green-100;
       width: 15px;
       height: 15px;
       animation: spin 2s linear infinite;
@@ -163,9 +208,13 @@ $tao-gray-900: #000000;
       margin-right: 5px;
       position: relative;
       top: 2px;
-}
+    }
 
-@keyframes spin {
+    @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
+    }
+
+  }
 }
+

src/assets/images/greentick_icon.svg

@@ -0,0 +1 @@
+<svg id="Réteg_1" data-name="Réteg 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12.2"><defs><style>.cls-1{fill:none;stroke:#4fc3a8;stroke-linecap:round;stroke-miterlimit:10;}</style></defs><title>greentick_icon_smalll</title><line class="cls-1" x1="3.47" y1="6.58" x2="4.94" y2="8.45"/><line class="cls-1" x1="4.99" y1="8.44" x2="8.53" y2="4.18"/><ellipse class="cls-1" cx="6" cy="6.1" rx="5.5" ry="5.6"/></svg>