Use grid layout instead of bootstrap columns

src/app/dashboard/dashboard.component.html

@@ -1,12 +1,6 @@
 <app-header></app-header>
-<div class="container-fluid">
-  <div class="row tfw-first-row">
-    <div class="col-sm"><app-login></app-login></div>
-    <div class="col-sm-6"><app-webide></app-webide></div>
-    <div class="col-sm"><app-messages></app-messages></div>
-  </div>
-  <div class="row tfw-second-row">
-    <div class="col-sm-3"><app-testmessager></app-testmessager></div>
-    <div class="col-sm-9"><app-terminal></app-terminal></div>
-  </div>
+<div class="tao-grid-components">
+    <div><app-messages></app-messages></div>
+    <div><app-login></app-login></div>
+    <div><app-webide></app-webide></div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -17,9 +17,20 @@ $nano: 0.125 * $space;
 
 $tao-navbar-height: 67px;
 
-.tfw-first-row {
-  height: 40vh;
+.tao-grid-components {
+  display: grid;
   margin-top: $tao-navbar-height + $space;
+  grid-template-columns: 1fr 2fr 2fr;
+  grid-column-gap: $space;
+  width: 100%;
 }
 
-.tfw-second-row {}
+.tao-grid-middle-component {
+  display: grid;
+  width: 100%;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  align-items: start;
+  justify-items: center;
+  justify-content: center;
+}

src/app/header/header.component.html

@@ -1,11 +1,11 @@
 <nav class="navbar navbar-default navbar-expand-md navbar-light tao-navbar fixed-top">
   <div class="tao-grid-navbar">
-    <ul class="navbar-nav tao-grid-center-right">
+<!--    <ul class="navbar-nav tao-grid-center-right">
       <li class="nav-item tao-header-title">an</li>
-    </ul>
-    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-center tao-company-logo" alt="">
+    </ul>-->
+    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-right tao-company-logo" alt="">
     <ul class="navbar-nav tao-grid-center-left">
-      <li class="nav-item tao-header-title">tutorial</li>
+      <li class="nav-item tao-header-title">Tutorials</li>
     </ul>
   </div>
 </nav>

src/app/header/header.component.scss

@@ -21,7 +21,7 @@ $nano: 0.125 * $space;
 //
 $tao-blue-500: #277EEC;
 $font-size-base: 14px;
-$font-size-h4: floor(($font-size-base * 1.2));
+$font-size-h3: floor(($font-size-base * 1.3));
 
 $tao-navbar-height: 67px;
 
@@ -31,7 +31,7 @@ $tao-navbar-height: 67px;
 //
 .tao-header-title {
   color: $tao-blue-500;
-  font-size: $font-size-h4;
+  font-size: $font-size-h3;
 }
 
 .tao-navbar {
@@ -44,7 +44,7 @@ $tao-navbar-height: 67px;
 
 .tao-grid-navbar {
   display: grid;
-  grid-template-columns: 10fr 1fr 10fr;
+  grid-template-columns: 1fr 1fr;
   grid-column-gap: 8px;
   width: 100%;
 }

src/app/webide/webide.component.scss

@@ -1,5 +1,5 @@
 .tfw-ace-editor {
-  min-height: 30vh;
+  min-height: 100vh;
   height: 80%;
   width: 100%;
   overflow: auto;