From 3bf8834b74bb189d0e684b292f45a73e682eb438 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 28 Aug 2020 17:35:55 +0200
Subject: [PATCH] [frontend] Add info button to telegram

---
 .../telegram-settings.component.html                  |  9 ++++++++-
 .../telegram-settings.component.scss                  | 11 +++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
index 8c8cc4c..987b3be 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
@@ -1,6 +1,13 @@
 <mat-card>
   <mat-card-header>
-    <mat-card-title>Telegram</mat-card-title>
+    <mat-card-title class="platform-title">
+      <div class="platform-heading">
+        Telegram
+      </div>
+      <button mat-icon-button aria-label="How to use">
+        <mat-icon matTooltip="How to use" class="info-button">info</mat-icon>
+      </button>
+    </mat-card-title>
   </mat-card-header>
   <mat-card-content>
     <mat-list *ngIf="telegrams$ | async as telegrams">
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss
index b76aeea..bc84650 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.scss
@@ -4,3 +4,14 @@
   width: 100%;
   align-items: center;
 }
+
+.platform-title {
+  display: grid;
+  grid-template-columns: 1fr 40px;
+  width: 100%;
+  align-items: center;
+}
+
+.platform-heading {
+  align-self: flex-end;
+}