Update dependencies & improve bootstrap UI

Author: ganatan

angular/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap",
-  "version": "15.0.3",
+  "version": "15.0.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 4200",
@@ -13,33 +13,33 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.0.3",
-    "@angular/common": "15.0.3",
-    "@angular/compiler": "15.0.3",
-    "@angular/core": "15.0.3",
-    "@angular/forms": "15.0.3",
-    "@angular/platform-browser": "15.0.3",
-    "@angular/platform-browser-dynamic": "15.0.3",
-    "@angular/router": "15.0.3",
+    "@angular/animations": "15.0.4",
+    "@angular/common": "15.0.4",
+    "@angular/compiler": "15.0.4",
+    "@angular/core": "15.0.4",
+    "@angular/forms": "15.0.4",
+    "@angular/platform-browser": "15.0.4",
+    "@angular/platform-browser-dynamic": "15.0.4",
+    "@angular/router": "15.0.4",
     "@fortawesome/fontawesome-free": "6.2.1",
     "bootstrap": "5.2.3",
-    "rxjs": "7.6.0",
+    "rxjs": "7.8.0",
     "tslib": "2.4.1",
     "zone.js": "0.12.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "15.0.3",
+    "@angular-devkit/build-angular": "15.0.4",
     "@angular-eslint/builder": "15.1.0",
     "@angular-eslint/eslint-plugin": "15.1.0",
     "@angular-eslint/eslint-plugin-template": "15.1.0",
     "@angular-eslint/schematics": "15.1.0",
     "@angular-eslint/template-parser": "15.1.0",
-    "@angular/cli": "15.0.3",
-    "@angular/compiler-cli": "15.0.3",
+    "@angular/cli": "15.0.4",
+    "@angular/compiler-cli": "15.0.4",
     "@types/jasmine": "4.3.1",
-    "@typescript-eslint/eslint-plugin": "5.46.0",
-    "@typescript-eslint/parser": "5.46.0",
-    "eslint": "8.29.0",
+    "@typescript-eslint/eslint-plugin": "5.47.0",
+    "@typescript-eslint/parser": "5.47.0",
+    "eslint": "8.30.0",
     "jasmine-core": "4.5.0",
     "karma": "6.4.1",
     "karma-chrome-launcher": "3.1.1",

angular/package.json

@@ -1,38 +1,40 @@
-.navbar.navbar-dark .navbar-nav .nav-item .nav-link {
+.nga-nav-link {
   color: white;
+  border-top: 1px solid #000;
+  border-bottom: 1px solid #000;
   font-weight: 500;
-  border-top: 1px solid #09238d;
-  border-bottom: 1px solid #09238d;
 }
 
-.navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
+.nga-nav-link:hover {
   color: yellow;
   border-top: 1px solid yellow;
   border-bottom: 1px solid yellow;
 }
 
+
 .nga-navbar {
   -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12);
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12);
-  background-color: #09238d;
-}
-
-.nga-navbar-logo {
-  font-weight: 700;
-}
-
-.nga-navbar-logo:hover {
-  color: rgba(255, 255, 255, 0.75);
+  background-color: #000;
 }
 
 .nga-logo {
-  font-weight: 700;
+  font-weight: 500;
 }
 
 .nga-logo:hover {
   color: rgba(255, 255, 255, 0.75);
 }
 
+.nga-btn-navbar {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #1976d2;
+  --bs-btn-border-color: #1976d2;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0b5ed7;
+  --bs-btn-hover-border-color: #0a58ca;
+}
+
 .nga-footer {
   background-color: #212121;
   color: white;
@@ -45,14 +47,70 @@
 
 .nga-footer a:hover,
 .nga-footer a:focus {
-  color: yellow;
+  color: white;
   text-decoration: underline;
 }
 
-.nga-footer .hint {
+.nga-footer .nga-hint {
   background-color: #1976d2;
 }
 
-.nga-footer .hint:hover {
+.nga-footer .nga-hint:hover {
   opacity: 0.8;
-}
+}
+
+.nga-btn-social {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  padding: 0;
+  margin: 10px;
+  overflow: hidden;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 47px;
+  height: 47px
+}
+
+.nga-btn-social i {
+  font-size: 1.25rem;
+  line-height: 47px
+}
+
+.nga-btn-social i {
+  display: inline-block;
+  width: inherit;
+  color: white;
+  text-align: center
+}
+
+.nga-btn-social:hover {
+  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+.nga-btn-social i:hover {
+  color: black;
+}
+
+.nga-btn-github {
+  background-color: #333;
+}
+
+.nga-btn-gitlab {
+  background-color: #ff4500;
+}
+
+.nga-btn-linkedin {
+  background-color: #0082ca;
+}
+
+.nga-btn-twitter {
+  background-color: #55acee;
+}
+

angular/src/app/app.component.css

@@ -12,17 +12,17 @@
     <div class="collapse navbar-collapse" id="navbarCollapse">
       <ul class="navbar-nav mx-auto">
         <li class="nav-item">
-          <a class="nav-link" aria-current="page" routerLink="/">
+          <a class="nav-link nga-nav-link" aria-current="page" routerLink="/">
             <i class="fas fa-home me-1"></i>Home</a>
         </li>
       </ul>
       <ul class="navbar-nav me-auto">
         <li class="nav-item">
-          <a class="nav-link active" aria-current="page" routerLink="/about">
+          <a class="nav-link nga-nav-link" aria-current="page" routerLink="/about">
             <i class="far fa-question-circle me-1"></i>About</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" aria-current="page" routerLink="/contact">
+          <a class="nav-link nga-nav-link" aria-current="page" routerLink="/contact">
             <i class="fas fa-envelope me-1"></i>Contact</a>
         </li>
       </ul>

angular/src/app/app.component.html

@@ -1,24 +1,20 @@
 .nga-card {
-    display: block;
-    background-color: rgba(255, 255, 255, .8);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
-    border-radius: 2px;
-    transition: all .2s ease-in-out;
-    cursor: pointer;
-  }
-  
-  .nga-card:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
-  }
-  
-  .nga-card a {
-    color: black;
-    text-decoration: none;
-  }
-  
-  .nga-card a:hover {
-    color: #0d6efd;
-    text-decoration: none;
-  }
-  
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  border-radius: 0.25rem;
+}
+
+.nga-card a {
+  color: #0d6efd;
+  text-decoration: none;
+}
+
+.nga-card a:hover {
+  color: #0d6efd;
+}
+
+.nga-card:hover {
+  border: 1px solid #99ccff;
+  color: #0d6efd;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
+  transition: box-shadow 0.3s ease-in-out;
+}

angular/src/app/modules/general/home/home.component.css

@@ -31,7 +31,7 @@ <h3 class="h5">Features<i class="fas fa-list ms-2"></i></h3>
     </div>
     <div class="row pt-2">
       <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-        <div class="card nga-card bg-light mb-3">
+        <div class="card nga-card mb-2">
           <a routerLink="/bootstrap">
             <div class="card-header">
               <div class="row">
@@ -50,7 +50,7 @@ <h4 class="card-title h5">Bootstrap</h4>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-        <div class="card nga-card bg-light mb-3">
+        <div class="card nga-card mb-2">
           <div class="card-header">
             <div class="row">
               <div class="col-10 col-xl-10">
@@ -67,7 +67,7 @@ <h4 class="card-title h5">Services</h4>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-        <div class="card nga-card bg-light mb-3">
+        <div class="card nga-card mb-2">
           <div class="card-header">
             <div class="row">
               <div class="col-10 col-xl-10">
@@ -84,7 +84,7 @@ <h4 class="card-title h5">Components</h4>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-        <div class="card nga-card bg-light mb-3">
+        <div class="card nga-card mb-2">
           <div class="card-header">
             <div class="row">
               <div class="col-10 col-xl-10">
@@ -101,7 +101,7 @@ <h4 class="card-title h5">Reactive Forms</h4>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 mb-2">
-        <div class="card nga-card bg-light mb-3">
+        <div class="card nga-card mb-2">
           <div class="card-header">
             <div class="row">
               <div class="col-10 col-xl-10">