From 21d19d4ecda05e7422c1f90f5451ce5e44ce4e6b Mon Sep 17 00:00:00 2001
From: Florian THIERRY <florian.thierry@protonmail.com>
Date: Thu, 5 Sep 2024 09:33:07 +0200
Subject: [PATCH] Styling elements.

---
 .../components/footer/footer.component.html   |  5 ++--
 .../components/footer/footer.component.scss   |  3 +++
 .../components/header/header.component.scss   |  4 ++--
 .../publication/publication.component.html    | 10 ++++----
 .../publication/publication.component.scss    | 23 ++++++++++++++-----
 5 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index b1abe60..05c5dce 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/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>
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index 2c079ba..fa70f40 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/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);
diff --git a/frontend/src/app/components/header/header.component.scss b/frontend/src/app/components/header/header.component.scss
index b325f3d..d86f74a 100644
--- a/frontend/src/app/components/header/header.component.scss
+++ b/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;
             }
         }
diff --git a/frontend/src/app/pages/publication/publication.component.html b/frontend/src/app/pages/publication/publication.component.html
index 1ae6442..37a0d6f 100644
--- a/frontend/src/app/pages/publication/publication.component.html
+++ b/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">
diff --git a/frontend/src/app/pages/publication/publication.component.scss b/frontend/src/app/pages/publication/publication.component.scss
index d0bb8e6..10f845d 100644
--- a/frontend/src/app/pages/publication/publication.component.scss
+++ b/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;
                 }
             }