feat: enhance notification page and start components with new layout and styling

frontend/src/app/atomic/text-button/text-button.component.css

@@ -3,6 +3,7 @@ button {
     color: var(--primary-text-color);
     font-size: 1.5rem;
     font-weight: bold;
+    text-align: center;
     padding: 1rem 3rem;
     border: none;
     border-color: var(--primary-background-color);

frontend/src/app/atomic/text-link/text-link.component.css

@@ -0,0 +1,9 @@
+a, div {
+    text-decoration: none;
+    color: var(--primary-background-color);
+}
+
+a:hover, div:hover {
+    cursor: pointer;
+    color: var(--primary-background-color-hover);
+}

frontend/src/app/atomic/text-link/text-link.component.html

@@ -0,0 +1,2 @@
+<a *ngIf="href" [href]="href">{{ text }}</a>
+<div *ngIf="!href">{{ text }}</div>

frontend/src/app/atomic/text-link/text-link.component.spec.ts

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

frontend/src/app/atomic/text-link/text-link.component.ts

@@ -0,0 +1,15 @@
+import {Component, Input} from '@angular/core';
+import {NgIf} from "@angular/common";
+
+@Component({
+    selector: 'atomic-text-link',
+    imports: [
+        NgIf
+    ],
+    templateUrl: './text-link.component.html',
+    styleUrl: './text-link.component.css'
+})
+export class TextLinkComponent {
+    @Input({required: true}) text!: string;
+    @Input() href: string = '';
+}

frontend/src/app/page/onboarding/notification/notification.component.css

@@ -1,5 +1,6 @@
 img {
     max-width: 25rem;
+    width: 90%;
 }
 
 .content {
@@ -8,6 +9,27 @@ img {
     align-items: center;
     text-align: center;
     justify-content: center;
-    height: 100%;
+    justify-items: center;
+    height: 85vh;
     padding: 0 1.5rem;
 }
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1.3rem;
+    width: 100%;
+    max-width: 25rem;
+}
+
+.button-container > atomic-text-link {
+    font-size: 1.3rem;
+}
+
+.back-button-container {
+    margin-bottom: 2rem;
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    font-size: 1.5rem;
+}

frontend/src/app/page/onboarding/notification/notification.component.html

@@ -1,11 +1,15 @@
+<div class="back-button-container">
+    <atomic-text-link id="back-button" [text]="'< Zurück'" [routerLink]="''"></atomic-text-link>
+</div>
 <div class="content">
-    <button [routerLink]="''">< Back</button>
+
     <img src="public/assets/chat_bubbles.png" alt="Chat Bubbles"/>
     <h1>Erhalte Mitteilungen</h1>
     <p>Du erhältst z. B. eine Mitteilung sobald wir eine Digitale Spur gefunden haben.</p>
     <p>Die Mitteilungen kannst du jederzeit wieder deaktivieren.</p>
-
-    <atomic-text-button [text]="'Mitteilungen erhalten'" [routerLink]="'/onboarding/registration'"></atomic-text-button>
-    <button [routerLink]="''">Später</button>
-
+    <div class="button-container">
+        <atomic-text-button [text]="'Mitteilungen&nbsp;erhalten'"
+                            [routerLink]="'/onboarding/registration'"></atomic-text-button>
+        <atomic-text-link [text]="'Später'" [routerLink]="'/onboarding/registration'"></atomic-text-link>
+    </div>
 </div>

frontend/src/app/page/onboarding/notification/notification.component.ts

@@ -1,12 +1,14 @@
 import {Component} from '@angular/core';
 import {RouterLink} from "@angular/router";
 import {TextButtonComponent} from "../../../atomic/text-button/text-button.component";
+import {TextLinkComponent} from "../../../atomic/text-link/text-link.component";
 
 @Component({
     selector: 'app-notification',
     imports: [
         RouterLink,
-        TextButtonComponent
+        TextButtonComponent,
+        TextLinkComponent
     ],
     templateUrl: './notification.component.html',
     styleUrl: './notification.component.css'

frontend/src/app/page/onboarding/start/start.component.css

@@ -6,8 +6,11 @@ p {
     margin-bottom: 0;
 }
 
-atomic-text-button {
-    margin-top: 4rem;
+.button-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1.3rem;
+    margin-top: 3rem;
     width: 100%;
     max-width: 25rem;
 }
@@ -18,16 +21,24 @@ ul {
     display: flex;
     flex-direction: row;
     column-gap: 1rem;
-    margin-top: 01rem;
 }
 
-li > a {
-    text-decoration: none;
-    color: var(--primary-background-color);
+.login-container {
+    display: flex;
+    flex-direction: row;
+    column-gap: 1rem;
+    justify-content: space-evenly;
+    justify-items: center;
+    align-items: center;
+    text-align: center;
 }
 
-li > a:hover {
-    color: var(--primary-background-color-hover);
+.login-container > p {
+    margin-top: 0;
+}
+
+#login-button {
+    font-size: 1.3rem;
 }
 
 .content {
@@ -36,6 +47,14 @@ li > a:hover {
     align-items: center;
     text-align: center;
     justify-content: center;
-    height: 100%;
+    height: 100vh;
     padding: 0 1.5rem;
 }
+
+.terms-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 0.8rem;
+    color: var(--primary-text-color);
+}

frontend/src/app/page/onboarding/start/start.component.html

@@ -2,16 +2,25 @@
 
     <img src="public/assets/digitaler-frieden_logo.svg" alt="Logo Digitaler Frieden"/>
 
-    <h1>Hallo. Digitale Spuren entfernen per Knopfdruck.</h1>
-    <p>Mit uns finden Sie Ihre Digitalen Spuren und können diese entfernen.</p>
+    <h1>Hallo. Digitale&nbsp;Spuren entfernen per Knopfdruck.</h1>
+    <p>Mit uns finden Sie Ihre Digitalen&nbsp;Spuren und können diese entfernen.</p>
 
+    <div class="button-container">
         <atomic-text-button [text]="'Weiter'" [routerLink]="'/onboarding/notification'"></atomic-text-button>
-    <button [routerLink]="'login'">Login</button>
+        <div class="login-container">
+            <p>Du hast bereits ein Konto?</p>
+            <atomic-text-link id="login-button" [text]="'Login'" [routerLink]="'login'"></atomic-text-link>
+        </div>
+    </div>
+    <div class="terms-container">
         <p>Mit der weiteren Nutzung stimmst du folgenden Bedingungen zu:</p>
         <ul>
             <li>
-            <a href="#">AGB</a>
+                <atomic-text-link [text]="'AGB'" [routerLink]="'agb'"></atomic-text-link>
+            </li>
+            <li>
+                <atomic-text-link [text]="'Datenschutzerklärung'" [routerLink]="'datenschutz'"></atomic-text-link>
             </li>
-        <li><a href="#">Datenschutzerklärung</a></li>
         </ul>
     </div>
+</div>

frontend/src/app/page/onboarding/start/start.component.ts

@@ -1,12 +1,14 @@
 import {Component} from '@angular/core';
 import {TextButtonComponent} from "../../../atomic/text-button/text-button.component";
 import {RouterLink} from "@angular/router";
+import {TextLinkComponent} from "../../../atomic/text-link/text-link.component";
 
 @Component({
     selector: 'app-start',
     imports: [
         TextButtonComponent,
-        RouterLink
+        RouterLink,
+        TextLinkComponent
     ],
     templateUrl: './start.component.html',
     styleUrl: './start.component.css'

frontend/src/styles.css

@@ -5,3 +5,12 @@
     --primary-background-color-hover: rgba(33, 140, 116, 1.0);
     --primary-text-color: rgba(255, 255, 255, 1.0);
 }
+
+body {
+    max-width: clamp(320px, 90%, 1000px);
+    /* additional recommendation */
+    margin: auto;
+    padding-top: 1rem;
+    /*font-size: 1.25rem;*/
+    line-height: 1.25;
+}