fix: styling fixes

frontend/src/app/modules/auth/components/login/login.component.html

@@ -104,6 +104,7 @@ <h1 id="title" class="title">Welcome to Expensave!</h1>
         size="large"
         [disabled]="submitted || !form.valid"
         [class.btn-pulse]="submitted">
+        <nb-icon icon="log-in-outline" />
         Log In
     </button>
 </form>

frontend/src/app/modules/main/calendar/calendar-grid-row-cell-desktop/calendar-grid-row-cell-desktop-expense-item/calendar-grid-row-cell-desktop-expense-item.component.scss

@@ -42,10 +42,6 @@
     font-size: 12px;
 }
 
-.expense-amount {
-    // font-size: nb-theme(text-subtitle-2-font-size);
-}
-
 .repeat-icon {
     height: 12px;
     width: 12px;

frontend/src/app/modules/main/calendar/calendar-grid/calendar-grid.component.ts

@@ -8,7 +8,6 @@ import { CalendarGridRowComponent } from '../calendar-grid-row/calendar-grid-row
 
 @Component({
     selector: 'app-calendar-grid',
-    styleUrls: ['calendar-grid.component.scss'],
     templateUrl: 'calendar-grid.component.html',
     imports: [CalendarGridRowComponent],
 })

frontend/src/app/modules/main/components/expense-report/expense-report.component.html

@@ -1,5 +1,5 @@
 <nb-card class="mb-0 border-0">
-    <nb-card-header class="with-background font-weight-normal text-center border-bottom">
+    <nb-card-header class="text-center border-bottom">
         <span class="text-hint">{{ dateFrom | date: 'mediumDate' }}</span>
         <nb-icon icon="arrow-forward-outline" class="mx-3" />
         <span class="text-hint">{{ dateTo | date: 'mediumDate' }}</span>
@@ -20,9 +20,7 @@
             }
         </nb-list>
     </nb-card-body>
-    <nb-card-footer
-        class="with-background d-flex justify-content-between"
-        [class.border-top]="categoryBalances.length > 0">
+    <nb-card-footer class="d-flex justify-content-between" [class.border-top]="categoryBalances.length > 0">
         <div class="text-center">
             <div class="text-hint mb-0">INCOME</div>
             <strong>{{ income | shortNumber }}</strong>

frontend/src/app/modules/main/components/sidebar/actions/actions.component.ts

@@ -6,14 +6,13 @@ import { CategoriesDialogComponent } from '../../../dialogs/categories-dialog/ca
 import { AdminUsersDialogComponent } from '../../../dialogs/admin-users-dialog/admin-users-dialog.component';
 import { ProfileDialogComponent } from '../../../dialogs/profile-dialog/profile-dialog.component';
 import { StatementImportService } from '../../../services/statement-import.service';
-import { Router, RouterLink } from '@angular/router';
+import { Router } from '@angular/router';
 import { ConfirmDialogComponent } from '../../../dialogs/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector: 'app-sidebar-actions',
     templateUrl: 'actions.component.html',
-    styleUrl: 'actions.component.scss',
-    imports: [NbActionsModule, RouterLink, NbTooltipModule, NbButtonModule, NbIconModule],
+    imports: [NbActionsModule, NbTooltipModule, NbButtonModule, NbIconModule],
 })
 export class ActionsComponent {
     @Input()

frontend/src/app/modules/main/dialogs/calendars-dialog/calendar-edit/calendar-edit.component.ts

@@ -16,13 +16,12 @@ import {
     NbTooltipModule,
     NbUserModule,
 } from '@nebular/theme';
-import { AsyncPipe } from '@angular/common';
 import { UserQueries } from '../../../../../queries/user.queries';
 import { injectQuery } from '@tanstack/angular-query-experimental';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
     templateUrl: 'calendar-edit.component.html',
-    styleUrl: 'calendar-edit.component.scss',
     selector: 'app-calendar-edit',
     imports: [
         FormsModule,

frontend/src/app/modules/main/dialogs/calendars-dialog/calendar-list/calendar-list.component.html

@@ -1,4 +1,4 @@
-<nb-card class="dialog">
+<nb-card class="dialog" size="large">
     <nb-card-header class="d-flex align-items-center">
         <button
             nbButton

frontend/src/app/modules/main/dialogs/calendars-dialog/calendar-list/calendar-list.component.ts

@@ -6,7 +6,6 @@ import { NbButtonModule, NbCardModule, NbIconModule, NbListModule, NbTooltipModu
 @Component({
     selector: 'app-calendar-list',
     templateUrl: 'calendar-list.component.html',
-    styleUrls: ['calendar-list.component.scss'],
     animations: slideAnimation,
     imports: [NbCardModule, NbButtonModule, NbIconModule, NbListModule, NbTooltipModule],
 })

frontend/src/app/modules/main/dialogs/calendars-dialog/calendars-dialog.component.ts

@@ -9,7 +9,6 @@ import { UserQueries } from '../../../../queries/user.queries';
 
 @Component({
     templateUrl: 'calendars-dialog.component.html',
-    styleUrls: ['calendars-dialog.component.scss'],
     imports: [NbSpinnerModule, CalendarListComponent, CalendarEditComponent],
 })
 export class CalendarsDialogComponent {

frontend/src/app/modules/main/dialogs/categories-dialog/categories-dialog.component.ts

@@ -9,7 +9,6 @@ import { injectMutation, injectQuery } from '@tanstack/angular-query-experimenta
 
 @Component({
     templateUrl: 'categories-dialog.component.html',
-    styleUrl: 'categories-dialog.component.scss',
     imports: [NbSpinnerModule, CategoryListComponent, CategoryEditComponent],
 })
 export class CategoriesDialogComponent implements OnInit {

frontend/src/app/modules/main/dialogs/categories-dialog/category-edit/category-edit.component.scss

@@ -13,9 +13,3 @@
     border: 0;
     padding: 0;
 }
-
-.selected-color {
-    height: 24px;
-    width: 24px;
-    border-radius: 50%;
-}

frontend/src/app/modules/main/dialogs/categories-dialog/category-list/category-list.component.scss

@@ -1,11 +1,5 @@
 @use '../../../../../../theme' as *;
 
-.category-color {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-}
-
 nb-list-item.active {
   color: nb-theme(text-alternate-color);
 

frontend/src/app/modules/main/dialogs/confirm-dialog/confirm-dialog.component.html

@@ -4,14 +4,14 @@
             {{ question }}
         </p>
     </nb-card-body>
-    <nb-card-footer class="d-flex justify-content-end gap-2">
+    <nb-card-footer class="d-flex align-items-center justify-content-between">
+        <button nbButton type="button" ghost status="basic" (click)="dialogRef.close(false)">
+            <nb-icon icon="close-outline" />
+            {{ noText }}
+        </button>
         <button nbButton type="button" status="primary" (click)="dialogRef.close(true)">
             <nb-icon icon="checkmark-outline" />
             {{ yesText }}
         </button>
-        <button nbButton type="button" (click)="dialogRef.close(false)">
-            <nb-icon icon="close-outline" />
-            {{ noText }}
-        </button>
     </nb-card-footer>
 </nb-card>

frontend/src/app/modules/main/dialogs/confirm-dialog/confirm-dialog.component.ts

@@ -1,9 +1,8 @@
 import { Component, inject } from '@angular/core';
-import { NbDialogRef, NbCardModule, NbButtonModule, NbIconModule } from '@nebular/theme';
+import { NbButtonModule, NbCardModule, NbDialogRef, NbIconModule } from '@nebular/theme';
 
 @Component({
     templateUrl: 'confirm-dialog.component.html',
-    styleUrls: ['confirm-dialog.component.scss'],
     imports: [NbCardModule, NbButtonModule, NbIconModule],
 })
 export class ConfirmDialogComponent {

frontend/src/app/modules/main/dialogs/datepicker-dialog/datepicker-dialog.component.html

@@ -1,16 +1,16 @@
 <nb-card class="dialog">
     <nb-card-header class="d-flex align-items-center justify-content-between">
+        Pick a date
         <button
             nbButton
             type="button"
             status="basic"
             ghost
-            aria-label="Back from date picker"
-            nbTooltip="Back"
+            aria-label="Close date picker"
+            nbTooltip="Close"
             (click)="dialogRef.close()">
-            <nb-icon icon="arrow-back-outline" />
+            <nb-icon icon="close-outline" />
         </button>
-        Pick a date
     </nb-card-header>
 
     <nb-calendar size="medium" [(date)]="date" [visibleDate]="date" (dateChange)="dialogRef.close(date)" />

frontend/src/app/modules/main/dialogs/expense-list-dialog/expense-list-dialog.component.ts

@@ -3,14 +3,13 @@ import { NbButtonModule, NbCardModule, NbDialogRef, NbIconModule } from '@nebula
 import { Calendar } from '../../../../api/objects/calendar';
 import { Expense } from '../../../../api/objects/expense';
 import { CalendarService } from '../../calendar/calendar.service';
-import { DatePipe } from '@angular/common';
 import { ExpenseListItemsComponent } from './expense-list-items.component';
 import { ShortNumberPipe } from '../../../../pipes/shortnumber.pipe';
+import { DatePipe } from '@angular/common';
 
 @Component({
     templateUrl: 'expense-list-dialog.component.html',
-    styleUrls: ['expense-list-dialog.component.scss'],
-    imports: [NbCardModule, ExpenseListItemsComponent, NbButtonModule, NbIconModule, DatePipe, ShortNumberPipe],
+    imports: [NbCardModule, ExpenseListItemsComponent, NbButtonModule, NbIconModule, ShortNumberPipe, DatePipe],
 })
 export class ExpenseListDialogComponent implements OnInit {
     public visibleDate: Date;

frontend/src/app/modules/main/dialogs/expense-list-dialog/expense-list-items.component.ts

@@ -2,13 +2,12 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { slideAnimation } from '../../../../animations/slide.animation';
 import { Expense } from '../../../../api/objects/expense';
 import { NbIconModule, NbListModule } from '@nebular/theme';
-import { NgStyle } from '@angular/common';
 import { ShortNumberPipe } from '../../../../pipes/shortnumber.pipe';
 
 @Component({
     selector: 'app-expense-list-items',
     template: ` <nb-list>
-        <nb-list-item class="with-background">
+        <nb-list-item>
             <small class="text-hint w-100">{{ header }}</small>
             <span>{{ totalExpensesAmount | shortNumber }}</span>
         </nb-list-item>
@@ -17,7 +16,7 @@ import { ShortNumberPipe } from '../../../../pipes/shortnumber.pipe';
                 <nb-icon
                     [icon]="icon"
                     class="flex-shrink-0 me-2"
-                    [ngStyle]="{ color: expense.category?.color }"></nb-icon>
+                    [style]="{ color: expense.category?.color }"></nb-icon>
                 <div class="text-truncate w-100 mx-3">
                     {{ expense.label }}
                     <small class="d-flex align-items-center text-hint">
@@ -29,7 +28,7 @@ import { ShortNumberPipe } from '../../../../pipes/shortnumber.pipe';
         }
     </nb-list>`,
     animations: slideAnimation,
-    imports: [NbListModule, NbIconModule, NgStyle, ShortNumberPipe],
+    imports: [NbListModule, NbIconModule, ShortNumberPipe],
 })
 export class ExpenseListItemsComponent implements OnInit {
     @Input({ required: true })

frontend/src/app/modules/main/dialogs/input-dialog/input-dialog.component.html

@@ -1,32 +1,35 @@
-<nb-card class="dialog" size="small">
-    <nb-card-header class="d-flex align-items-center justify-content-between">
-        {{ title }}
-        <button
-            nbButton
-            type="button"
-            status="basic"
-            ghost
-            aria-label="Close input dialog"
-            nbTooltip="Close"
-            (click)="dialogRef.close()">
-            <nb-icon icon="close-outline" />
-        </button>
-    </nb-card-header>
+<form (ngSubmit)="dialogRef.close(text ?? '')">
+    <nb-card class="dialog" size="small">
+        <nb-card-header class="d-flex align-items-center justify-content-between">
+            {{ title }}
+            <button
+                nbButton
+                type="button"
+                status="basic"
+                ghost
+                aria-label="Close input dialog"
+                nbTooltip="Close"
+                (click)="dialogRef.close()">
+                <nb-icon icon="close-outline" />
+            </button>
+        </nb-card-header>
 
-    <nb-card-body class="p-0 overflow-hidden">
-        <textarea
-            nbInput
-            fullWidth
-            #focus
-            class="dialog-textarea p-3 h-100 w-100 border-0"
-            [placeholder]="placeholder"
-            [(ngModel)]="text"></textarea>
-    </nb-card-body>
+        <nb-card-body class="p-0 overflow-hidden">
+            <textarea
+                nbInput
+                fullWidth
+                #focus
+                class="dialog-textarea p-3 h-100 w-100 border-0"
+                [placeholder]="placeholder"
+                [(ngModel)]="text"
+                [ngModelOptions]="{ standalone: true }"></textarea>
+        </nb-card-body>
 
-    <nb-card-footer class="d-flex justify-content-end">
-        <button nbButton type="button" status="primary" (click)="dialogRef.close(text ?? '')">
-            <nb-icon icon="save-outline" />
-            Save
-        </button>
-    </nb-card-footer>
-</nb-card>
+        <nb-card-footer class="d-flex justify-content-end">
+            <button nbButton type="submit" status="primary">
+                <nb-icon icon="save-outline" />
+                Save
+            </button>
+        </nb-card-footer>
+    </nb-card>
+</form>

frontend/src/app/modules/main/dialogs/profile-dialog/profile-dialog.component.ts

@@ -20,7 +20,6 @@ import { UserQueries } from '../../../../queries/user.queries';
 
 @Component({
     templateUrl: 'profile-dialog.component.html',
-    styleUrls: ['profile-dialog.component.scss'],
     imports: [
         FormsModule,
         NbCardModule,

frontend/src/app/modules/main/dialogs/statement-review-dialog/statement-review-dialog.component.html

@@ -12,14 +12,14 @@
             <nb-icon icon="close-outline" />
         </button>
     </nb-card-header>
-    <nb-card-header class="d-flex align-items-center justify-content-between with-background">
+    <nb-card-header class="d-flex align-items-center justify-content-between">
         <small class="text-hint w-100">TRANSACTIONS - {{ expensesCount }}</small>
         <span>{{ totalExpensesAmount | shortNumber }}</span>
     </nb-card-header>
     <nb-card-body class="p-0">
         @for (date of groupedDates; track date) {
             <nb-list [@slideAnimation]>
-                <nb-list-item [@slideAnimation] class="with-background text-hint">
+                <nb-list-item [@slideAnimation] class="text-hint">
                     <div class="d-flex w-100"><nb-icon icon="calendar-outline" class="me-1" /> {{ date }}</div>
                     <div>
                         {{ totalExpensesAmountByDates[date] | shortNumber }}
@@ -51,7 +51,7 @@
             </nb-list>
         }
     </nb-card-body>
-    <nb-card-footer class="d-flex align-items-center justify-content-between with-background">
+    <nb-card-footer class="d-flex align-items-center justify-content-between">
         <button
             nbButton
             type="button"

frontend/src/styles.scss

@@ -38,26 +38,3 @@ body {
     --bs-border-color: var(--divider-color);
     --bs-border-color-translucent: var(--divider-color);
 }
-
-nb-card-header.with-background,
-nb-card-footer.with-background,
-nb-list-item.with-background {
-    background: nb-theme(background-basic-color-2);
-}
-
-.font-weight-normal {
-    font-weight: normal;
-}
-
-// Dialog header icon buttons (close / back) should read as a bare icon only -
-// no background, border, outline or focus fill in any state.
-nb-card-header [nbButton].appearance-ghost.status-basic {
-    &,
-    &:hover,
-    &:focus,
-    &:active {
-        background-color: transparent;
-        border-color: transparent;
-        box-shadow: none;
-    }
-}

frontend/src/styles/animation.scss

@@ -1,8 +1,6 @@
 .bounceIn {
   -webkit-animation-name: bounceIn;
   animation-name: bounceIn;
-  -webkit-animation-duration: .75s;
-  animation-duration: .75s;
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;

frontend/src/styles/helpers.scss

@@ -11,14 +11,3 @@
 small.very-small {
     font-size: 10px;
 }
-
-//
-//.text-truncate {
-//  white-space: nowrap;
-//  overflow: hidden;
-//  text-overflow: ellipsis;
-//}
-//
-//.clearfix {
-//  clear: both;
-//}