Add custom colors and set Poppins as default font family

src/app/components/authentication/login/login.component.html

@@ -7,8 +7,9 @@
       style="background-image: url({{imageLoginURL}});">
       <div class="absolute inset-0 bg-gray-400 opacity-50"></div>
       <div class="w-full z-10 max-w-xs mt-96 ml-60">
-        <div class="sm:text-4xl xl:text-5xl leading-tight mb-6 font-gayathri text-white">“</div>
-        <div class="sm:text-sm xl:text-md text-white font-normal"> In the realm of quiz games, those who adeptly
+        <div class="sm:text-4xl xl:text-7xl h-10 leading-tight mb-0 font-gayathri text-BrightCyan">“</div>
+        <div class="sm:text-sm xl:text-md text-white font-normal text-left"> In the realm of quiz games, those who
+          adeptly
           tackle challenges and consistently seek innovative solutions will emerge as the true champions of tomorrow
         </div>
         <div class="sm:text-sm xl:text-md text-white font-normal my-6">Jason Medina</div>
@@ -27,39 +28,39 @@ <h1 class="text-xl md:text-3xl font-bold leading-tight mt-12">Log in to your acc
         <p class="text-lg text-gray-500">with your registered E-mail Address</p>
       </div>
 
-      <hr class="my-6 border-gray-300 w-full">
+      <hr class="my-6 border-UserProgressBar w-full">
 
       <form class="mt-6" action="#" method="POST">
         <div>
-          <label class="block text-gray-700" for="email">E-mail address</label>
+          <label class="block text-CoolGrey" for="email">E-mail address</label>
           <input type="email" name="email" id="email" placeholder="Enter e-mail address"
-            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-blue-500 focus:bg-white focus:outline-none"
+            class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan focus:bg-white focus:outline-none"
             autofocus autocomplete required>
         </div>
 
         <div class="mt-4">
-          <label class="block text-gray-700" for="password">Enter password</label>
-          <input type="password" name="password" id="password" placeholder="Password" minlength="6" class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-blue-500
+          <label class="block text-CoolGrey" for="password">Enter password</label>
+          <input type="password" name="password" id="password" placeholder="Password" minlength="6" class="w-full px-4 py-3 rounded-lg bg-white mt-2 border focus:border-BrightCyan
                 focus:bg-white focus:outline-none" required>
         </div>
 
         <div class="text-right mt-2">
-          <a href="#" class="text-sm font-semibold text-gray-700 hover:text-blue-700 focus:text-blue-700">Oops! I forgot
+          <a routerLink="/recover" class="text-sm font-semibold text-SlateGray hover:text-BrightCyan focus:text-BrightCyan">Oops! I forgot
             my password</a>
         </div>
 
-        <button type="submit" class="w-full block bg-gray-500 hover:bg-gray-400 focus:bg-gray-400 text-white font-semibold rounded-lg
+        <button type="submit" class="w-full block bg-CoolGrey hover:bg-BrightCyan focus:bg-BrightCyan text-white font-medium rounded-lg
               px-4 py-3 mt-6">Log In</button>
       </form>
 
       <div class="flex items-center justify-center space-x-4 my-8">
-        <span class="h-px w-1/2 bg-gray-200"></span>
-        <span class="text-base text-gray-300 font-normal whitespace-nowrap">Still not a Player?</span>
-        <span class="h-px w-1/2 bg-gray-200"></span>
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
+        <span class="text-base text-LightGray font-normal whitespace-nowrap">Still not a Player?</span>
+        <span class="h-px w-1/2 bg-UserProgressBar"></span>
       </div>
 
-      <p class="mt-8 text-center">Join Us Today! <a href="#"
-          class="text-blue-500 hover:text-blue-700 font-semibold">Create
+      <p class="mt-8 text-center text-SlateGray">Join Us Today! <a routerLink="/register"
+          class="text-BrightCyan font-medium">Create
           Account</a></p>
 
     </div>

src/app/components/authentication/login/login.component.ts

@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './login.component.html',
   styleUrl: './login.component.css'
 })

tailwind.config.js

@@ -8,7 +8,21 @@ module.exports = {
       gayathri: ['Gayathri'],
       poppins: ['Poppins']
     },
-    extend: {},
+    extend: {
+      colors: {
+        'BrightCyan': '#00DAF7',
+        'CoolGrey': '#8692A6',
+        'SlateGray': '#696F79',
+        'LightGray': '#BABABA',
+        'OffWhite': '#FBF9F9',
+        'UserProgressBar': '#F5F5F5',
+        'NavyGray': '#C4C4C4',
+        'DropShadow': '#EDEDED'
+      },
+      fontFamily: {
+        'sans': ['Poppins']
+      }
+    },
   },
   plugins: [],
 }