Change look and UI of messages, add new Avatao logo

src/app/dashboard/dashboard.component.html

@@ -1,9 +1,9 @@
 <div [attr.class]="layout | async">
   <div class="tfw-grid-main-components">
-    <div class="tfw-header"><app-header></app-header></div>
     <div [ngClass]="{'hide-attribute': hideMessages | async}" class="tfw-messages">
       <app-messages></app-messages>
     </div>
+    <div class="tfw-header"><app-header></app-header></div>
     <div class="tfw-web tao-grid-top-left"
          [ngClass]="{'deploy-blur': deploying || (iframeReloadPoller.isPolling | async)}">
         <div *ngIf="iframeUrl | async" class="iframe-container">

src/app/dashboard/dashboard.component.scss

@@ -57,7 +57,7 @@
   .tfw-messages {
     // Check whether the layout contains a web component
     div[class*="web"] & {
-      border: 2px solid $tao-gray-100;
+      border: 2px solid  $tao-base-color;
       border-top: 0;
       border-left: 0;
       border-bottom: 0;
@@ -67,15 +67,14 @@
   .tfw-header {
     padding: $small;
     padding-top: $tiny;
-    background-color: $tao-gray-50;
+    background-color: $tao-base-color;
   }
 
   @include set-scrollbar-style('dark', '.tfw-messages');
 
   .tfw-messages {
-    padding: $space;
-    padding-top: $hair;
-    background-color: $tao-gray-50;
+    padding: $small;
+    background-color: $tao-base-color;
     overflow-y: scroll;
     max-height: 95vmin;
 

src/app/header/header.component.html

@@ -1,4 +1,3 @@
-<div class="tfw-grid-navbar tao-grid-center-center">
-  <img src="images/avatao_logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
-  <span class="tfw-header-title">Tutorials</span>
+<div>
+  <img src="images/avatao-tutorial-framework-logo.svg" routerLink="/" class="tao-grid-center-left tfw-company-logo" alt="">
 </div>

src/app/header/header.component.scss

@@ -1,19 +1,8 @@
 @import "../../assets/scss/variables.scss";
 
-.tfw-header-title {
-  color: $tao-blue-500;
-  font-size: $font-size-h3;
-}
-
-.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;
+  padding: $tiny;
+  width: 80%;
 }
 

src/app/message-types/bot-messages.ts

@@ -4,6 +4,7 @@ export interface MessageData {
   originator?: string;
   timestamp?: Date;
   typing?: boolean;
+  buttons?: [string];
   command?: any;
   message: string;
 }

src/app/messages/messages.component.html

@@ -4,13 +4,18 @@
        [class.highlighted-message]="last"
        (click)="sendMessageCommand(message)">
     <div class="tfw-grid-message-header">
-      <img class="tao-grid-center-left" src="images/avataobot.svg"/>
       <div class="tao-grid-center-left originator">{{message.originator}}</div>
       <div class="timestamp tao-grid-center-right">{{message.timestamp | date:'HH:mm:ss'}}</div>
     </div>
     <div class="tfw-grid-message-body" [innerHtml]="message.message | safeHtml"></div>
+    <div *ngIf="showButton" class="tfw-btn">
+
+      <div class="no">
+        No
+      </div>
+    </div>
   </div>
-  <div *ngIf="showTypingIndicator" 
+  <div *ngIf="showTypingIndicator"
         class="tfw-grid-message jumping-circle-container"
         (click)="drainMessageQueue()">
     <div class="jumping-circle" id="jc1"></div>

src/app/messages/messages.component.scss

@@ -1,25 +1,54 @@
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout";
-
-.tfw-next-button {
-  text-align: center;
-}
+@import "../../assets/scss/mixins/button";
 
 .tfw-grid-message {
   display: grid;
   grid-template-rows: 1fr auto;
   grid-row-gap: $hair;
   width: 100%;
-
-  background-color: $tao-gray-100;
+  padding: $small;
   border-radius: $tao-panel-border-radius-sm;
-  padding: $tiny;
   font-size: $font-size-base;
-  margin-bottom: $hair;
+  margin-bottom: 8px;
 
   animation-name: inflate;
   animation-duration: 0.5s;
   animation-timing-function: cubic-bezier(0.01, 0.1, 0, 1);
+  color: white;
+  background-color: $tao-card-color;
+
+  .tfw-btn {
+    color: $tao-btn-font-color;
+
+    display: flex;
+    align-items: center;
+    text-align: center;
+
+    .no {
+      @include set-button-style($tao-red-color);
+    }
+
+    .yes {
+      @include set-button-style($tao-green-color);
+    }
+
+    .solution {
+      @include set-button-style($tao-green-color);
+    }
+
+    .hint {
+      @include set-button-style($tao-yellow-color);
+    }
+
+    .fix {
+      @include set-button-style($tao-yellow-color);
+    }
+
+    .next {
+      @include set-button-style($tao-blue-color);
+    }
+  }
 }
 
 .highlighted-message {
@@ -44,7 +73,7 @@
   background-color: gray;
   margin-top: 0.3em;
   margin-left: 0.3em;
-  
+
   animation-name: float;
   animation-duration: 1.7s;
   animation-timing-function: ease-in-out;
@@ -84,5 +113,5 @@
 }
 
 .tfw-grid-message-body {
-  @include word-break()
+  @include word-break();
 }

src/app/messages/messages.component.ts

@@ -13,6 +13,11 @@ export class MessagesComponent implements OnInit {
   @Output() newMessageEvent: EventEmitter<any> = new EventEmitter();
   newMessage: Subject<MessageData> = new Subject<MessageData>();
   showTypingIndicator = false;
+  showButton = true;
+  noButton = false;
+  solutionButton = false;
+  hintButton = false;
+  fixButton = false;
 
   messages: MessageData[] = [];
 

src/assets/images/avataobot.svg

@@ -1 +0,0 @@
-<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/scss/_main.scss

@@ -3,6 +3,7 @@
   'grid';
 
 @import
+  'mixins/button',
   'mixins/scrollbar';
 
 @import

src/assets/scss/_variables.scss

@@ -94,7 +94,7 @@ $tao-gray-900: #000000;
 // Tao messages
 $tao-base-color: #2A324C;
 $tao-btn-font-color: #1F2836;
-$tao-card-color: #94A6B9; // @10% opacity
+$tao-card-color: #363E56;
 $tao-title-color: #6697FF;
 $tao-copy-color: #FFFFFF;
 $tao-timestamp-color: #94A6B9;

src/assets/scss/mixins/_button.scss

@@ -0,0 +1,14 @@
+@import "../variables.scss";
+
+@mixin set-button-style($color) {
+  box-sizing: border-box;
+  border-radius: 10px;
+  background: $color;
+  border: 1.5px solid $color;
+
+  font-style: normal;
+  font-weight: bold;
+  font-size: 14px;
+  line-height: 26px;
+}
+

src/assets/scss/mixins/_layout.scss

@@ -2,8 +2,8 @@ $grid-columns-count: 100;
 $grid-rows-count: 30;
 
 $terminal-ide-web-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 60),
+  'messages': (0, 20, 0, 52),
+  'header': (0, 20, 52, 60),
   'ide': (56, 96, 0, 100),
   'terminal': (0, 56, 60, 100),
   'web': (20, 56, 0, 60),
@@ -11,8 +11,8 @@ $terminal-ide-web-layout: (
 );
 
 $terminal-web-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (),
   'terminal': (56, 96, 0, 100),
   'web': (20, 56, 0, 100),
@@ -20,8 +20,8 @@ $terminal-web-layout: (
 );
 
 $terminal-ide-vertical-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (56, 96, 0, 100),
   'terminal': (20, 56, 0, 100),
   'web': (),
@@ -29,8 +29,8 @@ $terminal-ide-vertical-layout: (
 );
 
 $terminal-ide-horizontal-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (20, 96, 0, 60),
   'terminal': (20, 96, 60, 100),
   'web': (),
@@ -38,8 +38,8 @@ $terminal-ide-horizontal-layout: (
 );
 
 $ide-web-vertical-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (56, 96, 0, 100),
   'terminal': (),
   'web': (20, 56, 0, 100),
@@ -47,8 +47,8 @@ $ide-web-vertical-layout: (
 );
 
 $terminal-only-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (),
   'terminal': (20, 96, 0, 100),
   'web': (),
@@ -56,8 +56,8 @@ $terminal-only-layout: (
 );
 
 $ide-only-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (20, 96, 0, 100),
   'terminal': (),
   'web': (),
@@ -65,8 +65,8 @@ $ide-only-layout: (
 );
 
 $web-only-layout: (
-  'header': (0, 20, 0, 8),
-  'messages': (0, 20, 8, 100),
+  'messages': (0, 20, 0, 92),
+  'header': (0, 20, 92, 100),
   'ide': (),
   'terminal': (),
   'web': (20, 96, 0, 100),

src/assets/scss/mixins/_scrollbar.scss

@@ -1,10 +1,10 @@
-@mixin set-scrollbar-style($style, $selctor) {
+@mixin set-scrollbar-style($style, $selector) {
   ::-webkit-scrollbar {
     width: 3px !important;
     height: 3px !important;
   }
 
-  #{$selctor}::-webkit-scrollbar-track {
+  #{$selector}::-webkit-scrollbar-track {
     border-radius: 10px !important;
     width: 3px !important;
     @if ($style == 'light') {
@@ -15,7 +15,7 @@
     };
   }
 
-  #{$selctor}::-webkit-scrollbar-thumb {
+  #{$selector}::-webkit-scrollbar-thumb {
     @if ($style == 'dark') {
       background: #8a8a8a !important;
 
@@ -25,7 +25,7 @@
     border-radius: 10px !important;
   }
 
-  #{$selctor}::-webkit-scrollbar-thumb:hover {
+  #{$selector}::-webkit-scrollbar-thumb:hover {
     @if ($style == 'dark') {
       background: #424242 !important;
 
@@ -35,3 +35,4 @@
     cursor: pointer !important;
   }
 }
+