From aff75667749769644f990d3dc9b0720c7d96d14d Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Sun, 10 Sep 2023 20:23:34 +0800
Subject: [PATCH] feat(ui): update the twitter icon (#1221)

---
 _data/contact.yml           |  2 +-
 _data/share.yml             |  2 +-
 _includes/post-sharing.html |  2 +-
 _sass/layout/post.scss      | 50 +++++++++++++++++--------------------
 4 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/_data/contact.yml b/_data/contact.yml
index 76b667a..1ed228a 100644
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -4,7 +4,7 @@
   icon: "fab fa-github"
 
 - type: twitter
-  icon: "fab fa-twitter"
+  icon: "fa-brands fa-x-twitter"
 
 - type: email
   icon: "fas fa-envelope"
diff --git a/_data/share.yml b/_data/share.yml
index c1d4d63..feede74 100644
--- a/_data/share.yml
+++ b/_data/share.yml
@@ -3,7 +3,7 @@
 
 platforms:
   - type: Twitter
-    icon: "fab fa-twitter"
+    icon: "fa-brands fa-square-x-twitter"
     link: "https://twitter.com/intent/tweet?text=TITLE&url=URL"
 
   - type: Facebook
diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
index 4085270..a316001 100644
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -1,6 +1,6 @@
 <!-- Post sharing snippet -->
 
-<div class="share-wrapper">
+<div class="share-wrapper d-flex align-items-center">
   <span class="share-label text-muted me-1">{{ site.data.locales[include.lang].post.share }}</span>
   <span class="share-icons">
     {% capture title %}{{ page.title }} - {{ site.title }}{% endcapture %}
diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss
index 3e80dcb..75ef97d 100644
--- a/_sass/layout/post.scss
+++ b/_sass/layout/post.scss
@@ -102,9 +102,13 @@ h1 + .post-meta {
     .share-icons {
       font-size: 1.2rem;
 
-      > *:hover {
-        i {
-          @extend %btn-share-hovor;
+      > * {
+        margin-left: 0.25rem;
+
+        &:hover {
+          i {
+            @extend %btn-share-hovor;
+          }
         }
       }
 
@@ -116,36 +120,28 @@ h1 + .post-meta {
         @extend %cursor-pointer;
       }
 
-      a {
-        &:not(:last-child) {
-          margin-right: 0.25rem;
-        }
-
-        &:hover {
-          text-decoration: none;
-        }
+      a :hover {
+        text-decoration: none;
       }
 
-      .fab {
-        &.fa-twitter {
-          @include btn-sharing-color(rgba(29, 161, 242, 1));
-        }
+      .fa-square-x-twitter {
+        @include btn-sharing-color(black);
+      }
 
-        &.fa-facebook-square {
-          @include btn-sharing-color(rgb(66, 95, 156));
-        }
+      .fa-facebook-square {
+        @include btn-sharing-color(rgb(66, 95, 156));
+      }
 
-        &.fa-telegram {
-          @include btn-sharing-color(rgb(39, 159, 217));
-        }
+      .fa-telegram {
+        @include btn-sharing-color(rgb(39, 159, 217));
+      }
 
-        &.fa-linkedin {
-          @include btn-sharing-color(rgb(0, 119, 181));
-        }
+      .fa-linkedin {
+        @include btn-sharing-color(rgb(0, 119, 181));
+      }
 
-        &.fa-weibo {
-          @include btn-sharing-color(rgb(229, 20, 43));
-        }
+      .fa-weibo {
+        @include btn-sharing-color(rgb(229, 20, 43));
       }
     } /* .share-icons */