Merge branch 'cssdesign'

.angular-cli.json

@@ -8,8 +8,9 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
-        "assets",
+        { "glob": "*(fonts|images|icons)/**/*",
-        "favicon.ico"
+          "input": "./assets/",
+          "output": "./" }
        ],
       "index": "index.html",
       "main": "main.ts",

src/app/dashboard/dashboard.component.html

@@ -1,12 +1,7 @@
 <app-header></app-header>
-<div class="container-fluid">
+<div class="tfw-grid-main-components">
-  <div class="row tfw-first-row">
+  <div class="tfw-messages"><app-messages></app-messages></div>
-    <div class="col-sm"><app-login></app-login></div>
+  <div class="tfw-web tao-grid-top-left"><app-login></app-login></div>
-    <div class="col-sm-6"><app-webide></app-webide></div>
+  <div class="tfw-webide"><app-webide></app-webide></div>
-    <div class="col-sm"><app-messages></app-messages></div>
+  <div class="tfw-terminal"><app-terminal></app-terminal></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>

src/app/dashboard/dashboard.component.scss

@@ -1,5 +1,79 @@
-.tfw-first-row {
+$space: 24px;
-  height: 40vh;
+
+$tao-plum-900: #272F4C;
+$tao-gray-50:  #FAFAFA;
+
+$tao-navbar-height: 67px;
+
+$layout-template: "default";  // Change this to switch template
+
+$default-layout: (
+  'messages': (1, 2, 1, 4),
+  'webide': (4, -1, 1, -1),
+  'terminal': (1, 4, 4, -1),
+  'web': (2, 4, 1, 4)
+);
+
+$raw-layout: (
+  'messages': (1, 2, 1, -1),
+  'webide': (4, -1, 1, -1),
+  'terminal': (2, 4, 1, -1),
+  'web': (),
+);
+
+$layout: (
+  "default": $default-layout,
+  "raw": $raw-layout
+);
+
+@mixin position-grid-items($map, $sel) {
+  $sel: if($sel == '' and &, &, $sel);
+  @debug $sel;
+
+  #{$sel} {
+    @each $k, $v in $map {
+      @at-root #{$sel}#{$k} {
+        @if (length($v) == 0) {
+          display: none
+        }
+        @else {
+          grid-column-start: nth($v, 1);
+          grid-column-end: nth($v, 2);
+          grid-row-start: nth($v, 3);
+          grid-row-end: nth($v, 4);
+        }
+      }
+    }
+  }
 }
 
-.tfw-second-row {}
+.tfw-grid-main-components {
+  overflow-y: hidden;
+  display: grid;
+  padding-top: $tao-navbar-height;
+  width: 100vw;
+  height: 100vh;
+  justify-content: center;
+  align-content: center;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+
+  @include position-grid-items(map_get($layout,$layout-template),'.tfw-');
+
+  .tfw-web {
+    padding: $space;
+  }
+
+  .tfw-messages {
+    padding: $space;
+    background-color: $tao-gray-50;
+  }
+
+  .tfw-webide {
+    background-color: $tao-plum-900;
+  }
+
+  .tfw-terminal {
+  }
+
+}

src/app/header/header.component.html

@@ -1,8 +1,11 @@
-<div class="jumbotron text-center">
+<nav class="navbar navbar-default navbar-expand-md navbar-light tfw-navbar fixed-top">
-  <h1>Tutorial framework Demo</h1>
+  <div class="tfw-grid-navbar">
-  <h3>
+<!--    <ul class="navbar-nav tao-grid-center-right">
-    Powered by Angular
+      <li class="nav-item tao-header-title">an</li>
-    <img class="logo" width="36" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
+    </ul>-->
-  </h3>
+    <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
-</div>
+    <ul class="navbar-nav">
-
+      <li class="nav-item tfw-header-title">Tutorials</li>
+    </ul>
+  </div>
+</nav>

src/app/header/header.component.scss

@@ -1,33 +1,57 @@
-@keyframes heartbeat
+$tao-blue-500: #277EEC;
-{
+$font-size-base: 14px;
-  0%
+$font-size-h3: floor(($font-size-base * 1.3));
-  {
+
-    transform: scale( .75 );
+$tao-navbar-height: 67px;
-  }
+
-  20%
+$company-logo-width: 130px;
-  {
+
-    transform: scale( 1 );
+.tfw-header-title {
-  }
+  color: $tao-blue-500;
-  40%
+  font-size: $font-size-h3;
-  {
-    transform: scale( .75 );
-  }
-  60%
-  {
-    transform: scale( 1 );
-  }
-  80%
-  {
-    transform: scale( .75 );
-  }
-  100%
-  {
-    transform: scale( .75 );
-  }
 }
 
-.logo {
+.tfw-navbar {
-  animation: heartbeat 1s infinite;
+  background-color: rgba(255, 255, 255, 0.96);
+  min-height: $tao-navbar-height;
+  box-shadow: 0px 1px 6px 0px #888;
+  margin-bottom: 12px;
+  border: 1px solid #e7e7e7;
+}
+
+.tfw-grid-navbar {
+  display: grid;
+  grid-template-columns: $company-logo-width 1fr;
+  grid-column-gap: 8px;
+  width: 100%;
+}
+
+.tfw-company-logo {
+  display: block;
+  width: $company-logo-width;
+}
+
+.tfw-company-logo-mobile {
+  display: none;
+  width: 130px;
+}
+
+@media (max-width: 767px) {
+  .tfw-grid-navbar {
+    grid-template-columns: 1fr;
+  }
+
+  .tfw-company-logo {
+    display: none;
+  }
+
+  .tfw-company-logo-mobile {
+    display: block;
+  }
+
+  .tfw-navbar-links {
+    justify-self: left !important;
+  }
 }
 
 .jumbotron {

src/app/messages/messages.component.html

@@ -1,11 +1,11 @@
-<div>
+<div class="tfw-messages-main">
-<ul>
+  <h5>Instructions</h5>
-  <li *ngFor="let message of messages.slice().reverse()">
+  <div class="tfw-grid-message" *ngFor="let message of messages.slice().reverse()">
-    <p>
+    <div class="tfw-grid-message-header">
-      <strong>{{message.originator}}</strong>
+      <img class="tao-grid-center-left" src="images/avataobot.svg"/>
-      <span class="timestamp">{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}</span><br>
+      <div class="tao-grid-center-left originator">{{message.originator}}</div>
-      <span [innerHtml]="message.message"></span>
+      <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
-    </p>
+    </div>
-  </li>
+    <div [innerHtml]="message.message"></div>
-</ul>
+  </div>
 </div>

src/app/messages/messages.component.scss

@@ -1,14 +1,61 @@
-div {
+$space: 24px;
-  display: block;
+
-  overflow: auto;
+$small: 0.75 * $space;
-  max-height: 100%;
+$tiny: 0.5 * $space;
+$hair: 0.25 * $space;
+
+
+$tao-blue-500: #277EEC;
+$tao-gray-100: #F2F2F2;
+
+$tao-panel-border-radius-sm:	 8px;
+
+$font-size-tiny:          12px;
+$font-size-base:          14px;
+
+
+.tfw-messages-main {
+  max-height: 50vmin;
+  overflow-y: scroll;
+
+  h5 {
+    margin-bottom: $small;
+    color: $tao-blue-500;
+    font-weight: 500;
+  }
 }
 
-ul {
+.tfw-grid-message {
-  max-height: inherit;
+  display: grid;
-  list-style-type: none;
+  grid-template-rows: 1fr auto;
+  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: $hair;
 }
 
-.timestamp {
+.tfw-grid-message-header {
+  display: grid;
+  grid-template-columns: 1fr 5fr 8fr;
+  grid-column-gap: 4px;
+  width: 100%;
+
+  img {
+    width: 12px;
+  }
+
+  .originator {
+    font-weight: 500;
+  }
+
+  .timestamp {
+    font-size: $font-size-tiny;
     opacity: 0.37;
+  }
+
 }
+

src/app/webide/webide.component.html

@@ -1,13 +1,34 @@
-<div class="btn-group btn-group-sm flex-wrap">
+<div class="tfw-grid-container">
+  <div class="btn-group btn-group-sm flex-wrap tao-grid-center-left">
     <button *ngFor="let file of files"
-          class="btn btn-secondary"
+            class="btn tfw-tab-btn"
             (click)="tabSwitchButtonHandler(file)"
             [class.active]="filename === file"
             [class.disabled]="filename === file"
             [disabled]="filename === file"
-          [class.btn-success]="filename === file && codeState === 'SAVED'">
+            [class.tao-tab-btn-saved]="filename === file && codeState === 'SAVED'">
       {{file}}
     </button>
+  </div>
+
+  <div class="btn-group-sm tfw-deploy-btn-group">
+    <button type="submit"
+            class="btn tfw-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,18 +1,86 @@
+$space: 24px;
+$small: 0.75 * $space;
+
+$tao-bright-green-100: #c5f2e4;
+$tao-bright-green-200: #a0ead3;
+
+$tao-warm-yellow-200: #FFE0A9;
+$tao-warm-yellow-600: #E59C3C;
+
+$tao-plum-200: #BEC7F3;
+$tao-plum-900: #272F4C;
+$tao-red-500: #FF5252;
+
+
+.tfw-grid-container {
+  display: grid;
+  grid-template-columns: 8fr 1fr;
+}
+
 .tfw-ace-editor {
-  min-height: 30vh;
+  height: 100%;
-  height: 80%;
   width: 100%;
-  overflow: auto;
 }
 
-.btn-secondary {
+.btn-group {
-  border-radius: 0;
+  padding-left: 34px;
 }
 
-.loader {
+.tfw-tab-btn {
-  border: 2px solid #ffffff;
+  background-color: white;
+  border: 1px solid $tao-plum-900;
+  border-left: 0;
+  border-right: 0;
+  border-radius: 100px;
+  padding: 5px 19px;
+  z-index: 200;
+
+  .tfw-tab-btn-saved,
+  .active,
+  .disabled,
+  &:disabled {
+    background-color: $tao-plum-200;
+    color: black;
+  }
+}
+
+.tfw-deploy-btn-group {
+  margin: $small;
+
+  .tfw-deploy-btn {
+    background: $tao-bright-green-200;
+    border-radius: 100px;
+    padding: 6px 19px;
+
+    img {
+      position: relative;
+      bottom: 1px;
+      height: $small;
+    }
+
+    &.failed {
+      background-color: $tao-red-500;
+      color:white;
+    }
+
+    &:disabled,
+    &.disabled,
+    &.deployed,
+    &.deploy
+    {
+      background-color: $tao-bright-green-100;
+      color: black;
+    }
+
+    &.deploy {
+      background-color: $tao-warm-yellow-200;
+    }
+
+
+    .loader {
+      border: 2px solid $tao-warm-yellow-600;
       border-radius: 50%;
-  border-top: 2px solid #212529;
+      border-top: 2px solid $tao-warm-yellow-200;
       width: 15px;
       height: 15px;
       animation: spin 2s linear infinite;
@@ -20,9 +88,13 @@
       margin-right: 5px;
       position: relative;
       top: 2px;
-}
+    }
 
-@keyframes spin {
+    @keyframes spin {
       0% { transform: rotate(0deg); }
       100% { transform: rotate(360deg); }
+    }
+
+  }
 }
+

src/app/webide/webide.component.ts

@@ -11,7 +11,7 @@ import 'brace/mode/json';
 import 'brace/mode/python';
 import 'brace/mode/sql';
 
-import 'brace/theme/monokai';
+import 'brace/theme/cobalt';
 import { SourceCode } from './source-code';
 import { WebSocketService } from '../services/websocket.service';
 import { ProcessManagerService } from '../services/processmanager.service';
@@ -31,7 +31,7 @@ export class WebideComponent implements OnInit {
   filename = 'demo.js';
   code: string = defaultSourceCode;
   language = 'javascript';
-  theme = 'monokai';
+  theme = 'cobalt';
   directory = '';
   files: string[];
   codeState = 'SAVED';

src/assets/images/avataobot.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11.98 16.98"><defs><style>.cls-1{fill:none;stroke:#277eec;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>avataobot</title><rect class="cls-1" x="2.46" y="7.47" width="7.05" height="7.05" transform="translate(9.53 -1.01) rotate(45)"/><polyline class="cls-1" points="10.98 1 5.99 5.99 1 1"/></svg>

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>

src/assets/scss/_grid.scss

@@ -0,0 +1,44 @@
+.tao-grid-center-center {
+  justify-self: center;
+  align-self: center;
+}
+
+.tao-grid-center-right {
+  justify-self: right;
+  align-self: center;
+}
+
+.tao-grid-center-left {
+  justify-self: left;
+  align-self: center;
+}
+
+.tao-grid-start-center {
+  justify-self: center;
+  align-self: start;
+}
+
+.tao-grid-end-center {
+  justify-self: center;
+  align-self: end;
+}
+
+.tao-grid-top-right {
+  justify-self: right;
+  align-self: start;
+}
+
+.tao-grid-top-left {
+  justify-self: left;
+  align-self: start;
+}
+
+.tao-grid-bottom-left {
+  justify-self: left;
+  align-self: end;
+}
+
+.tao-grid-bottom-right {
+  justify-self: right;
+  align-self: end;
+}

src/assets/scss/_main.scss

@@ -0,0 +1,12 @@
+
+
+@import
+  'variables',
+  'grid';
+
+@import
+  'shared/buttons';
+
+
+
+

src/assets/scss/_variables.scss

@@ -0,0 +1,160 @@
+//
+// 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;
+
+
+// Color system
+
+// Tao blue palette
+$tao-blue-50:  #F2F7FE;
+$tao-blue-100: #C9DFFA;
+$tao-blue-200: #A0C6F7;
+$tao-blue-300: #77AEF3;
+$tao-blue-400: #4E95EF;
+$tao-blue-500: #277EEC;
+$tao-blue-600: #2170B7;
+$tao-blue-700: #195684;
+$tao-blue-800: #103B5B;
+$tao-blue-900: #081A2B;
+
+// Tao sky palette
+$tao-sky-50:  #F1FAFD;
+$tao-sky-100: #C5E9F5;
+$tao-sky-200: #9AD8EE;
+$tao-sky-300: #6EC7E6;
+$tao-sky-400: #42B7DF;
+$tao-sky-500: #19A7D8;
+$tao-sky-600: #0E8BA8;
+$tao-sky-700: #04647A;
+$tao-sky-800: #004251;
+$tao-sky-900: #002028;
+
+// Tao phtalo palette
+$tao-phtalo-50:  #F2FBFC;
+$tao-phtalo-100: #C8EDF1;
+$tao-phtalo-200: #9FDFE6;
+$tao-phtalo-300: #75D1DB;
+$tao-phtalo-400: #4CC3D0;
+$tao-phtalo-500: #24B6C6;
+$tao-phtalo-600: #16989E;
+$tao-phtalo-700: #0C7575;
+$tao-phtalo-800: #034C4F;
+$tao-phtalo-900: #002426;
+
+// Tao turqoise palette
+$tao-turqoise-50:  #F1FBFB;
+$tao-turqoise-100: #C3EFEF;
+$tao-turqoise-200: #96E3E3;
+$tao-turqoise-300: #68D7D7;
+$tao-turqoise-400: #3BCBCB;
+$tao-turqoise-500: #10BFBF;
+$tao-turqoise-600: #079995;
+$tao-turqoise-700: #00726F;
+$tao-turqoise-800: #004C4A;
+$tao-turqoise-900: #002625;
+
+// Tao bright green palette
+$tao-bright-green-50:  #effbf7;
+$tao-bright-green-100: #c5f2e4;
+$tao-bright-green-200: #a0ead3;
+$tao-bright-green-300: #7ae2c2;
+$tao-bright-green-400: #55d9b0;
+$tao-bright-green-500: #2fd19f;
+$tao-bright-green-600: #2ab587;
+$tao-bright-green-700: #248e63;
+$tao-bright-green-800: #1c6844;
+$tao-bright-green-900: #114431;
+
+// Tao warm yellow palette
+$tao-warm-yellow-50:  #FFF8EB;
+$tao-warm-yellow-100: #FFEDCE;
+$tao-warm-yellow-200: #FFE0A9;
+$tao-warm-yellow-300: #FFD283;
+$tao-warm-yellow-400: #FFC55E;
+$tao-warm-yellow-500: #FFB83B;
+$tao-warm-yellow-600: #E59C3C;
+$tao-warm-yellow-700: #CC8B36;
+$tao-warm-yellow-800: #B2762F;
+$tao-warm-yellow-900: #996526;
+
+// Tao plum palette
+$tao-plum-50:  #F6F8FD;
+$tao-plum-100: #DADFF8;
+$tao-plum-200: #BEC7F3;
+$tao-plum-300: #A2AFED;
+$tao-plum-400: #8797E8;
+$tao-plum-500: #6C80E3;
+$tao-plum-600: #5E77BF;
+$tao-plum-700: #4B5E99;
+$tao-plum-800: #384672;
+$tao-plum-900: #272F4C;
+
+// Tao pink palette
+$tao-pink-50:  #FFF0F7;
+$tao-pink-100: #FFBFDF;
+$tao-pink-200: #FF8FC6;
+$tao-pink-300: #FF5EAE;
+$tao-pink-400: #FF2E95;
+$tao-pink-500: #FF007E;
+$tao-pink-600: #D8007C;
+$tao-pink-700: #B20066;
+$tao-pink-800: #8C0050;
+$tao-pink-900: #66003A;
+
+// Tao red palette
+$tao-red-50:  #FFF5F5;
+$tao-red-100: #FFD4D4;
+$tao-red-200: #FFB3B3;
+$tao-red-300: #FF9292;
+$tao-red-400: #FF7171;
+$tao-red-500: #FF5252;
+$tao-red-600: #E54848;
+$tao-red-700: #CC3636;
+$tao-red-800: #B22424;
+$tao-red-900: #991919;
+
+// Tao gray palette
+$tao-gray-50:  #FAFAFA;
+$tao-gray-100: #F2F2F2;
+$tao-gray-200: #D6D6D6;
+$tao-gray-300: #A0A0A0;
+$tao-gray-400: #777777;
+$tao-gray-500: #555555;
+$tao-gray-600: #323232;
+$tao-gray-700: #232323;
+$tao-gray-800: #0C0C0C;
+$tao-gray-900: #000000;
+
+
+// Panel border radius
+$tao-panel-border-radius:	     14px;
+$tao-panel-border-radius-sm:	 8px;
+$tao-input-border-radius:	     6px;
+
+// Font sizes
+$font-size-nano:          11px;
+$font-size-tiny:          12px;
+$font-size-small:         13px;
+$font-size-base:          14px;
+$font-size-title:         floor(($font-size-base * 3.5));
+$font-size-h2:            floor(($font-size-base * 1.75));
+$font-size-h3:            floor(($font-size-base * 1.3));
+$font-size-h4:            floor(($font-size-base * 1.2));
+$font-size-h5:            floor(($font-size-base * 1.1));
+
+
+
+$tao-navbar-height: 67px;

src/assets/scss/shared/_buttons.scss

@@ -0,0 +1,47 @@
+.tao-btn-primary {
+  color: $tao-blue-500;
+  font-size: $font-size-base;
+  padding: 6px 19px;
+  border-radius: 100px !important;
+  background-color: transparent;
+  border: 1px solid $tao-blue-500;
+  outline: none !important;
+  transition: all 0.18s ease-out 0.18s;
+  cursor: pointer;
+
+  &.large {
+    font-size: $font-size-h3;
+    padding: 10px 32px;
+  }
+
+  &.hidden {
+    visibility: hidden;
+
+  }
+
+  &.medium {
+    font-size: $font-size-h4;
+    padding: 8px 24px;
+  }
+
+  &:hover {
+    background-color: transparent;
+    color: $tao-blue-500;
+    box-shadow: inset 0 0 0 1px $tao-blue-500;
+  }
+}
+
+.tao-btn-rainbow {
+  @extend .tao-btn-primary;
+  background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 70%,$tao-bright-green-300 100%);
+  transition: all 2s ease;
+  color: white;
+  border: none;
+  text-decoration: none !important;
+
+  &:hover {
+    box-shadow: none;
+    background: linear-gradient(135deg, $tao-blue-500 0%, $tao-turqoise-500 80%,$tao-bright-green-300 100%);
+    color: white;
+  }
+}

src/index.html

@@ -6,7 +6,7 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
 </head>
 <body>
   <app-root></app-root>

src/styles.scss

@@ -1,3 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 @import '../node_modules/bootstrap/scss/bootstrap';
 @import '../node_modules/xterm/dist/xterm.css';
+
+@import "assets/scss/main";