[frontend] Add twitter add description

kibicara-frontend/src/app/platforms/platforms.module.ts

@@ -8,7 +8,7 @@ import { EmailDialogComponent } from './email/email-settings/email-dialog/email-
 import { EmailInfoDialogComponent } from './email/email-settings/email-info-dialog/email-info-dialog.component';
 import { TelegramInfoDialogComponent } from './telegram/telegram-settings/telegram-info-dialog/telegram-info-dialog.component';
 import { TelegramDialogComponent } from './telegram/telegram-settings/telegram-dialog/telegram-dialog.component';
-import { TwitterInfoDialogComponent } from './twitter/twitter-info-dialog/twitter-info-dialog.component';
+import { TwitterInfoDialogComponent } from './twitter/twitter-settings/twitter-info-dialog/twitter-info-dialog.component';
 import { TwitterCallbackComponent } from './twitter/twitter-callback/twitter-callback.component';
 import { TwitterCorpsesPipe } from './twitter/twitter-corpses-pipe/twitter-corpses.pipe';
 import { PlatformsInfoPageComponent } from './platforms-info-page/platforms-info-page.component';

kibicara-frontend/src/app/platforms/twitter/twitter-info-dialog/twitter-info-dialog.component.html

@@ -1,42 +0,0 @@
-<p>
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras maximus arcu at
-  magna euismod sollicitudin. Vestibulum ut auctor libero. Etiam volutpat, nisl
-  sed efficitur hendrerit, nunc risus hendrerit nulla, sollicitudin malesuada
-  neque sem sed tortor. Vestibulum laoreet elementum nibh ultrices ullamcorper.
-  Sed porta gravida lectus, suscipit dictum ligula pharetra posuere. Vivamus
-  pellentesque ex eget lacus consectetur, at pulvinar est pellentesque.
-  Phasellus a elit tempor, tristique tortor auctor, maximus eros. Duis magna
-  sapien, accumsan nec massa nec, porta auctor leo. Nam nibh nisl, hendrerit nec
-  convallis in, porttitor nec sapien. Morbi in lacus convallis, elementum turpis
-  in, venenatis mi. Vestibulum bibendum rhoncus pulvinar. Sed hendrerit ipsum
-  eget varius venenatis. Maecenas consectetur felis libero, fringilla fringilla
-  justo pellentesque non. Quisque congue dictum arcu ut fermentum. Aliquam
-  egestas, lectus at mollis pulvinar, diam libero sagittis eros, a lobortis
-  neque ligula eget odio. Praesent a tortor consequat, viverra odio id, feugiat
-  sem. Mauris orci velit, molestie sit amet urna laoreet, aliquet consectetur
-  risus. Cras tristique odio nec placerat viverra. Suspendisse id pretium risus,
-  sit amet consectetur turpis. Nunc mattis, felis a iaculis varius, est nulla
-  aliquam massa, aliquet dictum ipsum est nec erat. Integer tristique tellus
-  felis, ut porttitor nisi blandit nec. Pellentesque habitant morbi tristique
-  senectus et netus et malesuada fames ac turpis egestas. Integer sagittis justo
-  ut elit gravida, vitae dignissim urna vehicula. Ut in ante non neque dignissim
-  scelerisque non id nisi. Sed sit amet posuere felis. Integer eget eros auctor,
-  ultrices arcu vel, feugiat erat. Curabitur rhoncus porta erat ut ullamcorper.
-  Duis in dictum tortor. Nam rutrum volutpat libero id interdum. Vestibulum vel
-  ante eget risus elementum iaculis eget ut mauris. Vestibulum ultrices nunc
-  quis leo venenatis, id tristique purus tempus. Fusce nec tellus dui. Nulla
-  bibendum nisi ut posuere pellentesque. Vivamus malesuada mollis dui a posuere.
-  Curabitur et lacus at augue posuere facilisis. Ut posuere orci mauris, at
-  hendrerit elit dignissim vel. Quisque vitae ipsum sed sem mattis hendrerit.
-  Pellentesque consectetur convallis consectetur. Praesent sit amet augue in dui
-  congue efficitur ac gravida metus. Sed nibh urna, facilisis at urna vitae,
-  tristique vestibulum velit. Maecenas et aliquet purus, non rutrum eros. Donec
-  maximus orci vel tortor maximus, finibus porttitor mauris convallis. Maecenas
-  eget quam vel nulla dapibus hendrerit. Vivamus malesuada neque ut elit
-  commodo, non viverra magna facilisis. Maecenas finibus ante non dui posuere,
-  sed varius leo elementum. Nullam eget vestibulum mauris. Maecenas in ipsum
-  lectus. Sed tempus at dolor sed posuere. Proin eget nulla dignissim, finibus
-  arcu eu, fringilla tellus. Nullam bibendum felis sed nulla lobortis sodales.
-  Nunc in elementum felis, quis aliquam velit. Morbi sodales sollicitudin
-  mollis.
-</p>

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-info-dialog/twitter-info-dialog.component.html

@@ -0,0 +1,41 @@
+<mat-dialog-content>
+  <h2>How to add an twitter bot to your hood</h2>
+  <h3>What is a twitter bot?</h3>
+  <p>
+    Twitter bots are twitter accounts operated by software. In our case we will
+    show you how to add a bot for users to subscribe to, so they can send
+    messages into your hood system by mentioning the bot or direct messaging it,
+    which get distributed to the other platforms. Also they can receive messages
+    from other platforms by reading the tweets of the bot.
+  </p>
+  <p>
+    <strong>Example: </strong> You as a hood admin added the bot
+    @kibicara-my-hood to your hood. John wants to send a message to all hood
+    subscribers. He then uses his twitter account to follow to the bot
+    @kibicara-my-hood and sends his message to the bot by sending a tweet. His
+    message will be distributed to the other platforms and Sandra who is
+    subscribed to your email hood bot gets John's message via email.
+  </p>
+  <h3>How to add a twitter bot to your hood?</h3>
+  <ol>
+    <li>
+      <a href="https://twitter.com" target="_blank">Create a twitter account</a>
+      for the twitter bot and log in. We recommend <strong>NOT</strong> to use
+      your own personal twitter account but to create a new seperate hood
+      account since you will give full access to the account to our software.
+    </li>
+    <li>
+      Click on the <strong>Add a new platform connection!</strong>-Button. This
+      will redirect you to the twitter page to authorize access to the twitter
+      account. Click the
+      <strong>Authorize app</strong>
+      Button. You will be redirected back here. Done!
+    </li>
+  </ol>
+  <img class="example-image" src="assets/twitter2.png" />
+  <h3>Can I stop relaying twitter messages?</h3>
+  <p>
+    Yes, if you want to stop relaying twitter messages from a specific twitter
+    bot, just use the switch to the bot to stop relaying.
+  </p>
+</mat-dialog-content>

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-info-dialog/twitter-info-dialog.component.scss

@@ -0,0 +1,10 @@
+.example-image {
+  margin-left: 10%;
+  margin-right: 10%;
+  width: 80%;
+  @media screen and (max-width: 600px) {
+    width: 100%;
+    margin-left: 0%;
+    margin-right: 0%;
+  }
+}

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html

@@ -5,7 +5,7 @@
       Twitter
       <button mat-icon-button aria-label="How to use">
         <mat-icon
-          matTooltip="How to send and receive hood broadcast messages with twitter"
+          matTooltip="How to add an twitter bot to your hood"
           class="info-button"
           (click)="onInfoClick()"
           >info</mat-icon

kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Observable } from 'rxjs';
 import { TwitterService } from 'src/app/core/api';
-import { TwitterInfoDialogComponent } from '../twitter-info-dialog/twitter-info-dialog.component';
+import { TwitterInfoDialogComponent } from './twitter-info-dialog/twitter-info-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';