From 9ab2b122f3fdd2a5aa7c46bde8a3cf74f7074b84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Gayot?= <contact@clement-gayot.fr>
Date: Wed, 26 Jun 2024 02:53:28 +0200
Subject: [PATCH 1/4] :lipstick: Reduce default line height

---
 frontend/src/assets/styles/base/_reset.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/base/_reset.scss b/frontend/src/assets/styles/base/_reset.scss
index 1ffcfc7..1f48dcc 100644
--- a/frontend/src/assets/styles/base/_reset.scss
+++ b/frontend/src/assets/styles/base/_reset.scss
@@ -12,7 +12,7 @@
 }
 
 body {
-  line-height: 1.5;
+  line-height: 1.25;
   -webkit-font-smoothing: antialiased;
 }
 

From e30893e0fc645e6f85f3247ce0499aab4db51082 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Gayot?= <contact@clement-gayot.fr>
Date: Wed, 26 Jun 2024 02:56:22 +0200
Subject: [PATCH 2/4] :lipstick: Welcome : add margin top to start button

---
 frontend/src/assets/styles/pages/_Welcome.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/assets/styles/pages/_Welcome.scss b/frontend/src/assets/styles/pages/_Welcome.scss
index b973be2..fda174a 100644
--- a/frontend/src/assets/styles/pages/_Welcome.scss
+++ b/frontend/src/assets/styles/pages/_Welcome.scss
@@ -72,6 +72,7 @@
     height: 3.25rem;
     font-size: 1.25rem;
     width: 100%;
+    margin-top: 1rem !important;
 
     &:hover {
       opacity: 0.9;

From ba738fec5a23a5293ed03606330ee3cd55a886fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Gayot?= <contact@clement-gayot.fr>
Date: Wed, 26 Jun 2024 04:31:07 +0200
Subject: [PATCH 3/4] :lipstick: Improve Result layout : add container to
 image, avoid having the name overlapped with other elements

---
 .../src/assets/styles/partials/_Result.scss   | 47 +++++++++++--------
 frontend/src/components/ResultListe.jsx       | 12 +++--
 frontend/src/components/ResultsDeputes.jsx    | 12 +++--
 frontend/src/components/SharePopup.jsx        |  8 +++-
 4 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/frontend/src/assets/styles/partials/_Result.scss b/frontend/src/assets/styles/partials/_Result.scss
index 2db20a7..14a7464 100644
--- a/frontend/src/assets/styles/partials/_Result.scss
+++ b/frontend/src/assets/styles/partials/_Result.scss
@@ -5,13 +5,19 @@
   display: flex;
   height: 3.375rem;
 
-  &__img {
-    object-fit: contain;
-    background-color: var(--mui-palette-white-main);
-    width: 3.375rem;
-    height: 3.375rem;
+  &__img-container {
     border-top-left-radius: 0.675rem;
     border-bottom-left-radius: 0.675rem;
+    aspect-ratio: 1 / 1;
+    height: 100%;
+    overflow: hidden;
+    background-color: var(--mui-palette-white-main);
+  }
+
+  &__img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
   }
 
   &__progress {
@@ -21,10 +27,11 @@
       }
     }
 
-    height: 3.375rem;
+    height: 100%;
     border-radius: 0.675rem;
     overflow: hidden;
     width: 100%;
+    flex: 1;
     position: relative;
   }
 
@@ -32,7 +39,7 @@
     transition: width 0.3s ease-in-out;
     position: absolute;
     display: block;
-    height: 3.375rem;
+    height: 100%;
     padding: 0;
     margin: 0;
     animation: progress-bar 0.3s;
@@ -48,25 +55,25 @@
   }
 
   &__name {
-    left: 1rem;
     color: var(--mui-palette-white-main);
     position: absolute;
     display: flex;
     flex-direction: column;
-    height: 3.375rem;
+    width: calc(100% - 4rem);
+    height: 100%;
+    padding-left: 1rem;
     justify-content: center;
+    text-align: left;
 
     h4 {
       margin: 0;
       font-size: 1rem;
-      white-space: pre;
     }
 
     h5 {
       margin: 0;
       font-weight: normal;
       font-size: 1rem;
-      white-space: pre;
     }
   }
 
@@ -88,10 +95,6 @@
       }
 
       &__score {
-        color: var(--mui-palette-white-main);
-        position: absolute;
-        right: 1rem;
-        line-height: 3.375rem;
         font-weight: lighter;
         font-size: 1.25rem;
       }
@@ -101,14 +104,20 @@
   &--multiple {
     .Result {
       &__score {
-        color: var(--mui-palette-white-main);
-        position: absolute;
         text-align: right;
-        right: 1rem;
         line-height: 0.8rem;
         font-size: 0.7rem;
-        padding-top: 0.6rem;
       }
     }
   }
+
+  &__score {
+    color: var(--mui-palette-white-main);
+    position: absolute;
+    right: 1rem;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+  }
 }
diff --git a/frontend/src/components/ResultListe.jsx b/frontend/src/components/ResultListe.jsx
index 5ae0d2c..b497929 100644
--- a/frontend/src/components/ResultListe.jsx
+++ b/frontend/src/components/ResultListe.jsx
@@ -14,11 +14,13 @@ export default function ResultListe({ id, approval }) {
         document.querySelector(".ListVotesModal .content").scrollTo(0, 0);
       }}
     >
-      <img
-        className="Result__img"
-        src={`/lists/${id}.svg`}
-        alt={data.lists[id].label}
-      />
+      <div className="Result__img-container">
+        <img
+          className="Result__img"
+          src={`/lists/${id}.svg`}
+          alt={data.lists[id].label}
+        />
+      </div>
       <div className="Result__progress">
         <div
           className="Result__bar"
diff --git a/frontend/src/components/ResultsDeputes.jsx b/frontend/src/components/ResultsDeputes.jsx
index 63a3665..41e0562 100644
--- a/frontend/src/components/ResultsDeputes.jsx
+++ b/frontend/src/components/ResultsDeputes.jsx
@@ -23,11 +23,13 @@ export default function ResultsDeputes({ results }) {
             key={id}
             target="_blank"
           >
-            <img
-              className="Result__img"
-              src={`/deputes/${id.slice(2)}.jpg`}
-              alt={data.deputes[id]?.l}
-            />
+            <div className="Result__img-container">
+              <img
+                className="Result__img"
+                src={`/deputes/${id.slice(2)}.jpg`}
+                alt={data.deputes[id]?.l}
+              />
+            </div>
             <div className="Result__progress">
               <div
                 className="Result__bar"
diff --git a/frontend/src/components/SharePopup.jsx b/frontend/src/components/SharePopup.jsx
index 6bd54b7..2f5ad7d 100644
--- a/frontend/src/components/SharePopup.jsx
+++ b/frontend/src/components/SharePopup.jsx
@@ -21,7 +21,13 @@ export default function SharePopup() {
             key={id}
             target="_blank"
           >
-            <img src={`/lists/${id}.svg`} alt={data.lists[id].label} />
+            <div className="Result__img-container">
+              <img
+                className="Result__img"
+                src={`/lists/${id}.svg`}
+                alt={data.lists[id].label}
+              />
+            </div>
             <div className="Result__progress">
               <div
                 className="Result__bar"

From 9e5e143bd5ed8afab296497d79d0484b76690013 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Gayot?= <contact@clement-gayot.fr>
Date: Wed, 26 Jun 2024 04:31:52 +0200
Subject: [PATCH 4/4] :bug: :lipstick: SharePopup : fix & improve rendering

---
 frontend/src/assets/styles/components/_SharePopup.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/assets/styles/components/_SharePopup.scss b/frontend/src/assets/styles/components/_SharePopup.scss
index f9bb3a3..31344e5 100644
--- a/frontend/src/assets/styles/components/_SharePopup.scss
+++ b/frontend/src/assets/styles/components/_SharePopup.scss
@@ -11,14 +11,17 @@
   h1 {
     font-size: 25px;
     text-align: center;
-    margin-bottom: 0.5rem;
+    padding: 1rem 1rem 0;
   }
 
   &__logo {
     width: 25rem;
+    max-width: 100%;
+    padding: 0 1rem;
   }
 
   &__list {
+    margin-top: 0.5rem;
     padding: 1rem;
     gap: 0.75rem;
     display: flex;