[frontend] Design fixes

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
+      tempor incididunt ut labore et dolore magna aliqua.
-      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-      commodo consequat.
     </p>
     <a mat-raised-button [routerLink]="['/hoods']">Find your hood!</a>
   </div>

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%;
 }

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-Mail
-        E-Mails
+      <button mat-icon-button aria-label="How to use">
-      </div>
-      <button mat-icon-button aria-label="How to use" (click)="onInfoClick()">
         <mat-icon
           matTooltip="How to add an email inbox to your hood"
           class="info-button"
+          (click)="onInfoClick()"
           >info</mat-icon
         >
       </button>

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;
+}

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>
       <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

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;
+}

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>
       <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

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;
+}