Added release date to the changelog

Updated various other packages
Updated changelog and the version number

.browserslistrc

@@ -1,16 +0,0 @@
-# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-
-# For the full list of supported browsers by the Angular framework, please see:
-# https://angular.io/guide/browser-support
-
-# You can see what browsers were selected by your queries by running:
-#   npx browserslist
-
-last 1 Chrome version
-last 1 Firefox version
-last 2 Edge major versions
-last 2 Safari major versions
-last 2 iOS major versions
-Firefox ESR

README.md

@@ -4,7 +4,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
 
 ## Development server
 
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 

angular.json

@@ -1,11 +1,6 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "version": 1,
-    "cli": {
-        "schematicCollections": [
-            "@angular-eslint/schematics"
-        ]
-    },
     "newProjectRoot": "projects",
     "projects": {
         "fuse": {
@@ -25,7 +20,9 @@
                         "outputPath": "dist/fuse",
                         "index": "src/index.html",
                         "main": "src/main.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js"
+                        ],
                         "tsConfig": "tsconfig.app.json",
                         "inlineStyleLanguage": "scss",
                         "allowedCommonJsDependencies": [
@@ -35,7 +32,6 @@
                             "crypto-js/hmac-sha256",
                             "crypto-js/enc-base64",
                             "flat",
-                            "moment",
                             "quill"
                         ],
                         "assets": [
@@ -77,12 +73,6 @@
                                     "maximumError": "90kb"
                                 }
                             ],
-                            "fileReplacements": [
-                                {
-                                    "replace": "src/environments/environment.ts",
-                                    "with": "src/environments/environment.prod.ts"
-                                }
-                            ],
                             "outputHashing": "all"
                         },
                         "development": {
@@ -117,10 +107,11 @@
                 "test": {
                     "builder": "@angular-devkit/build-angular:karma",
                     "options": {
-                        "main": "src/test.ts",
-                        "polyfills": "src/polyfills.ts",
+                        "polyfills": [
+                            "zone.js",
+                            "zone.js/testing"
+                        ],
                         "tsConfig": "tsconfig.spec.json",
-                        "karmaConfig": "karma.conf.js",
                         "inlineStyleLanguage": "scss",
                         "assets": [
                             "src/favicon-16x16.png",
@@ -132,15 +123,6 @@
                         ],
                         "scripts": []
                     }
-                },
-                "lint": {
-                    "builder": "@angular-eslint/builder:lint",
-                    "options": {
-                        "lintFilePatterns": [
-                            "src/**/*.ts",
-                            "src/**/*.html"
-                        ]
-                    }
                 }
             }
         }

karma.conf.js

@@ -1,45 +0,0 @@
-// Karma configuration file, see link for more information
-// https://karma-runner.github.io/1.0/config/configuration-file.html
-
-module.exports = function (config)
-{
-    config.set({
-        basePath           : '',
-        frameworks         : ['jasmine', '@angular-devkit/build-angular'],
-        plugins            : [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-jasmine-html-reporter'),
-            require('karma-coverage'),
-            require('@angular-devkit/build-angular/plugins/karma')
-        ],
-        client             : {
-            jasmine     : {
-                // you can add configuration options for Jasmine here
-                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
-                // for example, you can disable the random execution with `random: false`
-                // or set a specific seed with `seed: 4321`
-            },
-            clearContext: false // leave Jasmine Spec Runner output visible in browser
-        },
-        jasmineHtmlReporter: {
-            suppressAll: true // removes the duplicated traces
-        },
-        coverageReporter   : {
-            dir      : require('path').join(__dirname, './coverage/fuse'),
-            subdir   : '.',
-            reporters: [
-                {type: 'html'},
-                {type: 'text-summary'}
-            ]
-        },
-        reporters          : ['progress', 'kjhtml'],
-        port               : 9876,
-        colors             : true,
-        logLevel           : config.LOG_INFO,
-        autoWatch          : true,
-        browsers           : ['Chrome'],
-        singleRun          : false,
-        restartOnFileChange: true
-    });
-};

package.json

@@ -1,6 +1,6 @@
 {
     "name": "fuse-angular",
-    "version": "15.1.0",
+    "version": "17.2.0",
     "description": "Fuse - Angular Admin Template and Starter Project",
     "author": "https://themeforest.net/user/srcn",
     "license": "https://themeforest.net/licenses/standard",
@@ -10,71 +10,58 @@
         "start": "ng serve",
         "build": "ng build",
         "watch": "ng build --watch --configuration development",
-        "test": "ng test",
-        "lint": "ng lint"
+        "test": "ng test"
     },
     "dependencies": {
-        "@angular/animations": "14.1.0",
-        "@angular/cdk": "14.1.0",
-        "@angular/common": "14.1.0",
-        "@angular/compiler": "14.1.0",
-        "@angular/core": "14.1.0",
-        "@angular/forms": "14.1.0",
-        "@angular/material": "14.1.0",
-        "@angular/material-moment-adapter": "14.1.0",
-        "@angular/platform-browser": "14.1.0",
-        "@angular/platform-browser-dynamic": "14.1.0",
-        "@angular/router": "14.1.0",
-        "@ngneat/transloco": "4.1.1",
-        "apexcharts": "3.35.3",
+        "@angular/animations": "15.1.1",
+        "@angular/cdk": "15.1.1",
+        "@angular/common": "15.1.1",
+        "@angular/compiler": "15.1.1",
+        "@angular/core": "15.1.1",
+        "@angular/forms": "15.1.1",
+        "@angular/material": "15.1.1",
+        "@angular/material-luxon-adapter": "15.1.1",
+        "@angular/platform-browser": "15.1.1",
+        "@angular/platform-browser-dynamic": "15.1.1",
+        "@angular/router": "15.1.1",
+        "@ngneat/transloco": "4.2.2",
+        "apexcharts": "3.36.3",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.6.0",
+        "highlight.js": "11.7.0",
         "lodash-es": "4.17.21",
-        "moment": "2.29.4",
-        "ng-apexcharts": "1.7.1",
-        "ngx-markdown": "14.0.1",
-        "ngx-quill": "18.0.0",
+        "luxon": "3.2.1",
+        "ng-apexcharts": "1.7.4",
+        "ngx-quill": "20.0.1",
         "perfect-scrollbar": "1.5.5",
         "quill": "1.3.7",
-        "rxjs": "7.5.6",
-        "tslib": "2.4.0",
-        "zone.js": "0.11.6"
+        "rxjs": "7.8.0",
+        "tslib": "2.4.1",
+        "zone.js": "0.12.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "14.1.0",
-        "@angular-eslint/builder": "14.0.2",
-        "@angular-eslint/eslint-plugin": "14.0.2",
-        "@angular-eslint/eslint-plugin-template": "14.0.2",
-        "@angular-eslint/schematics": "14.0.2",
-        "@angular-eslint/template-parser": "14.0.2",
-        "@angular/cli": "14.1.0",
-        "@angular/compiler-cli": "14.1.0",
-        "@tailwindcss/aspect-ratio": "0.4.0",
-        "@tailwindcss/line-clamp": "0.4.0",
-        "@tailwindcss/typography": "0.5.4",
+        "@angular-devkit/build-angular": "15.1.2",
+        "@angular/cli": "15.1.2",
+        "@angular/compiler-cli": "15.1.1",
+        "@tailwindcss/line-clamp": "0.4.2",
+        "@tailwindcss/typography": "0.5.9",
         "@types/chroma-js": "2.1.4",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
-        "@types/jasmine": "4.0.3",
-        "@types/lodash": "4.14.182",
+        "@types/jasmine": "4.3.1",
+        "@types/lodash": "4.14.191",
         "@types/lodash-es": "4.17.6",
-        "@typescript-eslint/eslint-plugin": "5.30.7",
-        "@typescript-eslint/parser": "5.30.7",
-        "autoprefixer": "10.4.7",
+        "@types/luxon": "3.2.0",
+        "autoprefixer": "10.4.13",
         "chroma-js": "2.4.2",
-        "eslint": "8.20.0",
-        "eslint-plugin-import": "2.26.0",
-        "eslint-plugin-jsdoc": "39.3.3",
-        "eslint-plugin-prefer-arrow": "1.2.3",
-        "jasmine-core": "4.2.0",
-        "karma": "6.4.0",
+        "jasmine-core": "4.5.0",
+        "karma": "6.4.1",
         "karma-chrome-launcher": "3.1.1",
         "karma-coverage": "2.2.0",
         "karma-jasmine": "5.1.0",
         "karma-jasmine-html-reporter": "2.0.0",
         "lodash": "4.17.21",
-        "postcss": "8.4.14",
-        "tailwindcss": "3.1.6",
-        "typescript": "4.7.4"
+        "postcss": "8.4.21",
+        "tailwindcss": "3.2.4",
+        "typescript": "4.9.4"
     }
 }

src/@fuse/components/navigation/vertical/vertical.component.ts

@@ -1,5 +1,6 @@
-import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, QueryList, Renderer2, SimpleChanges, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';
+import { DOCUMENT } from '@angular/common';
 import { NavigationEnd, Router } from '@angular/router';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { delay, filter, merge, ReplaySubject, Subject, Subscription, takeUntil } from 'rxjs';
@@ -51,6 +52,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     private readonly _handleAsideOverlayClick: any;
     private readonly _handleOverlayClick: any;
     private _hovered: boolean = false;
+    private _mutationObserver: MutationObserver;
     private _overlay: HTMLElement;
     private _player: AnimationPlayer;
     private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
@@ -64,6 +66,7 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
     constructor(
         private _animationBuilder: AnimationBuilder,
         private _changeDetectorRef: ChangeDetectorRef,
+        @Inject(DOCUMENT) private _document: Document,
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _router: Router,
@@ -330,6 +333,34 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngAfterViewInit(): void
     {
+        // Fix for Firefox.
+        //
+        // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
+        // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
+        // This fixes the problem by reading the 'top' value from the html element and adding it as a
+        // 'marginTop' to the navigation itself.
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const mutationTarget = mutation.target as HTMLElement;
+                if ( mutation.attributeName === 'class' )
+                {
+                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
+                    {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else
+                    {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes     : true,
+            attributeFilter: ['class']
+        });
+
         setTimeout(() => {
 
             // Return if 'navigation content' element does not exist
@@ -375,6 +406,9 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngOnDestroy(): void
     {
+        // Disconnect the mutation observer
+        this._mutationObserver.disconnect();
+
         // Forcefully close the navigation and aside in case they are opened
         this.close();
         this.closeAside();

src/@fuse/services/confirmation/dialog/dialog.component.ts

@@ -8,12 +8,16 @@ import { FuseConfirmationConfig } from '@fuse/services/confirmation/confirmation
     styles       : [
         `
             .fuse-confirmation-dialog-panel {
+
                 @screen md {
                     @apply w-128;
                 }
 
-                .mat-dialog-container {
-                    padding: 0 !important;
+                .mat-mdc-dialog-container {
+
+                    .mat-mdc-dialog-surface {
+                        padding: 0 !important;
+                    }
                 }
             }
         `

src/@fuse/styles/components/input.scss

@@ -20,22 +20,22 @@ textarea {
     }
 
     &:-webkit-autofill {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:hover {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:focus {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
     }
 
     &:-webkit-autofill:active {
-        -webkit-transition: 'background-color 9999s ease-out';
-        -webkit-transition-delay: 9999s;
+        transition: background-color 600000s 0s, color 600000s 0s !important;
+    }
+
+    [data-autocompleted] {
+        background-color: transparent !important;
     }
 }

src/@fuse/styles/tailwind.scss

@@ -63,11 +63,15 @@
         -webkit-text-fill-color: currentColor;
     }
 
+    /* Set the background and foreground colors */
     body, .dark, .light {
         @apply text-default bg-default #{'!important'};
     }
 
-    *, *::before, *::after {
+    /* Set the border color */
+    *,
+    ::before,
+    ::after {
         --tw-border-opacity: 1 !important;
         border-color: rgba(var(--fuse-border-rgb), var(--tw-border-opacity));
 
@@ -116,6 +120,7 @@
         }
     }
 
+    /* Set the foreground color for disabled elements */
     [disabled] * {
         @apply text-disabled #{'!important'};
     }

src/@fuse/styles/themes.scss

@@ -1,167 +1,164 @@
-@use '@angular/material' as mat;
 @use "sass:map";
+@use '@angular/material' as mat;
+@use "user-themes" as userThemes;
+
+/* Set the base colors for light themes */
+$light-base: (
+    foreground: (
+        base: #000000,
+        divider: #E2E8F0, /* slate.200 */
+        dividers: #E2E8F0, /* slate.200 */
+        disabled: #94A3B8, /* slate.400 */
+        disabled-button: #94A3B8, /* slate.400 */
+        disabled-text: #94A3B8, /* slate.400 */
+        elevation: #000000,
+        hint-text: #94A3B8, /* slate.400 */
+        secondary-text: #64748B, /* slate.500 */
+        icon: #64748B, /* slate.500 */
+        icons: #64748B, /* slate.500 */
+        mat-icon: #64748B, /* slate.500 */
+        text: #1E293B, /* slate.800 */
+        slider-min: #1E293B, /* slate.800 */
+        slider-off: #CBD5E1, /* slate.300 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #CBD5E1, /* slate.300 */
+        app-bar: #FFFFFF,
+        background: #F1F5F9, /* slate.100 */
+        hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
+        card: #FFFFFF,
+        dialog: #FFFFFF,
+        disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
+        raised-button: #FFFFFF,
+        focused-button: #64748B, /* slate.500 */
+        selected-button: #E2E8F0, /* slate.200 */
+        selected-disabled-button: #E2E8F0, /* slate.200 */
+        disabled-button-toggle: #CBD5E1, /* slate.300 */
+        unselected-chip: #E2E8F0, /* slate.200 */
+        disabled-list-option: #CBD5E1, /* slate.300 */
+        tooltip: #1E293B /* slate.800 */
+    )
+);
+
+/* Set the base colors for dark themes */
+$dark-base: (
+    foreground: (
+        base: #FFFFFF,
+        divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
+        disabled: #475569, /* slate.600 */
+        disabled-button: #1E293B, /* slate.800 */
+        disabled-text: #475569, /* slate.600 */
+        elevation: #000000,
+        hint-text: #64748B, /* slate.500 */
+        secondary-text: #94A3B8, /* slate.400 */
+        icon: #F1F5F9, /* slate.100 */
+        icons: #F1F5F9, /* slate.100 */
+        mat-icon: #94A3B8, /* slate.400 */
+        text: #FFFFFF,
+        slider-min: #FFFFFF,
+        slider-off: #64748B, /* slate.500 */
+        slider-off-active: #94A3B8 /* slate.400 */
+    ),
+    background: (
+        status-bar: #0F172A, /* slate.900 */
+        app-bar: #0F172A, /* slate.900 */
+        background: #0F172A, /* slate.900 */
+        hover: rgba(255, 255, 255, 0.05),
+        card: #1E293B, /* slate.800 */
+        dialog: #1E293B, /* slate.800 */
+        disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
+        raised-button: #0F172A, /* slate.900 */
+        focused-button: #E2E8F0, /* slate.200 */
+        selected-button: rgba(255, 255, 255, 0.05),
+        selected-disabled-button: #1E293B, /* slate.800 */
+        disabled-button-toggle: #0F172A, /* slate.900 */
+        unselected-chip: #475569, /* slate.600 */
+        disabled-list-option: #E2E8F0, /* slate.200 */
+        tooltip: #64748B /* slate.500 */
+    )
+);
 
 /* Include the core Angular Material styles */
 @include mat.core();
 
-/* Create a base theme without color.
-    This will globally set the density and typography for all future color themes. */
+/* Create a base theme without any color to set the density and typography */
 @include mat.all-component-themes((
     color: null,
-    density: -2,
+    density: 0,
     typography: mat.define-typography-config(
         $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
-        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-        $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
+        $headline-1: mat.define-typography-level(1.875rem, 2.25rem, 800, theme('fontFamily.sans')),
+        $headline-2: mat.define-typography-level(1.25rem, 1.75rem, 700, theme('fontFamily.sans')),
+        $headline-3: mat.define-typography-level(1.125rem, 1.75rem, 600, theme('fontFamily.sans')),
+        $headline-4: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $headline-5: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $headline-6: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $subtitle-1: mat.define-typography-level(1rem, 1.75rem, 400, theme('fontFamily.sans')),
+        $subtitle-2: mat.define-typography-level(0.875rem, 1.25rem, 600, theme('fontFamily.sans')),
+        $body-1: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 400, theme('fontFamily.sans')),
+        $caption: mat.define-typography-level(0.75rem, 1rem, 400, theme('fontFamily.sans')),
+        $button: mat.define-typography-level(0.875rem, 0.875rem, 500, theme('fontFamily.sans')),
+        $overline: mat.define-typography-level(0.75rem, 2rem, 500, theme('fontFamily.sans'))
     )
 ));
 
-/* Generate Primary, Accent and Warn palettes */
-$palettes: ();
-@each $name in (primary, accent, warn) {
-    $palettes: map.merge($palettes, (#{$name}: (
-        50: var(--fuse-#{$name}-50),
-        100: var(--fuse-#{$name}-100),
-        200: var(--fuse-#{$name}-200),
-        300: var(--fuse-#{$name}-300),
-        400: var(--fuse-#{$name}-400),
-        500: var(--fuse-#{$name}-500),
-        600: var(--fuse-#{$name}-600),
-        700: var(--fuse-#{$name}-700),
-        800: var(--fuse-#{$name}-800),
-        900: var(--fuse-#{$name}-900),
-        contrast: (
-            50: var(--fuse-on-#{$name}-50),
-            100: var(--fuse-on-#{$name}-100),
-            200: var(--fuse-on-#{$name}-200),
-            300: var(--fuse-on-#{$name}-300),
-            400: var(--fuse-on-#{$name}-400),
-            500: var(--fuse-on-#{$name}-500),
-            600: var(--fuse-on-#{$name}-600),
-            700: var(--fuse-on-#{$name}-700),
-            800: var(--fuse-on-#{$name}-800),
-            900: var(--fuse-on-#{$name}-900)
-        ),
-        default: var(--fuse-#{$name}),
-        lighter: var(--fuse-#{$name}-100),
-        darker: var(--fuse-#{$name}-700),
-        text: var(--fuse-#{$name}),
-        default-contrast: var(--fuse-on-#{$name}),
-        lighter-contrast: var(--fuse-on-#{$name}-100),
-        darker-contrast: var(--fuse-on-#{$name}-700)
-    )));
-}
+/* Loop through user themes and generate Angular Material themes */
+@each $name, $theme in userThemes.$user-themes {
 
-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
-    we don't have to generate a separate Angular Material theme for each color
-    set. We can just create one light and one dark theme and then switch the
-    CSS Custom Properties to dynamically switch the colors. */
-body.light,
-body .light {
-    $base-light-theme: mat.define-light-theme((
-        color: ($palettes)
+    /* Generate the palettes */
+    $palettes: ();
+    @each $name in (primary, accent, warn) {
+
+        /* Define the Angular Material theme */
+        $palette: mat.define-palette(map.get($theme, $name));
+
+        /* Replace the default colors on the defined Material palette */
+        $palette: map.merge($palette, (
+            default: map.get(map.get($theme, $name), DEFAULT),
+            lighter: map.get(map.get($theme, $name), 100),
+            darker: map.get(map.get($theme, $name), 700),
+            text: map.get(map.get($theme, $name), DEFAULT),
+            default-contrast: map.get(map.get(map.get($theme, $name), contrast), DEFAULT),
+            lighter-contrast: map.get(map.get(map.get($theme, $name), contrast), 100),
+            darker-contrast: map.get(map.get(map.get($theme, $name), contrast), 700)
+        ));
+
+        $palettes: map.merge($palettes, (#{$name}: $palette));
+    }
+
+    /* Define a light & dark Angular Material theme with the generated palettes */
+    $light-theme: mat.define-light-theme((
+        color: $palettes
     ));
 
-    $light-theme: (
-        color: (
-            primary: map.get(map.get($base-light-theme, color), primary),
-            accent: map.get(map.get($base-light-theme, color), accent),
-            warn: map.get(map.get($base-light-theme, color), warn),
-            is-dark: map.get(map.get($base-light-theme, color), is-dark),
-            foreground: (
-                base: #000000,
-                divider: #E2E8F0, /* slate.200 */
-                dividers: #E2E8F0, /* slate.200 */
-                disabled: #94A3B8, /* slate.400 */
-                disabled-button: #94A3B8, /* slate.400 */
-                disabled-text: #94A3B8, /* slate.400 */
-                elevation: #000000,
-                hint-text: #94A3B8, /* slate.400 */
-                secondary-text: #64748B, /* slate.500 */
-                icon: #64748B, /* slate.500 */
-                icons: #64748B, /* slate.500 */
-                mat-icon: #64748B, /* slate.500 */
-                text: #1E293B, /* slate.800 */
-                slider-min: #1E293B, /* slate.800 */
-                slider-off: #CBD5E1, /* slate.300 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #CBD5E1, /* slate.300 */
-                app-bar: #FFFFFF,
-                background: #F1F5F9, /* slate.100 */
-                hover: rgba(148, 163, 184, 0.12), /* slate.400 + opacity */
-                card: #FFFFFF,
-                dialog: #FFFFFF,
-                disabled-button: rgba(148, 163, 184, 0.38), /* slate.400 + opacity */
-                raised-button: #FFFFFF,
-                focused-button: #64748B, /* slate.500 */
-                selected-button: #E2E8F0, /* slate.200 */
-                selected-disabled-button: #E2E8F0, /* slate.200 */
-                disabled-button-toggle: #CBD5E1, /* slate.300 */
-                unselected-chip: #E2E8F0, /* slate.200 */
-                disabled-list-option: #CBD5E1, /* slate.300 */
-                tooltip: #1E293B /* slate.800 */
-            )
-        )
-    );
-
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
-}
-
-body.dark,
-body .dark {
-    $base-dark-theme: mat.define-dark-theme((
-        color: ($palettes)
+    $dark-theme: mat.define-dark-theme((
+        color: $palettes
     ));
 
-    $dark-theme: (
-        color: (
-            primary: map.get(map.get($base-dark-theme, color), primary),
-            accent: map.get(map.get($base-dark-theme, color), accent),
-            warn: map.get(map.get($base-dark-theme, color), warn),
-            is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-            foreground: (
-                base: #FFFFFF,
-                divider: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                dividers: rgba(241, 245, 249, 0.12), /* slate.100 + opacity */
-                disabled: #475569, /* slate.600 */
-                disabled-button: #1E293B, /* slate.800 */
-                disabled-text: #475569, /* slate.600 */
-                elevation: #000000,
-                hint-text: #64748B, /* slate.500 */
-                secondary-text: #94A3B8, /* slate.400 */
-                icon: #F1F5F9, /* slate.100 */
-                icons: #F1F5F9, /* slate.100 */
-                mat-icon: #94A3B8, /* slate.400 */
-                text: #FFFFFF,
-                slider-min: #FFFFFF,
-                slider-off: #64748B, /* slate.500 */
-                slider-off-active: #94A3B8 /* slate.400 */
-            ),
-            background: (
-                status-bar: #0F172A, /* slate.900 */
-                app-bar: #0F172A, /* slate.900 */
-                background: #0F172A, /* slate.900 */
-                hover: rgba(255, 255, 255, 0.05),
-                card: #1E293B, /* slate.800 */
-                dialog: #1E293B, /* slate.800 */
-                disabled-button: rgba(15, 23, 42, 0.38), /* slate.900 + opacity */
-                raised-button: #0F172A, /* slate.900 */
-                focused-button: #E2E8F0, /* slate.200 */
-                selected-button: rgba(255, 255, 255, 0.05),
-                selected-disabled-button: #1E293B, /* slate.800 */
-                disabled-button-toggle: #0F172A, /* slate.900 */
-                unselected-chip: #475569, /* slate.600 */
-                disabled-list-option: #E2E8F0, /* slate.200 */
-                tooltip: #64748B /* slate.500 */
-            )
-        )
+    /* Merge the custom base colors with the generated themes */
+    $light-theme-colors: map.merge(map.get($light-theme, color), $light-base);
+    $light-theme: map.merge(
+            (color: $light-theme-colors),
+            $light-theme-colors
     );
 
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($dark-theme);
+    $dark-theme-colors: map.merge(map.get($dark-theme, color), $dark-base);
+    $dark-theme: map.merge(
+            (color: $dark-theme-colors),
+            $dark-theme-colors
+    );
+
+    /* Generate and encapsulate Angular Material themes */
+    #{map.get($theme, selector)} .light,
+    #{map.get($theme, selector)}.light {
+        @include mat.all-component-colors($light-theme);
+    }
+
+    #{map.get($theme, selector)} .dark,
+    #{map.get($theme, selector)}.dark {
+        @include mat.all-component-colors($dark-theme);
+    }
 }

src/@fuse/tailwind/plugins/theming.js

@@ -1,17 +1,21 @@
 const chroma = require('chroma-js');
 const _ = require('lodash');
+const fs = require('fs');
 const path = require('path');
 const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
 const generateContrasts = require(path.resolve(__dirname, ('../utils/generate-contrasts')));
+const jsonToSassMap = require(path.resolve(__dirname, ('../utils/json-to-sass-map')));
 
 // -----------------------------------------------------------------------------------------------------
 // @ Utilities
 // -----------------------------------------------------------------------------------------------------
 
 /**
- * Normalize the provided theme
+ * Normalizes the provided theme by omitting empty values and values that
+ * start with "on" from each palette. Also sets the correct DEFAULT value
+ * of each palette.
  *
  * @param theme
  */
@@ -28,67 +32,6 @@ const normalizeTheme = (theme) =>
     ));
 };
 
-/**
- * Generates variable colors for the 'colors'
- * configuration from the provided theme
- *
- * @param theme
- */
-const generateVariableColors = (theme) =>
-{
-    // https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo
-    const customPropertiesWithOpacity = (name) => ({
-        opacityVariable,
-        opacityValue
-    }) =>
-    {
-        if ( opacityValue )
-        {
-            return `rgba(var(--fuse-${name}-rgb), ${opacityValue})`;
-        }
-        if ( opacityVariable )
-        {
-            return `rgba(var(--fuse-${name}-rgb), var(${opacityVariable}, 1))`;
-        }
-        return `rgb(var(--fuse-${name}-rgb))`;
-    };
-
-    return _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(theme))), (name) => [
-        [name, customPropertiesWithOpacity(name)],
-        [`on-${name}`, customPropertiesWithOpacity(`on-${name}`)]
-    ])));
-};
-
-/**
- * Generate and return themes object with theme name and colors/
- * This is useful for accessing themes from Angular (Typescript).
- *
- * @param themes
- * @returns {unknown[]}
- */
-function generateThemesObject(themes)
-{
-    const normalizedDefaultTheme = normalizeTheme(themes.default);
-    return _.map(_.cloneDeep(themes), (value, key) =>
-    {
-        const theme = normalizeTheme(value);
-        const primary = (theme && theme.primary && theme.primary.DEFAULT) ? theme.primary.DEFAULT : normalizedDefaultTheme.primary.DEFAULT;
-        const accent = (theme && theme.accent && theme.accent.DEFAULT) ? theme.accent.DEFAULT : normalizedDefaultTheme.accent.DEFAULT;
-        const warn = (theme && theme.warn && theme.warn.DEFAULT) ? theme.warn.DEFAULT : normalizedDefaultTheme.warn.DEFAULT;
-
-        return _.fromPairs([
-            [
-                key,
-                {
-                    primary,
-                    accent,
-                    warn
-                }
-            ]
-        ]);
-    });
-}
-
 // -----------------------------------------------------------------------------------------------------
 // @ FUSE TailwindCSS Main Plugin
 // -----------------------------------------------------------------------------------------------------
@@ -98,29 +41,113 @@ const theming = plugin.withOptions((options) => ({
         theme
     }) =>
     {
-        // -----------------------------------------------------------------------------------------------------
-        // @ Map variable colors
-        // -----------------------------------------------------------------------------------------------------
-        const mapVariableColors = _.fromPairs(_.map(options.themes, (theme, themeName) => [
-            themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
-            _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
-                    [
-                        e(paletteName),
-                        palette
-                    ],
-                    [
-                        `on-${e(paletteName)}`,
-                        _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
-                    ]
-                ])
-            ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+        /**
+         * Create user themes object by going through the provided themes and
+         * merging them with the provided "default" so, we can have a complete
+         * set of color palettes for each user theme.
+         */
+        const userThemes = _.fromPairs(_.map(options.themes, (theme, themeName) => [
+            themeName,
+            _.defaults({}, theme, options.themes['default'])
         ]));
 
-        addComponents(mapVariableColors);
+        /**
+         * Normalize the themes and assign it to the themes object. This will
+         * be the final object that we create a SASS map from
+         */
+        let themes = _.fromPairs(_.map(userThemes, (theme, themeName) => [
+            themeName,
+            normalizeTheme(theme)
+        ]));
 
-        // -----------------------------------------------------------------------------------------------------
-        // @ Generate scheme based css custom properties and utility classes
-        // -----------------------------------------------------------------------------------------------------
+        /**
+         * Go through the themes to generate the contrasts and filter the
+         * palettes to only have "primary", "accent" and "warn" objects.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            _.pick(
+                _.fromPairs(_.map(theme, (palette, paletteName) => [
+                    paletteName,
+                    {
+                        ...palette,
+                        contrast: _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [
+                            hue,
+                            _.get(userThemes[themeName], [`on-${paletteName}`, hue]) || color
+                        ]))
+                    }
+                ])),
+                ['primary', 'accent', 'warn']
+            )
+        ]));
+
+        /**
+         * Go through the themes and attach appropriate class selectors so,
+         * we can use them to encapsulate each theme.
+         */
+        themes = _.fromPairs(_.map(themes, (theme, themeName) => [
+            themeName,
+            {
+                selector: `".theme-${themeName}"`,
+                ...theme
+            }
+        ]));
+
+        /* Generate the SASS map using the themes object */
+        const sassMap = jsonToSassMap(JSON.stringify({'user-themes': themes}));
+
+        /* Get the file path */
+        const filename = path.resolve(__dirname, ('../../styles/user-themes.scss'));
+
+        /* Read the file and get its data */
+        let data;
+        try
+        {
+            data = fs.readFileSync(filename, {encoding: 'utf8'});
+        }
+        catch ( err )
+        {
+            console.error(err);
+        }
+
+        /* Write the file if the map has been changed */
+        if ( data !== sassMap )
+        {
+            try
+            {
+                fs.writeFileSync(filename, sassMap, {encoding: 'utf8'});
+            }
+            catch ( err )
+            {
+                console.error(err);
+            }
+        }
+
+        /**
+         * Iterate through the user's themes and build Tailwind components containing
+         * CSS Custom Properties using the colors from them. This allows switching
+         * themes by simply replacing a class name as well as nesting them.
+         */
+        addComponents(
+            _.fromPairs(_.map(options.themes, (theme, themeName) => [
+                themeName === 'default' ? 'body, .theme-default' : `.theme-${e(themeName)}`,
+                _.fromPairs(_.flatten(_.map(flattenColorPalette(_.fromPairs(_.flatten(_.map(normalizeTheme(theme), (palette, paletteName) => [
+                        [
+                            e(paletteName),
+                            palette
+                        ],
+                        [
+                            `on-${e(paletteName)}`,
+                            _.fromPairs(_.map(generateContrasts(palette), (color, hue) => [hue, _.get(theme, [`on-${paletteName}`, hue]) || color]))
+                        ]
+                    ])
+                ))), (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
+            ]))
+        );
+
+        /**
+         * Generate scheme based css custom properties and utility classes
+         */
         const schemeCustomProps = _.map(['light', 'dark'], (colorScheme) =>
         {
             const isDark = colorScheme === 'dark';
@@ -135,13 +162,13 @@ const theming = plugin.withOptions((options) => ({
                     /**
                      * If a custom property is not available, browsers will use
                      * the fallback value. In this case, we want to use '--is-dark'
-                     * as the indicator of a dark theme so we can use it like this:
+                     * as the indicator of a dark theme so, we can use it like this:
                      * background-color: var(--is-dark, red);
                      *
                      * If we set '--is-dark' as "true" on dark themes, the above rule
                      * won't work because of the said "fallback value" logic. Therefore,
                      * we set the '--is-dark' to "false" on light themes and not set it
-                     * all on dark themes so that the fallback value can be used on
+                     * at all on dark themes so that the fallback value can be used on
                      * dark themes.
                      *
                      * On light themes, since '--is-dark' exists, the above rule will be
@@ -156,7 +183,7 @@ const theming = plugin.withOptions((options) => ({
                      */
                     ...(!isDark ? {'--is-dark': 'false'} : {}),
 
-                    // Generate custom properties from customProps
+                    /* Generate custom properties from customProps */
                     ..._.fromPairs(_.flatten(_.map(background, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]]))),
                     ..._.fromPairs(_.flatten(_.map(foreground, (value, key) => [[`--fuse-${e(key)}`, value], [`--fuse-${e(key)}-rgb`, chroma(value).rgb().join(',')]])))
                 }
@@ -165,7 +192,7 @@ const theming = plugin.withOptions((options) => ({
 
         const schemeUtilities = (() =>
         {
-            // Generate general styles & utilities
+            /* Generate general styles & utilities */
             return {};
         })();
 
@@ -175,9 +202,17 @@ const theming = plugin.withOptions((options) => ({
     (options) =>
     {
         return {
-            theme   : {
+            theme: {
                 extend: {
-                    colors: generateVariableColors(options.themes.default)
+                    /**
+                     * Add 'Primary', 'Accent' and 'Warn' palettes as colors so all color utilities
+                     * are generated for them; "bg-primary", "text-on-primary", "bg-accent-600" etc.
+                     * This will also allow using arbitrary values with them such as opacity and such.
+                     */
+                    colors: _.fromPairs(_.flatten(_.map(_.keys(flattenColorPalette(normalizeTheme(options.themes.default))), (name) => [
+                        [name, `rgba(var(--fuse-${name}-rgb), <alpha-value>)`],
+                        [`on-${name}`, `rgba(var(--fuse-on-${name}-rgb), <alpha-value>)`]
+                    ])))
                 },
                 fuse  : {
                     customProps: {
@@ -221,8 +256,7 @@ const theming = plugin.withOptions((options) => ({
                                 'mat-icon'      : colors.slate[400]
                             }
                         }
-                    },
-                    themes     : generateThemesObject(options.themes)
+                    }
                 }
             }
         };

src/@fuse/tailwind/utils/json-to-sass-map.js

@@ -0,0 +1,67 @@
+const _ = require('lodash');
+
+module.exports = (data) =>
+{
+    if ( !data )
+    {
+        return;
+    }
+
+    data = JSON.parse(data);
+
+    const getSCSS = (chunk) =>
+    {
+        let scss = '';
+
+        if ( typeof chunk === "object" && !Array.isArray(chunk) )
+        {
+            _.mapKeys(chunk, (value, key) =>
+            {
+                scss += key + ': ';
+
+                if ( typeof value === "object" )
+                {
+                    if ( Array.isArray(value) )
+                    {
+                        scss += '(';
+                        _.each(value, (val1) =>
+                        {
+                            if ( Array.isArray(val1) )
+                            {
+                                _.each(val1, (val2) =>
+                                {
+                                    scss += val2 + ' ';
+                                });
+                                scss = scss.slice(0, -1) + ', ';
+                            }
+                            else
+                            {
+                                scss += val1 + ', ';
+                            }
+                        });
+                        scss = scss.slice(0, -2);
+                        scss += ')';
+                    }
+                    else
+                    {
+                        scss += '(' + getSCSS(value) + ')';
+                    }
+                }
+                else
+                {
+                    scss += getSCSS(value);
+                }
+                scss += ', ';
+            });
+            scss = scss.slice(0, -2);
+        }
+        else
+        {
+            scss += chunk;
+        }
+
+        return scss;
+    };
+
+    return '$' + getSCSS(data) + ';';
+};

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('15.1.0').full;
+export const FUSE_VERSION = new Version('17.2.0').full;

src/app/app.module.ts

@@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ExtraOptions, PreloadAllModules, RouterModule } from '@angular/router';
-import { MarkdownModule } from 'ngx-markdown';
 import { FuseModule } from '@fuse';
 import { FuseConfigModule } from '@fuse/services/config';
 import { FuseMockApiModule } from '@fuse/lib/mock-api';
@@ -36,10 +35,7 @@ const routerConfig: ExtraOptions = {
         CoreModule,
 
         // Layout module of your application
-        LayoutModule,
-
-        // 3rd party modules that require global configuration via forRoot
-        MarkdownModule.forRoot({})
+        LayoutModule
     ],
     bootstrap   : [
         AppComponent

src/app/app.resolvers.ts

@@ -6,7 +6,6 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
 import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
-import { UserService } from 'app/core/user/user.service';
 
 @Injectable({
     providedIn: 'root'
@@ -21,8 +20,7 @@ export class InitialDataResolver implements Resolve<any>
         private _navigationService: NavigationService,
         private _notificationsService: NotificationsService,
         private _quickChatService: QuickChatService,
-        private _shortcutsService: ShortcutsService,
-        private _userService: UserService
+        private _shortcutsService: ShortcutsService
     )
     {
     }
@@ -45,8 +43,7 @@ export class InitialDataResolver implements Resolve<any>
             this._messagesService.getAll(),
             this._notificationsService.getAll(),
             this._quickChatService.getChats(),
-            this._shortcutsService.getAll(),
-            this._userService.get()
+            this._shortcutsService.getAll()
         ]);
     }
 }

src/app/app.routing.ts

@@ -12,9 +12,9 @@ export const appRoutes: Route[] = [
     // Redirect empty path to '/dashboards/project'
     {path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
 
-    // Redirect signed in user to the '/dashboards/project'
+    // Redirect signed-in user to the '/dashboards/project'
     //
-    // After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect'
+    // After the user signs in, the sign-in page will redirect the user to the 'signed-in-redirect'
     // path. Below is another redirection for that path to redirect the user to the desired
     // location. This is a small convenience to keep all main routes together here on this file.
     {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
@@ -22,8 +22,7 @@ export const appRoutes: Route[] = [
     // Auth routes for guests
     {
         path: '',
-        canActivate: [NoAuthGuard],
-        canActivateChild: [NoAuthGuard],
+        canMatch: [NoAuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -40,8 +39,7 @@ export const appRoutes: Route[] = [
     // Auth routes for authenticated users
     {
         path: '',
-        canActivate: [AuthGuard],
-        canActivateChild: [AuthGuard],
+        canMatch: [AuthGuard],
         component: LayoutComponent,
         data: {
             layout: 'empty'
@@ -55,25 +53,24 @@ export const appRoutes: Route[] = [
     // Landing routes
     {
         path: '',
-        component  : LayoutComponent,
+        component: LayoutComponent,
         data: {
             layout: 'empty'
         },
-        children   : [
+        children: [
             {path: 'home', loadChildren: () => import('app/modules/landing/home/home.module').then(m => m.LandingHomeModule)},
         ]
     },
 
     // Admin routes
     {
-        path       : '',
-        canActivate: [AuthGuard],
-        canActivateChild: [AuthGuard],
-        component  : LayoutComponent,
-        resolve    : {
+        path: '',
+        canMatch: [AuthGuard],
+        component: LayoutComponent,
+        resolve: {
             initialData: InitialDataResolver,
         },
-        children   : [
+        children: [
 
             // Dashboards
             {path: 'dashboards', children: [

src/app/core/auth/guards/auth.guard.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
 import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
 @Injectable({
     providedIn: 'root'
 })
-export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
+export class AuthGuard implements CanMatch
 {
     /**
      * Constructor
@@ -23,38 +23,14 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Can activate
-     *
-     * @param route
-     * @param state
-     */
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
-    {
-        const redirectUrl = state.url === '/sign-out' ? '/' : state.url;
-        return this._check(redirectUrl);
-    }
-
-    /**
-     * Can activate child
-     *
-     * @param childRoute
-     * @param state
-     */
-    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        const redirectUrl = state.url === '/sign-out' ? '/' : state.url;
-        return this._check(redirectUrl);
-    }
-
-    /**
-     * Can load
+     * Can match
      *
      * @param route
      * @param segments
      */
-    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean
+    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
     {
-        return this._check('/');
+        return this._check(segments);
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -64,29 +40,28 @@ export class AuthGuard implements CanActivate, CanActivateChild, CanLoad
     /**
      * Check the authenticated status
      *
-     * @param redirectURL
+     * @param segments
      * @private
      */
-    private _check(redirectURL: string): Observable<boolean>
+    private _check(segments: UrlSegment[]): Observable<boolean | UrlTree>
     {
         // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
+        return this._authService.check().pipe(
+            switchMap((authenticated) => {
 
-                           // If the user is not authenticated...
-                           if ( !authenticated )
-                           {
-                               // Redirect to the sign-in page
-                               this._router.navigate(['sign-in'], {queryParams: {redirectURL}});
+                // If the user is not authenticated...
+                if ( !authenticated )
+                {
+                    // Redirect to the sign-in page with a redirectUrl param
+                    const redirectURL = `/${segments.join('/')}`;
+                    const urlTree = this._router.parseUrl(`sign-in?redirectURL=${redirectURL}`);
 
-                               // Prevent the access
-                               return of(false);
-                           }
+                    return of(urlTree);
+                }
 
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
+                // Allow the access
+                return of(true);
+            })
+        );
     }
 }

src/app/core/auth/guards/noAuth.guard.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, CanLoad, Route, Router, RouterStateSnapshot, UrlSegment, UrlTree } from '@angular/router';
+import { CanMatch, Route, Router, UrlSegment, UrlTree } from '@angular/router';
 import { Observable, of, switchMap } from 'rxjs';
 import { AuthService } from 'app/core/auth/auth.service';
 
 @Injectable({
     providedIn: 'root'
 })
-export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
+export class NoAuthGuard implements CanMatch
 {
     /**
      * Constructor
@@ -23,34 +23,12 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Can activate
-     *
-     * @param route
-     * @param state
-     */
-    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
-    {
-        return this._check();
-    }
-
-    /**
-     * Can activate child
-     *
-     * @param childRoute
-     * @param state
-     */
-    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
-    {
-        return this._check();
-    }
-
-    /**
-     * Can load
+     * Can match
      *
      * @param route
      * @param segments
      */
-    canLoad(route: Route, segments: UrlSegment[]): Observable<boolean> | Promise<boolean> | boolean
+    canMatch(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
     {
         return this._check();
     }
@@ -66,24 +44,10 @@ export class NoAuthGuard implements CanActivate, CanActivateChild, CanLoad
      */
     private _check(): Observable<boolean>
     {
-        // Check the authentication status
-        return this._authService.check()
-                   .pipe(
-                       switchMap((authenticated) => {
-
-                           // If the user is authenticated...
-                           if ( authenticated )
-                           {
-                               // Redirect to the root
-                               this._router.navigate(['']);
-
-                               // Prevent the access
-                               return of(false);
-                           }
-
-                           // Allow the access
-                           return of(true);
-                       })
-                   );
+        // Check the authentication status and return an observable of
+        // "true" or "false" to allow or prevent the access
+        return this._authService.check().pipe(
+            switchMap((authenticated) => of(!authenticated))
+        );
     }
 }

src/app/core/transloco/transloco.module.ts

@@ -1,6 +1,5 @@
 import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
 import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { environment } from 'environments/environment';
 import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
 
 @NgModule({
@@ -25,7 +24,7 @@ import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
                 defaultLang         : 'en',
                 fallbackLang        : 'en',
                 reRenderOnLangChange: true,
-                prodMode            : environment.production
+                prodMode            : true
             })
         },
         {

src/app/layout/common/messages/messages.component.html

@@ -144,9 +144,9 @@
             <!-- No messages -->
             <ng-container *ngIf="!messages || !messages.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:inbox'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No messages</div>

src/app/layout/common/notifications/notifications.component.html

@@ -145,9 +145,9 @@
             <!-- No notifications -->
             <ng-container *ngIf="!notifications || !notifications.length">
                 <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                    <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                         <mat-icon
-                            class="text-primary-500-700"
+                            class="text-primary-700 dark:text-primary-50"
                             [svgIcon]="'heroicons_outline:bell'"></mat-icon>
                     </div>
                     <div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>

src/app/layout/common/quick-chat/quick-chat.component.html

@@ -151,12 +151,12 @@
 
                     <!-- Message field -->
                     <div class="flex items-end p-4 border-t bg-gray-50 dark:bg-transparent">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full">
+                        <mat-form-field
+                            class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full"
+                            [subscriptSizing]="'dynamic'">
                             <textarea
-                                class="min-h-5 my-0 resize-none"
-                                style="margin: 11px 0 !important; padding: 0 !important;"
-                                [rows]="1"
                                 matInput
+                                cdkTextareaAutosize
                                 #messageInput></textarea>
                         </mat-form-field>
                         <div class="flex items-center h-11 my-px ml-4">

src/app/layout/common/quick-chat/quick-chat.component.ts

@@ -1,4 +1,5 @@
-import { Component, ElementRef, HostBinding, HostListener, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, HostBinding, HostListener, Inject, NgZone, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
 import { ScrollStrategy, ScrollStrategyOptions } from '@angular/cdk/overlay';
 import { Subject, takeUntil } from 'rxjs';
 import { QuickChatService } from 'app/layout/common/quick-chat/quick-chat.service';
@@ -11,13 +12,14 @@ import { Chat } from 'app/layout/common/quick-chat/quick-chat.types';
     encapsulation: ViewEncapsulation.None,
     exportAs     : 'quickChat'
 })
-export class QuickChatComponent implements OnInit, OnDestroy
+export class QuickChatComponent implements OnInit, AfterViewInit, OnDestroy
 {
     @ViewChild('messageInput') messageInput: ElementRef;
     chat: Chat;
     chats: Chat[];
     opened: boolean = false;
     selectedChat: Chat;
+    private _mutationObserver: MutationObserver;
     private _scrollStrategy: ScrollStrategy = this._scrollStrategyOptions.block();
     private _overlay: HTMLElement;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -26,6 +28,7 @@ export class QuickChatComponent implements OnInit, OnDestroy
      * Constructor
      */
     constructor(
+        @Inject(DOCUMENT) private _document: Document,
         private _elementRef: ElementRef,
         private _renderer2: Renderer2,
         private _ngZone: NgZone,
@@ -103,11 +106,48 @@ export class QuickChatComponent implements OnInit, OnDestroy
             });
     }
 
+    /**
+     * After view init
+     */
+    ngAfterViewInit(): void
+    {
+        // Fix for Firefox.
+        //
+        // Because 'position: sticky' doesn't work correctly inside a 'position: fixed' parent,
+        // adding the '.cdk-global-scrollblock' to the html element breaks the navigation's position.
+        // This fixes the problem by reading the 'top' value from the html element and adding it as a
+        // 'marginTop' to the navigation itself.
+        this._mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                const mutationTarget = mutation.target as HTMLElement;
+                if ( mutation.attributeName === 'class' )
+                {
+                    if ( mutationTarget.classList.contains('cdk-global-scrollblock') )
+                    {
+                        const top = parseInt(mutationTarget.style.top, 10);
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', `${Math.abs(top)}px`);
+                    }
+                    else
+                    {
+                        this._renderer2.setStyle(this._elementRef.nativeElement, 'margin-top', null);
+                    }
+                }
+            });
+        });
+        this._mutationObserver.observe(this._document.documentElement, {
+            attributes     : true,
+            attributeFilter: ['class']
+        });
+    }
+
     /**
      * On destroy
      */
     ngOnDestroy(): void
     {
+        // Disconnect the mutation observer
+        this._mutationObserver.disconnect();
+
         // Unsubscribe from all subscriptions
         this._unsubscribeAll.next(null);
         this._unsubscribeAll.complete();

src/app/layout/common/search/search.component.html

@@ -68,7 +68,9 @@
 <!-- Basic search -->
 <ng-container *ngIf="appearance === 'basic'">
     <div class="w-full sm:min-w-80">
-        <mat-form-field class="fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-icon
                 matPrefix
                 [svgIcon]="'heroicons_outline:search'"></mat-icon>

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -148,9 +148,9 @@
                 <!-- No shortcuts -->
                 <ng-container *ngIf="!shortcuts || !shortcuts.length">
                     <div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
-                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
+                        <div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100 dark:bg-primary-600">
                             <mat-icon
-                                class="text-primary-500-700"
+                                class="text-primary-700 dark:text-primary-50"
                                 [svgIcon]="'heroicons_outline:bookmark'"></mat-icon>
                         </div>
                         <div class="mt-5 text-2xl font-semibold tracking-tight">No shortcuts</div>

src/app/mock-api/apps/chat/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 /**
  * Attachments are common and will be filled from here
@@ -32,175 +35,175 @@ export const messages = [
         chatId   : '',
         contactId: 'me',
         value    : 'Hi!',
-        createdAt: moment().subtract(1, 'week').hour(18).minute(56).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 18, minute: 56}).toISO()
     },
     {
         id       : 'eb82cf4b-fa93-4bf4-a88a-99e987ddb7ea',
         chatId   : '',
         contactId: '',
         value    : 'Hey, dude!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 4}).toISO()
     },
     {
         id       : '3cf9b2a6-ae54-47db-97b2-ee139a8f84e5',
         chatId   : '',
         contactId: '',
         value    : 'Long time no see.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(4).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 4}).toISO()
     },
     {
         id       : '2ab91b0f-fafb-45f3-88df-7efaff29134b',
         chatId   : '',
         contactId: 'me',
         value    : 'Yeah, man... Things were quite busy for me and my family.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 6}).toISO()
     },
     {
         id       : '10e81481-378f-49ac-b06b-7c59dcc639ae',
         chatId   : '',
         contactId: '',
         value    : 'What\'s up? Anything I can help with?',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(6).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 6}).toISO()
     },
     {
         id       : '3b334e72-6605-4ebd-a4f6-3850067048de',
         chatId   : '',
         contactId: 'me',
         value    : 'We\'ve been on the move, changed 3 places over 4 months',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 7}).toISO()
     },
     {
         id       : '25998113-3a96-4dd0-a7b9-4d2bb58db3f3',
         chatId   : '',
         contactId: '',
         value    : 'Wow! That\'s crazy! 🤯 What happened?',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(7).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 7}).toISO()
     },
     {
         id       : '30adb3da-0e4f-487e-aec2-6d9f31e097f6',
         chatId   : '',
         contactId: 'me',
         value    : 'You know I got a job in that big software company. First move was because of that.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : 'c0d6fd6e-d294-4845-8751-e84b8f2c4d3b',
         chatId   : '',
         contactId: 'me',
         value    : 'Then they decided to re-locate me after a month',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : '8d3c442b-62fa-496f-bffa-210ff5c1866b',
         chatId   : '',
         contactId: 'me',
         value    : 'Which was an absolute pain because we just set up everything, house, kids school and all that.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(8).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 8}).toISO()
     },
     {
         id       : '3cf26ef0-e81f-4698-ac39-487454413332',
         chatId   : '',
         contactId: 'me',
         value    : 'So we moved the second time.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 9}).toISO()
     },
     {
         id       : '415151b9-9ee9-40a4-a4ad-2d88146bc71b',
         chatId   : '',
         contactId: '',
         value    : 'It\'s crazy!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(9).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 9}).toISO()
     },
     {
         id       : '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c',
         chatId   : '',
         contactId: 'me',
         value    : 'Then this virus thing happened and just after a week we moved in, they decided the whole department will be working remotely.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 10}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: 'me',
         value    : 'And then we decided to move back our first location because, you know, everything was already setup so that\'s the third time.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(10).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 10}).toISO()
     },
     {
         id       : '415151b9-9ee9-40a4-a4ad-2d88146bc71b',
         chatId   : '',
         contactId: '',
         value    : 'Ohh dude, I\'m really sorry you had to go through all that in such a short period of time',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : 'ea7662d5-7b72-4c19-ad6c-f80320541001',
         chatId   : '',
         contactId: '',
         value    : '😕',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : '3a2d3a0e-839b-46e7-86ae-ca0826ecda7c',
         chatId   : '',
         contactId: 'me',
         value    : 'Thanks, man! It was good catching up with you.',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(11).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 11}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: '',
         value    : 'Yeah dude. Hit me again next week so we can grab a coffee, remotely!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: 'me',
         value    : ':) Sure, man! See you next week!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : '5329c20d-6754-47ec-af8c-660c72be3528',
         chatId   : '',
         contactId: '',
         value    : 'See you later!',
-        createdAt: moment().subtract(1, 'week').hour(19).minute(12).toISOString()
+        createdAt: now.minus({week: 1}).set({hour: 19, minute: 12}).toISO()
     },
     {
         id       : 'bab8ca0e-b8e5-4375-807b-1c91fca25a5d',
         chatId   : '',
         contactId: 'me',
         value    : 'Hey! Are you available right now? How about if we grab that coffee today? Remotely, of course :)',
-        createdAt: moment().hour(12).minute(45).toISOString()
+        createdAt: now.set({hour: 12, minute: 45}).toISO()
     },
     {
         id       : '8445a84d-599d-4e2d-a31c-5f4f29ad2b4c',
         chatId   : '',
         contactId: '',
         value    : 'Hi!',
-        createdAt: moment().hour(12).minute(56).toISOString()
+        createdAt: now.set({hour: 12, minute: 56}).toISO()
     },
     {
         id       : '9f506742-50da-4350-af9d-61e53392fa08',
         chatId   : '',
         contactId: '',
         value    : 'Sure thing! I\'m gonna call you in 5, is it okay?',
-        createdAt: moment().hour(12).minute(56).toISOString()
+        createdAt: now.set({hour: 12, minute: 56}).toISO()
     },
     {
         id       : 'ca8523d8-faed-45f7-af09-f6bd5c3f3875',
         chatId   : '',
         contactId: 'me',
         value    : 'Awesome! Call me in 5 minutes..',
-        createdAt: moment().hour(12).minute(58).toISOString()
+        createdAt: now.set({hour: 12, minute: 58}).toISO()
     },
     {
         id       : '39944b00-1ffe-4ffb-8ca6-13c292812e06',
         chatId   : '',
         contactId: '',
         value    : '👍🏻',
-        createdAt: moment().hour(13).minute(0).toISOString()
+        createdAt: now.set({hour: 13, minute: 0}).toISO()
     }
 ];
 export const chats = [

src/app/mock-api/apps/mailbox/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const folders = [
     {
@@ -103,7 +106,7 @@ export const mails = [
         bcc        : [
             'Julie T. <julie.t@company.com>'
         ],
-        date       : moment().hour(20).minute(13).toISOString(), // Today - 20:13
+        date       : now.set({hour: 20, minute: 13}).toISO(), // Today - 20:13
         subject    : 'Please review and sign the attached agreement',
         content    : 'Hi Brian,\n\nUllamco deserunt commodo esse deserunt deserunt quis eiusmod. Laborum sint excepteur non sit eiusmod sunt voluptate ipsum nisi ullamco magna. Lorem consectetur est dolor minim exercitation deserunt quis duis fugiat ipsum incididunt non. Anim aute ipsum cupidatat nisi occaecat quis sit nisi labore labore dolore do. Pariatur veniam culpa quis veniam nisi exercitation veniam ut. Quis do sint proident fugiat ad.\n\nNon id nisi commodo veniam. Veniam veniam minim ea laborum voluptate id duis deserunt. Anim ut ut amet et ullamco nulla fugiat id incididunt adipisicing excepteur amet. Ex amet eu cillum non fugiat velit dolore. Incididunt duis est eu et ex sunt consectetur cillum nisi aute proident.\n\nIncididunt excepteur laborum quis sit. Ex quis officia incididunt proident aliqua adipisicing. Irure ad in Lorem laborum deserunt nulla consequat. Pariatur excepteur exercitation cupidatat aute.\n\nCheers!\nMyra Dudley',
         attachments: [
@@ -147,7 +150,7 @@ export const mails = [
             contact: 'Shaw Murray <shaw.murray@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(18).minute(56).toISOString(), // Today - 18:56
+        date       : now.set({hour: 18, minute: 56}).toISO(), // Today - 18:56
         subject    : 'Delivery address confirmation',
         content    : 'Dear Brian,\n\nDolore consectetur est cupidatat ipsum reprehenderit anim quis veniam anim ipsum incididunt exercitation. Velit exercitation culpa eiusmod dolore labore irure. Duis esse quis elit pariatur labore occaecat esse voluptate dolore deserunt cillum irure. Aute qui nulla est exercitation qui sunt anim aliquip. Ex ad est velit laboris exercitation ea ut pariatur. Amet reprehenderit ut est id sunt commodo anim et est voluptate et.\n\nMagna aliqua incididunt non ut voluptate nulla aliqua exercitation elit consectetur cupidatat. Proident in reprehenderit occaecat laborum non eu amet id aliqua nulla dolore. Eiusmod quis adipisicing quis cupidatat labore.\n\nReprehenderit nulla ullamco est dolore ex irure sunt nostrud reprehenderit quis dolor. Tempor nostrud elit elit aute ut ut eiusmod laboris excepteur consequat ex. Velit id ex ullamco in. Ea elit Lorem Lorem aliquip amet consequat irure nisi qui cillum incididunt. Commodo aute Lorem eiusmod veniam consectetur aute eu dolore. Ea magna incididunt laboris quis quis et tempor dolore dolore ut nisi.\n\nBest Regards,\nShaw Murray',
         attachments: [],
@@ -170,7 +173,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(14).minute(35).toISOString(), // Today - 14:35
+        date       : now.set({hour: 14, minute: 35}).toISO(), // Today - 14:35
         subject    : 'Insurance documents',
         content    : 'Hi Brian,\n\nAliquip ipsum sunt sit sunt velit velit pariatur. Nisi incididunt eiusmod consequat ut cillum eu exercitation. Enim proident nostrud aute in. Non irure nisi duis aliquip commodo proident veniam adipisicing id velit. Enim magna Lorem fugiat tempor.\n\nCommodo non nulla incididunt irure voluptate. Fugiat culpa cillum aute quis. Voluptate veniam adipisicing dolor sint. Proident eiusmod quis duis ipsum sit eu.\n\nDeserunt reprehenderit adipisicing reprehenderit ipsum. Laborum in veniam amet occaecat tempor esse enim dolore elit sit quis adipisicing. Aute occaecat eiusmod enim cupidatat sunt.\n\nBest Regards,\nSanders Beck',
         attachments: [],
@@ -188,7 +191,7 @@ export const mails = [
             contact: 'Zimmerman Gould <zimmerman.gould@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(22).minute(26).subtract(1, 'day').toISOString(), // Yesterday - 08:22
+        date       : now.minus({day: 1}).set({hour: 22, minute: 26}).toISO(), // Yesterday - 22:26
         subject    : 'Previous clients and their invoices',
         content    : 'Dear Brian,\n\nDo aute eu dolore officia laborum id anim fugiat incididunt nulla esse proident. Veniam veniam nostrud ut nisi magna ipsum ea eiusmod esse velit id aliqua nisi irure. Amet laborum fugiat deserunt est. Quis amet veniam anim nostrud irure cillum voluptate consequat qui cupidatat minim occaecat elit enim. Ut ut incididunt cillum sit sit irure culpa. Culpa exercitation minim velit eu. Ipsum exercitation excepteur et ad do sit.\n\nVeniam cupidatat officia aliqua ad excepteur cillum laboris deserunt esse laboris adipisicing reprehenderit. Reprehenderit anim consectetur pariatur labore do in irure. Ad consequat commodo non pariatur occaecat. Eiusmod cillum non anim consequat culpa nisi. Est nulla ut sint qui deserunt anim. Excepteur qui occaecat dolore nulla occaecat cupidatat aute sit laborum magna.\n\nConsequat aliqua commodo officia excepteur. Ex consectetur elit dolor exercitation ullamco amet laboris. Deserunt nulla non proident est pariatur reprehenderit reprehenderit. Ea nisi id aliqua cillum velit tempor ipsum dolor proident cillum eiusmod et ipsum anim. Elit non quis mollit enim Lorem cupidatat et labore. Laboris cillum reprehenderit aute veniam aliqua esse officia proident deserunt. Eiusmod laboris ullamco amet consectetur amet.\n\nKind Regards,\nZimmerman Gould',
         attachments: [],
@@ -209,7 +212,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(20).minute(5).subtract(1, 'day').toISOString(), // Yesterday - 22:05
+        date       : now.minus({day: 1}).set({hour: 20, minute: 5}).toISO(), // Yesterday - 20:05
         subject    : 'Quote for a new web design project',
         content    : 'Hey Brian,\n\nNisi officia aliqua ex non cupidatat sint ullamco. Irure pariatur ullamco consequat ut eu anim. Ut ad elit pariatur est non sunt. Tempor dolore quis commodo dolore duis officia laboris nostrud sint. Exercitation ullamco laboris eiusmod culpa ut.\n\nAute Lorem aute occaecat dolore tempor ipsum proident fugiat deserunt non incididunt velit nulla. Dolor pariatur tempor amet qui eu exercitation. Tempor minim culpa proident nisi esse ea. Enim est fugiat aliqua aliqua aute velit laborum cupidatat irure nisi dolor deserunt aliqua.\n\nFugiat ut dolor tempor sunt aliquip dolor nostrud. Consequat incididunt ullamco cillum dolore excepteur deserunt est dolor aliquip irure do mollit officia. Consectetur cillum et non minim nisi. Esse quis sunt deserunt elit sint velit tempor et ullamco laboris officia excepteur. Veniam ad ut aliqua sunt consequat reprehenderit nostrud non in duis aute quis pariatur. Occaecat mollit anim non pariatur. Ad do ad id fugiat et culpa laborum esse cupidatat voluptate elit ut magna voluptate.\n\nBest Regards,\nKarina Alford',
         attachments: [],
@@ -230,7 +233,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(16).minute(43).subtract(1, 'day').toISOString(), // Yesterday - 16:43
+        date       : now.minus({day: 1}).set({hour: 16, minute: 43}).toISO(), // Yesterday - 16:43
         subject    : 'Nulla culpa consectetur aute ex eu irure incididunt aliqua cupidatat sit cillum fugiat anim ea',
         content    : 'Hey Brian,\n\nDo pariatur occaecat tempor duis. Aute occaecat non consequat ut occaecat sint. Cillum reprehenderit elit nisi incididunt in labore pariatur. Labore mollit pariatur nulla officia esse anim exercitation nisi commodo culpa laborum amet nisi.\n\nSunt culpa mollit nostrud excepteur adipisicing sit do. Cillum voluptate amet do sit quis aliquip ea est qui elit. Veniam exercitation sit reprehenderit labore officia in labore excepteur eiusmod exercitation.\n\nEnim nostrud est non esse reprehenderit in ea eiusmod. Duis incididunt amet aliquip dolor esse. Nostrud qui commodo in non nostrud proident enim cupidatat. Aute sunt aliqua excepteur qui occaecat nulla incididunt commodo adipisicing ipsum.\n\nKind Regards,\nCarla Gray',
         attachments: [],
@@ -252,7 +255,7 @@ export const mails = [
             'Graham Belltower <graham.belltower@company.com>',
             'Julie T. <julie.t@company.com>'
         ],
-        date       : moment().hour(11).minute(28).subtract(2, 'day').toISOString(), // 2 days ago - 11:28
+        date       : now.minus({day: 2}).set({hour: 11, minute: 28}).toISO(), // 2 days ago - 11:28
         subject    : 'Ipsum laborum minim aute labore in',
         content    : 'Dear Brian,\n\nLaboris non ad et aute sint aliquip mollit voluptate velit dolore magna fugiat ex. Voluptate amet aute deserunt tempor non laboris cillum. Voluptate veniam magna sint magna proident exercitation adipisicing aute id ad tempor reprehenderit magna ullamco. Laborum Lorem anim elit aliquip ut aute minim fugiat aliquip. Eiusmod est et occaecat dolore anim laborum ullamco ipsum commodo.\n\nCommodo amet veniam nostrud mollit quis sint qui nulla elit esse excepteur ullamco esse magna. Nisi duis aute est in mollit irure enim tempor in. Mollit ipsum laboris et velit ex excepteur pariatur. Cillum veniam id ipsum magna. Laborum duis aliquip ut ipsum ad aliqua id sit pariatur consequat sit. Sit nulla nulla ullamco nulla eiusmod et in dolore sint reprehenderit cupidatat.\n\nIpsum mollit cupidatat magna occaecat labore est fugiat est fugiat fugiat nulla labore laboris. Eiusmod aute adipisicing pariatur aliquip sint enim anim in dolore enim aute culpa nulla. Minim magna enim officia ipsum elit quis do velit deserunt Lorem veniam excepteur.\n\nKind Regards,\nRice Cash',
         attachments: [
@@ -295,7 +298,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(7).minute(12).subtract(2, 'day').toISOString(), // 2 days ago - 07:12
+        date       : now.minus({day: 2}).set({hour: 7, minute: 12}).toISO(), // 2 days ago - 07:12
         subject    : 'Ipsum fugiat ad deserunt cillum sunt fugiat',
         content    : 'Hello Brian,\n\nId Lorem laborum eiusmod eiusmod mollit magna dolore. Et commodo officia fugiat dolor aliqua proident mollit ut commodo ullamco. Sunt nulla eu dolor velit velit reprehenderit. Culpa esse veniam fugiat eiusmod id veniam sunt reprehenderit minim mollit. Esse qui ea irure pariatur eu ullamco pariatur ipsum reprehenderit proident mollit proident. Nisi fugiat ut est aliquip nulla in non dolore.\n\nCulpa irure cillum ex fugiat cupidatat eiusmod non. Qui irure velit consectetur minim eu excepteur eiusmod veniam irure ad culpa nisi. Nisi sit nostrud quis ullamco aliquip non consequat sunt reprehenderit velit dolor dolor laboris. Dolore in Lorem consectetur nostrud. Laborum cupidatat exercitation voluptate duis amet. Sunt sint minim do in commodo ipsum commodo ea qui velit deserunt qui anim fugiat.\n\nExercitation et qui consequat incididunt nisi incididunt cupidatat officia in. Sit eiusmod anim aliqua elit. Nisi mollit ut non pariatur enim fugiat sint labore velit nostrud eu. Eiusmod id laboris laboris duis enim aute ipsum in magna. Sit eiusmod amet duis commodo sint et anim ex sunt deserunt dolor incididunt. Eiusmod duis dolore dolor elit occaecat do adipisicing ullamco ex laboris aliqua adipisicing. Labore pariatur aute proident mollit elit commodo labore minim dolore non in cillum.\n\nCheers!\nElaine Ortiz',
         attachments: [],
@@ -321,7 +324,7 @@ export const mails = [
         cc         : [
             'Graham Belltower <graham.belltower@company.com>'
         ],
-        date       : moment().hour(6).minute(1).subtract(2, 'day').toISOString(), // 2 days ago - 06:01
+        date       : now.minus({day: 2}).set({hour: 6, minute: 1}).toISO(), // 2 days ago - 06:01
         subject    : 'Deserunt exercitation ut nulla elit Lorem',
         content    : 'Hi Brian,\n\nEst labore sunt sunt Lorem dolore. In excepteur esse proident ut consectetur dolor voluptate laborum veniam pariatur. Excepteur ut veniam sit culpa exercitation qui nulla nulla magna ea in dolore et consequat. Irure minim ad cupidatat amet reprehenderit excepteur incididunt nulla eu et excepteur anim et aliqua.\n\nSint sint Lorem magna est irure sint ea cupidatat fugiat. Occaecat non adipisicing magna magna culpa sit commodo aute ex consequat amet minim esse ut. In nulla eiusmod veniam deserunt in.\n\nIn aute excepteur qui pariatur fugiat. Occaecat velit voluptate proident occaecat ut laboris occaecat pariatur aute dolore do. Ut commodo ipsum est non commodo ut ea qui labore veniam. Occaecat nostrud eu dolor tempor velit excepteur sint occaecat excepteur aliqua aliquip. Magna mollit ea aliquip exercitation do elit ex reprehenderit esse aliqua elit.\n\nKind Regards,\nFleming Stone',
         attachments: [],
@@ -343,7 +346,7 @@ export const mails = [
             contact: 'England Wiley <england.wiley@company.com>'
         },
         to         : 'me <hughes.brian@company.com>',
-        date       : moment().hour(15).minute(36).subtract(5, 'day').toISOString(), // 2 days ago - 15:36
+        date       : now.minus({day: 5}).set({hour: 15, minute: 36}).toISO(), // 5 days ago - 15:36
         subject    : 'Minim do reprehenderit dolor ipsum officia magna laborum est anim in fugiat',
         content    : 'Dear Brian,\n\nAd do minim id ad ex sit reprehenderit labore do occaecat fugiat ut enim. Et sunt dolore sint non consequat ut. Esse deserunt nostrud pariatur nulla ullamco nulla sit aliquip culpa sunt ipsum. Ut ad minim qui anim amet aute cupidatat. Est ullamco duis laboris nulla labore incididunt consectetur. Cillum sunt mollit nulla laborum non tempor veniam consequat.\n\nAmet fugiat velit id deserunt pariatur velit laboris consectetur quis officia. Culpa nostrud deserunt nostrud esse labore esse consequat labore fugiat. Nostrud duis ex nulla et do.\n\nPariatur mollit ex adipisicing nostrud nostrud occaecat. Id tempor irure cupidatat duis cillum cupidatat nostrud enim anim. Esse nisi pariatur nisi elit elit sit quis ullamco dolor dolore pariatur est sint. Sint ex aliqua id sunt sunt magna amet ex sit anim. Irure aliquip fugiat ipsum tempor irure nisi Lorem anim sit ullamco. Exercitation nostrud mollit est non enim.\n\nBest Regards,\nEngland Wiley',
         attachments: [],

src/app/mock-api/apps/notes/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const labels = [
     {
@@ -38,7 +41,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(10).minute(19).subtract(98, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 19}).minus({day: 98}).toISO(),
         updatedAt: null
     },
     {
@@ -53,7 +56,7 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : false,
-        createdAt: moment().hour(15).minute(37).subtract(80, 'day').toISOString(),
+        createdAt: now.set({hour: 15, minute: 37}).minus({day: 80}).toISO(),
         updatedAt: null
     },
     {
@@ -65,8 +68,8 @@ export const notes = [
         reminder : null,
         labels   : ['6c288794-47eb-4605-8bdf-785b61a449d3'],
         archived : false,
-        createdAt: moment().hour(19).minute(27).subtract(74, 'day').toISOString(),
-        updatedAt: moment().hour(15).minute(36).subtract(50, 'day').toISOString()
+        createdAt: now.set({hour: 19, minute: 27}).minus({day: 74}).toISO(),
+        updatedAt: now.set({hour: 15, minute: 36}).minus({day: 50}).toISO(),
     },
     {
         id       : '89861bd4-0144-4bb4-8b39-332ca10371d5',
@@ -74,10 +77,10 @@ export const notes = [
         content  : 'Theming support for all apps',
         tasks    : null,
         image    : null,
-        reminder : moment().hour(12).minute(34).add(50, 'day').toISOString(),
+        reminder: now.set({hour: 12, minute: 34}).plus({day: 50}).toISO(),
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(12).minute(34).subtract(59, 'day').toISOString(),
+        createdAt: now.set({hour: 12, minute: 34}).minus({day: 59}).toISO(),
         updatedAt: null
     },
     {
@@ -110,7 +113,7 @@ export const notes = [
         reminder : null,
         labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
         archived : false,
-        createdAt: moment().hour(16).minute(4).subtract(47, 'day').toISOString(),
+        createdAt: now.set({hour: 16, minute: 4}).minus({day: 47}).toISO(),
         updatedAt: null
     },
     {
@@ -145,10 +148,10 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        reminder : now.set({hour: 10, minute: 44}).minus({day: 35}).toISO(),
         labels   : ['b1cde9ee-e54d-4142-ad8b-cf55dafc9528'],
         archived : false,
-        createdAt: moment().hour(10).minute(44).subtract(35, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 44}).minus({day: 35}).toISO(),
         updatedAt: null
     },
     {
@@ -183,13 +186,13 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(11).minute(27).subtract(14, 'day').toISOString(),
+        reminder : now.set({hour: 11, minute: 27}).minus({day: 14}).toISO(),
         labels   : [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528',
             'e2f749f5-41ed-49d0-a92a-1c83d879e371'
         ],
         archived : false,
-        createdAt: moment().hour(11).minute(27).subtract(24, 'day').toISOString(),
+        createdAt: now.set({hour: 11, minute: 27}).minus({day: 24}).toISO(),
         updatedAt: null
     },
     {
@@ -198,10 +201,10 @@ export const notes = [
         content  : 'Organize the dad\'s surprise retirement party',
         tasks    : null,
         image    : null,
-        reminder : moment().hour(14).minute(56).subtract(25, 'day').toISOString(),
+        reminder : now.set({hour: 14, minute: 56}).minus({day: 25}).toISO(),
         labels   : ['f47c92e5-20b9-44d9-917f-9ff4ad25dfd0'],
         archived : false,
-        createdAt: moment().hour(14).minute(56).subtract(20, 'day').toISOString(),
+        createdAt: now.set({hour: 14, minute: 56}).minus({day: 20}).toISO(),
         updatedAt: null
     },
     {
@@ -216,8 +219,8 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : false,
-        createdAt: moment().hour(9).minute(32).subtract(15, 'day').toISOString(),
-        updatedAt: moment().hour(17).minute(6).subtract(12, 'day').toISOString()
+        createdAt: now.set({hour: 9, minute: 32}).minus({day: 15}).toISO(),
+        updatedAt: now.set({hour: 17, minute: 6}).minus({day: 12}).toISO(),
     },
     {
         id       : '15188348-78aa-4ed6-b5c2-028a214ba987',
@@ -228,7 +231,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : false,
-        createdAt: moment().hour(20).minute(5).subtract(12, 'day').toISOString(),
+        createdAt: now.set({hour: 20, minute: 5}).minus({day: 12}).toISO(),
         updatedAt: null
     },
     {
@@ -248,10 +251,10 @@ export const notes = [
             }
         ],
         image    : null,
-        reminder : moment().hour(13).minute(43).subtract(2, 'day').toISOString(),
+        reminder : now.set({hour: 13, minute: 43}).minus({day: 2}).toISO(),
         labels   : ['bbc73458-940b-421c-8d5f-8dcd23a9b0d6'],
         archived : false,
-        createdAt: moment().hour(13).minute(43).subtract(7, 'day').toISOString(),
+        createdAt: now.set({hour: 13, minute: 43}).minus({day: 7}).toISO(),
         updatedAt: null
     },
     {
@@ -266,7 +269,7 @@ export const notes = [
             '6c288794-47eb-4605-8bdf-785b61a449d3'
         ],
         archived : false,
-        createdAt: moment().hour(7).minute(12).subtract(2, 'day').toISOString(),
+        createdAt: now.set({hour: 7, minute: 12}).minus({day: 2}).toISO(),
         updatedAt: null
     },
     {
@@ -281,7 +284,7 @@ export const notes = [
             '6c288794-47eb-4605-8bdf-785b61a449d3'
         ],
         archived : true,
-        createdAt: moment().hour(17).minute(14).subtract(100, 'day').toISOString(),
+        createdAt: now.set({hour: 17, minute: 14}).minus({day: 100}).toISO(),
         updatedAt: null
     },
     {
@@ -293,7 +296,7 @@ export const notes = [
         reminder : null,
         labels   : ['e2f749f5-41ed-49d0-a92a-1c83d879e371'],
         archived : true,
-        createdAt: moment().hour(10).minute(29).subtract(85, 'day').toISOString(),
+        createdAt: now.set({hour: 10, minute: 29}).minus({day: 85}).toISO(),
         updatedAt: null
     },
     {
@@ -308,7 +311,7 @@ export const notes = [
             'b1cde9ee-e54d-4142-ad8b-cf55dafc9528'
         ],
         archived : true,
-        createdAt: moment().hour(15).minute(30).subtract(69, 'day').toISOString(),
+        createdAt: now.set({hour: 15, minute: 30}).minus({day: 69}).toISO(),
         updatedAt: null
     }
 ];

src/app/mock-api/apps/scrumboard/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const boards = [
     {
@@ -7,7 +10,7 @@ export const boards = [
         title       : 'Admin Dashboard',
         description : 'Roadmap for the new project',
         icon        : 'heroicons_outline:template',
-        lastActivity: moment().startOf('day').subtract(1, 'day').toISOString(),
+        lastActivity: now.startOf('day').minus({day: 1}).toISO(),
         members     : [
             '9c510cf3-460d-4a8c-b3be-bcc3db578c08',
             'baa88231-0ee6-4028-96d5-7f187e0f4cd5',
@@ -19,7 +22,7 @@ export const boards = [
         title       : 'Weekly Planning',
         description : 'Job related tasks for the week',
         icon        : 'heroicons_outline:calendar',
-        lastActivity: moment().startOf('day').subtract(2, 'days').toISOString(),
+        lastActivity: now.startOf('day').minus({day: 2}).toISO(),
         members     : [
             '79ebb9ee-1e57-4706-810c-03edaec8f56d',
             '319ecb5b-f99c-4ee4-81b2-3aeffd1d4735',
@@ -36,7 +39,7 @@ export const boards = [
         title       : 'Personal Tasks',
         description : 'Personal tasks around the house',
         icon        : 'heroicons_outline:home',
-        lastActivity: moment().startOf('day').subtract(1, 'week').toISOString(),
+        lastActivity: now.startOf('day').minus({week: 1}).toISO(),
         members     : [
             '6f6a1c34-390b-4b2e-97c8-ff0e0d787839'
         ]
@@ -83,7 +86,7 @@ export const cards = [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb',
             'f9eeb436-13a3-4208-a239-0d555960a567'
         ],
-        dueDate    : moment().subtract(10, 'days').startOf('day').toISOString()
+        dueDate    : now.startOf('day').minus({day: 10}).toISO()
     },
     {
         id      : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
@@ -105,7 +108,7 @@ export const cards = [
         labels  : [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
         ],
-        dueDate : moment().startOf('day').toISOString()
+        dueDate : now.startOf('day').toISO()
     },
     {
         id      : '6da8747f-b474-4c9a-9eba-5ef212285500',
@@ -116,7 +119,7 @@ export const cards = [
         labels  : [
             'caff9c9b-a198-4564-b1f4-8b3df1d345bb'
         ],
-        dueDate : moment().subtract(1, 'day').startOf('day').toISOString()
+        dueDate : now.startOf('day').minus({day: 1}).toISO()
     },
     {
         id      : '94fb1dee-dd83-4cca-acdd-02e96d3cc4f1',
@@ -167,7 +170,7 @@ export const cards = [
         position: 131072,
         title   : 'Create high fidelity wireframes',
         labels  : [],
-        dueDate : moment().subtract(10, 'day').startOf('day').toISOString()
+        dueDate : now.startOf('day').minus({day: 10}).toISO()
     },
     {
         id      : 'b1da11ed-7896-4826-962d-4b7b718896d4',

src/app/mock-api/common/messages/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const messages = [
     {
@@ -7,7 +10,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-01.jpg',
         title      : 'Gary Peters',
         description: 'We should talk about that at lunch!',
-        time       : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        time       : now.minus({minutes: 25}).toISO(), // 25 minutes ago
         read       : false
     },
     {
@@ -15,7 +18,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-04.jpg',
         title      : 'Leo Gill (Client #8817)',
         description: 'You can download the latest invoices now. Please check and let me know.',
-        time       : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        time       : now.minus({minutes: 50}).toISO(), // 50 minutes ago
         read       : false
     },
     {
@@ -23,7 +26,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-01.jpg',
         title      : 'Sarah',
         description: 'Don\'t forget to pickup Jeremy after school!',
-        time       : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        time       : now.minus({hours: 3}).toISO(), // 3 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -33,7 +36,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-12.jpg',
         title      : 'Nancy Salazar • Joy Publishing',
         description: 'I\'ll proof read your bio on next Monday.',
-        time       : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        time       : now.minus({hours: 5}).toISO(), // 5 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -43,7 +46,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-06.jpg',
         title      : 'Matthew Wood',
         description: 'Dude, I heard that they are going to promote you! Congrats man, tonight the drinks are on me!',
-        time       : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        time       : now.minus({hours: 7}).toISO(), // 7 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -53,7 +56,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-04.jpg',
         title      : 'Elizabeth (New assistant)',
         description: 'Boss, I\'ve sent all client invoices but Geoffrey refusing to pay.',
-        time       : moment().subtract(9, 'hours').toISOString(), // 9 hours ago
+        time       : now.minus({hours: 9}).toISO(), // 9 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -63,7 +66,7 @@ export const messages = [
         image      : 'assets/images/avatars/male-06.jpg',
         title      : 'William Bell',
         description: 'Did you see this game? We should hang out and give it a shot sometime.',
-        time       : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        time       : now.minus({day: 1}).toISO(), // 1 day ago
         read       : true,
         link       : 'https://www.google.com',
         useRouter  : false
@@ -73,7 +76,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-09.jpg',
         title      : 'Cheryl Obrien - HR',
         description: 'Why did\'t you still look at the kitten pictures I\'ve sent to you!',
-        time       : moment().subtract(3, 'days').toISOString(), // 3 days ago
+        time       : now.minus({day: 3}).toISO(), // 3 days ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -83,7 +86,7 @@ export const messages = [
         image      : 'assets/images/avatars/female-15.jpg',
         title      : 'Joan Jones - Tech',
         description: 'Dude, Cheryl keeps bugging me with kitten pictures all the time :( What are we gonna do about it?',
-        time       : moment().subtract(4, 'day').toISOString(), // 4 days ago
+        time       : now.minus({day: 4}).toISO(), // 4 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true

src/app/mock-api/common/navigation/data.ts

@@ -967,7 +967,7 @@ export const defaultNavigation: FuseNavigationItem[] = [
                 icon : 'heroicons_outline:speakerphone',
                 link : '/docs/changelog',
                 badge: {
-                    title  : '15.1.0',
+                    title  : '17.2.0',
                     classes: 'px-2 bg-yellow-300 text-black rounded-full'
                 }
             },

src/app/mock-api/common/notifications/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const notifications = [
     {
@@ -7,14 +10,14 @@ export const notifications = [
         icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted',
-        time       : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        time       : now.minus({minute: 25}).toISO(), // 25 minutes ago
         read       : false
     },
     {
         id         : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
         image      : 'assets/images/avatars/male-04.jpg',
         description: '<strong>Leo Gill</strong> added you to <em>Top Secret Project</em> group and assigned you as a <em>Project Manager</em>',
-        time       : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        time       : now.minus({minute: 50}).toISO(), // 50 minutes ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -24,7 +27,7 @@ export const notifications = [
         icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 15 unread mails across 3 mailboxes',
-        time       : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        time       : now.minus({hour: 3}).toISO(), // 3 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -34,7 +37,7 @@ export const notifications = [
         icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your <em>Docker container</em> is ready to publish',
-        time       : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        time       : now.minus({hour: 5}).toISO(), // 5 hours ago
         read       : false,
         link       : '/dashboards/project',
         useRouter  : true
@@ -43,7 +46,7 @@ export const notifications = [
         id         : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
         image      : 'assets/images/avatars/male-06.jpg',
         description: '<strong>Roger Murray</strong> accepted your friend request',
-        time       : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        time       : now.minus({hour: 7}).toISO(), // 7 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -52,7 +55,7 @@ export const notifications = [
         id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
         image      : 'assets/images/avatars/female-04.jpg',
         description: '<strong>Sophie Stone</strong> sent you a direct message',
-        time       : moment().subtract(9, 'hours').toISOString(), // 9 hours ago
+        time       : now.minus({hour: 9}).toISO(), // 9 hours ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -62,7 +65,7 @@ export const notifications = [
         icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 3 new mails',
-        time       : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        time       : now.minus({day: 1}).toISO(), // 1 day ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -72,7 +75,7 @@ export const notifications = [
         icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
-        time       : moment().subtract(3, 'days').toISOString(), // 3 days ago
+        time       : now.minus({day: 3}).toISO(), // 3 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true
@@ -82,7 +85,7 @@ export const notifications = [
         icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your Vagrant container is ready to download',
-        time       : moment().subtract(4, 'day').toISOString(), // 4 days ago
+        time       : now.minus({day: 4}).toISO(), // 4 days ago
         read       : true,
         link       : '/dashboards/project',
         useRouter  : true

src/app/mock-api/dashboards/crypto/data.ts

@@ -1,4 +1,7 @@
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 /* tslint:disable:max-line-length */
 export const crypto = {
@@ -628,83 +631,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 154.36
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 154.36
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 146.94
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 146.96
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 146.11
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 150.26
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 146.11
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 150.79
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 145.36
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 141.06
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 140.10
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 138.31
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 138.42
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 138.48
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 138.71
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 148.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 146.87
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 147.07
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 135.07
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 135.01
                         }
                     ]
@@ -724,83 +727,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 374.77
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 374.41
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 375.08
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 375.08
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 374.09
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 368.84
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 367.49
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 359.75
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 366.65
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 367.52
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 367.59
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 364.18
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 370.11
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 362.70
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 362.70
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 362.77
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 369.46
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 371.04
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 371.48
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 371.30
                         }
                     ]
@@ -820,83 +823,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 0.258
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 0.256
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 0.255
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 0.255
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 0.254
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 0.248
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 0.249
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 0.246
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 0.247
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 0.244
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 0.250
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 0.242
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 0.251
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 0.249
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 0.242
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 0.240
                         }
                     ]
@@ -916,83 +919,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 62.54
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 61.54
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 62.55
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 60.55
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 59.54
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 58.48
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 54.47
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 51.49
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 51.46
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 53.47
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 52.47
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 54.44
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 59.50
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 62.42
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 61.42
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 60.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 58.49
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 57.51
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 54.51
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 51.25
                         }
                     ]
@@ -1012,83 +1015,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 53.54
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 52.54
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 52.55
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 46.44
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 49.50
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 55.42
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 54.42
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 43.49
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 43.46
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 41.47
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 41.47
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 51.55
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 48.54
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 49.48
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 45.47
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 51.42
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 49.49
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 46.51
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 41.51
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 44.25
                         }
                     ]
@@ -1108,83 +1111,83 @@ export const crypto = {
                     name: 'Price',
                     data: [
                         {
-                            x: moment().subtract(20, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 20}).toFormat('HH:mm'),
                             y: 14.77
                         },
                         {
-                            x: moment().subtract(19, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 19}).toFormat('HH:mm'),
                             y: 14.41
                         },
                         {
-                            x: moment().subtract(18, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 18}).toFormat('HH:mm'),
                             y: 15.08
                         },
                         {
-                            x: moment().subtract(17, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 17}).toFormat('HH:mm'),
                             y: 15.08
                         },
                         {
-                            x: moment().subtract(16, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 16}).toFormat('HH:mm'),
                             y: 14.09
                         },
                         {
-                            x: moment().subtract(15, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 15}).toFormat('HH:mm'),
                             y: 18.84
                         },
                         {
-                            x: moment().subtract(14, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 14}).toFormat('HH:mm'),
                             y: 17.49
                         },
                         {
-                            x: moment().subtract(13, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 13}).toFormat('HH:mm'),
                             y: 19.75
                         },
                         {
-                            x: moment().subtract(12, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 12}).toFormat('HH:mm'),
                             y: 16.65
                         },
                         {
-                            x: moment().subtract(11, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 11}).toFormat('HH:mm'),
                             y: 17.52
                         },
                         {
-                            x: moment().subtract(10, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 10}).toFormat('HH:mm'),
                             y: 17.59
                         },
                         {
-                            x: moment().subtract(9, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 9}).toFormat('HH:mm'),
                             y: 14.18
                         },
                         {
-                            x: moment().subtract(8, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 8}).toFormat('HH:mm'),
                             y: 10.11
                         },
                         {
-                            x: moment().subtract(7, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 7}).toFormat('HH:mm'),
                             y: 12.70
                         },
                         {
-                            x: moment().subtract(6, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 6}).toFormat('HH:mm'),
                             y: 12.70
                         },
                         {
-                            x: moment().subtract(5, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 5}).toFormat('HH:mm'),
                             y: 12.77
                         },
                         {
-                            x: moment().subtract(4, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 4}).toFormat('HH:mm'),
                             y: 19.46
                         },
                         {
-                            x: moment().subtract(3, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 3}).toFormat('HH:mm'),
                             y: 11.04
                         },
                         {
-                            x: moment().subtract(2, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 2}).toFormat('HH:mm'),
                             y: 11.48
                         },
                         {
-                            x: moment().subtract(1, 'minutes').format('HH:mm'),
+                            x: now.minus({minutes: 1}).toFormat('HH:mm'),
                             y: 11.30
                         }
                     ]

src/app/mock-api/dashboards/project/data.ts

@@ -1,5 +1,8 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const project = {
     githubIssues      : {
@@ -148,12 +151,12 @@ export const project = {
     weeklyExpenses    : {
         amount: 17663,
         labels: [
-            moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'),
-            moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'),
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 47}).toFormat('dd MMM') + ' - ' + now.minus({days: 40}).toFormat('dd MMM'),
+            now.minus({days: 39}).toFormat('dd MMM') + ' - ' + now.minus({days: 32}).toFormat('dd MMM'),
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {
@@ -165,10 +168,10 @@ export const project = {
     monthlyExpenses   : {
         amount: 54663,
         labels: [
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {
@@ -180,16 +183,16 @@ export const project = {
     yearlyExpenses    : {
         amount: 648813,
         labels: [
-            moment().subtract(79, 'days').format('DD MMM') + ' - ' + moment().subtract(72, 'days').format('DD MMM'),
-            moment().subtract(71, 'days').format('DD MMM') + ' - ' + moment().subtract(64, 'days').format('DD MMM'),
-            moment().subtract(63, 'days').format('DD MMM') + ' - ' + moment().subtract(56, 'days').format('DD MMM'),
-            moment().subtract(55, 'days').format('DD MMM') + ' - ' + moment().subtract(48, 'days').format('DD MMM'),
-            moment().subtract(47, 'days').format('DD MMM') + ' - ' + moment().subtract(40, 'days').format('DD MMM'),
-            moment().subtract(39, 'days').format('DD MMM') + ' - ' + moment().subtract(32, 'days').format('DD MMM'),
-            moment().subtract(31, 'days').format('DD MMM') + ' - ' + moment().subtract(24, 'days').format('DD MMM'),
-            moment().subtract(23, 'days').format('DD MMM') + ' - ' + moment().subtract(16, 'days').format('DD MMM'),
-            moment().subtract(15, 'days').format('DD MMM') + ' - ' + moment().subtract(8, 'days').format('DD MMM'),
-            moment().subtract(7, 'days').format('DD MMM') + ' - ' + moment().format('DD MMM')
+            now.minus({days: 79}).toFormat('dd MMM') + ' - ' + now.minus({days: 72}).toFormat('dd MMM'),
+            now.minus({days: 71}).toFormat('dd MMM') + ' - ' + now.minus({days: 64}).toFormat('dd MMM'),
+            now.minus({days: 63}).toFormat('dd MMM') + ' - ' + now.minus({days: 56}).toFormat('dd MMM'),
+            now.minus({days: 55}).toFormat('dd MMM') + ' - ' + now.minus({days: 48}).toFormat('dd MMM'),
+            now.minus({days: 47}).toFormat('dd MMM') + ' - ' + now.minus({days: 40}).toFormat('dd MMM'),
+            now.minus({days: 39}).toFormat('dd MMM') + ' - ' + now.minus({days: 32}).toFormat('dd MMM'),
+            now.minus({days: 31}).toFormat('dd MMM') + ' - ' + now.minus({days: 24}).toFormat('dd MMM'),
+            now.minus({days: 23}).toFormat('dd MMM') + ' - ' + now.minus({days: 16}).toFormat('dd MMM'),
+            now.minus({days: 15}).toFormat('dd MMM') + ' - ' + now.minus({days: 8}).toFormat('dd MMM'),
+            now.minus({days: 7}).toFormat('dd MMM') + ' - ' + now.toFormat('dd MMM')
         ],
         series: [
             {

src/app/mock-api/pages/activities/data.ts

@@ -1,12 +1,15 @@
 /* eslint-disable */
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
+
+/* Get the current instant */
+const now = DateTime.now();
 
 export const activities = [
     {
         id          : '493190c9-5b61-4912-afe5-78c21f1044d7',
         icon        : 'heroicons_solid:star',
         description : 'Your submission has been accepted',
-        date        : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
+        date        : now.minus({minutes: 25}).toISO(), // 25 minutes ago
         extraContent: `<div class="font-bold">Congratulations for your acceptance!</div><br>
                         <div>Hi Brian,<br>Your submission has been accepted and you are ready to move into the next phase. Once you are ready, reach out to me and we will ...</div>`
     },
@@ -14,7 +17,7 @@ export const activities = [
         id           : '6e3e97e5-effc-4fb7-b730-52a151f0b641',
         image        : 'assets/images/avatars/male-04.jpg',
         description  : '<strong>Leo Gill</strong> added you to <strong>Top Secret Project</strong> group and assigned you as a <strong>Project Manager</strong>',
-        date         : moment().subtract(50, 'minutes').toISOString(), // 50 minutes ago
+        date         : now.minus({minutes: 50}).toISO(), // 50 minutes ago
         linkedContent: 'Top Secret Project',
         link         : '/dashboards/project',
         useRouter    : true
@@ -23,7 +26,7 @@ export const activities = [
         id           : 'b91ccb58-b06c-413b-b389-87010e03a120',
         icon         : 'heroicons_solid:mail',
         description  : 'You have 15 unread mails across 3 mailboxes',
-        date         : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
+        date         : now.minus({hours: 3}).toISO(), // 3 hours ago
         linkedContent: 'Mailbox',
         link         : '/apps/mailbox',
         useRouter    : true
@@ -32,7 +35,7 @@ export const activities = [
         id           : '541416c9-84a7-408a-8d74-27a43c38d797',
         icon         : 'heroicons_solid:refresh',
         description  : 'Your <strong>Docker container</strong> is ready to publish',
-        date         : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
+        date         : now.minus({hours: 5}).toISO(), // 5 hours ago
         linkedContent: 'Download the container',
         link         : '.',
         useRouter    : true
@@ -41,20 +44,20 @@ export const activities = [
         id          : 'ef7b95a7-8e8b-4616-9619-130d9533add9',
         image       : 'assets/images/avatars/male-06.jpg',
         description : '<strong>Roger Murray</strong> accepted your friend request',
-        date        : moment().subtract(7, 'hours').toISOString(), // 7 hours ago
+        date        : now.minus({hours: 7}).toISO(), // 7 hours ago
         extraContent: `You have <span class="font-semibold">8</span> mutual friends.`
     },
     {
         id         : 'eb8aa470-635e-461d-88e1-23d9ea2a5665',
         image      : 'assets/images/avatars/female-04.jpg',
         description: '<strong>Sophie Stone</strong> sent you a direct message',
-        date       : moment().subtract(9, 'hours').toISOString() // 9 hours ago
+        date       : now.minus({hours: 9}).toISO() // 9 hours ago
     },
     {
         id           : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
         icon         : 'heroicons_solid:mail',
         description  : 'You have 3 new mails',
-        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago
+        date         : now.minus({day: 1}).toISO(), // 1 day ago
         extraContent : `<ol class="list-decimal list-inside space-y-2">
                             <li class="font-medium">Please review and sign the attached agreement</li>
                             <li class="font-medium">Delivery address confirmation</li>
@@ -68,7 +71,7 @@ export const activities = [
         id           : 'fd0f01b4-f3de-4333-add5-cd86850279f8',
         image        : 'assets/images/avatars/female-02.jpg',
         description  : '<strong>Tina Harris</strong> started a chat with you',
-        date         : moment().subtract(1, 'day').toISOString(), // 1 day ago,
+        date         : now.minus({day: 1}).toISO(), // 1 day ago,
         linkedContent: 'Go to Chat (Tina Harris)',
         link         : '/apps/chat/5636c0ba-fa47-42ca-9160-27340583041e',
         useRouter    : true
@@ -77,12 +80,12 @@ export const activities = [
         id         : '8f8e1bf9-4661-4939-9e43-390957b60f42',
         icon       : 'heroicons_solid:star',
         description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
-        date       : moment().subtract(3, 'days').toISOString() // 3 days ago
+        date       : now.minus({days: 3}).toISO() // 3 days ago
     },
     {
         id         : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
         icon       : 'heroicons_solid:refresh',
         description: 'Your Vagrant container is ready to download',
-        date       : moment().subtract(4, 'day').toISOString() // 4 days ago
+        date       : now.minus({day: 4}).toISO() // 4 days ago
     }
 ];

src/app/modules/admin/apps/academy/details/details.component.html

@@ -140,10 +140,12 @@
                             mat-flat-button
                             [color]="'primary'"
                             (click)="goToPreviousStep()">
-                            <mat-icon
-                                class="mr-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                            <span class="mr-1">Prev</span>
+                            <span class="inline-flex items-center">
+                                <mat-icon
+                                    class="mr-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
+                                <span class="mr-1">Prev</span>
+                            </span>
                         </button>
                         <div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
                             <span>{{currentStep + 1}}</span>
@@ -155,10 +157,12 @@
                             mat-flat-button
                             [color]="'primary'"
                             (click)="goToNextStep()">
-                            <span class="ml-1">Next</span>
-                            <mat-icon
-                                class="ml-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            <span class="inline-flex items-center">
+                                <span class="ml-1">Next</span>
+                                <mat-icon
+                                    class="ml-2"
+                                    [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
+                            </span>
                         </button>
                     </div>
                 </div>

src/app/modules/admin/apps/academy/list/list.component.html

@@ -31,7 +31,9 @@
         <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
             <!-- Filters -->
             <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
-                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
+                <mat-form-field
+                    class="w-full sm:w-36"
+                    [subscriptSizing]="'dynamic'">
                     <mat-select
                         [value]="'all'"
                         (selectionChange)="filterByCategory($event)">
@@ -42,8 +44,8 @@
                     </mat-select>
                 </mat-form-field>
                 <mat-form-field
-                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
-                    [floatLabel]="'always'">
+                    class="w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
+                    [subscriptSizing]="'dynamic'">
                     <mat-icon
                         matPrefix
                         class="icon-size-5"

src/app/modules/admin/apps/chat/chats/chats.component.html

@@ -95,8 +95,8 @@
                         <!-- Search -->
                         <div class="mt-4">
                             <mat-form-field
-                                class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-dense w-full"
-                                [floatLabel]="'always'">
+                                class="fuse-mat-rounded fuse-mat-dense w-full"
+                                [subscriptSizing]="'dynamic'">
                                 <mat-icon
                                     matPrefix
                                     class="icon-size-5"

src/app/modules/admin/apps/chat/conversation/conversation.component.html

@@ -167,12 +167,12 @@
                             <mat-icon [svgIcon]="'heroicons_outline:paper-clip'"></mat-icon>
                         </button>
                     </div>
-                    <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full ml-4">
+                    <mat-form-field
+                        class="fuse-mat-dense fuse-mat-rounded fuse-mat-bold w-full ml-4"
+                        subscriptSizing="dynamic">
                         <textarea
-                            class="min-h-5 my-0 resize-none"
-                            style="margin: 11px 0 !important; padding: 0 !important;"
-                            [rows]="1"
                             matInput
+                            cdkTextareaAutosize
                             #messageInput></textarea>
                     </mat-form-field>
                     <div class="flex items-center h-11 my-px ml-4">

src/app/modules/admin/apps/contacts/contacts.module.ts

@@ -8,15 +8,14 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatLuxonDateModule } from '@angular/material-luxon-adapter';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as moment from 'moment';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { contactsRoutes } from 'app/modules/admin/apps/contacts/contacts.routing';
@@ -39,8 +38,8 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         MatRadioModule,
         MatRippleModule,
@@ -56,13 +55,13 @@ import { ContactsListComponent } from 'app/modules/admin/apps/contacts/list/list
             provide : MAT_DATE_FORMATS,
             useValue: {
                 parse  : {
-                    dateInput: moment.ISO_8601
+                    dateInput: 'D'
                 },
                 display: {
-                    dateInput         : 'LL',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
+                    dateInput         : 'DDD',
+                    monthYearLabel    : 'LLL yyyy',
+                    dateA11yLabel     : 'DD',
+                    monthYearA11yLabel: 'LLLL yyyy'
                 }
             }
         }

src/app/modules/admin/apps/contacts/details/details.component.html

@@ -248,7 +248,9 @@
 
                     <!-- Name -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Name</mat-label>
                             <mat-icon
                                 matPrefix
@@ -332,7 +334,7 @@
                                         <ng-container *ngIf="!tagsEditMode">
                                             <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                 <div
-                                                    class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                                    class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                                     (click)="toggleContactTag(tag)"
                                                     matRipple>
                                                     <mat-checkbox
@@ -341,7 +343,7 @@
                                                         [color]="'primary'"
                                                         [disableRipple]="true">
                                                     </mat-checkbox>
-                                                    <div class="ml-1">{{tag.title}}</div>
+                                                    <div>{{tag.title}}</div>
                                                 </div>
                                             </ng-container>
                                         </ng-container>
@@ -350,7 +352,9 @@
                                             <div class="py-2 space-y-2">
                                                 <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                     <div class="flex items-center">
-                                                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                        <mat-form-field
+                                                            class="fuse-mat-dense w-full mx-4"
+                                                            [subscriptSizing]="'dynamic'">
                                                             <input
                                                                 matInput
                                                                 [value]="tag.title"
@@ -387,7 +391,9 @@
 
                     <!-- Title -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Title</mat-label>
                             <mat-icon
                                 matPrefix
@@ -402,7 +408,9 @@
 
                     <!-- Company -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Company</mat-label>
                             <mat-icon
                                 matPrefix
@@ -420,7 +428,9 @@
                         <div class="space-y-4">
                             <ng-container *ngFor="let email of contactForm.get('emails')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                 <div class="flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Email</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -432,7 +442,9 @@
                                             [placeholder]="'Email address'"
                                             [spellcheck]="false">
                                     </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Label</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -477,7 +489,9 @@
                         <div class="space-y-4">
                             <ng-container *ngFor="let phoneNumber of contactForm.get('phoneNumbers')['controls']; let i = index; let first = first; let last = last; trackBy: trackByFn">
                                 <div class="relative flex">
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto">
+                                    <mat-form-field
+                                        class="flex-auto"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Phone</mat-label>
                                         <input
                                             matInput
@@ -512,7 +526,9 @@
                                             </ng-container>
                                         </mat-select>
                                     </mat-form-field>
-                                    <mat-form-field class="fuse-mat-no-subscript flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4">
+                                    <mat-form-field
+                                        class="flex-auto w-full max-w-24 sm:max-w-40 ml-2 sm:ml-4"
+                                        [subscriptSizing]="'dynamic'">
                                         <mat-label *ngIf="first">Label</mat-label>
                                         <mat-icon
                                             matPrefix
@@ -554,7 +570,9 @@
 
                     <!-- Address -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Address</mat-label>
                             <mat-icon
                                 matPrefix
@@ -569,7 +587,9 @@
 
                     <!-- Birthday -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Birthday</mat-label>
                             <mat-icon
                                 matPrefix
@@ -590,7 +610,9 @@
 
                     <!-- Notes -->
                     <div class="mt-8">
-                        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+                        <mat-form-field
+                            class="w-full"
+                            [subscriptSizing]="'dynamic'">
                             <mat-label>Notes</mat-label>
                             <mat-icon
                                 matPrefix
@@ -602,7 +624,7 @@
                                 [placeholder]="'Notes'"
                                 [rows]="5"
                                 [spellcheck]="false"
-                                matTextareaAutosize></textarea>
+                                cdkTextareaAutosize></textarea>
                         </mat-form-field>
                     </div>
 

src/app/modules/admin/apps/contacts/list/list.component.html

@@ -42,7 +42,9 @@
                     <div class="flex items-center mt-4 sm:mt-0 md:mt-4">
                         <!-- Search -->
                         <div class="flex-auto">
-                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded w-full min-w-50">
+                            <mat-form-field
+                                class="fuse-mat-dense fuse-mat-rounded w-full min-w-50"
+                                subscriptSizing="dynamic">
                                 <mat-icon
                                     class="icon-size-5"
                                     matPrefix

src/app/modules/admin/apps/ecommerce/inventory/list/inventory.component.html

@@ -13,7 +13,9 @@
         <!-- Actions -->
         <div class="flex shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
             <!-- Search -->
-            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript fuse-mat-rounded min-w-64">
+            <mat-form-field
+                class="fuse-mat-dense fuse-mat-rounded min-w-64"
+                [subscriptSizing]="'dynamic'">
                 <mat-icon
                     class="icon-size-5"
                     matPrefix
@@ -398,7 +400,7 @@
                                                 <ng-container *ngIf="!tagsEditMode">
                                                     <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                                         <mat-checkbox
-                                                            class="flex items-center h-10 min-h-10 px-4"
+                                                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                                                             [color]="'primary'"
                                                             [checked]="selectedProduct.tags.includes(tag.id)"
                                                             (change)="toggleProductTag(tag, $event)">
@@ -410,7 +412,9 @@
                                                 <ng-container *ngIf="tagsEditMode">
                                                     <div class="p-4 space-y-2">
                                                         <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
-                                                            <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full">
+                                                            <mat-form-field
+                                                                class="fuse-mat-dense w-full"
+                                                                [subscriptSizing]="'dynamic'">
                                                                 <input
                                                                     matInput
                                                                     [value]="tag.title"

src/app/modules/admin/apps/file-manager/details/details.component.html

@@ -10,8 +10,8 @@
     </div>
 
     <!-- Preview -->
-    <div class="aspect-w-9 aspect-h-6 mt-8">
-        <div class="flex items-center justify-center border rounded-lg bg-gray-50 dark:bg-card">
+    <div class="mt-8 aspect-[9/6]">
+        <div class="flex items-center justify-center h-full border rounded-lg bg-gray-50 dark:bg-card">
             <ng-container *ngIf="item.type === 'folder'">
                 <mat-icon
                     class="icon-size-24 text-hint"

src/app/modules/admin/apps/file-manager/list/list.component.html

@@ -89,12 +89,12 @@
                                             <a
                                                 class="z-10 absolute inset-0 flex flex-col p-4 cursor-pointer"
                                                 [routerLink]="['/apps/file-manager/folders/', folder.id]">
-                                                <div class="aspect-w-9 aspect-h-6">
-                                                    <div class="flex items-center justify-center">
+                                                <div class="aspect-[9/6]">
+                                                    <div class="flex items-center justify-center h-full">
                                                         <!-- Icon -->
                                                         <mat-icon
-                                                            class="icon-size-14 text-hint"
-                                                            [svgIcon]="'heroicons_outline:folder'"></mat-icon>
+                                                            class="icon-size-14 text-hint opacity-50"
+                                                            [svgIcon]="'heroicons_solid:folder'"></mat-icon>
                                                     </div>
                                                 </div>
                                                 <div class="flex flex-col flex-auto justify-center text-center text-sm font-medium">
@@ -122,13 +122,13 @@
                                         <a
                                             class="flex flex-col w-40 h-40 m-2 p-4 shadow rounded-2xl cursor-pointer bg-card"
                                             [routerLink]="['./details/', file.id]">
-                                            <div class="aspect-w-9 aspect-h-6">
-                                                <div class="flex items-center justify-center">
+                                            <div class="aspect-[9/6]">
+                                                <div class="flex items-center justify-center h-full">
                                                     <!-- Icons -->
                                                     <div class="relative">
                                                         <mat-icon
-                                                            class="icon-size-14 text-hint"
-                                                            [svgIcon]="'heroicons_outline:document'"></mat-icon>
+                                                            class="icon-size-14 text-hint opacity-50"
+                                                            [svgIcon]="'heroicons_solid:document'"></mat-icon>
                                                         <div
                                                             class="absolute left-0 bottom-0 px-1.5 rounded text-sm font-semibold leading-5 text-white"
                                                             [class.bg-red-600]="file.type === 'PDF'"

src/app/modules/admin/apps/help-center/help-center.component.html

@@ -20,7 +20,9 @@
             <div class="mt-3 sm:text-2xl text-center tracking-tight text-secondary">
                 Search for a topic or question, check out our FAQs and guides, contact us for detailed support
             </div>
-            <mat-form-field class="fuse-mat-no-subscript fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20">
+            <mat-form-field
+                class="fuse-mat-rounded fuse-mat-bold w-full max-w-80 sm:max-w-120 mt-10 sm:mt-20"
+                [subscriptSizing]="'dynamic'">
                 <input
                     matInput
                     [placeholder]="'Enter a question, topic or keyword'">

src/app/modules/admin/apps/help-center/support/support.component.html

@@ -71,13 +71,13 @@
                         </mat-error>
                     </mat-form-field>
                     <!-- Message -->
-                    <mat-form-field class="fuse-mat-textarea w-full">
+                    <mat-form-field class="w-full">
                         <textarea
                             matInput
                             [formControlName]="'message'"
                             [required]="true"
                             [rows]="5"
-                            matTextareaAutosize></textarea>
+                            cdkTextareaAutosize></textarea>
                         <mat-label>Message</mat-label>
                         <mat-error *ngIf="supportForm.get('message').hasError('required')">
                             Required

src/app/modules/admin/apps/mailbox/details/details.component.html

@@ -12,7 +12,7 @@
                 <a
                     class="lg:hidden md:-ml-2"
                     mat-icon-button
-                    [routerLink]="['./']">
+                    [routerLink]="['./../']">
                     <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
                 </a>
 
@@ -25,9 +25,12 @@
                 </button>
                 <mat-menu #toggleLabelMenu="matMenu">
                     <ng-container *ngFor="let label of labels; trackBy: trackByFn">
-                        <div mat-menu-item>
+                        <div
+                            mat-menu-item
+                            (click)="toggleLabel(label)"
+                            matRipple>
                             <mat-checkbox
-                                (change)="toggleLabel(label)"
+                                class="pointer-events-none"
                                 [color]="'primary'"
                                 [checked]="mail.labels.includes(label.id)"
                                 [disableRipple]="true">
@@ -329,7 +332,7 @@
                             class="flex flex-col w-full"
                             #replyForm>
 
-                            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript">
+                            <mat-form-field [subscriptSizing]="'dynamic'">
                                 <textarea
                                     class="textarea"
                                     matInput

src/app/modules/admin/apps/mailbox/mailbox.module.ts

@@ -9,6 +9,7 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatRippleModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { QuillModule } from 'ngx-quill';
@@ -36,7 +37,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MailboxSettingsComponent,
         MailboxSidebarComponent
     ],
-    imports     : [
+    imports: [
         RouterModule.forChild(mailboxRoutes),
         MatButtonModule,
         MatCheckboxModule,
@@ -47,6 +48,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         MatInputModule,
         MatMenuModule,
         MatProgressBarModule,
+        MatRippleModule,
         MatSelectModule,
         MatSidenavModule,
         QuillModule.forRoot(),
@@ -54,7 +56,7 @@ import { mailboxRoutes } from 'app/modules/admin/apps/mailbox/mailbox.routing';
         FuseNavigationModule,
         FuseScrollbarModule,
         FuseScrollResetModule,
-        SharedModule
+        SharedModule,
     ]
 })
 export class MailboxModule

src/app/modules/admin/apps/notes/details/details.component.html

@@ -33,7 +33,7 @@
                     [placeholder]="'Note'"
                     [(ngModel)]="note.content"
                     (input)="updateNoteDetails(note)"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
             </div>
             <!-- Tasks -->
             <ng-container *ngIf="note.tasks">

src/app/modules/admin/apps/notes/labels/labels.component.html

@@ -9,9 +9,7 @@
         </button>
     </div>
     <!-- New label -->
-    <mat-form-field
-        class="fuse-mat-dense w-full mt-8"
-        [floatLabel]="'always'">
+    <mat-form-field class="fuse-mat-dense w-full mt-8">
         <input
             name="new-label"
             [autocomplete]="'off'"

src/app/modules/admin/apps/notes/list/list.component.html

@@ -82,7 +82,9 @@
                             (click)="drawer.toggle()">
                             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
                         </button>
-                        <mat-form-field class="fuse-mat-rounded fuse-mat-dense fuse-mat-no-subscript flex-auto ml-4 lg:ml-0">
+                        <mat-form-field
+                            class="fuse-mat-rounded fuse-mat-dense flex-auto ml-4 lg:ml-0"
+                            [subscriptSizing]="'dynamic'">
                             <mat-icon
                                 class="icon-size-5"
                                 [svgIcon]="'heroicons_solid:search'"

src/app/modules/admin/apps/scrumboard/board/add-card/add-card.component.html

@@ -3,7 +3,7 @@
     [class.h-13]="!formVisible">
     <div class="relative flex w-full h-full rounded-lg">
         <button
-            class="absolute inset-0 justify-start w-full px-5 rounded-lg"
+            class="absolute inset-0 justify-start w-full rounded-lg"
             [ngClass]="{'opacity-0 pointer-events-none': formVisible}"
             mat-button
             (click)="toggleFormVisibility()"

src/app/modules/admin/apps/scrumboard/board/board.component.html

@@ -14,17 +14,17 @@
                 mat-stroked-button
                 [routerLink]="['..']">
                 <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                     [svgIcon]="'heroicons_solid:view-boards'"></mat-icon>
-                Boards
+                <span class="ml-2">Boards</span>
             </a>
             <button
                 class="ml-3"
                 mat-stroked-button>
                 <mat-icon
-                    class="icon-size-5 mr-2"
+                    class="icon-size-5"
                     [svgIcon]="'heroicons_solid:cog'"></mat-icon>
-                Settings
+                <span class="ml-2">Settings</span>
             </button>
         </div>
     </div>

src/app/modules/admin/apps/scrumboard/board/board.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnIni
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, List } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
@@ -243,7 +243,7 @@ export class ScrumboardBoardComponent implements OnInit, OnDestroy
      */
     isOverdue(date: string): boolean
     {
-        return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(date).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

src/app/modules/admin/apps/scrumboard/boards/boards.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Board } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 
@@ -68,7 +68,7 @@ export class ScrumboardBoardsComponent implements OnInit, OnDestroy
      */
     formatDateAsRelative(date: string): string
     {
-        return moment(date, moment.ISO_8601).fromNow();
+        return DateTime.fromISO(date).toRelative();
     }
 
     /**

src/app/modules/admin/apps/scrumboard/card/details/details.component.html

@@ -19,7 +19,9 @@
         [formGroup]="cardForm">
 
         <!-- Title -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-label>Title</mat-label>
             <textarea
                 matInput
@@ -31,7 +33,9 @@
         </mat-form-field>
 
         <!-- Description -->
-        <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+        <mat-form-field
+            class="w-full"
+            [subscriptSizing]="'dynamic'">
             <mat-label>Description</mat-label>
             <textarea
                 matInput
@@ -48,8 +52,8 @@
             <div
                 class="relative flex items-center mt-1.5 px-4 leading-9 rounded-full cursor-pointer"
                 [ngClass]="{'text-gray-500 bg-gray-100 dark:text-gray-300 dark:bg-gray-700': !card.dueDate,
-                                'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': card.dueDate && !isOverdue(card.dueDate),
-                                'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': card.dueDate && isOverdue(card.dueDate)}"
+                            'text-green-800 bg-green-200 dark:text-green-100 dark:bg-green-500': card.dueDate && !isOverdue(card.dueDate),
+                            'text-red-800 bg-red-200 dark:text-red-100 dark:bg-red-500': card.dueDate && isOverdue(card.dueDate)}"
                 (click)="dueDatePicker.open()">
                 <mat-icon
                     class="icon-size-5 text-current"
@@ -58,7 +62,9 @@
                     <ng-container *ngIf="card.dueDate">{{card.dueDate | date:'longDate'}}</ng-container>
                     <ng-container *ngIf="!card.dueDate">Not set</ng-container>
                 </span>
-                <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                <mat-form-field
+                    class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                    [subscriptSizing]="'dynamic'">
                     <input
                         matInput
                         [formControlName]="'dueDate'"
@@ -107,7 +113,7 @@
                     <!-- Labels -->
                     <ng-container *ngFor="let label of filteredLabels; trackBy: trackByFn">
                         <mat-checkbox
-                            class="flex items-center h-10 min-h-10 px-4"
+                            class="flex items-center h-10 min-h-10 pl-1 pr-4"
                             [color]="'primary'"
                             [checked]="hasLabel(label)"
                             (change)="toggleProductTag(label, $event)">

src/app/modules/admin/apps/scrumboard/card/details/details.component.ts

@@ -3,8 +3,8 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatDialogRef } from '@angular/material/dialog';
 import { debounceTime, Subject, takeUntil, tap } from 'rxjs';
-import * as moment from 'moment';
 import { assign } from 'lodash-es';
+import { DateTime } from 'luxon';
 import { ScrumboardService } from 'app/modules/admin/apps/scrumboard/scrumboard.service';
 import { Board, Card, Label } from 'app/modules/admin/apps/scrumboard/scrumboard.models';
 
@@ -237,7 +237,7 @@ export class ScrumboardCardDetailsComponent implements OnInit, OnDestroy
      */
     isOverdue(date: string): boolean
     {
-        return moment(date, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(date).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

src/app/modules/admin/apps/scrumboard/scrumboard.module.ts

@@ -9,10 +9,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatLuxonDateModule, MAT_LUXON_DATE_FORMATS } from '@angular/material-luxon-adapter';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as moment from 'moment';
 import { SharedModule } from 'app/shared/shared.module';
 import { ScrumboardComponent } from 'app/modules/admin/apps/scrumboard/scrumboard.component';
 import { ScrumboardBoardsComponent } from 'app/modules/admin/apps/scrumboard/boards/boards.component';
@@ -43,25 +42,15 @@ import { scrumboardRoutes } from 'app/modules/admin/apps/scrumboard/scrumboard.r
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         SharedModule
     ],
     providers   : [
         {
             provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: moment.ISO_8601
-                },
-                display: {
-                    dateInput         : 'll',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
+            useValue: MAT_LUXON_DATE_FORMATS
         }
     ]
 })

src/app/modules/admin/apps/tasks/details/details.component.html

@@ -62,13 +62,15 @@
 
         <!-- Title -->
         <div>
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                 <mat-label>{{task.type === 'task' ? 'Task title' : 'Section title'}}</mat-label>
                 <textarea
                     matInput
                     [formControlName]="'title'"
                     [spellcheck]="false"
-                    matTextareaAutosize
+                    cdkTextareaAutosize
                     #titleField></textarea>
             </mat-form-field>
         </div>
@@ -144,13 +146,14 @@
                                 <ng-container *ngIf="!tagsEditMode">
                                     <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                         <div
-                                            class="flex items-center h-10 min-h-10 px-4 cursor-pointer hover:bg-hover"
+                                            class="flex items-center h-10 min-h-10 pl-1 pr-4 cursor-pointer hover:bg-hover"
                                             (click)="toggleTaskTag(tag)"
                                             matRipple>
                                             <mat-checkbox
-                                                class="flex items-center h-10 min-h-10"
+                                                class="flex items-center h-10 min-h-10 pointer-events-none"
+                                                [checked]="task.tags.includes(tag.id)"
                                                 [color]="'primary'"
-                                                [checked]="task.tags.includes(tag.id)">
+                                                [disableRipple]="true">
                                             </mat-checkbox>
                                             <div class="ml-1">{{tag.title}}</div>
                                         </div>
@@ -161,7 +164,9 @@
                                     <div class="py-2 space-y-2">
                                         <ng-container *ngFor="let tag of filteredTags; trackBy: trackByFn">
                                             <div class="flex items-center">
-                                                <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-full mx-4">
+                                                <mat-form-field
+                                                    class="fuse-mat-dense w-full mx-4"
+                                                    [subscriptSizing]="'dynamic'">
                                                     <input
                                                         matInput
                                                         [value]="tag.title"
@@ -292,7 +297,9 @@
                         <ng-container *ngIf="task.dueDate">{{task.dueDate | date:'longDate'}}</ng-container>
                         <ng-container *ngIf="!task.dueDate">Not set</ng-container>
                     </span>
-                    <mat-form-field class="fuse-mat-no-subscript fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none">
+                    <mat-form-field
+                        class="fuse-mat-dense invisible absolute inset-0 -mt-2.5 opacity-0 pointer-events-none"
+                        [subscriptSizing]="'dynamic'">
                         <input
                             matInput
                             [formControlName]="'dueDate'"
@@ -320,13 +327,15 @@
 
         <!-- Notes -->
         <div class="mt-8">
-            <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript w-full">
+            <mat-form-field
+                class="w-full"
+                [subscriptSizing]="'dynamic'">
                 <mat-label>Notes</mat-label>
                 <textarea
                     matInput
                     [formControlName]="'notes'"
                     [spellcheck]="false"
-                    matTextareaAutosize></textarea>
+                    cdkTextareaAutosize></textarea>
             </mat-form-field>
         </div>
 

src/app/modules/admin/apps/tasks/details/details.component.ts

@@ -7,7 +7,7 @@ import { MatDrawerToggleResult } from '@angular/material/sidenav';
 import { FuseConfirmationService } from '@fuse/services/confirmation';
 import { debounceTime, filter, Subject, takeUntil, tap } from 'rxjs';
 import { assign } from 'lodash-es';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Tag, Task } from 'app/modules/admin/apps/tasks/tasks.types';
 import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.component';
 import { TasksService } from 'app/modules/admin/apps/tasks/tasks.service';
@@ -465,7 +465,7 @@ export class TasksDetailsComponent implements OnInit, AfterViewInit, OnDestroy
      */
     isOverdue(): boolean
     {
-        return moment(this.task.dueDate, moment.ISO_8601).isBefore(moment(), 'days');
+        return DateTime.fromISO(this.task.dueDate).startOf('day') < DateTime.now().startOf('day');
     }
 
     /**

src/app/modules/admin/apps/tasks/tasks.module.ts

@@ -10,14 +10,13 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
+import { MatLuxonDateModule, MAT_LUXON_DATE_FORMATS } from '@angular/material-luxon-adapter';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as moment from 'moment';
 import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
 import { SharedModule } from 'app/shared/shared.module';
 import { tasksRoutes } from 'app/modules/admin/apps/tasks/tasks.routing';
@@ -42,8 +41,8 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
         MatFormFieldModule,
         MatIconModule,
         MatInputModule,
+        MatLuxonDateModule,
         MatMenuModule,
-        MatMomentDateModule,
         MatProgressBarModule,
         MatRadioModule,
         MatRippleModule,
@@ -56,17 +55,7 @@ import { TasksListComponent } from 'app/modules/admin/apps/tasks/list/list.compo
     providers   : [
         {
             provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: moment.ISO_8601
-                },
-                display: {
-                    dateInput         : 'll',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'LL',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
+            useValue: MAT_LUXON_DATE_FORMATS
         }
     ]
 })

src/app/modules/admin/dashboards/crypto/crypto.component.html

@@ -55,20 +55,10 @@
                     <div class="flex flex-col px-6 pb-2">
                         <mat-form-field>
                             <mat-label>Action</mat-label>
-                            <span
-                                class="flex items-center justify-center"
-                                matPrefix>
-                                <ng-container *ngIf="buySellSelect.value === 'buy'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:download'"></mat-icon>
-                                </ng-container>
-                                <ng-container *ngIf="buySellSelect.value === 'sell'">
-                                    <mat-icon
-                                        class="icon-size-5"
-                                        [svgIcon]="'heroicons_solid:upload'"></mat-icon>
-                                </ng-container>
-                            </span>
+                            <mat-icon
+                                class="icon-size-5"
+                                [svgIcon]="buySellSelect.value === 'buy' ? 'heroicons_solid:download' : 'heroicons_solid:upload'"
+                                matPrefix></mat-icon>
                             <mat-select
                                 [value]="'buy'"
                                 #buySellSelect="matSelect">

src/app/modules/admin/dashboards/crypto/crypto.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { ApexOptions, ChartComponent } from 'ng-apexcharts';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { CryptoService } from 'app/modules/admin/dashboards/crypto/crypto.service';
@@ -183,7 +183,7 @@ export class CryptoComponent implements OnInit, OnDestroy
                     rotate               : 0,
                     minHeight            : 40,
                     hideOverlappingLabels: true,
-                    formatter            : (value): string => moment().subtract(Math.abs(parseInt(value, 10)), 'minutes').format('HH:mm'),
+                    formatter            : (value): string => DateTime.now().minus({minutes: Math.abs(parseInt(value, 10))}).toFormat('HH:mm'),
                     style                : {
                         colors: 'currentColor'
                     }

src/app/modules/admin/dashboards/project/project.component.html

@@ -26,7 +26,7 @@
                 <!-- Actions -->
                 <div class="flex items-center mt-6 sm:mt-0 sm:ml-2 space-x-3">
                     <button
-                        class="fuse-mat-button-rounded bg-accent-700"
+                        class="bg-accent"
                         mat-flat-button
                         [color]="'accent'">
                         <mat-icon
@@ -35,7 +35,6 @@
                         <span class="ml-2">Messages</span>
                     </button>
                     <button
-                        class="fuse-mat-button-rounded"
                         mat-flat-button
                         [color]="'primary'">
                         <mat-icon
@@ -90,6 +89,7 @@
             <!-- Tabs -->
             <mat-tab-group
                 class="sm:px-2"
+                mat-stretch-tabs="false"
                 [animationDuration]="'0'">
 
                 <!-- Home -->
@@ -691,7 +691,13 @@
                 </mat-tab>
 
                 <!-- Team -->
-                <mat-tab label="Team">
+                <mat-tab>
+                    <ng-template mat-tab-label>
+                        <span class="inline-flex items-center space-x-2">
+                            <span class="">Team</span>
+                            <span class="px-2 py-1 text-sm rounded-full bg-primary-100 text-on-primary-100">9</span>
+                        </span>
+                    </ng-template>
                     <ng-template matTabContent>
                         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 w-full min-w-0">
                             <ng-container *ngFor="let member of data.teamMembers">

src/app/modules/admin/docs/changelog/changelog.ts

@@ -10,9 +10,154 @@ export class ChangelogComponent
 {
     changelog: any[] = [
 
+        // v17.2.0
+        {
+            version    : 'v17.2.0',
+            releaseDate: 'Jan 19, 2023',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v15.1.1',
+                        '(Dependencies) Updated various other packages'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(Angular Material) Fixed: Tooltip background color is not correct',
+                    ]
+                }
+            ]
+        },
+
+        // v17.1.0
+        {
+            version    : 'v17.1.0',
+            releaseDate: 'Dec 12, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v15.0.0',
+                        '(Dependencies) Updated various other packages',
+                        '(Core) Use the new "CanMatch" guard for routes rather than "CanLoad" & "CanActivate" combination'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(Angular Material) Fixed: Autocompleted input background color does not look right',
+                        '(Angular Material) Fixed: Tailwind breaks the disabled mat-checkbox styling',
+                    ]
+                }
+            ]
+        },
+
+        // v17.0.1
+        {
+            version    : 'v17.0.1',
+            releaseDate: 'Nov 21, 2022',
+            changes    : [
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/confirmation-dialog) Fixed: Extra padding on the confirmation dialogs',
+                    ]
+                }
+            ]
+        },
+
+        // v17.0.0
+        {
+            version    : 'v17.0.0',
+            releaseDate: 'Nov 18, 2022',
+            changes    : [
+                {
+                    type: 'Breaking',
+                    list: [
+                        '(Dependencies) From this version up, Fuse will not be compatible with Legacy Angular Material components',
+                        '(Linting) Removed linter setup and eslint packages since most of the linting happens on Editors and IDEs. This is also partly because of slow development speed of angular-eslint packages.',
+                        '(.fuse-mat-textarea) Removed in favor of CSS :has selector, now textareas within "mat-form-field" components are detected automatically',
+                        '(.fuse-mat-no-subscript) Removed in favor of \'subscriptSizing="dynamic"\' property of "mat-form-field"',
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(Dependencies) Updated Angular & Angular Material to v15.0.0',
+                        '(Dependencies) Updated various other packages',
+                        '(Dependencies) Removed ngx-markdown from the package.json, it still can be used within Fuse, it\'s a part of the effort to make releasing Fuse updates easier',
+                        '(General) Matched the files and folders with a newly created Angular v15 project to make things easier for the newcomers',
+                        '(Angular Material) Re-wrote the override styles to make sure everything look the same as before (compatibility for MDC components)',
+                        '(Theming) Re-wrote the theming system to make sure to keep everything working as before without any breaking changes'
+                    ]
+                }
+            ]
+        },
+
+        // v16.0.0
+        {
+            version    : 'v16.0.0',
+            releaseDate: 'Oct 04, 2022',
+            changes    : [
+                {
+                    type: 'Breaking',
+                    list: [
+                        '(dependencies) Replaced moment.js with luxon, big thanks to @steveschmitt (https://github.com/steveschmitt) for the PR'
+                    ]
+                },
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14.2.x',
+                        '(dependencies) Updated various other packages',
+                        '(app.resolvers) Removed the extra user getter call since the user data already comes with the sign-in process to prevent confusion for the newcomers',
+                        '(ui/forms/fields) Added examples for number input'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(FuseVerticalNavigation) Fixed: Sticky positioning breaks inside a fixed positioned parent (Firefox)',
+                        '(layout/common/quick-chat) Fixed: Sticky positioning breaks inside a fixed positioned parent (Firefox)',
+                        '(apps/mailbox) Fixed: Back button on details view is not working'
+                    ]
+                }
+            ]
+        },
+        // v15.2.0
+        {
+            version    : 'v15.2.0',
+            releaseDate: 'Aug 22, 2022',
+            changes    : [
+                {
+                    type: 'Changed',
+                    list: [
+                        '(dependencies) Updated Angular & Angular Material to v14.1.3',
+                        '(dependencies) Updated various other packages'
+                    ]
+                },
+                {
+                    type: 'Fixed',
+                    list: [
+                        '(@fuse/tailwind/plugins/theming) Simplified the plugin and added more detailed comments',
+                        '(tailwind.config) Fixed: typo on comment',
+                        '(tailwind) Removed the "aspect-ratio" plugin in favor of the included "aspect" utility',
+                        '(layout/common/messages) Fixed: Wrong color classes on "No Messages" icon',
+                        '(layout/common/notifications) Fixed: Wrong color classes on "No Notifications" icon',
+                        '(layout/common/shortcuts) Fixed: Wrong color classes on "No Shortcuts" icon',
+                        '(dashboards/project) Removed unnecessary classes from the buttons',
+                        '(apps/mailbox) Better label toggle behavior',
+                        '(apps/tasks) Better tag toggle behavior',
+                        '(docs) Fixed: Typos'
+                    ]
+                }
+            ]
+        },
         // v15.1.0
         {
-            version    : 'v15.0.0',
+            version    : 'v15.1.0',
             releaseDate: 'Jul 21, 2022',
             changes    : [
                 {

src/app/modules/admin/docs/guides/customization/theming/theming.html

@@ -135,7 +135,7 @@
                 <p class="font-medium">on-primary, on-accent, on-warn</p>
                 These are the 3 main contrasting color palettes of the theme. They can be either a complete or a partial
                 Tailwind color palette. By default, Fuse will automatically generate contrasting colors using the colors
-                from "Primary", "Accent" and "Warn" palettes but for some reason, if you more control over the contrasting
+                from "Primary", "Accent" and "Warn" palettes but for some reason, if you want more control over the contrasting
                 colors, you can use these objects to customize them.
             </li>
         </ul>
@@ -181,7 +181,7 @@
                 },
 
                 // Here we define the "Accent" palette for the default theme.
-                // It uses the default "blue-gray" color palette from Tailwind's default
+                // It uses the default "slate" color palette from Tailwind's default
                 // color palettes and sets the 800 hue level as the DEFAULT color.
                 accent   : {
                     ...colors.slate,

src/app/modules/admin/pages/activities/activities.component.html

@@ -21,7 +21,7 @@
                                 <ng-container *ngIf="first || !isSameDay(activity.date, activities[i - 1].date)">
                                     <li class="relative flex py-7">
                                         <div class="relative py-2 px-8 text-md font-medium leading-5 rounded-full bg-primary text-on-primary">
-                                            {{getRelativeFormat(activity.date)}}
+                                            {{getRelativeFormat(activity.date) | titlecase}}
                                         </div>
                                     </li>
                                 </ng-container>

src/app/modules/admin/pages/activities/activities.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { Observable } from 'rxjs';
-import * as moment from 'moment';
+import { DateTime } from 'luxon';
 import { Activity } from 'app/modules/admin/pages/activities/activities.types';
 import { ActivitiesService } from 'app/modules/admin/pages/activities/activities.service';
 
@@ -46,7 +46,7 @@ export class ActivitiesComponent implements OnInit
      */
     isSameDay(current: string, compare: string): boolean
     {
-        return moment(current, moment.ISO_8601).isSame(moment(compare, moment.ISO_8601), 'day');
+        return DateTime.fromISO(current).hasSame(DateTime.fromISO(compare), 'day');
     }
 
     /**
@@ -56,22 +56,7 @@ export class ActivitiesComponent implements OnInit
      */
     getRelativeFormat(date: string): string
     {
-        const today = moment().startOf('day');
-        const yesterday = moment().subtract(1, 'day').startOf('day');
-
-        // Is today?
-        if ( moment(date, moment.ISO_8601).isSame(today, 'day') )
-        {
-            return 'Today';
-        }
-
-        // Is yesterday?
-        if ( moment(date, moment.ISO_8601).isSame(yesterday, 'day') )
-        {
-            return 'Yesterday';
-        }
-
-        return moment(date, moment.ISO_8601).fromNow();
+        return DateTime.fromISO(date).toRelativeCalendar();
     }
 
     /**

src/app/modules/admin/pages/authentication/forgot-password/classic/forgot-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/forgot-password/fullscreen-reversed/forgot-password.component.html

@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/forgot-password/fullscreen/forgot-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/forgot-password/split-screen-reversed/forgot-password.component.html

@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/forgot-password/split-screen/forgot-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/reset-password/classic/reset-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/reset-password/fullscreen-reversed/reset-password.component.html

@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/reset-password/fullscreen/reset-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/reset-password/split-screen-reversed/reset-password.component.html

@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/reset-password/split-screen/reset-password.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/sign-in/classic/sign-in.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me

src/app/modules/admin/pages/authentication/sign-in/fullscreen-reversed/sign-in.component.html

@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -127,8 +127,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me

src/app/modules/admin/pages/authentication/sign-in/fullscreen/sign-in.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me

src/app/modules/admin/pages/authentication/sign-in/modern-reversed/sign-in.component.html

@@ -128,8 +128,9 @@
                     </mat-form-field>
 
                     <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'rememberMe'">
                             Remember me

src/app/modules/admin/pages/authentication/sign-in/modern/sign-in.component.html

@@ -78,8 +78,9 @@
                     </mat-form-field>
 
                     <!-- Actions -->
-                    <div class="inline-flex items-end justify-between w-full mt-1.5">
+                    <div class="inline-flex items-center justify-between w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'rememberMe'">
                             Remember me

src/app/modules/admin/pages/authentication/sign-in/split-screen-reversed/sign-in.component.html

@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -127,8 +127,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me

src/app/modules/admin/pages/authentication/sign-in/split-screen/sign-in.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -77,8 +77,9 @@
                 </mat-form-field>
 
                 <!-- Actions -->
-                <div class="inline-flex items-end justify-between w-full mt-1.5">
+                <div class="inline-flex items-center justify-between w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'rememberMe'">
                         Remember me

src/app/modules/admin/pages/authentication/sign-up/classic/sign-up.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a

src/app/modules/admin/pages/authentication/sign-up/fullscreen-reversed/sign-up.component.html

@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -149,12 +149,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a

src/app/modules/admin/pages/authentication/sign-up/fullscreen/sign-up.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a

src/app/modules/admin/pages/authentication/sign-up/modern-reversed/sign-up.component.html

@@ -150,12 +150,13 @@
                     <!-- ToS and PP -->
                     <div class="inline-flex items-end w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                             <a
                                 class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                             </a>
                             <span>and</span>
                             <a

src/app/modules/admin/pages/authentication/sign-up/modern/sign-up.component.html

@@ -100,12 +100,13 @@
                     <!-- ToS and PP -->
                     <div class="inline-flex items-end w-full mt-1.5">
                         <mat-checkbox
+                            class="-ml-2"
                             [color]="'primary'"
                             [formControlName]="'agreements'">
-                            <span>I agree to the</span>
+                            <span>I agree with</span>
                             <a
                                 class="ml-1 text-primary-500 hover:underline"
-                                [routerLink]="['./']">Terms of Service
+                                [routerLink]="['./']">Terms
                             </a>
                             <span>and</span>
                             <a

src/app/modules/admin/pages/authentication/sign-up/split-screen-reversed/sign-up.component.html

@@ -68,7 +68,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -149,12 +149,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a

src/app/modules/admin/pages/authentication/sign-up/split-screen/sign-up.component.html

@@ -18,7 +18,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"
@@ -99,12 +99,13 @@
                 <!-- ToS and PP -->
                 <div class="inline-flex items-end w-full mt-1.5">
                     <mat-checkbox
+                        class="-ml-2"
                         [color]="'primary'"
                         [formControlName]="'agreements'">
-                        <span>I agree to the</span>
+                        <span>I agree with</span>
                         <a
                             class="ml-1 text-primary-500 hover:underline"
-                            [routerLink]="['./']">Terms of Service
+                            [routerLink]="['./']">Terms
                         </a>
                         <span>and</span>
                         <a

src/app/modules/admin/pages/authentication/unlock-session/classic/unlock-session.component.html

@@ -12,7 +12,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"

src/app/modules/admin/pages/authentication/unlock-session/fullscreen-reversed/unlock-session.component.html

@@ -62,7 +62,7 @@
 
             <!-- Alert -->
             <fuse-alert
-                class="mt-8 -mb-4"
+                class="mt-8"
                 *ngIf="showAlert"
                 [appearance]="'outline'"
                 [showIcon]="false"