From 515e7b3dd8a566fd127d3dab7c78d249b82e37a5 Mon Sep 17 00:00:00 2001
From: itsscb <dev@itsscb.de>
Date: Tue, 4 Mar 2025 20:06:16 +0100
Subject: [PATCH] feat: enhance notification page and start components with new
 layout and styling

---
 .../text-button/text-button.component.css     |  1 +
 .../atomic/text-link/text-link.component.css  |  9 +++++
 .../atomic/text-link/text-link.component.html |  2 +
 .../text-link/text-link.component.spec.ts     | 23 ++++++++++++
 .../atomic/text-link/text-link.component.ts   | 15 ++++++++
 .../notification/notification.component.css   | 24 +++++++++++-
 .../notification/notification.component.html  | 14 ++++---
 .../notification/notification.component.ts    |  6 ++-
 .../page/onboarding/start/start.component.css | 37 ++++++++++++++-----
 .../onboarding/start/start.component.html     | 31 ++++++++++------
 .../page/onboarding/start/start.component.ts  |  4 +-
 frontend/src/styles.css                       |  9 +++++
 12 files changed, 146 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/app/atomic/text-link/text-link.component.css
 create mode 100644 frontend/src/app/atomic/text-link/text-link.component.html
 create mode 100644 frontend/src/app/atomic/text-link/text-link.component.spec.ts
 create mode 100644 frontend/src/app/atomic/text-link/text-link.component.ts

diff --git a/frontend/src/app/atomic/text-button/text-button.component.css b/frontend/src/app/atomic/text-button/text-button.component.css
index 2f6d87b..19e2263 100644
--- a/frontend/src/app/atomic/text-button/text-button.component.css
+++ b/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);
diff --git a/frontend/src/app/atomic/text-link/text-link.component.css b/frontend/src/app/atomic/text-link/text-link.component.css
new file mode 100644
index 0000000..b259661
--- /dev/null
+++ b/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);
+}
\ No newline at end of file
diff --git a/frontend/src/app/atomic/text-link/text-link.component.html b/frontend/src/app/atomic/text-link/text-link.component.html
new file mode 100644
index 0000000..2d7ec8f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/atomic/text-link/text-link.component.spec.ts b/frontend/src/app/atomic/text-link/text-link.component.spec.ts
new file mode 100644
index 0000000..ada6326
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/src/app/atomic/text-link/text-link.component.ts b/frontend/src/app/atomic/text-link/text-link.component.ts
new file mode 100644
index 0000000..134abd9
--- /dev/null
+++ b/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 = '';
+}
diff --git a/frontend/src/app/page/onboarding/notification/notification.component.css b/frontend/src/app/page/onboarding/notification/notification.component.css
index f6d422d..30abb2d 100644
--- a/frontend/src/app/page/onboarding/notification/notification.component.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/frontend/src/app/page/onboarding/notification/notification.component.html b/frontend/src/app/page/onboarding/notification/notification.component.html
index 3c0345e..282f1f6 100644
--- a/frontend/src/app/page/onboarding/notification/notification.component.html
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/app/page/onboarding/notification/notification.component.ts b/frontend/src/app/page/onboarding/notification/notification.component.ts
index 3a7d069..53fc40f 100644
--- a/frontend/src/app/page/onboarding/notification/notification.component.ts
+++ b/frontend/src/app/page/onboarding/notification/notification.component.ts
@@ -1,16 +1,18 @@
 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'
 })
 export class NotificationComponent {
-
+    
 }
diff --git a/frontend/src/app/page/onboarding/start/start.component.css b/frontend/src/app/page/onboarding/start/start.component.css
index f44854a..8265278 100644
--- a/frontend/src/app/page/onboarding/start/start.component.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/frontend/src/app/page/onboarding/start/start.component.html b/frontend/src/app/page/onboarding/start/start.component.html
index ff6ee15..3526199 100644
--- a/frontend/src/app/page/onboarding/start/start.component.html
+++ b/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>
 
-    <atomic-text-button [text]="'Weiter'" [routerLink]="'/onboarding/notification'"></atomic-text-button>
-    <button [routerLink]="'login'">Login</button>
-    <p>Mit der weiteren Nutzung stimmst du folgenden Bedingungen zu:</p>
-    <ul>
-        <li>
-            <a href="#">AGB</a>
-        </li>
-        <li><a href="#">Datenschutzerklärung</a></li>
-    </ul>
+    <div class="button-container">
+        <atomic-text-button [text]="'Weiter'" [routerLink]="'/onboarding/notification'"></atomic-text-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>
+                <atomic-text-link [text]="'AGB'" [routerLink]="'agb'"></atomic-text-link>
+            </li>
+            <li>
+                <atomic-text-link [text]="'Datenschutzerklärung'" [routerLink]="'datenschutz'"></atomic-text-link>
+            </li>
+        </ul>
+    </div>
 </div>
diff --git a/frontend/src/app/page/onboarding/start/start.component.ts b/frontend/src/app/page/onboarding/start/start.component.ts
index 822d336..8f8d2e3 100644
--- a/frontend/src/app/page/onboarding/start/start.component.ts
+++ b/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'
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3d972f4..87d69ed 100644
--- a/frontend/src/styles.css
+++ b/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;
+}