Styling elements.

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

@@ -2,8 +2,9 @@
     <span class="copy-left">
         &copy;
     </span>
-    2027 - 2024 Tous droits réservés
-    &lt;version&gt;
+    2016 - 2024 Tous droits réservés
+    -
+    2.0-alpha
     <a [routerLink]="['healthCheck']">
         <mat-icon>favorite</mat-icon>
     </a>

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/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

@@ -17,10 +17,12 @@
             <footer>
                 <div class="metadata">
                     <img src="/pictures/{{ publication.author.image }}" [matTooltip]="publication.author.name" />
-                    Publication posted by {{ publication.author.name }}
-                    <span class="publication-date">
-                        ({{ publication.creationDate | date: 'short' : 'fr-FR' }})
-                    </span>
+                    <div class="posting-data">
+                        Publication posted by {{ publication.author.name }}
+                        <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">

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

@@ -78,18 +78,22 @@ $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;
+
+            @media screen and (min-width: 500px) {
+                flex-direction: row;
+            }
 
             .metadata {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                
                 gap: 1em;
     
                 img {
@@ -100,9 +104,16 @@ $cardBorderRadius: .5em;
                     object-fit: cover;
                 }
     
-                .publication-date {
-                    font-style: italic;
-                    color: #bdbdbd;
+                .posting-data {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: start;
+
+                    .publication-date {
+                        font-style: italic;
+                        color: #bdbdbd;
+                    }
                 }
             }
 
@@ -120,7 +131,7 @@ $cardBorderRadius: .5em;
                 gap: .5em;
             
                 &:hover {
-                    background-color: #B71C1C;
+                    background-color: #E53935;
                     cursor: pointer;
                 }
             }