From a6434a33d204b5024d83e12b5b91c9c38c19eab4 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Mon, 27 Nov 2023 09:35:36 +0100
Subject: [PATCH 01/10] [STYLE] Refactor edit single item styling to be mobile
 friendly

---
 .../edit-single-item.component.html           | 28 +++++++++----------
 .../edit-single-item.component.scss           | 27 +-----------------
 ng-diogenes/src/styles.scss                   | 14 ++++++++--
 ng-diogenes/src/styles/alignment.scss         | 11 ++++++++
 ng-diogenes/src/styles/components.scss        |  3 ++
 ng-diogenes/src/styles/components/cards.scss  | 15 ++++++++++
 6 files changed, 55 insertions(+), 43 deletions(-)
 create mode 100644 ng-diogenes/src/styles/alignment.scss
 create mode 100644 ng-diogenes/src/styles/components.scss
 create mode 100644 ng-diogenes/src/styles/components/cards.scss

diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
index a146262..9944fd1 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
@@ -12,11 +12,11 @@
 
     <ng-template #itemFormTemplate>
 
-        <div class="center">
-            <mat-card align="center" class="card">
+        <div class="flex-center">
+            <mat-card class="material-card-element">
 
-                <mat-card-title class="center title">
-                    {{isNewItem ? "Create item" : "Edit item"}}
+                <mat-card-title class="flex-center material-card-title">
+                    {{isNewItem ? "Create new item" : "Edit item"}}
                 </mat-card-title>
 
                 <!-- Item Image -->
@@ -27,24 +27,15 @@
                     [isLoading]="isLoading"></app-edit-item-image>
 
                 <!-- JSON form -->
-                <form class="form" [formGroup]="itemForm"
+                <form class="space-one-line" [formGroup]="itemForm"
                     (ngSubmit)="onSubmit()">
 
-                    <br>
-
                     <mat-form-field>
                         <mat-label>Name</mat-label>
                         <input matInput required maxlength="50"
                             formControlName="name">
                     </mat-form-field>
 
-                    <mat-form-field>
-                        <mat-label>Description</mat-label>
-                        <textarea matInput formControlName="description"
-                            class="textarea-height"
-                            maxlength="2000"></textarea>
-                    </mat-form-field>
-
                     <mat-form-field>
                         <mat-label>Number</mat-label>
                         <input matInput required maxlength="50"
@@ -61,7 +52,14 @@
                         </mat-select>
                     </mat-form-field>
 
-                    <div class="center">
+                    <mat-form-field>
+                        <mat-label>Description</mat-label>
+                        <textarea matInput formControlName="description"
+                            class="textarea-height"
+                            maxlength="2000"></textarea>
+                    </mat-form-field>
+
+                    <div class="flex-center">
                         <button mat-raised-button color="primary" type="submit"
                             [disabled]="itemForm.invalid">{{isNewItem ? "Submit"
                             : "Save"}}</button>
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.scss b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.scss
index c4f8219..982389a 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.scss
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.scss
@@ -1,28 +1,3 @@
-.center {
-    display: flex;
-    align-self: center;
-    justify-content: center;
-}
-
-.card {
-    margin: 1rem;
-    max-width: 600px;
-    padding: 1rem;
-}
-
-.title {
-    margin: 1rem;
-}
-
-.form {
-    min-width: 150px;
-    width: 100%;
-}
-
-.form mat-form-field {
-    width: 100%;
-}
-
 .textarea-height {
-    min-height: 150px;
+    min-height: 10rem;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles.scss b/ng-diogenes/src/styles.scss
index 7e7239a..14c62c7 100644
--- a/ng-diogenes/src/styles.scss
+++ b/ng-diogenes/src/styles.scss
@@ -1,4 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+@import './styles/alignment';
+@import './styles/components';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
new file mode 100644
index 0000000..7b507f1
--- /dev/null
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -0,0 +1,11 @@
+// This file contains common styling to align items
+
+.flex-center {
+    display: flex;
+    align-self: center;
+    justify-content: center;
+}
+
+.space-one-line {
+    padding-top: 1rem;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components.scss b/ng-diogenes/src/styles/components.scss
new file mode 100644
index 0000000..84ea758
--- /dev/null
+++ b/ng-diogenes/src/styles/components.scss
@@ -0,0 +1,3 @@
+// This file serves as interface to load the components
+
+@import './components/cards';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/cards.scss b/ng-diogenes/src/styles/components/cards.scss
new file mode 100644
index 0000000..3406711
--- /dev/null
+++ b/ng-diogenes/src/styles/components/cards.scss
@@ -0,0 +1,15 @@
+// This file contains the styling of the card components, e.g. showing the content of an item
+.material-card-element {
+    margin: 0.5rem;
+    max-width: 600px;
+    padding: 1rem;
+}
+
+.material-card-title {
+    margin: 1rem 1rem 2rem 1rem !important;
+    font-weight: bolder;
+}
+
+.material-card-element mat-form-field {
+    width: 100%;
+}
\ No newline at end of file

From 19e93faec80ca2aa37f1cf5307545c8948b2f669 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Mon, 27 Nov 2023 21:40:05 +0100
Subject: [PATCH 02/10] [STYLE] Refactor edit image styling

---
 .../edit-item-image.component.html            | 16 +++++++-------
 .../edit-item-image.component.scss            | 22 ++-----------------
 ng-diogenes/src/styles/alignment.scss         |  5 +++++
 ng-diogenes/src/styles/components.scss        |  3 ++-
 .../src/styles/components/item-image.scss     | 10 +++++++++
 5 files changed, 27 insertions(+), 29 deletions(-)
 create mode 100644 ng-diogenes/src/styles/components/item-image.scss

diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
index 0df8a32..36be1c5 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
@@ -2,20 +2,20 @@
 <input #fileInput type="file"
     accept="image/gif, image/jpeg, image/png"
     (change)="onFileSelected($event)"
-    style="display: none">
+    class="hidden-input">
 
-<!-- Show actual image -->
+<!-- Show current image -->
 <div class="item-image-container"
     *ngIf="imagePath && !selectedImage; else addNewImageTemplate">
     <img [attr.src]="imagePath | secureImage | async"
         class="item-image"
         alt="item-image">
-    <div class="item-image-buttons-container">
-        <button mat-icon-button class="edit-button"
+    <div class="flex-end">
+        <button mat-icon-button
             (click)="fileInput.click()">
             <mat-icon>edit</mat-icon>
         </button>
-        <button mat-icon-button class="delete-button"
+        <button mat-icon-button
             (click)="onDeleteImage()">
             <mat-icon>delete</mat-icon>
         </button>
@@ -31,8 +31,8 @@
         <img [src]="selectedImage"
             class="item-image"
             alt="selected-image">
-        <div class="item-image-buttons-container">
-            <button mat-icon-button class="delete-button"
+        <div class="flex-end">
+            <button mat-icon-button
                 (click)="onFileDeselected()">
                 <mat-icon>delete</mat-icon>
             </button>
@@ -42,7 +42,7 @@
     <!-- Form -->
     <ng-template #addImageForm>
         <label for="file-input">
-            <div class="item-add-new-image-container">
+            <div class="flex-center">
                 <button mat-icon-button class="add-image-button"
                     (click)="fileInput.click()">
                     <mat-icon>add_a_photo</mat-icon>
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.scss b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.scss
index 17ea12a..1e9c052 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.scss
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.scss
@@ -1,21 +1,3 @@
-// Image
-.item-image-container {
-    max-width: 60rem;
-    padding: 10px;
-    border: 1px solid #ccc;
-}
-
-.item-image {
-    width: 100%;
-    height: auto;
-}
-
-.item-image-buttons-container {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.item-add-new-image-container {
-    display: flex;
-    justify-content: center;
+.hidden-input {
+    display: none;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
index 7b507f1..2df47d5 100644
--- a/ng-diogenes/src/styles/alignment.scss
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -6,6 +6,11 @@
     justify-content: center;
 }
 
+.flex-end {
+    display: flex;
+    justify-content: flex-end;
+}
+
 .space-one-line {
     padding-top: 1rem;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components.scss b/ng-diogenes/src/styles/components.scss
index 84ea758..4be7803 100644
--- a/ng-diogenes/src/styles/components.scss
+++ b/ng-diogenes/src/styles/components.scss
@@ -1,3 +1,4 @@
 // This file serves as interface to load the components
 
-@import './components/cards';
\ No newline at end of file
+@import './components/cards';
+@import './components/item-image';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/item-image.scss b/ng-diogenes/src/styles/components/item-image.scss
new file mode 100644
index 0000000..1ed5565
--- /dev/null
+++ b/ng-diogenes/src/styles/components/item-image.scss
@@ -0,0 +1,10 @@
+// This file contains the styling of the item images
+.item-image-container {
+    padding: 10px;
+    border: 1px solid #ccc;
+}
+
+.item-image {
+    width: 100%;
+    height: auto;
+}

From 169bc5a6ec9c5a95853444c394c2d45dc213e602 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Mon, 27 Nov 2023 21:50:07 +0100
Subject: [PATCH 03/10] [STYLE] Refactor error card styling

---
 .../components/error-card/error-card.component.html   |  6 +++---
 .../components/error-card/error-card.component.scss   | 11 ++---------
 .../app/shared/components/shared.components.module.ts |  2 ++
 ng-diogenes/src/styles/components/cards.scss          |  1 +
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/ng-diogenes/src/app/shared/components/error-card/error-card.component.html b/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
index 9519035..eea2b16 100644
--- a/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
+++ b/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
@@ -1,5 +1,5 @@
-<div class="center-card">
-    <mat-card class="card">
+<div class="flex-center">
+    <mat-card class="material-card-element">
         <mat-card-header>
             <mat-card-title>
                 {{title}}
@@ -7,7 +7,7 @@
             <mat-icon mat-card-avatar>{{icon}}</mat-icon>
         </mat-card-header>
         <mat-card-content>
-            <p>{{content}}.</p>
+            <p>{{content}}</p>
         </mat-card-content>
     </mat-card>
 </div>
\ No newline at end of file
diff --git a/ng-diogenes/src/app/shared/components/error-card/error-card.component.scss b/ng-diogenes/src/app/shared/components/error-card/error-card.component.scss
index 181eb06..f68944e 100644
--- a/ng-diogenes/src/app/shared/components/error-card/error-card.component.scss
+++ b/ng-diogenes/src/app/shared/components/error-card/error-card.component.scss
@@ -1,10 +1,3 @@
-.card {
-    margin: 1rem;
-    max-width: 70rem;
-}
-
-.center-card {
-    display: flex;
-    align-self: center;
-    justify-content: center;
+mat-card-title{
+    padding-left: 0 !important;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/app/shared/components/shared.components.module.ts b/ng-diogenes/src/app/shared/components/shared.components.module.ts
index 92c7ccd..36572e0 100644
--- a/ng-diogenes/src/app/shared/components/shared.components.module.ts
+++ b/ng-diogenes/src/app/shared/components/shared.components.module.ts
@@ -9,6 +9,7 @@ import { ErrorCardComponent } from './error-card/error-card.component';
 import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
 import { MessageComponent } from './messages/message.component';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 
 
@@ -28,6 +29,7 @@ import { MatButtonModule } from '@angular/material/button';
     MatCardModule,
     MatProgressSpinnerModule,
     MatSnackBarModule,
+    MatIconModule,
   ],
   exports: [
     LoadingSpinnerComponent,
diff --git a/ng-diogenes/src/styles/components/cards.scss b/ng-diogenes/src/styles/components/cards.scss
index 3406711..50325dc 100644
--- a/ng-diogenes/src/styles/components/cards.scss
+++ b/ng-diogenes/src/styles/components/cards.scss
@@ -3,6 +3,7 @@
     margin: 0.5rem;
     max-width: 600px;
     padding: 1rem;
+    width: 100%;
 }
 
 .material-card-title {

From 83b9959a95c87d5049c1ae2ad8d30a614f628f14 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Mon, 27 Nov 2023 22:13:53 +0100
Subject: [PATCH 04/10] [STYLE] Refactor item detail component styling

---
 .../edit-item-image.component.html            |  4 +-
 .../edit-single-item.component.html           |  2 +-
 .../item-detail/item-detail.component.html    | 11 +++---
 .../item-detail/item-detail.component.scss    | 37 -------------------
 ng-diogenes/src/styles.scss                   |  3 +-
 ng-diogenes/src/styles/alignment.scss         |  4 ++
 ng-diogenes/src/styles/borders.scss           |  3 ++
 ng-diogenes/src/styles/components/cards.scss  |  5 ++-
 .../src/styles/components/item-image.scss     |  3 +-
 9 files changed, 23 insertions(+), 49 deletions(-)
 create mode 100644 ng-diogenes/src/styles/borders.scss

diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
index 36be1c5..58c0ce7 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-item-image/edit-item-image.component.html
@@ -5,7 +5,7 @@
     class="hidden-input">
 
 <!-- Show current image -->
-<div class="item-image-container"
+<div class="item-image-container thin-border"
     *ngIf="imagePath && !selectedImage; else addNewImageTemplate">
     <img [attr.src]="imagePath | secureImage | async"
         class="item-image"
@@ -26,7 +26,7 @@
 <ng-template #addNewImageTemplate>
 
     <!-- Preview -->
-    <div class="item-image-container"
+    <div class="item-image-container thin-border"
         *ngIf="selectedImage; else addImageForm">
         <img [src]="selectedImage"
             class="item-image"
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
index 9944fd1..77df52f 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
@@ -12,7 +12,7 @@
 
     <ng-template #itemFormTemplate>
 
-        <div class="flex-center">
+        <div class="flex-center card-wrapper">
             <mat-card class="material-card-element">
 
                 <mat-card-title class="flex-center material-card-title">
diff --git a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
index 98c74f0..117fc6b 100644
--- a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
+++ b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
@@ -12,8 +12,8 @@
 
 <ng-template #notLoading>
 
-    <div class="center-card" *ngIf="item; else notFound">
-        <mat-card align="center" class="card">
+    <div class="flex-center card-wrapper" *ngIf="item; else notFound">
+        <mat-card class="material-card-element">
             <!-- Header -->
             <mat-card-header>
                 <mat-card-title>
@@ -30,9 +30,10 @@
 
             <!-- Content -->
             <mat-card-content>
-                
+
                 <!-- Image -->
-                <div class="item-image-container item-metadata" *ngIf="item.imagePath">
+                <div class="item-image-container thin-border"
+                    *ngIf="item.imagePath">
                     <img [attr.src]="item.imagePath | secureImage | async"
                         class="item-image"
                         alt="item-image">
@@ -40,7 +41,7 @@
 
                 <p class="item-description no-overflow">{{ item.description }}</p>
 
-                <div class="item-metadata">
+                <div class="item-image-container thin-border">
                     <p>Number of items: {{ item.number }}</p>
                     <p>Last Updated: {{ item.updatedOn | date:'medium' }}</p>
                     <p>Created On: {{ item.createdOn | date:'medium' }}</p>
diff --git a/ng-diogenes/src/app/pages/item-detail/item-detail.component.scss b/ng-diogenes/src/app/pages/item-detail/item-detail.component.scss
index 69c149a..1d12d3a 100644
--- a/ng-diogenes/src/app/pages/item-detail/item-detail.component.scss
+++ b/ng-diogenes/src/app/pages/item-detail/item-detail.component.scss
@@ -1,40 +1,3 @@
-.card {
-    margin: 1rem;
-    max-width: 70rem;
-    min-width: 35rem;
-
-}
-
-.center-card {
-    display: flex;
-    align-self: center;
-    justify-content: center;
-}
-
-.item-metadata {
-    padding: 10px;
-    border: 1px solid #ccc;
-}
-
-.no-overflow {
-    word-wrap: break-word;
-}
-
-.item-image-container {
-    max-width: 60rem;
-    max-height: 40rem;
-    justify-content: center;
-    display: flex;
-    overflow: scroll;
-    align-items: center;
-    position: relative;
-}
-
-.item-image {
-    max-width: 100%;
-    max-height: 100%;
-}
-
 .item-description {
     padding: 1rem 0rem;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles.scss b/ng-diogenes/src/styles.scss
index 14c62c7..5af5f96 100644
--- a/ng-diogenes/src/styles.scss
+++ b/ng-diogenes/src/styles.scss
@@ -11,4 +11,5 @@ body {
 }
 
 @import './styles/alignment';
-@import './styles/components';
\ No newline at end of file
+@import './styles/components';
+@import './styles/borders';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
index 2df47d5..8a8511c 100644
--- a/ng-diogenes/src/styles/alignment.scss
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -13,4 +13,8 @@
 
 .space-one-line {
     padding-top: 1rem;
+}
+
+.no-overflow {
+    word-wrap: break-word;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/borders.scss b/ng-diogenes/src/styles/borders.scss
new file mode 100644
index 0000000..6128b68
--- /dev/null
+++ b/ng-diogenes/src/styles/borders.scss
@@ -0,0 +1,3 @@
+.thin-border{
+    border: 1px solid #ccc;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/cards.scss b/ng-diogenes/src/styles/components/cards.scss
index 50325dc..a8461c8 100644
--- a/ng-diogenes/src/styles/components/cards.scss
+++ b/ng-diogenes/src/styles/components/cards.scss
@@ -1,6 +1,9 @@
 // This file contains the styling of the card components, e.g. showing the content of an item
-.material-card-element {
+.card-wrapper {
     margin: 0.5rem;
+}
+
+.material-card-element {
     max-width: 600px;
     padding: 1rem;
     width: 100%;
diff --git a/ng-diogenes/src/styles/components/item-image.scss b/ng-diogenes/src/styles/components/item-image.scss
index 1ed5565..60014c7 100644
--- a/ng-diogenes/src/styles/components/item-image.scss
+++ b/ng-diogenes/src/styles/components/item-image.scss
@@ -1,7 +1,6 @@
 // This file contains the styling of the item images
 .item-image-container {
-    padding: 10px;
-    border: 1px solid #ccc;
+    padding: .5rem;
 }
 
 .item-image {

From 910ba2f49b8ee78c0f6ea936486bb382b39e08f9 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Thu, 30 Nov 2023 09:17:32 +0100
Subject: [PATCH 05/10] [STYLE] Refactor item filter and sorter stylings

---
 .../inventory-filter.component.html           | 44 +++++++-----
 .../inventory-filter.component.scss           | 14 ----
 .../inventory-filter.component.ts             | 41 ++++++++---
 .../text-filter/text-filter.component.html    |  2 +-
 .../text-filter/text-filter.component.scss    |  3 -
 .../inventory-menu.component.html             |  1 +
 .../inventory-sorter.component.html           | 28 +++++---
 .../inventory-sorter.component.scss           | 72 -------------------
 .../inventory-sorter.component.ts             | 33 ++++-----
 .../pages/inventory/inventory.component.html  | 30 ++++----
 .../pages/inventory/inventory.component.scss  | 16 -----
 .../pages/inventory/inventory.component.ts    | 41 +++++++++--
 .../app/pages/inventory/inventory.module.ts   | 33 ++++-----
 .../item-detail/item-detail.component.html    |  8 ++-
 ng-diogenes/src/styles/alignment.scss         | 19 +++++
 15 files changed, 190 insertions(+), 195 deletions(-)

diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.html
index 56813d6..8ae3290 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.html
@@ -1,18 +1,30 @@
-<form [formGroup]="form" (ngSubmit)="onApplyFilters()">
-    <div class="filter-container">
-        <app-text-filter [filterName]="nameFilterName"
-            [control]="getFilterControl(nameFilterName)"></app-text-filter>
-        <app-text-filter [filterName]="numberFilterName"
-            [control]="getFilterControl(numberFilterName)"></app-text-filter>
-        <app-text-filter [filterName]="descriptionFilterName"
-            [control]="getFilterControl(descriptionFilterName)"></app-text-filter>
-        <app-select-filter [filterName]="'category'"
-            [control]="getFilterControl(categoryIdFilterName)" [options]="categories | generateSelectBoxOptions"></app-select-filter>
 
-        <div class="action-container">
-            <button mat-raised-button color="primary" type="submit">Apply Filters</button>
-            <button mat-raised-button color="accent"
-                (click)="onClearFilters()" *ngIf="filterIsActive">Clear Filters</button>
+<h1 mat-dialog-title>
+    Filter
+</h1>
+
+<div mat-dialog-content>
+    <form [formGroup]="form" (ngSubmit)="onApplyFilters()">
+        <div>
+            <!-- Filters -->
+            <app-text-filter [filterName]="nameFilterName"
+                [control]="getFilterControl(nameFilterName)"></app-text-filter>
+            <app-text-filter [filterName]="numberFilterName"
+                [control]="getFilterControl(numberFilterName)"></app-text-filter>
+            <app-text-filter [filterName]="descriptionFilterName"
+                [control]="getFilterControl(descriptionFilterName)"></app-text-filter>
+            <app-select-filter [filterName]="'category'"
+                [control]="getFilterControl(categoryIdFilterName)"
+                [options]="categories | generateSelectBoxOptions"></app-select-filter>
+
+            <!-- Actions -->
+            <div mat-dialog-actions>
+                <div class="flex-center full-width">
+                    <button mat-raised-button color="accent"
+                        (click)="onClearFilters()" *ngIf="filterIsActive">Clear</button>
+                    <button mat-raised-button color="primary" type="submit">Filter</button>
+                </div>
+            </div>
         </div>
-    </div>
-</form>
\ No newline at end of file
+    </form>
+</div>
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
index 92e3ef9..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.scss
@@ -1,14 +0,0 @@
-.filter-container {
-    display: flex;
-    justify-content: flex-start;
-}
-
-// Buttons
-.action-container {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-}
-.action-container button {
-    margin: 10px;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
index 28b3e7c..4f7c767 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
@@ -1,5 +1,6 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { Category } from 'src/app/models/Category';
 import { ItemFilter } from 'src/app/models/ItemFilter';
@@ -21,20 +22,27 @@ export function isNumberValidator(): ValidatorFn {
   styleUrls: ['./inventory-filter.component.scss']
 })
 export class InventoryFilterComponent implements OnInit, OnDestroy {
-  @Output() filterItems = new EventEmitter<ItemFilter>();
 
   form: FormGroup;
 
+  // Fields
   nameFilterName: string = 'name';
   descriptionFilterName: string = 'description';
   numberFilterName: string = 'number';
   categoryIdFilterName: string = 'categoryId';
 
+  // Dropbox options
   categorySubscription?: Subscription;
   categories: Category[] = [];
+  
+  // Status to clear filters
   filterIsActive = false;
 
-  constructor(private fb: FormBuilder, private categoryService: CategoryService) {
+  constructor(
+    private fb: FormBuilder,
+    private categoryService: CategoryService,
+    public dialogRef: MatDialogRef<InventoryFilterComponent>,
+    @Inject(MAT_DIALOG_DATA) public previousFilter: ItemFilter) {
     this.form = this.fb.group({
       name: new FormControl("", [Validators.maxLength(50)]),
       number: new FormControl("", [isNumberValidator()]),
@@ -48,7 +56,24 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.categorySubscription = this.categoryService.getCategories().subscribe(categories => this.categories = categories);
+    this.categorySubscription = this.categoryService.getCategories().subscribe(categories => {
+      this.categories = categories;
+      this.prefillPreviousFilter();
+    });
+  }
+
+  private prefillPreviousFilter() {
+    if (this.previousFilter) {
+      this.form.patchValue(
+        {
+          "name": this.previousFilter.name,
+          "number": this.previousFilter.number,
+          "description": this.previousFilter.description,
+          "categoryId": this.previousFilter.categoryId,
+        }
+      );
+      this.filterIsActive = true;
+    }
   }
 
   getFilterControl(filterName: string): FormControl {
@@ -61,16 +86,12 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
     }
 
     const filter: ItemFilter = { ...this.form.value };
-    console.log("Filter is: ");
-    console.log(filter);
-    this.filterItems.emit(filter);
-    this.filterIsActive = true;
+    this.dialogRef.close(filter);
   }
 
   onClearFilters() {
     this.form?.reset();
-    this.filterItems.emit(undefined);
-    this.filterIsActive = false;
+    this.dialogRef.close(null);
   }
 
 }
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
index a12f4c8..fe77c4e 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.html
@@ -1,4 +1,4 @@
-<div class="text-filter-wrapper" *ngIf="filterName && control">
+<div *ngIf="filterName && control">
 
     <mat-form-field>
 
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
index 94a4d80..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/text-filter/text-filter.component.scss
@@ -1,3 +0,0 @@
-.text-filter-wrapper {
-    margin-right: 10px;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
index 757d247..236308c 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-menu/inventory-menu.component.html
@@ -1,6 +1,7 @@
 <button mat-icon-button [matMenuTriggerFor]="menu">
     <mat-icon>more_vert</mat-icon>
 </button>
+
 <!-- Displayed on open menu -->
 <mat-menu #menu="matMenu">
     <button mat-menu-item (click)="onNavigateToCategories()">Categories</button>
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
index 19dbe8a..df08e5d 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.html
@@ -1,10 +1,18 @@
-<mat-form-field>
-    <mat-label>Order by</mat-label>
-    <mat-select [(ngModel)]="selectedOption"
-        (selectionChange)="onSelectOption($event.value)">
-        <mat-option *ngFor="let option of generateSortingOptions()"
-            [value]="option">
-            {{ displayOption(option) | lowercase | capitalizeFirstLetter }}
-        </mat-option>
-    </mat-select>
-</mat-form-field>
+<h1 mat-dialog-title>
+    Sort
+</h1>
+
+<div mat-dialog-content>
+
+    <mat-form-field>
+        <mat-label>Order by</mat-label>
+        <mat-select [(ngModel)]="selectedOption"
+            (selectionChange)="onSelectOption($event.value)">
+            <mat-option *ngFor="let option of generateSortingOptions()"
+                [value]="option">
+                {{ displayOption(option) | lowercase | capitalizeFirstLetter }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+</div>
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
index 26c1e56..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.scss
@@ -1,72 +0,0 @@
-.arrow-up,
-.arrow-down {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  margin-left: 5px;
-  margin-right: 5px;
-  margin-bottom: 3px;
-  margin-top: 7px;
-}
-
-.arrow-up {
-  border-bottom: 5px solid #fff;
-}
-
-.arrow-down {
-  border-top: 5px solid #fff;
-}
-
-.custom-dropdown {
-  position: relative;
-  display: inline-block;
-  min-width: 160px;
-  margin-left: 10px;
-}
-
-.selected-option {
-  border: 1px solid #ced4da; 
-  background-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-  border-radius: 4px; 
-}
-
-.selected-option:hover {
-  background-color: #f8f9fa;
-}
-
-.dropdown-options {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  border: 1px solid #ced4da;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.125);
-}
-
-.dropdown-options div {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.dropdown-options div:hover {
-  background-color: #f8f9fa;
-}
-
-.dropdown-option-container{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-}
-
-.dropdown-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-  }
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
index 61ca60c..803e9e8 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-sorter/inventory-sorter.component.ts
@@ -1,4 +1,5 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ItemSorter } from 'src/app/models/ItemSorter';
 import { SortingField } from 'src/app/models/SortingField';
 
@@ -8,19 +9,22 @@ import { SortingField } from 'src/app/models/SortingField';
   styleUrls: ['./inventory-sorter.component.scss']
 })
 export class InventorySorterComponent implements OnInit {
-  @Output() sortItems = new EventEmitter<ItemSorter>();
   options: string[] = []
-  selectedOption: string = "Order by...";
-  isOpen: boolean = false;
-  optionHasBeenSelected: boolean = false;
+  selectedOption: string = "Sort by...";
 
+  constructor(public dialogRef: MatDialogRef<InventorySorterComponent>,
+    @Inject(MAT_DIALOG_DATA) public previousSorter: ItemSorter
+  ) { }
 
   ngOnInit(): void {
     this.options = this.generateSortingOptions();
+    this.preselectPreviousSorter();
   }
 
-  toggleDropdown() {
-    this.isOpen = !this.isOpen;
+  private preselectPreviousSorter() {
+    if (this.previousSorter) {
+      this.selectedOption = `${this.previousSorter.field}__${this.previousSorter.direction}`;
+    }
   }
 
   generateSortingOptions(): string[] {
@@ -38,11 +42,10 @@ export class InventorySorterComponent implements OnInit {
   }
 
   onSelectOption(option: string): void {
-    this.optionHasBeenSelected = true;
     this.selectedOption = option;
-    this.isOpen = false;
     const [filterName, filterDirection] = option.split('__');
-    this.sortItems.emit({ field: filterName, direction: filterDirection });
+    let itemSorter: ItemSorter = { field: filterName, direction: filterDirection };
+    this.dialogRef.close(itemSorter);
   }
 
   private getOptionDetails(option: string): { filterName: string, isAscending: boolean } {
@@ -51,18 +54,10 @@ export class InventorySorterComponent implements OnInit {
     return { filterName, isAscending };
   }
 
-  isSortAscending(option: string): boolean {
-    const { isAscending } = this.getOptionDetails(option)
-    if (isAscending) {
-      return true;
-    }
-    return false;
-  }
-
   displayOption(option: string): string {
     const { filterName, isAscending } = this.getOptionDetails(option)
 
-    if (isAscending){
+    if (isAscending) {
       return filterName + " ↑";
     }
 
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.html b/ng-diogenes/src/app/pages/inventory/inventory.component.html
index 5777642..995f9e7 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.html
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.html
@@ -1,19 +1,25 @@
+<!-- Toolbar -->
 <mat-toolbar>
-    <mat-toolbar-row>
-        <div class="select-items-container">
-            <span class="logo-container">
-                <img class="logo" src="assets/logo/logo_transparent.png" alt="Logo">
-                Diogenes
-            </span>
-            <app-inventory-menu></app-inventory-menu>
+    <!-- Logo and menu -->
+    <mat-toolbar-row class="flex-row-spaced-apart">
+        <div class="flex-center">
+            <img class="logo" src="assets/logo/logo_transparent.png"
+                alt="Logo">
+            Diogenes
         </div>
-    </mat-toolbar-row>
-    <mat-toolbar-row class="extended-size-row">
-        <div class="select-items-container">
-            <app-inventory-filter (filterItems)="onFilterItems($event)"></app-inventory-filter>
-            <app-inventory-sorter (sortItems)="onSortItems($event)"></app-inventory-sorter>
+        <div class="flex-end">
+            <button mat-icon-button aria-label="Filter" (click)="onOpenFilter()"
+                title=Filter>
+                <mat-icon>filter_list</mat-icon>
+            </button>
+            <button mat-icon-button aria-label="Sorter" (click)="onOpenSorter()"
+                title=Sort>
+                <mat-icon>swap_vert</mat-icon>
+            </button>
+            <app-inventory-menu></app-inventory-menu>
         </div>
     </mat-toolbar-row>
+
 </mat-toolbar>
 
 <!-- Show a add item as float action button -->
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.scss b/ng-diogenes/src/app/pages/inventory/inventory.component.scss
index 8a4b0bb..b43df28 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.scss
@@ -1,14 +1,3 @@
-.select-items-container {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    justify-content: space-between;
-}
-
-.extended-size-row {
-    min-height: 80px;
-}
-
 .fab-container {
     position: fixed;
     bottom: 20px;
@@ -20,9 +9,4 @@
     width: 50px;
     height: 50px;
     margin-right: 0.5rem;
-}
-
-.logo-container {
-    display: flex;
-    align-items: center;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.ts b/ng-diogenes/src/app/pages/inventory/inventory.component.ts
index 162d5d4..2a4af86 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.ts
@@ -1,11 +1,13 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 import { Subscription, catchError } from 'rxjs';
 import { Item } from 'src/app/models/Item';
 import { ItemFilter } from 'src/app/models/ItemFilter';
 import { ItemSorter } from 'src/app/models/ItemSorter';
 import { ItemService } from 'src/app/shared/services/item.service';
-import { MessageService } from 'src/app/shared/services/message.service';
+import { InventoryFilterComponent } from './components/inventory-filter/inventory-filter.component';
+import { InventorySorterComponent } from './components/inventory-sorter/inventory-sorter.component';
 
 @Component({
   selector: 'app-inventory',
@@ -25,7 +27,7 @@ export class InventoryComponent implements OnInit, OnDestroy {
   isLoading = false;
   fetchingInProgress = false;
 
-  constructor(private itemService: ItemService, private messageService: MessageService, private router: Router) { }
+  constructor(private itemService: ItemService, private router: Router, private dialog: MatDialog,) { }
 
   ngOnInit(): void {
     this.fetchNextPage()
@@ -72,16 +74,47 @@ export class InventoryComponent implements OnInit, OnDestroy {
     this.isLoading = false;
   }
 
-  onFilterItems(filter: ItemFilter) {
+  onOpenFilter(): void {
+    const dialogRef = this.dialog.open(InventoryFilterComponent, {
+      data: this.itemFilter,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === undefined) {
+        return;
+      }
+      this.onFilterItems(result);
+    });
+  }
+
+  onOpenSorter(): void {
+    const dialogRef = this.dialog.open(InventorySorterComponent, {
+      data: this.itemSorter,
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === undefined) {
+        return;
+      }
+      this.onSortItems(result);
+    });
+  }
+
+  private onFilterItems(filter?: ItemFilter | null): void {
     if (JSON.stringify(filter) === JSON.stringify(this.itemFilter)) {
       return;
     }
 
+    // Reset filter (different from closing the popup with undefined)
+    if (filter === null) {
+      filter = undefined;
+    }
+
     this.itemFilter = filter;
     this.resetLoadedItems()
   }
 
-  onSortItems(sorter: ItemSorter) {
+  private onSortItems(sorter: ItemSorter) {
     if (JSON.stringify(sorter) === JSON.stringify(this.itemSorter)) {
       return;
     }
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.module.ts b/ng-diogenes/src/app/pages/inventory/inventory.module.ts
index 778ddd8..d26feb7 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.module.ts
+++ b/ng-diogenes/src/app/pages/inventory/inventory.module.ts
@@ -1,23 +1,24 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { InventoryComponent } from './inventory.component';
-import { SharedComponentsModule } from 'src/app/shared/components/shared.components.module';
-import { ItemInListComponent } from './components/item-in-list/item-in-list.component';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-import { MatIconModule } from '@angular/material/icon';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { InventorySorterComponent } from './components/inventory-sorter/inventory-sorter.component';
-import { InventoryMenuComponent } from './components/inventory-menu/inventory-menu.component';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatSelectModule } from '@angular/material/select';
+import { MatCardModule } from '@angular/material/card';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { SharedComponentsModule } from 'src/app/shared/components/shared.components.module';
+import { SharedPipesModule } from 'src/app/shared/pipes/shared.pipes.module';
 import { InventoryFilterComponent } from './components/inventory-filter/inventory-filter.component';
-import { TextFilterComponent } from './components/inventory-filter/text-filter/text-filter.component';
 import { SelectFilterComponent } from './components/inventory-filter/select-filter/select-filter.component';
-import { MatCardModule } from '@angular/material/card';
-import { SharedPipesModule } from 'src/app/shared/pipes/shared.pipes.module';
-import { MatMenuModule } from '@angular/material/menu';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TextFilterComponent } from './components/inventory-filter/text-filter/text-filter.component';
+import { InventoryMenuComponent } from './components/inventory-menu/inventory-menu.component';
+import { InventorySorterComponent } from './components/inventory-sorter/inventory-sorter.component';
+import { ItemInListComponent } from './components/item-in-list/item-in-list.component';
+import { InventoryComponent } from './inventory.component';
 
 
 
@@ -51,7 +52,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
     MatInputModule,
     MatCardModule,
     MatMenuModule,
-
+    MatDialogModule,
 
   ],
   exports: [
diff --git a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
index 117fc6b..456895f 100644
--- a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
+++ b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
@@ -38,9 +38,13 @@
                         class="item-image"
                         alt="item-image">
                 </div>
+                
+                <!-- Description -->
+                <p class="item-description no-overflow" *ngIf="item.description">
+                    {{ item.description }}
+                </p>
 
-                <p class="item-description no-overflow">{{ item.description }}</p>
-
+                <!-- Metadata -->
                 <div class="item-image-container thin-border">
                     <p>Number of items: {{ item.number }}</p>
                     <p>Last Updated: {{ item.updatedOn | date:'medium' }}</p>
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
index 8a8511c..3e672aa 100644
--- a/ng-diogenes/src/styles/alignment.scss
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -4,13 +4,32 @@
     display: flex;
     align-self: center;
     justify-content: center;
+    align-items: center;
+}
+
+.full-width {
+    width: 100%;
 }
 
 .flex-end {
     display: flex;
     justify-content: flex-end;
+    align-items: center;
+}
+
+.flex-start {
+    display: flex;
+    justify-content: flex-start;
 }
 
+.flex-row-spaced-apart {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+
 .space-one-line {
     padding-top: 1rem;
 }

From 5495c8f71512fd70ea97a138d511aab2d2ea8b5a Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Fri, 1 Dec 2023 09:15:48 +0100
Subject: [PATCH 06/10] [STYLE] Refactor inventory list and items in list
 stylings

---
 .../select-filter.component.html              |  2 +-
 .../item-in-list/item-in-list.component.html  | 52 +++++++++++--------
 .../item-in-list/item-in-list.component.scss  | 31 -----------
 .../pages/inventory/inventory.component.html  |  7 ++-
 .../pages/inventory/inventory.component.scss  | 12 -----
 .../item-detail/item-detail.component.html    |  2 +-
 ng-diogenes/src/styles.scss                   |  4 +-
 ng-diogenes/src/styles/alignment.scss         |  4 ++
 ng-diogenes/src/styles/components.scss        |  4 +-
 ng-diogenes/src/styles/components/button.scss |  6 +++
 ng-diogenes/src/styles/components/cards.scss  | 11 ++++
 ng-diogenes/src/styles/components/logo.scss   |  5 ++
 ng-diogenes/src/styles/interaction.scss       |  5 ++
 ng-diogenes/src/styles/texts.scss             |  9 ++++
 14 files changed, 83 insertions(+), 71 deletions(-)
 create mode 100644 ng-diogenes/src/styles/components/button.scss
 create mode 100644 ng-diogenes/src/styles/components/logo.scss
 create mode 100644 ng-diogenes/src/styles/interaction.scss
 create mode 100644 ng-diogenes/src/styles/texts.scss

diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
index 8745b78..2eaebf0 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/select-filter/select-filter.component.html
@@ -1,4 +1,4 @@
-<div class="text-filter-wrapper" *ngIf="filterName && control && options">
+<div *ngIf="filterName && control && options">
 
     <mat-form-field>
 
diff --git a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
index 2419cb9..ce2197f 100644
--- a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
+++ b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.html
@@ -1,32 +1,38 @@
+<div class="card-wrapper flex-center">
 
-<mat-card class="card" *ngIf="item">
+    <!-- Card -->
+    <mat-card class="material-card-element-no-padding card-with-hover-effect" *ngIf="item">
 
-    <!-- header -->
-    <mat-card-header>
+        <!-- header -->
+        <mat-card-header>
+            
+            <!-- Title -->
+            <mat-card-title class="show-pointer" (click)="onOpenDetails()"
+                title="{{item.description}}">
+                {{ item.name }}
+            </mat-card-title>
 
-        <mat-card-title class="card-header" (click)="onOpenDetails()"
-            title="{{item.description}}">
-            {{ item.name }}
-        </mat-card-title>
+            <!-- Details -->
+            <mat-card-subtitle>
 
-        <mat-card-subtitle>
+                <span>
+                    {{item.category.name}}
+                </span>
 
-            <span>
-                {{item.category.name}}
-            </span>
+                <span class="small-number">
+                    <span class="small-label">x</span>{{ item.number }}
+                </span>
 
-            <span class="item-number">
-                <span class="item-number-label">x</span>{{ item.number }}
-            </span>
+                <span *ngIf="item.imagePath">
+                    <mat-icon class="vertical-align-image">image</mat-icon>
+                </span>
 
-            <span *ngIf="item.imagePath">
-                <mat-icon class="item-image">image</mat-icon>
-            </span>
+            </mat-card-subtitle>
+            
+            <!-- Category -->
+            <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
 
-        </mat-card-subtitle>
+        </mat-card-header>
 
-        <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
-
-    </mat-card-header>
-
-</mat-card>
+    </mat-card>
+</div>
diff --git a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.scss b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.scss
index dac867e..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/components/item-in-list/item-in-list.component.scss
@@ -1,31 +0,0 @@
-.card {
-    margin: 10px;
-}
-
-.card:hover {
-    border: 1px solid white;
-    box-shadow: 8px 8px 2px 1px #7b1fa21a;
-}
-
-.card-header {
-    cursor: pointer;
-}
-
-.card-actions {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.item-number {
-    font-size: small;
-    margin-left: 5px;
-}
-
-.item-number-label {
-    font-weight: bold;
-    font-size: smaller;
-}
-
-.item-image {
-    vertical-align: middle;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.html b/ng-diogenes/src/app/pages/inventory/inventory.component.html
index 995f9e7..6668744 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.html
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.html
@@ -2,11 +2,15 @@
 <mat-toolbar>
     <!-- Logo and menu -->
     <mat-toolbar-row class="flex-row-spaced-apart">
+
+        <!-- Logo -->
         <div class="flex-center">
             <img class="logo" src="assets/logo/logo_transparent.png"
                 alt="Logo">
             Diogenes
         </div>
+
+        <!-- Menus -->
         <div class="flex-end">
             <button mat-icon-button aria-label="Filter" (click)="onOpenFilter()"
                 title=Filter>
@@ -25,7 +29,8 @@
 <!-- Show a add item as float action button -->
 <div class="fab-container">
     <button mat-fab color="primary"
-        (click)="onCreateNewItem()"><mat-icon>add</mat-icon></button>
+        (click)="onCreateNewItem()"><mat-icon>add</mat-icon>
+    </button>
 </div>
 
 <!-- Show inventory -->
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.scss b/ng-diogenes/src/app/pages/inventory/inventory.component.scss
index b43df28..e69de29 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.scss
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.scss
@@ -1,12 +0,0 @@
-.fab-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1;
-}
-
-.logo {
-    width: 50px;
-    height: 50px;
-    margin-right: 0.5rem;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
index 456895f..de56b15 100644
--- a/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
+++ b/ng-diogenes/src/app/pages/item-detail/item-detail.component.html
@@ -13,7 +13,7 @@
 <ng-template #notLoading>
 
     <div class="flex-center card-wrapper" *ngIf="item; else notFound">
-        <mat-card class="material-card-element">
+        <mat-card class="material-card-element-no-padding">
             <!-- Header -->
             <mat-card-header>
                 <mat-card-title>
diff --git a/ng-diogenes/src/styles.scss b/ng-diogenes/src/styles.scss
index 5af5f96..c1978b0 100644
--- a/ng-diogenes/src/styles.scss
+++ b/ng-diogenes/src/styles.scss
@@ -12,4 +12,6 @@ body {
 
 @import './styles/alignment';
 @import './styles/components';
-@import './styles/borders';
\ No newline at end of file
+@import './styles/borders';
+@import './styles/interaction';
+@import './styles/texts';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
index 3e672aa..93e6663 100644
--- a/ng-diogenes/src/styles/alignment.scss
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -36,4 +36,8 @@
 
 .no-overflow {
     word-wrap: break-word;
+}
+
+.vertical-align-image {
+    vertical-align: middle;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components.scss b/ng-diogenes/src/styles/components.scss
index 4be7803..81d6d29 100644
--- a/ng-diogenes/src/styles/components.scss
+++ b/ng-diogenes/src/styles/components.scss
@@ -1,4 +1,6 @@
 // This file serves as interface to load the components
 
 @import './components/cards';
-@import './components/item-image';
\ No newline at end of file
+@import './components/item-image';
+@import './components/button';
+@import './components/logo';
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/button.scss b/ng-diogenes/src/styles/components/button.scss
new file mode 100644
index 0000000..7e9b2d6
--- /dev/null
+++ b/ng-diogenes/src/styles/components/button.scss
@@ -0,0 +1,6 @@
+.fab-container {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/cards.scss b/ng-diogenes/src/styles/components/cards.scss
index a8461c8..8018355 100644
--- a/ng-diogenes/src/styles/components/cards.scss
+++ b/ng-diogenes/src/styles/components/cards.scss
@@ -9,6 +9,11 @@
     width: 100%;
 }
 
+.material-card-element-no-padding {
+    max-width: 600px;
+    width: 100%;
+}
+
 .material-card-title {
     margin: 1rem 1rem 2rem 1rem !important;
     font-weight: bolder;
@@ -16,4 +21,10 @@
 
 .material-card-element mat-form-field {
     width: 100%;
+}
+
+
+.card-with-hover-effect:hover {
+    border: 1px solid white;
+    box-shadow: 8px 8px 2px 1px #7b1fa21a;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/components/logo.scss b/ng-diogenes/src/styles/components/logo.scss
new file mode 100644
index 0000000..9eb9d14
--- /dev/null
+++ b/ng-diogenes/src/styles/components/logo.scss
@@ -0,0 +1,5 @@
+.logo {
+    width: 50px;
+    height: 50px;
+    margin-right: 0.5rem;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/interaction.scss b/ng-diogenes/src/styles/interaction.scss
new file mode 100644
index 0000000..01162d6
--- /dev/null
+++ b/ng-diogenes/src/styles/interaction.scss
@@ -0,0 +1,5 @@
+/* Effects that show interactions for the user*/
+
+.show-pointer {
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/texts.scss b/ng-diogenes/src/styles/texts.scss
new file mode 100644
index 0000000..bf88ed3
--- /dev/null
+++ b/ng-diogenes/src/styles/texts.scss
@@ -0,0 +1,9 @@
+.small-number {
+    font-weight: bold;
+    font-size: smaller;
+}
+
+.small-label {
+    font-weight: bold;
+    font-size: smaller;
+}
\ No newline at end of file

From 7eb69d98593192183415947964ee29880c5d5d40 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Sat, 2 Dec 2023 12:15:10 +0100
Subject: [PATCH 07/10] [STYLE] Refactor categorym menus styling

---
 .../categories/categories.component.html      |  5 ++--
 .../categories/categories.component.scss      |  6 -----
 .../category-in-list.component.html           | 20 ++++++++------
 .../category-in-list.component.scss           | 11 --------
 .../category-detail.component.html            | 13 +++++----
 .../category-detail.component.scss            | 20 --------------
 .../edit-category.component.html              | 23 +++++++++-------
 .../edit-category.component.scss              | 27 +------------------
 .../edit-single-item.component.html           |  9 ++++---
 .../pages/inventory/inventory.component.html  | 12 ++++++++-
 .../error-card/error-card.component.html      |  2 +-
 11 files changed, 56 insertions(+), 92 deletions(-)

diff --git a/ng-diogenes/src/app/pages/categories/categories.component.html b/ng-diogenes/src/app/pages/categories/categories.component.html
index c7cc47c..bb2c2f9 100644
--- a/ng-diogenes/src/app/pages/categories/categories.component.html
+++ b/ng-diogenes/src/app/pages/categories/categories.component.html
@@ -14,10 +14,11 @@
 <!-- Show a add category as float action button -->
 <div class="fab-container">
     <button mat-fab color="primary"
-        (click)="onCreateNewCategory()"><mat-icon>add</mat-icon></button>
+        (click)="onCreateNewCategory()"><mat-icon>add</mat-icon>
+    </button>
 </div>
 
-<!-- Show inventory -->
+<!-- Show categories -->
 <div *ngIf="isLoading; else notLoading">
     <app-loading-spinner></app-loading-spinner>
 </div>
diff --git a/ng-diogenes/src/app/pages/categories/categories.component.scss b/ng-diogenes/src/app/pages/categories/categories.component.scss
index 7e9b2d6..e69de29 100644
--- a/ng-diogenes/src/app/pages/categories/categories.component.scss
+++ b/ng-diogenes/src/app/pages/categories/categories.component.scss
@@ -1,6 +0,0 @@
-.fab-container {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    z-index: 1;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.html b/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.html
index 33d062f..9b435d8 100644
--- a/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.html
+++ b/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.html
@@ -1,13 +1,17 @@
-<mat-card class="card" *ngIf="category">
+<div class="card-wrapper flex-center">
+    <mat-card class="material-card-element-no-padding card-with-hover-effect"
+        *ngIf="category">
 
-    <mat-card-header>
+        <mat-card-header>
 
-        <mat-card-title class="card-header" (click)="onOpenDetails()" title="{{category.description}}">
-            {{ category.name }}
-        </mat-card-title>
+            <mat-card-title class="show-pointer" (click)="onOpenDetails()"
+                title="{{category.description}}">
+                {{ category.name }}
+            </mat-card-title>
 
-        <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
+            <div mat-card-avatar [style.background-color]="getAvatarColor()"></div>
 
-    </mat-card-header>
+        </mat-card-header>
 
-</mat-card>
+    </mat-card>
+</div>
diff --git a/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.scss b/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.scss
index f555ffc..e69de29 100644
--- a/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.scss
+++ b/ng-diogenes/src/app/pages/categories/components/category-in-list/category-in-list.component.scss
@@ -1,11 +0,0 @@
-.card {
-    margin: 10px;
-}
-.card:hover{
-    border: 1px solid black; 
-    box-shadow: 8px 8px 2px 1px #7b1fa21a; 
-}
-
-.card-header {
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/category-detail/category-detail.component.html b/ng-diogenes/src/app/pages/category-detail/category-detail.component.html
index 78eb110..102864a 100644
--- a/ng-diogenes/src/app/pages/category-detail/category-detail.component.html
+++ b/ng-diogenes/src/app/pages/category-detail/category-detail.component.html
@@ -12,8 +12,8 @@
 
 <ng-template #notLoading>
 
-    <div class="center-card" *ngIf="category; else notFound">
-        <mat-card align="center" class="card">
+    <div class="flex-center card-wrapper" *ngIf="category; else notFound">
+        <mat-card class="material-card-element-no-padding">
             <!-- Header -->
             <mat-card-header>
                 <mat-card-title>
@@ -26,8 +26,10 @@
 
             <!-- Content -->
             <mat-card-content>
-                <p class="no-overflow">{{ category.description }}</p>
-                <div class="category-metadata">
+                <p class="no-overflow" *ngIf="category.description">
+                    {{ category.description }}
+                </p>
+                <div class="item-image-container thin-border">
                     <p>Last Updated: {{ category.updatedOn | date:'medium' }}</p>
                     <p>Created On: {{ category.createdOn | date:'medium' }}</p>
                 </div>
@@ -36,12 +38,13 @@
             <!-- Action buttons -->
             <mat-card-actions align="end">
 
-                <button mat-icon-button aria-label="Edit category"
+                <button mat-icon-button aria-label="Edit category" title="Edit"
                     (click)="onEditCategory()">
                     <mat-icon>edit</mat-icon>
                 </button>
 
                 <button mat-icon-button aria-label="Delete category"
+                    title="Delete"
                     (click)="onDeleteCategory()">
                     <mat-icon>delete</mat-icon>
                 </button>
diff --git a/ng-diogenes/src/app/pages/category-detail/category-detail.component.scss b/ng-diogenes/src/app/pages/category-detail/category-detail.component.scss
index 06e9c2a..e69de29 100644
--- a/ng-diogenes/src/app/pages/category-detail/category-detail.component.scss
+++ b/ng-diogenes/src/app/pages/category-detail/category-detail.component.scss
@@ -1,20 +0,0 @@
-.card {
-    margin: 1rem;
-    max-width: 70rem;
-    min-width: 35rem;
-}
-
-.center-card {
-    display: flex;
-    align-self: center;
-    justify-content: center;
-}
-
-.item-metadata {
-    padding: 10px;
-    border: 1px solid #ccc;
-}
-
-.no-overflow {
-    word-wrap: break-word;
-}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/edit-category/edit-category.component.html b/ng-diogenes/src/app/pages/edit-category/edit-category.component.html
index 06bc8ce..7a709e6 100644
--- a/ng-diogenes/src/app/pages/edit-category/edit-category.component.html
+++ b/ng-diogenes/src/app/pages/edit-category/edit-category.component.html
@@ -19,16 +19,18 @@
 
     <ng-template #categoryFormTemplate>
 
-        <div class="center">
-            <mat-card align="center" class="card">
+        <div class="flex-center card-wrapper">
+            <mat-card class="material-card-element">
 
-                <form class="form" [formGroup]="categoryForm"
-                    (ngSubmit)="onSubmit()">
+                <!-- Title -->
+                <mat-card-title class="flex-center material-card-title">
+                    {{isNewCategory ? "Create category" : "Edit category"}}
+                </mat-card-title>
 
-                    <mat-card-title class="center title">
-                        {{isNewCategory ? "Create category" : "Edit category"}}
-                    </mat-card-title>
+                <form [formGroup]="categoryForm"
+                    (ngSubmit)="onSubmit()">
 
+                    <!-- Fields -->
                     <mat-form-field>
                         <mat-label>Name</mat-label>
                         <input matInput required maxlength="50"
@@ -49,9 +51,12 @@
                         <ngx-mat-color-picker #picker></ngx-mat-color-picker>
                     </mat-form-field>
 
-                    <div class="center">
+                    <!-- Button -->
+                    <div class="flex-center">
                         <button mat-raised-button color="primary" type="submit"
-                            [disabled]="categoryForm.invalid">Submit</button>
+                            [disabled]="categoryForm.invalid">
+                            {{isNewCategory ? "Create" : "Save"}}
+                        </button>
                     </div>
 
                 </form>
diff --git a/ng-diogenes/src/app/pages/edit-category/edit-category.component.scss b/ng-diogenes/src/app/pages/edit-category/edit-category.component.scss
index bf2e522..2a10b00 100644
--- a/ng-diogenes/src/app/pages/edit-category/edit-category.component.scss
+++ b/ng-diogenes/src/app/pages/edit-category/edit-category.component.scss
@@ -1,28 +1,3 @@
-.center {
-    display: flex;
-    align-self: center;
-    justify-content: center;
-}
-
-.card {
-    margin: 1rem;
-    max-width: 600px;
-    padding: 1rem;
-}
-
-.title {
-    margin: 1rem;
-}
-
-.form {
-    min-width: 150px;
-    width: 100%;
-}
-
-.form mat-form-field {
-    width: 100%;
-}
-
 .textarea-height {
     min-height: 150px;
-}
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
index 77df52f..0896001 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
@@ -58,11 +58,14 @@
                             class="textarea-height"
                             maxlength="2000"></textarea>
                     </mat-form-field>
-
+                    
+                    <!-- Action -->
                     <div class="flex-center">
                         <button mat-raised-button color="primary" type="submit"
-                            [disabled]="itemForm.invalid">{{isNewItem ? "Submit"
-                            : "Save"}}</button>
+                            [disabled]="itemForm.invalid">
+                            {{isNewItem ? "Create"
+                            : "Save"}}
+                        </button>
                     </div>
 
                 </form>
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.html b/ng-diogenes/src/app/pages/inventory/inventory.component.html
index 6668744..6196ed4 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.html
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.html
@@ -38,9 +38,12 @@
     <app-loading-spinner></app-loading-spinner>
 </div>
 <ng-template #notLoading>
+
+    <!-- Infinite scroll -->
     <div infiniteScroll (scrolled)="onScroll()"
         [infiniteScrollDistance]="0.5"
-        [infiniteScrollDisabled]="lastPage" id="item-list">
+        [infiniteScrollDisabled]="lastPage" id="item-list"
+        *ngIf="items; else noItems">
         <div *ngFor="let item of items">
             <app-item-in-list [item]="item"></app-item-in-list>
         </div>
@@ -48,4 +51,11 @@
             <app-loading-spinner></app-loading-spinner>
         </div>
     </div>
+
+    <!-- Empty list -->
+    <ng-template #noItems>
+        <app-error-card [title]="'No items found'" [icon]="'error'"
+            [content]="'There are no items in the inventory yet.'"></app-error-card>
+    </ng-template>
+
 </ng-template>
\ No newline at end of file
diff --git a/ng-diogenes/src/app/shared/components/error-card/error-card.component.html b/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
index eea2b16..c5d0766 100644
--- a/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
+++ b/ng-diogenes/src/app/shared/components/error-card/error-card.component.html
@@ -1,4 +1,4 @@
-<div class="flex-center">
+<div class="flex-center card-wrapper">
     <mat-card class="material-card-element">
         <mat-card-header>
             <mat-card-title>

From dbe7c9a52f98bb93baf1bf50112e6792c42baa34 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Sat, 2 Dec 2023 12:49:06 +0100
Subject: [PATCH 08/10] [FIX] Fix clear filter button appearing with empty
 filters

---
 .../inventory-filter.component.ts             | 24 +++++++++----------
 .../pages/inventory/inventory.component.ts    |  7 +++---
 .../src/app/utils/form-validator/number.ts    |  9 +++++++
 3 files changed, 25 insertions(+), 15 deletions(-)
 create mode 100644 ng-diogenes/src/app/utils/form-validator/number.ts

diff --git a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
index 4f7c767..424f206 100644
--- a/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/components/inventory-filter/inventory-filter.component.ts
@@ -1,20 +1,13 @@
 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { Category } from 'src/app/models/Category';
 import { ItemFilter } from 'src/app/models/ItemFilter';
 import { CategoryService } from 'src/app/shared/services/category.service';
+import { isNumberValidator } from 'src/app/utils/form-validator/number';
 
-export function isNumberValidator(): ValidatorFn {
 
-  console.log("Calling isNumberValidator")
-  return (control: AbstractControl): ValidationErrors | null => {
-    const isNumber = !isNaN(control.value as number);
-    console.log("Is number is " + isNumber + " from " + control.value)
-    return isNumber ? null : { isNotANumber: { value: control.value } };
-  };
-}
 
 @Component({
   selector: 'app-inventory-filter',
@@ -34,7 +27,7 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
   // Dropbox options
   categorySubscription?: Subscription;
   categories: Category[] = [];
-  
+
   // Status to clear filters
   filterIsActive = false;
 
@@ -42,7 +35,7 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
     private fb: FormBuilder,
     private categoryService: CategoryService,
     public dialogRef: MatDialogRef<InventoryFilterComponent>,
-    @Inject(MAT_DIALOG_DATA) public previousFilter: ItemFilter) {
+    @Inject(MAT_DIALOG_DATA) public previousFilter?: ItemFilter) {
     this.form = this.fb.group({
       name: new FormControl("", [Validators.maxLength(50)]),
       number: new FormControl("", [isNumberValidator()]),
@@ -62,8 +55,15 @@ export class InventoryFilterComponent implements OnInit, OnDestroy {
     });
   }
 
-  private prefillPreviousFilter() {
+  private prefillPreviousFilter(): void {
     if (this.previousFilter) {
+      
+      // If there no keys different to null then skip this
+      const hasNonNullValue = Object.values(this.previousFilter).some(value => value !== null);
+      if (!hasNonNullValue) {
+        return;
+      }
+
       this.form.patchValue(
         {
           "name": this.previousFilter.name,
diff --git a/ng-diogenes/src/app/pages/inventory/inventory.component.ts b/ng-diogenes/src/app/pages/inventory/inventory.component.ts
index 2a4af86..b86c158 100644
--- a/ng-diogenes/src/app/pages/inventory/inventory.component.ts
+++ b/ng-diogenes/src/app/pages/inventory/inventory.component.ts
@@ -106,11 +106,12 @@ export class InventoryComponent implements OnInit, OnDestroy {
     }
 
     // Reset filter (different from closing the popup with undefined)
-    if (filter === null) {
-      filter = undefined;
+    if (filter != null) {
+      this.itemFilter = filter;
+    } else {
+      this.itemFilter = undefined;
     }
 
-    this.itemFilter = filter;
     this.resetLoadedItems()
   }
 
diff --git a/ng-diogenes/src/app/utils/form-validator/number.ts b/ng-diogenes/src/app/utils/form-validator/number.ts
new file mode 100644
index 0000000..b59b4f9
--- /dev/null
+++ b/ng-diogenes/src/app/utils/form-validator/number.ts
@@ -0,0 +1,9 @@
+import { AbstractControl, ValidationErrors, ValidatorFn } from "@angular/forms";
+
+export function isNumberValidator(): ValidatorFn {
+
+    return (control: AbstractControl): ValidationErrors | null => {
+        const isNumber = !isNaN(control.value as number);
+        return isNumber ? null : { isNotANumber: { value: control.value } };
+    };
+}
\ No newline at end of file

From 8862bcba903d1f03084bfa298f4fb23462c301f3 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Sat, 2 Dec 2023 13:29:33 +0100
Subject: [PATCH 09/10] [STYLE] Refactor bulk import of items from images
 stylings

---
 .../edit-bulk/edit-bulk.component.html        | 49 ++++++++++++-------
 .../edit-bulk/edit-bulk.component.scss        | 35 +++----------
 .../edit-single-item.component.html           |  2 +-
 .../edit-single-item.component.ts             |  3 +-
 ng-diogenes/src/styles/alignment.scss         |  5 +-
 ng-diogenes/src/styles/borders.scss           | 18 ++++++-
 6 files changed, 60 insertions(+), 52 deletions(-)

diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.html
index 5c6cf1b..4c38d11 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.html
@@ -1,43 +1,54 @@
  <!-- Display multiple forms as a stepper -->
-<div
-    *ngIf="selectedImages && selectedImages.length > 0; else selectMultipleImages"
-    class="stepper-container">
-    <mat-vertical-stepper [linear]="true" #stepper>
-        <mat-step *ngFor="let image of selectedImages; let index = index"
-            [editable]="!isStepCompleted(index)">
+<div class="card-wrapper flex-center">
+    <div
+        *ngIf="selectedImages && selectedImages.length > 0; else selectMultipleImages"
+        class="material-card-element">
+        <mat-vertical-stepper [linear]="true" #stepper>
+            <mat-step *ngFor="let image of selectedImages; let index = index"
+                [editable]="!isStepCompleted(index)">
 
-            <ng-template matStepLabel>Item {{index + 1}}</ng-template>
-            <app-edit-single-item [createFromImage]="image"
-                (onItemCreate)="onFinishStep($event, index)"></app-edit-single-item>
-        </mat-step>
-    </mat-vertical-stepper>
+                <ng-template matStepLabel>Item {{index + 1}}</ng-template>
+                <app-edit-single-item [createFromImage]="image"
+                    [hideTitle]="true"
+                    (onItemCreate)="onFinishStep($event, index)"></app-edit-single-item>
+            </mat-step>
+        </mat-vertical-stepper>
+    </div>
 </div>
 
 <!-- Select images button -->
 <ng-template #selectMultipleImages>
+
     <!-- Hidden form to select files -->
-    <input #fileInput type="file"
+    <input
+        id="bulk-file-import-input"
+        #fileInput type="file"
         accept="image/gif, image/jpeg, image/png"
         (change)="onFilesSelected($event)"
         style="display: none" multiple>
-    <div class="bulk-wrapper"
+
+    <!-- Box to drag items or click -->
+    <div class="flex-center card-wrapper"
         (dragover)="onDragOver($event)"
         (drop)="onDrop($event)"
         (click)="fileInput.click()"
         (dragleave)="onDragLeave($event)">
-        <div class="bulk-container" [ngClass]="{ 'drag-over': isDragging }">
+        <div
+            class="dashed-container-height material-card-element centered-text flex-center show-pointer dashed-border hover-dashed-border"
+            [ngClass]="{ 'drag-over-border': isDragging }">
             <div>
                 <label for="file-input">
-                    <div class="item-add-new-image-container">
-                        <button mat-icon-button class="add-image-button"
+                    <div>
+                        <button mat-icon-button
                             (click)="fileInput.click()">
                             <mat-icon>add_a_photo</mat-icon>
                         </button>
                     </div>
                 </label>
-                <div> Click to select the images of the items or drag inside
-                    the
-                    box</div>
+                <div>
+                    Click to select the images of the items or drag inside the
+                    box
+                </div>
             </div>
         </div>
     </div>
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.scss b/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.scss
index c56fc75..748a64f 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.scss
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-bulk/edit-bulk.component.scss
@@ -1,31 +1,8 @@
-.bulk-wrapper{
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.dashed-container-height {
+    min-height: 10rem;
 }
 
-.bulk-container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border: 2px dashed #ccc;
-    padding: 20px;
-    margin: 20px;
-    text-align: center;
-    width: 100%;
-    max-width: 600px;
-    min-height: 200px;
-    cursor: pointer;
-}
-
-.stepper-container{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-}
-
-.drag-over{
-    border: 4px dashed;
-}
+// Disable the padding of the card 
+::ng-deep .mat-vertical-content {
+    padding: 0px !important;
+}
\ No newline at end of file
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
index 0896001..391925c 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.html
@@ -15,7 +15,7 @@
         <div class="flex-center card-wrapper">
             <mat-card class="material-card-element">
 
-                <mat-card-title class="flex-center material-card-title">
+                <mat-card-title class="flex-center material-card-title" *ngIf="!hideTitle">
                     {{isNewItem ? "Create new item" : "Edit item"}}
                 </mat-card-title>
 
diff --git a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.ts b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.ts
index bbc129f..9b3fcf5 100644
--- a/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.ts
+++ b/ng-diogenes/src/app/pages/edit-item/components/edit-single-item/edit-single-item.component.ts
@@ -17,6 +17,7 @@ import { MessageService } from 'src/app/shared/services/message.service';
 })
 export class EditSingleItemComponent implements OnDestroy, OnInit {
   @Input() createFromImage?: ImageTransfer;
+  @Input() hideTitle?: boolean = false;
   @Output() onItemCreate = new EventEmitter<boolean>();
   initializationSubscription?: Subscription;
 
@@ -72,7 +73,7 @@ export class EditSingleItemComponent implements OnDestroy, OnInit {
       });
   }
 
-  /// If there is ca category saved in the browser and it is a new item auto-select the category
+  /// If there is category saved in the browser and it is a new item auto-select the category
   /// as it is likely to be creating items from a similar category
   private preselectPreviousCategory(): void {
 
diff --git a/ng-diogenes/src/styles/alignment.scss b/ng-diogenes/src/styles/alignment.scss
index 93e6663..0e68233 100644
--- a/ng-diogenes/src/styles/alignment.scss
+++ b/ng-diogenes/src/styles/alignment.scss
@@ -29,7 +29,6 @@
     width: 100%;
 }
 
-
 .space-one-line {
     padding-top: 1rem;
 }
@@ -40,4 +39,8 @@
 
 .vertical-align-image {
     vertical-align: middle;
+}
+
+.centered-text {
+    text-align: center;
 }
\ No newline at end of file
diff --git a/ng-diogenes/src/styles/borders.scss b/ng-diogenes/src/styles/borders.scss
index 6128b68..d9d3bf0 100644
--- a/ng-diogenes/src/styles/borders.scss
+++ b/ng-diogenes/src/styles/borders.scss
@@ -1,3 +1,19 @@
-.thin-border{
+.thin-border {
     border: 1px solid #ccc;
+}
+
+.dashed-border {
+    border: 2px dashed #ccc;
+}
+
+.hover-dashed-border {
+    transition: border-color 0.3s ease;
+}
+
+.hover-dashed-border:hover {
+    border-color: #7b1fa21a;
+}
+
+.drag-over-border {
+    border-color: #7b1fa2d5 !important;
 }
\ No newline at end of file

From 63dcfee6dc0fb671f5888d3f4a500ef73d3c3f67 Mon Sep 17 00:00:00 2001
From: "nck.974" <nck.974@gmail.com>
Date: Sat, 2 Dec 2023 16:49:19 +0100
Subject: [PATCH 10/10] [STYLE] Refactor dialogs styling

---
 .../confirmation-dialog.component.html        |  7 +++-
 .../messages/message.component.scss           | 33 -------------------
 2 files changed, 6 insertions(+), 34 deletions(-)

diff --git a/ng-diogenes/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html b/ng-diogenes/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html
index c0d8f7a..d56c6e0 100644
--- a/ng-diogenes/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html
+++ b/ng-diogenes/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html
@@ -1,8 +1,13 @@
+<!-- Title -->
 <h1 mat-dialog-title>{{data.title}}</h1>
+
+<!-- Content -->
 <div mat-dialog-content>
     <p>{{data.content}}</p>
 </div>
-<div mat-dialog-actions>
+
+<!-- Actions -->
+<div mat-dialog-actions class="flex-center">
     <button mat-button (click)="onCancel()">Cancel</button>
     <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Confirm</button>
 </div>
diff --git a/ng-diogenes/src/app/shared/components/messages/message.component.scss b/ng-diogenes/src/app/shared/components/messages/message.component.scss
index 8ded298..e69de29 100644
--- a/ng-diogenes/src/app/shared/components/messages/message.component.scss
+++ b/ng-diogenes/src/app/shared/components/messages/message.component.scss
@@ -1,33 +0,0 @@
-.message-container {
-    position: fixed;
-    bottom: 16px;
-    /* Adjust the spacing from the bottom */
-    right: 16px;
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: flex-end;
-    z-index: 1000;
-}
-
-.message {
-    background-color: #333;
-    color: #fff;
-    padding: 8px 16px;
-    margin-top: 8px;
-    /* Adjust the spacing between messages */
-    border-radius: 4px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-}
-
-.remove-button {
-    background-color: #ff4444;
-    border: none;
-    padding: 4px 8px;
-    color: #fff;
-    cursor: pointer;
-    border-radius: 4px;
-    margin-left: 8px;
-    font-size: 14px;
-}
\ No newline at end of file