From 619d659a3a2c6b37db6df60c814b4b7ff43e1bcc Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 4 Sep 2020 20:57:30 +0200
Subject: [PATCH] [frontend] Design fixes

---
 .../src/app/homepage/homepage.component.html              | 4 +---
 .../src/app/hoodspage/hoodspage.component.scss            | 2 +-
 .../email/email-settings/email-settings.component.html    | 8 ++++----
 .../email/email-settings/email-settings.component.scss    | 5 +++++
 .../telegram-settings/telegram-settings.component.html    | 7 +++----
 .../telegram-settings/telegram-settings.component.scss    | 5 +++++
 .../twitter-settings/twitter-settings.component.html      | 7 +++----
 .../twitter-settings/twitter-settings.component.scss      | 5 +++++
 8 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/kibicara-frontend/src/app/homepage/homepage.component.html b/kibicara-frontend/src/app/homepage/homepage.component.html
index e4fabba..5dd558d 100644
--- a/kibicara-frontend/src/app/homepage/homepage.component.html
+++ b/kibicara-frontend/src/app/homepage/homepage.component.html
@@ -3,9 +3,7 @@
     <h1 class="h1">Kibicara</h1>
     <p class="text">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
+      tempor incididunt ut labore et dolore magna aliqua.
     </p>
     <a mat-raised-button [routerLink]="['/hoods']">Find your hood!</a>
   </div>
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
index a59f831..7f4bcde 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
@@ -29,7 +29,7 @@ h1 {
 }
 
 .banner {
-  background: url("../../assets/hoods2.jpg");
+  background: url("../../assets/hoods1.jpg");
   background-size: 100%;
   width: 100%;
 }
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
index 56be6f9..717af24 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
@@ -1,13 +1,13 @@
 <mat-card>
   <mat-card-header>
+    <div mat-card-avatar class="email"></div>
     <mat-card-title class="platform-title">
-      <div class="platform-heading">
-        E-Mails
-      </div>
-      <button mat-icon-button aria-label="How to use" (click)="onInfoClick()">
+      E-Mail
+      <button mat-icon-button aria-label="How to use">
         <mat-icon
           matTooltip="How to add an email inbox to your hood"
           class="info-button"
+          (click)="onInfoClick()"
           >info</mat-icon
         >
       </button>
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
index a08e4c4..14226bb 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.scss
@@ -27,3 +27,8 @@
   grid-column-start: 2;
   align-self: flex-start;
 }
+
+.email {
+  background-image: url("../../../../assets/email.png");
+  background-size: cover;
+}
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 f23272c..78d900a 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,12 +1,11 @@
 <mat-card>
   <mat-card-header>
+    <div mat-card-avatar class="telegram"></div>
     <mat-card-title class="platform-title">
-      <div class="platform-heading">
-        Telegram
-      </div>
+      Telegram
       <button mat-icon-button aria-label="How to use">
         <mat-icon
-          matTooltip="How to add an telegram bot to your hood"
+          matTooltip="How to send and receive hood broadcast messages with telegram"
           class="info-button"
           (click)="onInfoClick()"
           >info</mat-icon
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 bc84650..e8e31c9 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
@@ -15,3 +15,8 @@
 .platform-heading {
   align-self: flex-end;
 }
+
+.telegram {
+  background-image: url("../../../../assets/telegram.png");
+  background-size: cover;
+}
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
index de6f099..4a29654 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
@@ -1,12 +1,11 @@
 <mat-card>
   <mat-card-header>
+    <div mat-card-avatar class="twitter"></div>
     <mat-card-title class="platform-title">
-      <div class="platform-heading">
-        Twitter
-      </div>
+      Twitter
       <button mat-icon-button aria-label="How to use">
         <mat-icon
-          matTooltip="How to add an twitter account to your hood"
+          matTooltip="How to send and receive hood broadcast messages with twitter"
           class="info-button"
           (click)="onInfoClick()"
           >info</mat-icon
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss
index bc84650..4a48207 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.scss
@@ -15,3 +15,8 @@
 .platform-heading {
   align-self: flex-end;
 }
+
+.twitter {
+  background-image: url("../../../../assets/twitter.png");
+  background-size: cover;
+}