Change terminal colors

src/app/dashboard/dashboard.component.html

@@ -13,4 +13,5 @@
   <div class="tfw-terminal">
       <app-terminal></app-terminal>
   </div>
+  <div class="tfw-terminal-footer"></div>
 </div>

src/app/dashboard/dashboard.component.scss

@@ -30,6 +30,7 @@
 
   .tfw-messages {
     padding: $space;
+    padding-top: $hair;
     background-color: $tao-gray-50;
     overflow-y: scroll;
 
@@ -61,12 +62,16 @@
   }
 
   .tfw-terminal {
-    border: 1px solid $tao-gray-500;
+    border: 2px solid $tao-plum-100;
     border-left: 0;
     border-right: 0;
     border-bottom: 0;
     background-color: black;
   }
+
+  .tfw-terminal-footer {
+    background-color: $tao-phtalo-900;
+  }
 }
 
 .deploy-blur {

src/app/services/terminado.service.ts

@@ -11,7 +11,32 @@ export class TerminadoService {
   constructor() {
     Terminal.applyAddon(fit);
     Terminal.applyAddon(terminado);
-    this.xterm = new Terminal();
+    this.xterm = new Terminal({
+      theme: {
+        foreground: '#ffffff',
+        background: '#002426',                  // $tao-phtalo-900
+        cursor: '#ffffff',
+        selection: 'rgba(255, 255, 255, 0.3)',
+        black: '#000000',
+        red: '#FF5252',                         // $tao-red-500
+        brightRed: '#FF7171',                   // $tao-red-400
+        green: '#2fd19f',                       // $tao-bright-green-500
+        brightGreen: '#2fd19f',                 // $tao-bright-green-500
+        brightYellow: '#FFD283',                // $tao-warm-yellow-300
+        yellow: '#FFB83B',                      // $tao-warm-yellow-500
+        magenta: '#FF8FC6',                     // $tao-pink-200
+        brightMagenta: '#FF8FC6',               // $tao-pink-200
+        cyan: '#277EEC',                        // $tao-blue-500
+        blue: '#277EEC',                        // $tao-blue-500
+        brightCyan: '#42B7DF',                  // $tao-sky-400
+        brightBlue: '#19A7D8',                  // $tao-sky-500
+        white: '#FAFAFA',                       // $tao-gray-50
+        brightBlack: '#808080',
+        brightWhite: '#ffffff'
+      },
+      fontSize: 14
+    });
+
     const wsproto = (location.protocol === 'https:') ? 'wss://' : 'ws://';
     this.ws = new WebSocket(wsproto + window.location.host + '/terminal');
   }

src/app/terminal/terminal.component.html

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

src/app/terminal/terminal.component.scss

@@ -2,7 +2,11 @@
 
 
 .tfw-xterm {
-  .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: 'default';
+$layout-template: 'hraw';

src/assets/scss/mixins/_layout.scss

@@ -4,8 +4,9 @@ $grid-rows-count: 15;
 $default-layout: (
   'header': (1, 2, 1, 2),
   'messages': (1, 2, 2, 10),
-  'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
-  'terminal': (1, 4, 10,$grid-rows-count+1),
+  'webide': (4,$grid-rows-count+1, 1, $grid-rows-count+1),
+  'terminal': (1, 4, 10, $grid-rows-count),
+  'terminal-footer': (1, 4, $grid-rows-count, -1),
   'web': (2, 4, 1, 10)
 );
 
@@ -13,7 +14,8 @@ $vraw-layout: (
   'header': (1, 2, 1, 2),
   'messages': (1, 2, 2,$grid-rows-count+1),
   'webide': (4,$grid-rows-count+1, 1,$grid-rows-count+1),
-  'terminal': (2, 4, 1,$grid-rows-count+1),
+  'terminal': (2, 4, 1,$grid-rows-count),
+  'terminal-footer': (2, 4, $grid-rows-count, -1),
   'web': (),
 );
 
@@ -21,7 +23,8 @@ $hraw-layout: (
   'header': (1, 2, 1,$grid-rows-count+1),
   'messages': (1, 2, 2,$grid-rows-count+1),
   'webide': (2,$grid-rows-count+1, 1, 10),
-  'terminal': (2,$grid-rows-count+1, 10,$grid-rows-count+1),
+  'terminal': (2, $grid-rows-count+1, 10, $grid-rows-count),
+  'terminal-footer': (2, $grid-rows-count+1, $grid-rows-count, -1),
   'web': (),
 );