Merge branch 'release/0.7.0' into main

package.json

@@ -37,6 +37,7 @@
     "@angular/router": "~11.0.0",
     "@angular/service-worker": "~11.0.0",
     "rxjs": "~6.6.3",
+    "tailwindcss": "^2.0.2",
     "tslib": "^2.1.0",
     "zone.js": "~0.10.2"
   },
@@ -57,9 +58,9 @@
     "@types/node": "^14.14.22",
     "@typescript-eslint/eslint-plugin": "4.14.2",
     "@typescript-eslint/parser": "4.14.2",
-    "codelyzer": "^6.0.1",
-    "eslint-plugin-jsdoc": "31.6.0",
+    "autoprefixer": "^10.2.4",
     "eslint": "^7.19.0",
+    "eslint-plugin-jsdoc": "31.6.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
     "husky": "^4.3.8",
     "jasmine-core": "~3.6.0",
@@ -70,11 +71,12 @@
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.5.0",
     "lint-staged": "^10.5.3",
+    "postcss": "^8.2.4",
+    "postcss-cli": "^8.3.1",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^5.0.0",
+    "postcss-loader": "^4.2.0",
     "postcss-scss": "^3.0.4",
     "protractor": "~7.0.0",
-    "tailwindcss": "^1.9.6",
     "ts-node": "~9.1.1",
     "typescript": "~4.0.5",
     "webpack-bundle-analyzer": "^4.4.0"

src/app/+auth/pages/sign-in/sign-in.page.html

@@ -1,8 +1,3 @@
 <div class="container grid h-full place-items-center">
-  <button
-    class="px-6 py-3 font-semibold text-white rounded-lg bg-primary-500 hover:bg-primary-400 transition ease-in-out duration-300"
-    (click)="onClickSignIn()"
-  >
-    Sign in
-  </button>
+  <button class="btn btn-primary" (click)="onClickSignIn()">Sign in</button>
 </div>

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

@@ -2,7 +2,10 @@
   <nav
     class="container flex items-center justify-between h-full py-3 mx-auto center"
   >
-    <a routerLink="/" class="text-2xl font-bold no-underline cursor-pointer">
+    <a
+      [routerLink]="[path.Home]"
+      class="text-2xl font-bold no-underline cursor-pointer"
+    >
       <span class="text-danger-400">Angular</span>
       Boilerplate
     </a>
@@ -30,12 +33,7 @@
           ></path>
         </svg>
       </a>
-      <button
-        class="px-6 py-3 font-semibold text-white transition duration-300 ease-in-out rounded-lg bg-danger-500 hover:bg-danger-400"
-        (click)="onClickLogout()"
-      >
-        Logout
-      </button>
+      <button class="btn btn-danger" (click)="onClickLogout()">Sign out</button>
     </div>
   </nav>
 </header>

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

@@ -1,4 +1,11 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  OnInit,
+  Output,
+} from '@angular/core';
+import { Path } from '@app/@core/structs';
 
 @Component({
   selector: 'app-header',
@@ -9,6 +16,8 @@ import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output } from
 export class HeaderComponent implements OnInit {
   @Output() logout = new EventEmitter<void>();
 
+  path = Path;
+
   constructor() {}
 
   ngOnInit(): void {}

src/app/@components/header/header.module.ts

@@ -1,10 +1,11 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { HeaderComponent } from './header.component';
 
 @NgModule({
   declarations: [HeaderComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, RouterModule],
   exports: [HeaderComponent],
 })
 export class HeaderModule {}

src/app/@containers/home/home.page.html

@@ -3,6 +3,9 @@
     <div class="-mt-20 text-center md:max-w-xl">
       <h1 i18n class="mb-4">👋 Welcome to Angular Boilerplate.</h1>
       <p i18n class="mb-12 text-xl">⚒️ Start building your SPA easily. ⚒️</p>
+      <a [routerLink]="['/', path.App]" class="btn btn-primary">
+        Go to dashboard
+      </a>
     </div>
   </div>
 </div>

src/css/06-components/button.scss

@@ -1 +1,51 @@
-// here goes your button styles
+.btn {
+  @apply px-6;
+  @apply py-3;
+  @apply font-semibold;
+  @apply text-white;
+  @apply rounded-lg;
+}
+
+.btn:focus {
+  @apply ring-4;
+}
+
+.btn-primary {
+  @apply bg-primary-500;
+}
+
+.btn-primary:hover {
+  @apply bg-primary-400;
+}
+
+.btn-secondary {
+  @apply bg-gray-500;
+}
+
+.btn-secondary:hover {
+  @apply bg-gray-400;
+}
+
+.btn-success {
+  @apply bg-success-500;
+}
+
+.btn-success:hover {
+  @apply bg-success-400;
+}
+
+.btn-warning {
+  @apply bg-warning-500;
+}
+
+.btn-warning:hover {
+  @apply bg-warning-400;
+}
+
+.btn-danger {
+  @apply bg-danger-500;
+}
+
+.btn-danger:hover {
+  @apply bg-danger-400;
+}