Fixing terminal colors

src/app/dashboard/dashboard.component.scss

@@ -16,7 +16,7 @@
   .tfw-header,
   .tfw-messages {
     @if ($layout-template == 'default') {
-      border: 2px solid $tao-plum-100;
+      border: 2px solid $tao-gray-100;
       border-top: 0;
       border-left: 0;
       border-bottom: 0;
@@ -62,15 +62,19 @@
   }
 
   .tfw-terminal {
-    border: 2px solid $tao-plum-100;
+    // overflow-y: hidden;
+    border: 1px solid $tao-plum-100;
     border-left: 0;
-    border-right: 0;
     border-bottom: 0;
     background-color: black;
   }
 
   .tfw-terminal-footer {
-    background-color: $tao-phtalo-900;
+    background-color: $tao-gray-800;
+    border: 1px solid $tao-plum-100;
+    border-left: 0;
+    border-top: 0;
+    border-bottom: 0;
   }
 }
 

src/app/services/terminado.service.ts

@@ -14,7 +14,7 @@ export class TerminadoService {
     this.xterm = new Terminal({
       theme: {
         foreground: '#ffffff',
-        background: '#002426',                  // $tao-phtalo-900
+        background: '#0C0C0C',                  // $tao-gray-800
         cursor: '#ffffff',
         selection: 'rgba(255, 255, 255, 0.3)',
         black: '#000000',

src/app/terminal/terminal.component.html

@@ -1 +1,3 @@
-<div #xterm class="tfw-xterm" (window:resize)="fit()"></div>
+<div class="tfw-xterm-container">
+  <div #xterm class="tfw-xterm"></div>
+</div>

src/app/terminal/terminal.component.scss

@@ -1,12 +1,6 @@
 @import "../../assets/scss/mixins/layout.scss";
 
+.tfw-xterm-container {
+  @include set-component-size('terminal');
 
-.tfw-xterm {
-  .xterm-viewport {
-    @include set-component-size('terminal');
-  }
-
-  .xterm .composition-view {
-    background: blue;
-  }
 }

src/assets/scss/_variables.scss

@@ -161,4 +161,4 @@ $company-logo-width: 130px;
 
 
 // Change this to switch template. Options: 'default', 'vraw', 'hraw'
-$layout-template: 'hraw';
+$layout-template: 'default';

src/assets/scss/mixins/_layout.scss

@@ -62,4 +62,10 @@ $layout: (
 
   min-width: #{$columns-count / $grid-columns-count * 100}vw;
   min-height: #{$rows-count / $grid-rows-count * 100}vh;
+
+  width: #{$columns-count / $grid-columns-count * 100}vw;
+  height: #{$rows-count / $grid-rows-count * 100}vh;
+
+  max-width: #{$columns-count / $grid-columns-count * 100}vw;
+  max-height: #{$rows-count / $grid-rows-count * 100}vh;
 }