Refactor footer and header components for improved structure and styling; add hover effect to social media links and update background color variable

FencerJudgeFront/src/app/components/essentials/footer/footer.component.css

@@ -1,21 +1,52 @@
+footer {
+  color: white;
+  background-color: var(--h-f-bg);
+  padding: 2rem;
+}
 
-.footer-gris {
+.socialmedias {
-  background-color: #2c2c2c; /* Gris foncé personnalisé */
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+
+.socialmedias a {
+  background-color: white;
+  text-decoration: none;
+  margin-left: 1rem;
+  height: 40px;
+  width: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: .6rem;
+  transition: background-color .4s ease-in-out;
+}
+
+.socialmedias a:hover {
+  background-color: var(--primary-color);
 }
 
 .flag-bar {
-  height: 6px;          /* épaisseur du trait */
+  height: 6px;
-  width: 100%;          /* toute la largeur */
+  /* épaisseur du trait */
-  background: linear-gradient(
+  width: 100%;
-    to right,
+  /* toute la largeur */
-    #0055a4 0%,        /* bleu */
+  background: linear-gradient(to right,
-    #0055a4 33.33%,    /* 1/3 */
+      #0055a4 0%,
-    #fff 33.33%,       /* blanc */
+      /* bleu */
-    #fff 66.66%,       /* 2/3 */
+      #0055a4 33.33%,
-    #ef4135 66.66%,    /* rouge */
+      /* 1/3 */
-    #ef4135 100%
+      #fff 33.33%,
-  );
+      /* blanc */
+      #fff 66.66%,
+      /* 2/3 */
+      #ef4135 66.66%,
+      /* rouge */
+      #ef4135 100%);
   margin-bottom: 8px;
-  border-radius: 3px;   /* optionnel, pour arrondir les bords */
+  border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  /* optionnel, pour arrondir les bords */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }

FencerJudgeFront/src/app/components/essentials/footer/footer.component.html

@@ -1,43 +1,16 @@
-<footer class="footer-gris text-white py-3">
+<footer>
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-4 d-flex align-items-center text-start">
-        <img
+        <img src="/assets/Logo/favicon.png" alt="FencerJudge" height="50" class="me-2" />
-          src="/assets/Logo/favicon.png"
-          alt="FencerJudge"
-          height="50"
-          class="me-2"
-        />
         <span class="fs-4 fw-bold">FencerJudge</span>
       </div>
-      <div
+      <div class="socialmedias col-md-4 offset-md-4">
-        class="col-md-4 offset-md-4 d-flex justify-content-end align-items-center"
-      >
         <span class="me-3">Suivez-nous</span>
-        <a
+        <a href="https://x.com/ffescrime"><i class="bi bi-twitter-x text-dark"></i></a>
-          href="https://x.com/ffescrime"
+        <a href="https://www.facebook.com/ffescrime/"><i class="bi bi-facebook text-dark"></i></a>
-          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
+        <a href="https://www.youtube.com/channel/UCSjeeZaP92mdOICSXsaGdiw"><i class="bi bi-youtube text-dark"></i></a>
-          style="width: 40px; height: 40px"
+        <a href="https://www.linkedin.com/company/ffescrime/"><i class="bi bi-linkedin text-dark"></i></a>
-          ><i class="bi bi-twitter-x text-dark"></i
-        ></a>
-        <a
-          href="https://www.facebook.com/ffescrime/"
-          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
-          style="width: 40px; height: 40px"
-          ><i class="bi bi-facebook text-dark"></i
-        ></a>
-        <a
-          href="https://www.youtube.com/channel/UCSjeeZaP92mdOICSXsaGdiw"
-          class="text-white me-2 d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
-          style="width: 40px; height: 40px"
-          ><i class="bi bi-youtube text-dark"></i
-        ></a>
-        <a
-          href="https://www.linkedin.com/company/ffescrime/"
-          class="text-white d-flex align-items-center justify-content-center rounded-circle bg-light p-2"
-          style="width: 40px; height: 40px"
-          ><i class="bi bi-linkedin text-dark"></i
-        ></a>
       </div>
     </div>
     <div class="text-center mt-3">
@@ -45,4 +18,4 @@
     </div>
     <div class="flag-bar" title="France"></div>
   </div>
-</footer>
+</footer>

FencerJudgeFront/src/app/components/essentials/header/header.component.css

@@ -1,3 +1,7 @@
+nav {
+  background-color: var(--h-f-bg);
+}
+
 .navbar {
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
@@ -7,6 +11,7 @@
   font-size: 1.4rem;
   display: flex;
   align-items: center;
+  color: white;
 }
 
 .navbar-brand img {
@@ -15,11 +20,13 @@
 }
 
 .nav-link {
+  text-transform: uppercase;
+  font-weight: 600;
+  color: white;
   transition: color 0.3s ease;
 }
 
 .nav-link:hover,
 .active-link {
   color: #ffcc00 !important;
-  font-weight: 600;
 }

FencerJudgeFront/src/app/components/essentials/header/header.component.html

@@ -1,52 +1,28 @@
-<!-- Navbar Bootstrap -->
+<nav class="navbar navbar-expand-lg">
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary-custom">
   <div class="container">
     <a class="navbar-brand" routerLink="/">FencerJudge</a>
-    <button
+    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
-      class="navbar-toggler"
-      type="button"
-      data-bs-toggle="collapse"
-      data-bs-target="#navbarNav"
-    >
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarNav">
       <ul class="navbar-nav ms-auto">
         <li class="nav-item">
-          <a
+          <a class="nav-link" routerLink="/matches" routerLinkActive="active-link">
-            class="nav-link"
-            routerLink="/matches"
-            routerLinkActive="active-link"
-          >
             Matchs
           </a>
         </li>
         <li class="nav-item" *ngIf="authService.isAuthenticated()">
-          <a
+          <a class="nav-link" routerLink="/matches/add" routerLinkActive="active-link">
-            class="nav-link"
-            routerLink="/matches/add"
-            routerLinkActive="active-link"
-          >
             MatchAdd
           </a>
         </li>
-        <li
+        <li class="nav-item" *ngIf="authService.isAuthenticated(); else notLoggedIn">
-          class="nav-item"
+          <a class="nav-link" routerLink="/logout" routerLinkActive="active-link">Admin</a>
-          *ngIf="authService.isAuthenticated(); else notLoggedIn"
-        >
-          <a
-            class="nav-link"
-            routerLink="/logout"
-            routerLinkActive="active-link"
-            >Admin</a
-          >
         </li>
         <ng-template #notLoggedIn>
-          <a class="nav-link" routerLink="/login" routerLinkActive="active-link"
+          <a class="nav-link" routerLink="/login" routerLinkActive="active-link">Connexion</a>
-            >Connexion</a
-          >
         </ng-template>
       </ul>
     </div>
   </div>
-</nav>
+</nav>

FencerJudgeFront/src/styles.css

@@ -12,4 +12,5 @@
       rgba(64, 64, 64, 0.95) 0%,
       rgba(32, 32, 32, 0.98) 50%,
       rgba(16, 16, 16, 0.95) 100%);
+      --h-f-bg: #2c2c2c;
 }