From 7aa9f6bc9302990c5573f418a55db7e1d4485929 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc=20Jovan=C3=AD=20Gonz=C3=A1lez?=
 <12443324+drackp2m@users.noreply.github.com>
Date: Wed, 13 Nov 2024 00:47:30 +0000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=20refactor(app):=20remove?=
 =?UTF-8?q?=20not=20used=20imports,=20add=20version=20to=20"footer"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/release-notes/template.hbs            |  2 +-
 apps/app/src/app/app.component.ts             | 30 ++++++++++++++++++-
 .../card-shape/card-shape.component.ts        |  2 --
 .../app/component/card/card.component.scss    |  2 +-
 .../src/app/component/card/card.component.ts  |  3 +-
 apps/app/src/app/layout/main/main.layout.ts   | 11 ++++---
 .../component/menu/example-menu.component.ts  |  2 +-
 .../src/app/page/example/example.page.html    | 10 +++----
 .../src/app/page/example/example.page.scss    |  8 -----
 apps/app/src/app/page/example/example.page.ts | 12 ++------
 .../border-radius/border-radius.page.ts       |  3 +-
 .../page/example/section/card/card.page.scss  |  3 --
 .../page/example/section/card/card.page.ts    |  3 +-
 .../example/section/color/color.page.scss     |  4 ---
 .../page/example/section/color/color.page.ts  |  4 +--
 .../example/section/shadow/shadow.page.scss   |  3 --
 .../example/section/spacing/spacing.page.scss |  3 --
 .../section/typography/typography.page.scss   |  4 ---
 .../section/typography/typography.page.ts     |  4 +--
 apps/app/src/app/page/game/game.page.html     |  4 +--
 apps/app/src/app/page/game/game.page.scss     |  3 --
 apps/app/src/app/page/game/game.page.ts       |  3 +-
 apps/app/src/app/page/home/home.page.html     |  4 +--
 apps/app/src/app/page/home/home.page.scss     |  4 ---
 apps/app/src/app/page/login/login.page.html   |  4 +--
 apps/app/src/app/page/login/login.page.scss   |  4 ---
 apps/app/src/app/page/login/login.page.ts     |  5 ++--
 apps/app/src/app/page/online/online.page.html |  4 +--
 apps/app/src/app/page/online/online.page.scss |  3 --
 .../src/app/page/register/register.page.html  |  4 +--
 .../src/app/page/register/register.page.scss  |  4 ---
 .../src/app/page/register/register.page.ts    |  5 ++--
 apps/app/src/styles.scss                      |  6 ++++
 apps/app/tsconfig.json                        |  1 +
 package.json                                  |  2 +-
 release.config.js                             |  2 +-
 tsconfig.base.json                            |  1 +
 37 files changed, 74 insertions(+), 102 deletions(-)
 delete mode 100644 apps/app/src/app/page/example/section/color/color.page.scss
 delete mode 100644 apps/app/src/app/page/example/section/typography/typography.page.scss
 delete mode 100644 apps/app/src/app/page/login/login.page.scss
 delete mode 100644 apps/app/src/app/page/register/register.page.scss

diff --git a/.github/release-notes/template.hbs b/.github/release-notes/template.hbs
index 484bee03..ff6409f8 100644
--- a/.github/release-notes/template.hbs
+++ b/.github/release-notes/template.hbs
@@ -1,4 +1,4 @@
-# v{{version}} {{date}}
+# v{{version}} ({{date}})
 
 ## What's Changed
 {{#each commitGroups}}
diff --git a/apps/app/src/app/app.component.ts b/apps/app/src/app/app.component.ts
index 06dd4b78..9e8480a3 100644
--- a/apps/app/src/app/app.component.ts
+++ b/apps/app/src/app/app.component.ts
@@ -5,10 +5,36 @@ import { SendPingGQL } from '@playsetonline/apollo-definitions';
 
 import { pingValue } from './app.config';
 
+import { version } from '@package';
+
 @Component({
 	standalone: true,
 	selector: 'app-root',
-	template: `<router-outlet />`,
+	template: `<router-outlet />
+		<span id="app-version" class="text-sm align-self-center mb-xs" [attr.data-text]="'v' + version">
+			v{{ version }}
+		</span>`,
+	styles: `
+		:host {
+			display: flex;
+			flex-direction: column;
+
+			#app-version {
+				position: fixed;
+				bottom: 0;
+
+				position: fixed;
+				color: rgb(255 255 255 / 90%);
+
+				&::before {
+					content: attr(data-text);
+					position: absolute;
+					-webkit-text-stroke: 2px rgb(0 0 0 / 30%);
+					z-index: -1;
+				}
+			}
+		}
+	`,
 	imports: [RouterOutlet],
 	providers: [SendPingGQL],
 })
@@ -17,6 +43,8 @@ export class AppComponent {
 
 	private readonly pingValue = pingValue;
 
+	version = version;
+
 	title = 'app';
 
 	constructor() {
diff --git a/apps/app/src/app/component/card-shape/card-shape.component.ts b/apps/app/src/app/component/card-shape/card-shape.component.ts
index 1a1b623b..58da43b9 100644
--- a/apps/app/src/app/component/card-shape/card-shape.component.ts
+++ b/apps/app/src/app/component/card-shape/card-shape.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, computed, input } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -8,7 +7,6 @@ import { CardColor, CardShading, CardShape } from '@playsetonline/api-definition
 	selector: 'app-card-shape',
 	templateUrl: './card-shape.component.html',
 	styleUrl: './card-shape.component.scss',
-	imports: [NgIf],
 })
 export class CardShapeComponent {
 	shape = input.required<string, CardShape>({
diff --git a/apps/app/src/app/component/card/card.component.scss b/apps/app/src/app/component/card/card.component.scss
index 3a81aa22..463da1c4 100644
--- a/apps/app/src/app/component/card/card.component.scss
+++ b/apps/app/src/app/component/card/card.component.scss
@@ -2,7 +2,7 @@
 	aspect-ratio: 1 / 0.6666;
 	height: 100%;
 
-	background: white;
+	background-color: white;
 	border: solid 0.1rem #e5e5e5;
 	border-radius: 3.3% / 5%;
 
diff --git a/apps/app/src/app/component/card/card.component.ts b/apps/app/src/app/component/card/card.component.ts
index 1609e9d7..e44fe2bb 100644
--- a/apps/app/src/app/component/card/card.component.ts
+++ b/apps/app/src/app/component/card/card.component.ts
@@ -1,4 +1,3 @@
-import { NgFor, NgIf } from '@angular/common';
 import { Component, computed, input } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -10,7 +9,7 @@ import { CardShapeComponent } from '../card-shape/card-shape.component';
 	selector: 'app-card',
 	templateUrl: './card.component.html',
 	styleUrl: './card.component.scss',
-	imports: [NgIf, NgFor, CardShapeComponent],
+	imports: [CardShapeComponent],
 })
 export class CardComponent {
 	private readonly hello = 22;
diff --git a/apps/app/src/app/layout/main/main.layout.ts b/apps/app/src/app/layout/main/main.layout.ts
index 5c18fdcc..f386d93b 100644
--- a/apps/app/src/app/layout/main/main.layout.ts
+++ b/apps/app/src/app/layout/main/main.layout.ts
@@ -1,6 +1,6 @@
-import { AsyncPipe, JsonPipe, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { Component, OnInit, inject, signal } from '@angular/core';
-import { Router, RouterModule } from '@angular/router';
+import { Router, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 import { SwUpdate } from '@angular/service-worker';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -21,12 +21,11 @@ import { UserStore } from '../../store/user.store';
 	templateUrl: './main.layout.html',
 	styleUrl: './main.layout.scss',
 	imports: [
-		RouterModule,
+		RouterOutlet,
+		RouterLink,
+		RouterLinkActive,
 		NgTemplateOutlet,
 		MediaDebugComponent,
-		NgIf,
-		JsonPipe,
-		AsyncPipe,
 		CardShapeComponent,
 	],
 	providers: [GetPingsGQL, GetUserInfoGQL],
diff --git a/apps/app/src/app/page/example/component/menu/example-menu.component.ts b/apps/app/src/app/page/example/component/menu/example-menu.component.ts
index 97f9a411..b8a22e7e 100644
--- a/apps/app/src/app/page/example/component/menu/example-menu.component.ts
+++ b/apps/app/src/app/page/example/component/menu/example-menu.component.ts
@@ -7,7 +7,7 @@ import { RouterModule } from '@angular/router';
 	selector: 'app-example-menu',
 	imports: [NgTemplateOutlet, RouterModule],
 	template: `
-		<nav class="flex-row flex-wrap my-md gap-sm">
+		<nav class="flex-row flex-wrap gap-sm">
 			<ng-container
 				*ngTemplateOutlet="button; context: { text: 'Typographies', link: '/example/typographies' }"
 			/>
diff --git a/apps/app/src/app/page/example/example.page.html b/apps/app/src/app/page/example/example.page.html
index 782c5745..77a22427 100644
--- a/apps/app/src/app/page/example/example.page.html
+++ b/apps/app/src/app/page/example/example.page.html
@@ -1,9 +1,9 @@
-<main id="example" class="content-fixed pt-lg pb-xxl">
+<main id="example" class="content-fixed flex-col pt-lg pb-xxl gap-lg">
 	<app-example-menu />
 
-	<h2 class="mt-xl">{{ hello() }}</h2>
+	<h2>{{ hello() }}</h2>
 
-	<section id="media-query-indicator" class="mt-xl">
+	<section id="media-query-indicator">
 		<ul class="flex-row gap-sm lg:gap-md">
 			<li class="round-sm p-xs px-sm color-vivid surface-radiant xs-o:surface-serene">xs</li>
 			<li class="round-sm p-xs px-sm color-vivid surface-radiant sm-o:surface-serene">sm</li>
@@ -13,7 +13,7 @@ <h2 class="mt-xl">{{ hello() }}</h2>
 		</ul>
 	</section>
 
-	<section id="logos" class="flex-row flex-wrap justify-center gap-lg mt-xl">
+	<section id="logos" class="flex-row flex-wrap justify-center gap-lg">
 		<a href="https://nx.dev" target="_blank">
 			<app-glitch-svg
 				svgPath="assets/logos/nx.svg"
@@ -56,7 +56,7 @@ <h2 class="mt-xl">{{ hello() }}</h2>
 		</a>
 	</section>
 
-	<section class="flex-col gap-md align-center mt-lg">
+	<section class="flex-col gap-md align-center">
 		<button
 			class="p-sm md:p-md surface-radiant round-md xl-o:surface-vivid"
 			(click)="initSubscription()"
diff --git a/apps/app/src/app/page/example/example.page.scss b/apps/app/src/app/page/example/example.page.scss
index 90f523e7..2e9b96b4 100644
--- a/apps/app/src/app/page/example/example.page.scss
+++ b/apps/app/src/app/page/example/example.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: #fff;
-
 	#logos {
 		a {
 			transition: transform 300ms cubic-bezier(0.6, -0.7, 0.3, 1.6);
@@ -13,8 +10,3 @@ main {
 		}
 	}
 }
-
-.test-gap {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-}
diff --git a/apps/app/src/app/page/example/example.page.ts b/apps/app/src/app/page/example/example.page.ts
index b11c23cf..81d86549 100644
--- a/apps/app/src/app/page/example/example.page.ts
+++ b/apps/app/src/app/page/example/example.page.ts
@@ -1,8 +1,7 @@
-import { JsonPipe, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterOutlet } from '@angular/router';
 import { map } from 'rxjs';
 
 import {
@@ -21,14 +20,7 @@ import ExampleMenuComponent from './component/menu/example-menu.component';
 	standalone: true,
 	templateUrl: './example.page.html',
 	styleUrl: './example.page.scss',
-	imports: [
-		ExampleMenuComponent,
-		ReactiveFormsModule,
-		NgIf,
-		JsonPipe,
-		GlitchSvgComponent,
-		RouterOutlet,
-	],
+	imports: [JsonPipe, ExampleMenuComponent, ReactiveFormsModule, GlitchSvgComponent],
 	providers: [ApiClient, GetUsersGQL, GetManySubscriptionGQL, GetPingsGQL],
 })
 export class ExamplePage {
diff --git a/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts b/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts
index 9496d92a..c1a22a99 100644
--- a/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts
+++ b/apps/app/src/app/page/example/section/border-radius/border-radius.page.ts
@@ -1,11 +1,10 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
 
 @Component({
 	standalone: true,
-	imports: [ExampleMenuComponent, NgFor],
+	imports: [ExampleMenuComponent],
 	styles: `
 		main {
 			min-height: 100%;
diff --git a/apps/app/src/app/page/example/section/card/card.page.scss b/apps/app/src/app/page/example/section/card/card.page.scss
index e16ff3fc..35798324 100644
--- a/apps/app/src/app/page/example/section/card/card.page.scss
+++ b/apps/app/src/app/page/example/section/card/card.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	app-card-shape {
 		width: 76px;
 	}
diff --git a/apps/app/src/app/page/example/section/card/card.page.ts b/apps/app/src/app/page/example/section/card/card.page.ts
index 85023b57..8491b554 100644
--- a/apps/app/src/app/page/example/section/card/card.page.ts
+++ b/apps/app/src/app/page/example/section/card/card.page.ts
@@ -1,4 +1,3 @@
-import { NgFor, NgIf } from '@angular/common';
 import { Component } from '@angular/core';
 
 import { CardColor, CardShading, CardShape } from '@playsetonline/api-definitions';
@@ -11,7 +10,7 @@ import ExampleMenuComponent from '../../component/menu/example-menu.component';
 	standalone: true,
 	templateUrl: './card.page.html',
 	styleUrl: './card.page.scss',
-	imports: [ExampleMenuComponent, CardShapeComponent, CardComponent, NgFor, NgIf],
+	imports: [ExampleMenuComponent, CardShapeComponent, CardComponent],
 })
 export class CardPage {
 	shapes: CardShape[] = [CardShape.diamond, CardShape.oval, CardShape.squiggle];
diff --git a/apps/app/src/app/page/example/section/color/color.page.scss b/apps/app/src/app/page/example/section/color/color.page.scss
deleted file mode 100644
index 67f1a10e..00000000
--- a/apps/app/src/app/page/example/section/color/color.page.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-main {
-	min-height: 100%;
-	background-color: white;
-}
diff --git a/apps/app/src/app/page/example/section/color/color.page.ts b/apps/app/src/app/page/example/section/color/color.page.ts
index f85dd722..3f1e1d7a 100644
--- a/apps/app/src/app/page/example/section/color/color.page.ts
+++ b/apps/app/src/app/page/example/section/color/color.page.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
@@ -6,8 +5,7 @@ import ExampleMenuComponent from '../../component/menu/example-menu.component';
 @Component({
 	standalone: true,
 	templateUrl: './color.page.html',
-	styleUrl: './color.page.scss',
-	imports: [NgFor, ExampleMenuComponent],
+	imports: [ExampleMenuComponent],
 })
 export class ColorPage {
 	colors = ['cosmic', 'radiant', 'harmony', 'vivid', 'serene'];
diff --git a/apps/app/src/app/page/example/section/shadow/shadow.page.scss b/apps/app/src/app/page/example/section/shadow/shadow.page.scss
index bf7e7cff..03af08db 100644
--- a/apps/app/src/app/page/example/section/shadow/shadow.page.scss
+++ b/apps/app/src/app/page/example/section/shadow/shadow.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	.example {
 		width: 360px;
 	}
diff --git a/apps/app/src/app/page/example/section/spacing/spacing.page.scss b/apps/app/src/app/page/example/section/spacing/spacing.page.scss
index 5e1ffd7e..335bdcdd 100644
--- a/apps/app/src/app/page/example/section/spacing/spacing.page.scss
+++ b/apps/app/src/app/page/example/section/spacing/spacing.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: white;
-
 	.round {
 		border-radius: 2px;
 	}
diff --git a/apps/app/src/app/page/example/section/typography/typography.page.scss b/apps/app/src/app/page/example/section/typography/typography.page.scss
deleted file mode 100644
index 67f1a10e..00000000
--- a/apps/app/src/app/page/example/section/typography/typography.page.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-main {
-	min-height: 100%;
-	background-color: white;
-}
diff --git a/apps/app/src/app/page/example/section/typography/typography.page.ts b/apps/app/src/app/page/example/section/typography/typography.page.ts
index 7aba6fcc..b5d4e372 100644
--- a/apps/app/src/app/page/example/section/typography/typography.page.ts
+++ b/apps/app/src/app/page/example/section/typography/typography.page.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component } from '@angular/core';
 
 import ExampleMenuComponent from '../../component/menu/example-menu.component';
@@ -6,8 +5,7 @@ import ExampleMenuComponent from '../../component/menu/example-menu.component';
 @Component({
 	standalone: true,
 	templateUrl: './typography.page.html',
-	styleUrl: './typography.page.scss',
-	imports: [ExampleMenuComponent, NgFor],
+	imports: [ExampleMenuComponent],
 })
 export class TypographyPage {
 	sizes = ['sm', 'md', 'lg', 'xl', 'xxl', 'xxxl'];
diff --git a/apps/app/src/app/page/game/game.page.html b/apps/app/src/app/page/game/game.page.html
index 2083acd5..36a1b363 100644
--- a/apps/app/src/app/page/game/game.page.html
+++ b/apps/app/src/app/page/game/game.page.html
@@ -5,9 +5,9 @@
 >
 	<div class="flex-row justify-between">
 		<div class="flex-col gap-sm">
-			<a routerLink="/">Sets found: {{ setCards().length / 3 }}</a>
+			<a [routerLink]="'/'">Sets found: {{ setCards().length / 3 }}</a>
 			<button (click)="cheatGame()">Wrong sets: {{ wrongSetCards().length / 3 }}</button>
-			<a routerLink="/game">Card in deck: {{ remainingCardsCount() }}</a>
+			<a [routerLink]="'/game'">Card in deck: {{ remainingCardsCount() }}</a>
 		</div>
 
 		<div class="flex-col gap-sm">
diff --git a/apps/app/src/app/page/game/game.page.scss b/apps/app/src/app/page/game/game.page.scss
index 61cdc627..b3968216 100644
--- a/apps/app/src/app/page/game/game.page.scss
+++ b/apps/app/src/app/page/game/game.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: rgb(255 255 255 / 90%);
-
 	&.avoid-status-bar {
 		@supports (-webkit-touch-callout: none) {
 			padding-top: 60px;
diff --git a/apps/app/src/app/page/game/game.page.ts b/apps/app/src/app/page/game/game.page.ts
index 8a76ab28..a4a71446 100644
--- a/apps/app/src/app/page/game/game.page.ts
+++ b/apps/app/src/app/page/game/game.page.ts
@@ -1,5 +1,4 @@
 /* eslint-disable max-lines */
-import { NgFor, NgIf } from '@angular/common';
 import { Component, computed, effect, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -17,7 +16,7 @@ import { GameOfflineStore } from './store/game-offline.store';
 	standalone: true,
 	templateUrl: './game.page.html',
 	styleUrl: './game.page.scss',
-	imports: [NgIf, NgFor, CardComponent, YouWonComponent, RouterLink],
+	imports: [CardComponent, YouWonComponent, RouterLink],
 })
 export class GamePage {
 	private readonly gameOfflineStore = inject(GameOfflineStore);
diff --git a/apps/app/src/app/page/home/home.page.html b/apps/app/src/app/page/home/home.page.html
index abe32cb9..0923e435 100644
--- a/apps/app/src/app/page/home/home.page.html
+++ b/apps/app/src/app/page/home/home.page.html
@@ -6,7 +6,7 @@
      * * * * * * * * * * * * * * * * * * * * * * * * * * * *
      -->
 
-<section class="wrapper content-fixed flex-col py-md">
+<main id="home" class="wrapper content-fixed flex-col py-md">
 	<div class="container">
 		<!--  WELCOME  -->
 		<div id="welcome">
@@ -431,4 +431,4 @@ <h2>Next steps</h2>
 			</svg>
 		</p>
 	</div>
-</section>
+</main>
diff --git a/apps/app/src/app/page/home/home.page.scss b/apps/app/src/app/page/home/home.page.scss
index 58ff6748..1e6dd267 100644
--- a/apps/app/src/app/page/home/home.page.scss
+++ b/apps/app/src/app/page/home/home.page.scss
@@ -85,10 +85,6 @@ svg {
 	border-radius: 1.5rem;
 }
 
-.wrapper {
-	background-color: white;
-}
-
 .container {
 	width: 100%;
 	max-width: 768px;
diff --git a/apps/app/src/app/page/login/login.page.html b/apps/app/src/app/page/login/login.page.html
index 0b5104eb..b95eac8f 100644
--- a/apps/app/src/app/page/login/login.page.html
+++ b/apps/app/src/app/page/login/login.page.html
@@ -1,4 +1,4 @@
-<section class="content-fixed pt-lg pb-xxl">
+<main id="main" class="content-fixed pt-lg pb-xxl">
 	<h4>Login form</h4>
 
 	<div class="flex-col gap-sm">
@@ -35,4 +35,4 @@ <h4>Login form</h4>
 			</ul>
 		}
 	</div>
-</section>
+</main>
diff --git a/apps/app/src/app/page/login/login.page.scss b/apps/app/src/app/page/login/login.page.scss
deleted file mode 100644
index fb28e58a..00000000
--- a/apps/app/src/app/page/login/login.page.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-section {
-	min-height: 100%;
-	background-color: white;
-}
diff --git a/apps/app/src/app/page/login/login.page.ts b/apps/app/src/app/page/login/login.page.ts
index aa6620d3..a2f772b7 100644
--- a/apps/app/src/app/page/login/login.page.ts
+++ b/apps/app/src/app/page/login/login.page.ts
@@ -1,4 +1,4 @@
-import { JsonPipe, NgFor, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { Component, OnInit, WritableSignal, inject, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -12,8 +12,7 @@ import { UserStore } from '../../store/user.store';
 @Component({
 	standalone: true,
 	templateUrl: './login.page.html',
-	styleUrl: './login.page.scss',
-	imports: [NgIf, NgFor, ReactiveFormsModule, JsonPipe],
+	imports: [ReactiveFormsModule, JsonPipe],
 	providers: [GetUsersGQL],
 })
 export class LoginPage implements OnInit {
diff --git a/apps/app/src/app/page/online/online.page.html b/apps/app/src/app/page/online/online.page.html
index 02495913..383b3b59 100644
--- a/apps/app/src/app/page/online/online.page.html
+++ b/apps/app/src/app/page/online/online.page.html
@@ -1,5 +1,5 @@
-<main id="online" class="content-fixed py-sm px-md">
-	<h3>List of games</h3>
+<main id="online" class="content-fixed pt-lg pb-xxl">
+	<h4>List of games</h4>
 
 	<div class="flex-col gap-md align-start mt-sm">
 		<ul class="flex-col gap-xs">
diff --git a/apps/app/src/app/page/online/online.page.scss b/apps/app/src/app/page/online/online.page.scss
index 3382fd90..5d0d1c31 100644
--- a/apps/app/src/app/page/online/online.page.scss
+++ b/apps/app/src/app/page/online/online.page.scss
@@ -1,7 +1,4 @@
 main {
-	min-height: 100%;
-	background-color: rgb(255 255 255 / 90%);
-
 	.info {
 		min-height: 40px;
 	}
diff --git a/apps/app/src/app/page/register/register.page.html b/apps/app/src/app/page/register/register.page.html
index 123cd1d3..2473a816 100644
--- a/apps/app/src/app/page/register/register.page.html
+++ b/apps/app/src/app/page/register/register.page.html
@@ -1,4 +1,4 @@
-<section class="content-fixed pt-lg pb-xxl">
+<main id="register" class="content-fixed pt-lg pb-xxl">
 	<h4>Register form</h4>
 
 	@if (user()) {
@@ -34,4 +34,4 @@ <h5>Welcome</h5>
 			<p class="color-radiant text-sm mt-sm">Error: {{ error() | json }}</p>
 		}
 	</div>
-</section>
+</main>
diff --git a/apps/app/src/app/page/register/register.page.scss b/apps/app/src/app/page/register/register.page.scss
deleted file mode 100644
index fb28e58a..00000000
--- a/apps/app/src/app/page/register/register.page.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-section {
-	min-height: 100%;
-	background-color: white;
-}
diff --git a/apps/app/src/app/page/register/register.page.ts b/apps/app/src/app/page/register/register.page.ts
index ae5e67be..9cf60622 100644
--- a/apps/app/src/app/page/register/register.page.ts
+++ b/apps/app/src/app/page/register/register.page.ts
@@ -1,4 +1,4 @@
-import { JsonPipe, NgIf } from '@angular/common';
+import { JsonPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { Component, WritableSignal, inject, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -12,8 +12,7 @@ import { UserStore } from '../../store/user.store';
 @Component({
 	standalone: true,
 	templateUrl: './register.page.html',
-	styleUrl: './register.page.scss',
-	imports: [NgIf, ReactiveFormsModule, JsonPipe],
+	imports: [ReactiveFormsModule, JsonPipe],
 	providers: [ApiClient, HttpClient, GetUserInfoGQL],
 })
 export class RegisterPage {
diff --git a/apps/app/src/styles.scss b/apps/app/src/styles.scss
index e2d8c669..930b7564 100644
--- a/apps/app/src/styles.scss
+++ b/apps/app/src/styles.scss
@@ -11,6 +11,12 @@ html {
 	font-family: Recursive, sans-serif;
 	font-size: 16px;
 	font-weight: var(--font-weight-md);
+
+	main {
+		min-height: 100%;
+		padding-bottom: 42px !important;
+		background-color: rgb(255 255 255 / 90%);
+	}
 }
 
 h1,
diff --git a/apps/app/tsconfig.json b/apps/app/tsconfig.json
index 9d6cb146..bd1e4958 100644
--- a/apps/app/tsconfig.json
+++ b/apps/app/tsconfig.json
@@ -2,6 +2,7 @@
 	"compilerOptions": {
 		"target": "ES2022",
 		"useDefineForClassFields": false,
+		"resolveJsonModule": true,
 		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"strict": true,
diff --git a/package.json b/package.json
index 0f0608ca..911b59cd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@playsetonline/source",
-	"version": "1.0.0",
+	"version": "0.0.1",
 	"license": "MIT",
 	"private": true,
 	"scripts": {
diff --git a/release.config.js b/release.config.js
index f1836d0e..a986a8ac 100644
--- a/release.config.js
+++ b/release.config.js
@@ -75,7 +75,7 @@ module.exports = {
 			'@semantic-release/git',
 			{
 				assets: ['package.json', 'CHANGELOG.md'],
-				message: '🎒 chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+				message: '🎒 chore(release): v${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
 			},
 		],
 	],
diff --git a/tsconfig.base.json b/tsconfig.base.json
index e4f1be19..8cc5ce16 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -21,6 +21,7 @@
 		"skipLibCheck": true,
 		"skipDefaultLibCheck": true,
 		"paths": {
+			"@package": ["package.json"],
 			"@playsetonline/api-definitions": ["libs/api-definitions/src/index.ts"],
 			"@playsetonline/api-sdk": ["libs/api-sdk/src/index.ts"],
 			"@playsetonline/apollo-definitions": ["libs/api-definitions/src/lib/apollo/operations.ts"]