[frontend] Add faqs, text and footer

kibicara-frontend/src/app/app.component.html

@@ -2,3 +2,4 @@
 <div class="content">
   <router-outlet></router-outlet>
 </div>
+<app-footer></app-footer>

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

@@ -26,6 +26,7 @@ import { ErrorInterceptor } from './core/auth/error.interceptor';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MarkdownModule } from 'ngx-markdown';
 import { PlatformsModule } from './platforms/platforms.module';
+import { FaqComponent } from './homepage/faq/faq.component';
 
 @NgModule({
   declarations: [
@@ -37,6 +38,7 @@ import { PlatformsModule } from './platforms/platforms.module';
     LoginComponent,
     RegisterComponent,
     ConfirmComponent,
+    FaqComponent,
   ],
   imports: [
     BrowserModule,

kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.html

@@ -1,3 +1,19 @@
+<div class="explanation">
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>
+          <mat-icon class="info-button">info</mat-icon>
+          <div class="info-title">
+            How to use add platforms to distribute messages
+          </div>
+        </mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>
+
 <div class="platforms-container">
   <app-email-settings [hoodId]="hoodId"></app-email-settings>
   <app-twitter-settings [hoodId]="hoodId"></app-twitter-settings>

kibicara-frontend/src/app/dashboard/board/platforms/platforms.component.scss

@@ -9,3 +9,14 @@
     grid-template-columns: 1fr;
   }
 }
+
+.explanation {
+  margin: 1%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.info-title {
+  margin-top: 2px;
+  margin-left: 10px;
+}

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

@@ -14,6 +14,7 @@ import { HttpClient } from '@angular/common/http';
 import { NewHoodDialogComponent } from './hoods/new-hood-dialog/new-hood-dialog.component';
 import { PlatformsModule } from '../platforms/platforms.module';
 import { SettingsComponent } from './board/settings/settings.component';
+import { FaqComponent } from './hoods/faq/faq.component';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,7 @@ import { SettingsComponent } from './board/settings/settings.component';
     BadwordsComponent,
     NewHoodDialogComponent,
     SettingsComponent,
+    FaqComponent,
   ],
   imports: [
     DashboardRoutingModule,

kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.html

@@ -0,0 +1,35 @@
+<div class="container">
+  <h2>FAQ</h2>
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          >I just created an account. How do I proceed?</mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          >My messages don't not get broadcasted, why?</mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          >Someone is spamming my hood, how do I stop it?</mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>My hood page is empty, why?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.scss

@@ -0,0 +1,17 @@
+h2 {
+  font-weight: bold;
+  font-size: 1.6375rem;
+}
+
+.container {
+  padding: 5% 10% 5% 10%;
+  min-height: 300px;
+  gap: 50px;
+  height: 70%;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    grid-template-columns: 1fr;
+    text-align: left;
+  }
+}

kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FaqComponent } from './faq.component';
+
+describe('FaqComponent', () => {
+  let component: FaqComponent;
+  let fixture: ComponentFixture<FaqComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FaqComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FaqComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/dashboard/hoods/faq/faq.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-faq',
+  templateUrl: './faq.component.html',
+  styleUrls: ['./faq.component.scss'],
+})
+export class FaqComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/dashboard/hoods/hoods.component.html

@@ -51,3 +51,7 @@
   </div>
   <div class="banner"></div>
 </div>
+<div class="container">
+  <div class="banner"></div>
+  <app-faq></app-faq>
+</div>

kibicara-frontend/src/app/homepage/faq/faq.component.html

@@ -0,0 +1,57 @@
+<div class="container">
+  <h2>FAQ</h2>
+  <mat-accordion>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>What is a Kibicara hood?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>What is a public hood page?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>What is a hood admin?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>How can I use Kibicara?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          >I want to be included in a Kibicara hood. How?</mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>I want to be a hood admin. How?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title>Are my messages anonymous?</mat-panel-title>
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>
+        <mat-panel-title
+          >What information do you save about me?</mat-panel-title
+        >
+      </mat-expansion-panel-header>
+      <p></p>
+    </mat-expansion-panel>
+  </mat-accordion>
+</div>

kibicara-frontend/src/app/homepage/faq/faq.component.scss

@@ -0,0 +1,16 @@
+h2 {
+  font-weight: bold;
+  font-size: 1.6375rem;
+}
+
+.container {
+  padding: 5% 10% 5% 10%;
+  gap: 50px;
+  height: 70%;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    grid-template-columns: 1fr;
+    text-align: left;
+  }
+}

kibicara-frontend/src/app/homepage/faq/faq.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FaqComponent } from './faq.component';
+
+describe('FaqComponent', () => {
+  let component: FaqComponent;
+  let fixture: ComponentFixture<FaqComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FaqComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FaqComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/homepage/faq/faq.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-faq',
+  templateUrl: './faq.component.html',
+  styleUrls: ['./faq.component.scss'],
+})
+export class FaqComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

kibicara-frontend/src/app/homepage/homepage.component.html

@@ -56,15 +56,16 @@
   <div class="howto">
     <h2>Gather a new hood!</h2>
     If you want to create your own hood for your community, you can read our
-    <a [routerLink]="['/organizers']">FAQ</a> for hood-admins. As a hood admin
-    you can create a new real-life social network by sharing the
-    <a [routerLink]="['/hoods']">public page</a> of your hood and start
-    networking with your real life neighbors.
+    <a [routerLink]="['/organizers']">page</a> for hood-admins.
   </div>
   <div class="howto">
     <h2>Contribute!</h2>
-    Kibicara is Free and Open Source software (FOSS). If you want to contribute
-    to the development of Kibicara or report a bug check out our
+    Kibicara is Open Source software! If you want to contribute to the
+    development of Kibicara check out our
     <a href="https://github.com/acipm/kibicara">Github</a>.
   </div>
 </div>
+
+<div class="banner2"></div>
+
+<app-faq></app-faq>

kibicara-frontend/src/app/homepage/homepage.component.scss

@@ -29,7 +29,7 @@
   @media (max-width: 600px) {
     padding-top: 10%;
     grid-template-columns: 1fr;
-    text-align: center;
+    text-align: left;
   }
 }
 
@@ -50,10 +50,11 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 5%;
-  margin: 10%;
-  @media (max-width: 600px) {
+  margin: 5% 10% 5% 10%;
+  @media (max-width: 800px) {
     grid-template-columns: 1fr;
-    gap: 1%;
+    margin-bottom: 200px;
+    margin-top: 100px;
   }
 }
 
@@ -61,10 +62,12 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5%;
-  margin: 10%;
-  @media (max-width: 600px) {
+  margin: 5% 10% 5% 10%;
+  @media (max-width: 800px) {
     grid-template-columns: 1fr;
-    gap: 1%;
+    gap: 10%;
+    margin-top: 100px;
+    margin-bottom: 200px;
   }
 }
 

kibicara-frontend/src/app/hoodspage/hoodspage.component.scss

@@ -11,7 +11,6 @@
 .page {
   padding-left: 10%;
   padding-right: 10%;
-  margin-bottom: 3%;
 }
 
 .list {
@@ -46,20 +45,19 @@ h1 {
 }
 
 .text {
-  padding-top: 40px;
-  padding-bottom: 30px;
+  padding-top: 15%;
+  padding-bottom: 15%;
   color: gray;
   font-size: 1.4375rem;
   line-height: 1.875rem;
   @media (max-width: 600px) {
     grid-template-columns: 1fr;
-    padding-top: 0px;
-    padding-bottom: 0px;
     text-align: center;
+    padding-bottom: 3%;
   }
 }
 
 // color can be changed, i just chose a slightly better color than dark blue
 a {
   color: #673ab7;
-}
+}

kibicara-frontend/src/app/organizerspage/organizerspage.component.html

@@ -2,55 +2,41 @@
 
 <div class="howto-container">
   <div class="howto">
-    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.
+    <h2>Build your community</h2>
+    Hood admins build a real life community by creating a network of people - be
+    it neighborhood communities, interest-based groups or any other squads!
   </div>
   <div class="howto">
-    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.
+    <h2>Customize your hood</h2>
+    Kibicara provides the technology for hood admins to connect people over
+    different messaging platforms. Hood admins customize their Kibicara hood to
+    fit their community's needs.
   </div>
   <div class="howto">
-    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.
+    <h2>Share the information</h2>
+    Hood admins share the platform-specific broadcasting endpoints with their
+    community and provide the information and technology to its members. This is
+    done by providing a <a [routerLink]="['/hoods']">public hood page</a>.
   </div>
 </div>
 
 <div class="container">
-  <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. 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.
-  </p>
+  <div class="text">
+    <h2>How does it work?</h2>
+    <ol>
+      <li>
+        Create a Kibicara
+        <a class="white-a" [routerLink]="['/register']">hood admin account</a>.
+      </li>
+      <li>
+        <a class="white-a" [routerLink]="['/register']">Log in</a> to your
+        account and create a hood.
+      </li>
+      <li>Add platform connections to your hood.</li>
+      <li>Provide a description for your hood page.</li>
+      <li>(Optional) Create custom filters for messages.</li>
+      <li>Share your public hood page with your community's members!</li>
+    </ol>
+  </div>
   <a mat-raised-button [routerLink]="['/register']">Register as hood admin!</a>
 </div>
-
-<div class="howto-container">
-  <div class="howto">
-    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.
-  </div>
-  <div class="howto">
-    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.
-  </div>
-  <div class="howto">
-    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.
-  </div>
-</div>

kibicara-frontend/src/app/organizerspage/organizerspage.component.scss

@@ -3,9 +3,9 @@
   grid-template-columns: 1fr 1fr 1fr;
   gap: 5%;
   margin: 5% 10% 5% 10%;
-  @media (max-width: 600px) {
+  @media (max-width: 800px) {
     grid-template-columns: 1fr;
-    gap: 1%;
+    margin-bottom: 100px;
   }
 }
 
@@ -27,7 +27,8 @@
   @media (max-width: 600px) {
     padding-top: 10%;
     grid-template-columns: 1fr;
-    text-align: center;
+    gap: 0px;
+    text-align: left;
   }
 }
 
@@ -38,3 +39,13 @@
   font-size: 1.4375rem;
   line-height: 1.875rem;
 }
+
+h2 {
+  font-weight: bold;
+  font-size: 1.6375rem;
+}
+
+.white-a {
+  color: white;
+  text-decoration: underline;
+}

kibicara-frontend/src/app/platforms/twitter/twitter-bot-card/twitter-bot-card.component.html

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

kibicara-frontend/src/app/shared/footer/footer.component.html

@@ -0,0 +1 @@
+<mat-toolbar color="primary"> </mat-toolbar>

kibicara-frontend/src/app/shared/footer/footer.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FooterComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

kibicara-frontend/src/app/shared/footer/footer.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+})
+export class FooterComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

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

@@ -9,6 +9,7 @@ import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
 import { OverlayComponent } from './overlay/overlay.component';
 import { HeadingOneComponent } from './heading-one/heading-one.component';
+import { FooterComponent } from './footer/footer.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { HeadingOneComponent } from './heading-one/heading-one.component';
     YesNoDialogComponent,
     OverlayComponent,
     HeadingOneComponent,
+    FooterComponent,
   ],
   imports: [
     MaterialModule,
@@ -30,6 +32,7 @@ import { HeadingOneComponent } from './heading-one/heading-one.component';
     ToolbarComponent,
     NotFoundComponent,
     HeadingOneComponent,
+    FooterComponent,
     MaterialModule,
     ReactiveFormsModule,
     FormsModule,