From 5e3e41c8c88ac366bcb41250fb9ee8c98d45cecb Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Tue, 2 Apr 2024 16:35:14 +0200
Subject: [PATCH] refactoring socials links to be a list

---
 template-components/post-infos-capsule.css | 13 ++++++++-----
 template-components/post-infos-capsule.php | 11 ++++++-----
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/template-components/post-infos-capsule.css b/template-components/post-infos-capsule.css
index c7a6359..f05448f 100644
--- a/template-components/post-infos-capsule.css
+++ b/template-components/post-infos-capsule.css
@@ -15,9 +15,12 @@
 		font-medium;
   }
   &__share {
-    @apply gap-1 md:gap-2;
+    @apply gap-1 md:gap-2 !my-0;
     .share-button {
-      @apply bg-primary w-8 h-8  rounded-full p-4 relative;
+      @apply pl-0 content-none py-0;
+    }
+    .share-button a {
+      @apply bg-primary !block w-8 h-8  rounded-full p-4 relative;
       transition: transform 0.3s ease-in-out;
       &:before {
         @apply absolute w-3 h-3 bg-contain bg-center bg-no-repeat;
@@ -32,17 +35,17 @@
         filter: brightness(1.4);
       }
     }
-    .share-button--Facebook {
+    .share-button--Facebook a {
       &:before {
         background-image: url('../resources/img/graphic-assets/icone-social-facebook.svg');
       }
     }
-    .share-button--Twitter-X {
+    .share-button--Twitter-X a {
       &:before {
         background-image: url('../resources/img/graphic-assets/icone-social-twitter-x.svg');
       }
     }
-    .share-button--Linkedin {
+    .share-button--Linkedin a {
       &:before {
         background-image: url('../resources/img/graphic-assets/icone-social-linkedin.svg');
       }
diff --git a/template-components/post-infos-capsule.php b/template-components/post-infos-capsule.php
index c5352f6..f29fbd3 100644
--- a/template-components/post-infos-capsule.php
+++ b/template-components/post-infos-capsule.php
@@ -24,14 +24,15 @@ $shareUrls = build_share_urls($postID);
 ?>
 
 <div class="post-infos-capsule">
-	<div class="post-infos-capsule__share">
-
 
+	<ul class="post-infos-capsule__share">
 		<?php foreach ($shareUrls as $key => $shareUrl) : ?>
-			<a class="share-button share-button--<?php echo  $key ?>" href='<?php echo  $shareUrl ?>' target="_blank" title="<?php echo __("Partager ce contenu sur ", "homegrade-theme__texte-fonctionnel") . $key ?>">
-			</a>
+			<li class="share-button share-button--<?php echo  $key ?>" href='<?php echo  $shareUrl ?>'>
+				<a class="share-link" target="_blank" title="<?php echo __("Partager ce contenu sur ", "homegrade-theme__texte-fonctionnel") . $key ?>">
+				</a>
+			</li>
 		<?php endforeach; ?>
-	</div>
+	</ul>
 	<?php if ($published) : ?>
 		<div class="post-infos-capsule__publication-date">
 			<time><?php echo __("Publié le ", "homegrade-theme__texte-fonctionnel") . $published ?></time>