Minor changes

frontend/src/app/components/footer/footer.component.html

@@ -1,15 +1,14 @@
 <div>
-    <span class="copy-left">
+    <span class="copy-left">&copy;</span>
-        &copy;
+    2016 - 2024 Tous droits réservés
-    </span>
+    -
-    2027 - 2024 Tous droits réservés
+    2.0-alpha
-    &lt;version&gt;
+    <a [routerLink]="['./']" matTooltip="Health checking will be available in future...">
-    <a [routerLink]="['healthCheck']">
         <mat-icon>favorite</mat-icon>
     </a>
 </div>
 <div>
-    <mat-icon>menu_book</mat-icon>
+    <mat-icon matTooltip="Documentation will be available in future...">menu_book</mat-icon>
     -
     Développements réalisés par Florian THIERRY
 </div>

frontend/src/app/components/footer/footer.component.scss

@@ -13,6 +13,9 @@
         flex-direction: row;
         align-items: center;
 
+        .copy-left {
+            transform: rotate(180deg);
+        }
         a {
             text-decoration: none;
             color: rgba(255,255,255,.6);

frontend/src/app/components/footer/footer.component.ts

@@ -1,11 +1,12 @@
 import { Component } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-footer',
   standalone: true,
-  imports: [MatIconModule, RouterModule],
+  imports: [MatIconModule, MatTooltipModule, RouterModule],
   templateUrl: './footer.component.html',
   styleUrl: './footer.component.scss'
 })

frontend/src/app/components/header/header.component.scss

@@ -192,10 +192,10 @@ app-side-menu {
         }
 
         &.disconnection {
-            color: red;
+            color: #D50000;
 
             &:hover {
-                background-color: red;
+                background-color: #E53935;
                 color: white;
             }
         }

frontend/src/app/pages/publication/publication.component.html

@@ -15,11 +15,21 @@
             </header>
             <main [innerHTML]="publication.parsedText"></main>
             <footer>
-                <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
+                <div class="metadata">
-                Publication posted by {{ publication.author.name }}
+                    <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
-                <span class="publication-date">
+                    <div class="posting-data">
-                    ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
+                        Publication posted by {{ publication.author.name }}
-                </span>
+                        <span class="publication-date">
+                            ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
+                        </span>
+                    </div>
+                </div>
+                @if (isAuthorAndUserEquals) {
+                    <button type="button" matTooltip="Click to delete the publication" matTooltipPosition="left">
+                        <mat-icon>delete</mat-icon>
+                        Delete
+                    </button>
+                }
             </footer>
         </div>
     } @else {

frontend/src/app/pages/publication/publication.component.scss

@@ -78,24 +78,62 @@ $cardBorderRadius: .5em;
 
         footer {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
+            justify-content: space-between;
             align-items: center;
             background-color: #f0f0f0;
             border-radius: 0 0 $cardBorderRadius $cardBorderRadius;
             padding: 1em 2em;
             gap: 1em;
 
-            img {
+            @media screen and (min-width: 500px) {
-                $imageSize: 4em;
+                flex-direction: row;
-                border-radius: 10em;
-                width: $imageSize;
-                height: $imageSize;
-                object-fit: cover;
             }
 
-            .publication-date {
+            .metadata {
-                font-style: italic;
+                display: flex;
-                color: #bdbdbd;
+                flex-direction: row;
+                align-items: center;
+                gap: 1em;
+    
+                img {
+                    $imageSize: 4em;
+                    border-radius: 10em;
+                    width: $imageSize;
+                    height: $imageSize;
+                    object-fit: cover;
+                }
+    
+                .posting-data {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: start;
+
+                    .publication-date {
+                        font-style: italic;
+                        color: #bdbdbd;
+                    }
+                }
+            }
+
+            button {
+                padding: .8em 1.2em;
+                border-radius: 10em;
+                border: none;
+                background-color: #D50000;
+                color: white;
+                transition: background-color .2s ease-in-out;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                gap: .5em;
+            
+                &:hover {
+                    background-color: #E53935;
+                    cursor: pointer;
+                }
             }
         }
     }