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 @@
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 = new Subject();
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 @@
+
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', '');
}