From fb2735ccc795949a34ca7cdf5ab3ff2329871ff4 Mon Sep 17 00:00:00 2001
From: Gabor PEK <gabor.pek@avatao.com>
Date: Wed, 17 Jun 2020 17:47:57 +0200
Subject: [PATCH] Fix style of message buttons

---
 src/app/message-types/bot-messages.ts    |  5 +++++
 src/app/messages/messages.component.html |  2 +-
 src/app/messages/messages.component.scss |  7 +++++--
 src/app/messages/messages.component.ts   | 10 +++++++++-
 src/assets/scss/mixins/_button.scss      |  1 +
 src/index.html                           |  1 +
 src/styles.scss                          |  1 +
 7 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/message-types/bot-messages.ts b/src/app/message-types/bot-messages.ts
index f374d15..1defaf4 100644
--- a/src/app/message-types/bot-messages.ts
+++ b/src/app/message-types/bot-messages.ts
@@ -9,4 +9,9 @@ export interface MessageData {
   message: string;
 }
 
+export interface MessageButton {
+  [Key: string]: string;
+}
+
+
 export interface Message extends MessageData, WebSocketMessage {}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
index 8b50843..278e6e2 100644
--- a/src/app/messages/messages.component.html
+++ b/src/app/messages/messages.component.html
@@ -15,7 +15,7 @@
         <button *ngFor="let button of message.buttons"
              class="{{button}}"
              (click)="sendButtonCommand(button)">
-          {{button | capitalize}}
+          {{buttons[button] | capitalize}}
         </button>
       </div>
     </div>
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss
index c406c12..1748035 100644
--- a/src/app/messages/messages.component.scss
+++ b/src/app/messages/messages.component.scss
@@ -3,6 +3,8 @@
 @import "../../assets/scss/mixins/button";
 
 .tfw-grid-message {
+  font-family: "Roboto";
+  font-style: normal;
   display: grid;
   grid-template-rows: 1fr auto;
   grid-row-gap: $nano;
@@ -41,7 +43,7 @@
     }
 
     .solution {
-      @include set-button-style($tao-green-color);
+      @include set-button-style($tao-blue-color);
       width: $xlarge + $medium + $tiny;
     }
 
@@ -52,11 +54,12 @@
 
     .fix {
       @include set-button-style($tao-yellow-color);
-      width: $xlarge;
+      width: $xlarge + $medium + $tiny;
     }
 
     .next {
       @include set-button-style($tao-blue-color);
+      width: $xlarge;
     }
   }
 }
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
index d46ba35..f1a3b7e 100644
--- a/src/app/messages/messages.component.ts
+++ b/src/app/messages/messages.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, OnInit, EventEmitter, Output, ElementRef } from '@angular/core';
-import { MessageData, Message } from '../message-types/bot-messages';
+import { MessageData, Message, MessageButton } from '../message-types/bot-messages';
 import { MarkdownService } from '../services/markdown.service';
 import { WebSocketService } from '../services/websocket.service';
 import { Subject } from 'rxjs';
@@ -14,6 +14,14 @@ export class MessagesComponent implements OnInit {
   newMessage: Subject<MessageData> = new Subject<MessageData>();
   showTypingIndicator = false;
   messages: MessageData[] = [];
+  buttons: MessageButton = {
+    'yes' : 'Yes',
+    'no' : 'No',
+    'fix' : 'Ready to fix',
+    'solution' : 'Show solution',
+    'hint' : 'Hint',
+    'next' : 'Next',
+  };
 
   constructor(
     private markdownService: MarkdownService,
diff --git a/src/assets/scss/mixins/_button.scss b/src/assets/scss/mixins/_button.scss
index 75ff7b1..95084bb 100644
--- a/src/assets/scss/mixins/_button.scss
+++ b/src/assets/scss/mixins/_button.scss
@@ -12,5 +12,6 @@
   line-height: 26px;
   height: $space;
   margin-right: $tiny;
+  color: $tao-btn-font-color;
 }
 
diff --git a/src/index.html b/src/index.html
index 5b60894..c5cfa55 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="images/favicon.ico">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" type="text/css">
 </head>
 <body>
   <app-root></app-root>
diff --git a/src/styles.scss b/src/styles.scss
index 73b0579..828afbd 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,5 +8,6 @@ body, html {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
+
   @include set-scrollbar-style('light', '');
 }