chore: refactor styles & add button component

package.json

@@ -27,38 +27,38 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "~11.1.1",
-    "@angular/common": "~11.1.1",
-    "@angular/compiler": "~11.1.1",
-    "@angular/core": "~11.1.1",
-    "@angular/forms": "~11.1.1",
-    "@angular/platform-browser": "~11.1.1",
-    "@angular/platform-browser-dynamic": "~11.1.1",
-    "@angular/router": "~11.1.1",
-    "@angular/service-worker": "~11.1.1",
-    "autoprefixer": "^10.2.4",
+    "@angular/animations": "~11.0.0",
+    "@angular/common": "~11.0.0",
+    "@angular/compiler": "~11.0.0",
+    "@angular/core": "~11.0.0",
+    "@angular/forms": "~11.0.0",
+    "@angular/platform-browser": "~11.0.0",
+    "@angular/platform-browser-dynamic": "~11.0.0",
+    "@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.11.3"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^11.0.0",
     "@angular-devkit/build-angular": "~0.1101.2",
     "@angular-eslint/builder": "1.1.0",
     "@angular-eslint/eslint-plugin": "1.1.0",
     "@angular-eslint/eslint-plugin-template": "1.1.0",
-    "@angular-eslint/schematics": "^1.1.0",
+    "@angular-eslint/schematics": "^0.8.0-beta.7",
     "@angular-eslint/template-parser": "1.1.0",
     "@angular/cli": "~11.1.2",
-    "@angular/compiler-cli": "~11.1.1",
-    "@angular/localize": "^11.1.1",
-    "@fullhuman/postcss-purgecss": "^4.0.0",
+    "@angular/compiler-cli": "~11.0.0",
+    "@angular/localize": "^11.0.0",
+    "@fullhuman/postcss-purgecss": "^3.1.3",
     "@types/jasmine": "~3.6.3",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "^14.14.22",
     "@typescript-eslint/eslint-plugin": "4.14.2",
     "@typescript-eslint/parser": "4.14.2",
-    "codelyzer": "^6.0.1",
+    "autoprefixer": "^10.2.4",
     "eslint": "^7.19.0",
     "eslint-plugin-jsdoc": "31.6.0",
     "eslint-plugin-prefer-arrow": "1.2.3",
@@ -71,13 +71,14 @@
     "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.5.0",
     "lint-staged": "^10.5.3",
-    "postcss-import": "^14.0.0",
-    "postcss-loader": "^5.0.0",
+    "postcss": "^8.2.4",
+    "postcss-cli": "^8.3.1",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^4.2.0",
     "postcss-scss": "^3.0.4",
     "protractor": "~7.0.0",
-    "tailwindcss": "^2.0.2",
     "ts-node": "~9.1.1",
-    "typescript": "^4.1.3",
+    "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

@@ -33,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()"
-      >
-        Sign out
-      </button>
+      <button class="btn btn-danger" (click)="onClickLogout()">Sign out</button>
     </div>
   </nav>
 </header>

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

@@ -3,10 +3,7 @@
     <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="px-6 py-3 font-semibold text-white transition duration-300 ease-in-out rounded-lg bg-primary-500 hover:bg-primary-400"
-      >
+      <a [routerLink]="['/', path.App]" class="btn btn-primary">
         Go to dashboard
       </a>
     </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;
+}