[frontend] Add heading banner

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

@@ -1,15 +1,13 @@
+<app-heading-one
+  *ngIf="hood$ | async as hood"
+  [title]="hood.name + ' (Hood)'"
+></app-heading-one>
 <div class="back">
   <a mat-button [routerLink]="['/dashboard']"
     ><mat-icon>keyboard_backspace</mat-icon> back</a
   >
 </div>
 <div class="dashboard">
-  <mat-card>
-    <mat-card-title *ngIf="hood$ | async as hood">
-      Your Hood - <strong>{{ hood.name }}</strong>
-    </mat-card-title>
-  </mat-card>
-
   <mat-tab-group>
     <mat-tab label="Filters">
       <app-hoodsettings [hoodId]="hoodId"> </app-hoodsettings>

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

@@ -3,9 +3,22 @@
 }
 
 .dashboard {
-  margin: 10px;
+  margin-top: 0px;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-bottom: 2%;
+  @media (max-width: 600px) {
+    margin-left: 5%;
+    margin-right: 5%;
+  }
 }
 
 .back {
   color: grey;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 10px;
+  @media (max-width: 600px) {
+    margin-left: 0;
+  }
 }

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

@@ -11,8 +11,9 @@
 }
 
 h1 {
-  font-size: 2.3125rem;
   line-height: 3rem;
+  font-size: 46px;
+  font-weight: 500;
 }
 
 p {

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

@@ -1 +1 @@
-<p>homepage works!</p>
+<app-heading-one [title]="title"></app-heading-one>

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

@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.component.html',
-  styleUrls: ['./homepage.component.scss']
+  styleUrls: ['./homepage.component.scss'],
 })
 export class HomepageComponent implements OnInit {
+  title = 'Kibicara';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

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

@@ -1,6 +1,6 @@
+<app-heading-one [title]="hood.name"></app-heading-one>
 <div class="container">
-  <h1 class="heading">Hood - {{ hood.name }}</h1>
-  <div>
+  <div class="markdown">
     <markdown class="markdown" [data]="hood.landingpage"></markdown>
   </div>
 

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

@@ -1,8 +1,7 @@
 .container {
   display: grid;
-  margin-left: 15%;
-  margin-right: 15%;
-  margin-top: 5%;
+  margin-left: 10%;
+  margin-right: 10%;
   margin-bottom: 5%;
   gap: 30px;
 }
@@ -13,5 +12,5 @@
 }
 
 .markdown {
-  margin-bottom: 50px;
+  margin-top: 20px;
 }

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

@@ -1,6 +1,7 @@
-<div class="banner">
+<!-- <div class="banner">
   <h1>Discover hoods</h1>
-</div>
+</div> -->
+<app-heading-one [title]="title"></app-heading-one>
 <div class="page">
   <mat-form-field class="searchbar">
     <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>

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

@@ -13,7 +13,7 @@
 .page {
   padding-left: 10%;
   padding-right: 10%;
-  padding-bottom: 10%;
+  margin-bottom: 5%;
 }
 
 .list {

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

@@ -9,6 +9,7 @@ import { HoodsService } from '../core/api/api/hoods.service';
 export class HoodspageComponent implements OnInit {
   hoods$;
   searchText: string;
+  title = 'Discover hoods';
 
   constructor(private readonly hoodsService: HoodsService) {}
 

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

@@ -1 +1 @@
-<p>organizerspage works!</p>
+<app-heading-one [title]="title"></app-heading-one>

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

@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-organizerspage',
   templateUrl: './organizerspage.component.html',
-  styleUrls: ['./organizerspage.component.scss']
+  styleUrls: ['./organizerspage.component.scss'],
 })
 export class OrganizerspageComponent implements OnInit {
+  title = 'Hood administration';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }

kibicara-frontend/src/app/shared/heading-one/heading-one.component.html

@@ -0,0 +1 @@
+<h1 class="h1">{{ title }}</h1>

kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss

@@ -0,0 +1,14 @@
+.h1 {
+  background-color: #46277a;
+  height: 10%;
+  min-height: 70px;
+  padding-left: 10%;
+  padding-top: 5%;
+  color: white;
+  font-size: 46px;
+  font-weight: 500;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    font-size: 30px;
+  }
+}

kibicara-frontend/src/app/shared/heading-one/heading-one.component.ts

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

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

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 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';
 
 @NgModule({
   declarations: [
@@ -15,6 +16,7 @@ import { OverlayComponent } from './overlay/overlay.component';
     NotFoundComponent,
     YesNoDialogComponent,
     OverlayComponent,
+    HeadingOneComponent,
   ],
   imports: [
     MaterialModule,
@@ -27,6 +29,7 @@ import { OverlayComponent } from './overlay/overlay.component';
   exports: [
     ToolbarComponent,
     NotFoundComponent,
+    HeadingOneComponent,
     MaterialModule,
     ReactiveFormsModule,
     FormsModule,