Feat/49 - Design sign-up form (#15)

* feat(sign-up-design): fixed styles, added dynamic header button label rendering

Author: rnastyuk

src/app/core/components/header/header.component.html

@@ -1,3 +1,3 @@
-<a routerLink="/sign-up" class="p-button"> Sign Up </a>
+<a [routerLink]="authButtonLink()" class="p-button">{{ authButtonText() }}</a>
 
 <p-button label="Donate" severity="contrast" />

src/app/core/components/header/header.component.scss

@@ -3,7 +3,7 @@
 :host {
  position: absolute;
  height: 4.5rem;
- padding-right: 1rem;
+ padding-right: 1.5rem;
  width: 100%;
  @include mix.flex-center-right;
  gap: 1rem;

src/app/core/components/header/header.component.ts

@@ -1,6 +1,13 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ computed,
+ inject,
+} from '@angular/core';
 import { Button } from 'primeng/button';
-import { RouterLink } from '@angular/router';
+import { Router, RouterLink } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { map } from 'rxjs';
 
 @Component({
  standalone: true,
@@ -10,4 +17,16 @@ import { RouterLink } from '@angular/router';
  styleUrl: './header.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+ #router = inject(Router);
+
+ #currentUrl = toSignal(this.#router.events.pipe(map(() => this.#router.url)));
+
+ protected readonly authButtonText = computed(() =>
+ this.#currentUrl()?.includes('sign-up') ? 'Sign In' : 'Sign Up',
+ );
+
+ protected readonly authButtonLink = computed(() =>
+ this.#currentUrl()?.includes('sign-up') ? '/login' : '/sign-up',
+ );
+}

src/app/core/components/root/root.component.scss

@@ -15,8 +15,6 @@
  .content {
  @include mix.flex-column;
  min-height: 100%;
- background: url("/assets/images/sign-up-background.png") center no-repeat;
- background-size: cover;
  position: relative;
  }
  }

src/app/features/auth/sign-up/sign-up.component.scss

@@ -4,13 +4,15 @@
 :host {
  @include mix.flex-column-center;
  flex: 1;
+ background: url("/assets/images/sign-up-background.png") center no-repeat;
+ background-size: cover;
 
  .sign-up-container {
  @include mix.flex-column;
  flex: 1;
  color: var.$dark-blue-1;
  width: 32rem;
- margin: 2rem 0;
+ margin: 6.5rem 0 2rem 0;
  padding: 2rem;
  background: white;
  border-radius: 0.6rem;

src/app/features/home/home.component.scss

@@ -138,7 +138,7 @@
 
  .latest-research-container {
  width: 100%;
- background: var.$gradient-2;
+ background: var.$bg-blue-3;
  height: 11.14rem;
  padding: 3.43rem 3.43rem 3.43rem 1.71rem;
 
@@ -178,9 +178,7 @@
  width: 100%;
  height: 11.14rem;
  padding: 3.43rem 3.43rem 3.43rem 1.71rem;
- background: url("/assets/images/hosting-background.svg") no-repeat center
- center;
- background-size: cover;
+ background-color: var.$bg-blue-2;
 
  .content {
  display: flex;

src/app/features/privacy-policy/privacy-policy.component.scss

@@ -1,6 +1,7 @@
 @use "assets/styles/variables" as var;
 
 .container {
+ margin-top: 4.5rem;
  padding: 1.7rem;
  color: var.$dark-blue-1;
 

src/app/features/terms-of-use/terms-of-use.component.scss

@@ -1,6 +1,7 @@
 @use "assets/styles/variables" as var;
 
 .container {
+ margin-top: 4.5rem;
  padding: 1.7rem;
  color: var.$dark-blue-1;