New X icon

Changed Twitter logo to X
epfl-si · Aug 8, 2023 · 0f7f7ea · 0f7f7ea
1 parent c769c3a
commit 0f7f7ea
Show file tree

Hide file tree

Showing 15 changed files with 25 additions and 22 deletions.
diff --git a/assets/components/atoms/social-icon/social-icon-group.twig b/assets/components/atoms/social-icon/social-icon-group.twig
@@ -7,7 +7,7 @@
     {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'X', icon: 'icon-x', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
     {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative } %}

diff --git a/assets/components/atoms/social-icon/social-icon-link-group.twig b/assets/components/atoms/social-icon/social-icon-link-group.twig
@@ -7,7 +7,7 @@
     {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Twitter', icon: 'icon-twitter', round: round, discrete: discrete, negative: negative, url: 'https://twitter.com/epfl_en' } %}
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on X', icon: 'icon-x', round: round, discrete: discrete, negative: negative, url: 'https://x.com/epfl_en' } %}
   </li>
   <li>
     {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}

diff --git a/assets/components/atoms/social-icon/social-icon-link.twig b/assets/components/atoms/social-icon/social-icon-link.twig
@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set icon = icon ?: 'icon-x' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

diff --git a/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig b/assets/components/atoms/social-icon/social-icon-single-link-with-details.twig
@@ -1,6 +1,6 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
+{% set pretty_name = pretty_name ?: 'X' %}
 {% set user_id = user_id ?: 'firstname.name' %}
-{% set icon = icon ?: 'icon-twitter' %}
+{% set icon = icon ?: 'icon-x' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

diff --git a/assets/components/atoms/social-icon/social-icon-single-link.twig b/assets/components/atoms/social-icon/social-icon-single-link.twig
@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'Follow us on Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
+{% set pretty_name = pretty_name ?: 'Follow us on X' %}
+{% set icon = icon ?: 'icon-x' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

diff --git a/assets/components/atoms/social-icon/social-icon-single.twig b/assets/components/atoms/social-icon/social-icon-single.twig
@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set icon = icon ?: 'icon-x' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

diff --git a/assets/components/atoms/social-icon/social-icon.scss b/assets/components/atoms/social-icon/social-icon.scss
@@ -56,8 +56,8 @@ a.social-icon {
   background-color: $facebook;
 }
 
-.social-icon-twitter {
-  background-color: $twitter;
+.social-icon-x {
+  background-color: $x;
 }
 
 .social-icon-whatsapp {

diff --git a/assets/components/atoms/social-icon/social-icon.twig b/assets/components/atoms/social-icon/social-icon.twig
@@ -1,5 +1,5 @@
-{% set pretty_name = pretty_name ?: 'Twitter' %}
-{% set icon = icon ?: 'icon-twitter' %}
+{% set pretty_name = pretty_name ?: 'X' %}
+{% set icon = icon ?: 'icon-x' %}
 {% set round = round ? ' social-icon-round' : '' %}
 {% set discrete = discrete ? ' social-icon-discrete' : '' %}
 {% set negative = negative ? ' social-icon-negative' : '' %}

diff --git a/assets/components/atoms/social-icon/social-icon.yml b/assets/components/atoms/social-icon/social-icon.yml
@@ -24,7 +24,7 @@ notes: |
   Icons to accomodate social boxes. The available social networks are:
   * `facebook`
   * `instagram`
-  * `twitter`
+  * `x`
   * `e-mail`
   * `whatsapp`
   * `linkedin`
diff --git a/assets/components/molecules/social-feed/social-feed.twig b/assets/components/molecules/social-feed/social-feed.twig
@@ -1,5 +1,5 @@
 <div class="social-feed">
-  {% include '@atoms/social-icon/social-icon.twig' with { icon: 'icon-twitter', round: true } %}
+  {% include '@atoms/social-icon/social-icon.twig' with { icon: 'icon-x', round: true } %}
 
   <div class="social-feed-content">
     <div>
@@ -11,7 +11,7 @@
       <p>What's your fave spot for sunset on campus? 😎</p>
     </div>
     <div>
-      <a class="btn btn-secondary mt-4">Nous rejoindre sur Twitter</a>
+      <a class="btn btn-secondary mt-4">Nous rejoindre sur X</a>
     </div>
   </div>
 </div>
diff --git a/assets/components/molecules/social/social.twig b/assets/components/molecules/social/social.twig
@@ -18,8 +18,8 @@
           </li>
           <li>
             {% include '@atoms/social-icon/social-icon-single-link.twig' with {
-              pretty_name: 'Share on Twitter',
-              icon: 'icon-twitter',
+              pretty_name: 'Share on X',
+              icon: 'icon-x',
               round: round,
               discrete: true,
               url: '#'

diff --git a/assets/components/pages/news-detail/news-detail.twig b/assets/components/pages/news-detail/news-detail.twig
@@ -134,8 +134,8 @@
             <a href="#" class="social-icon social-icon-discrete social-icon-facebook">
               <svg class="icon"><use xlink:href="#icon-facebook"></use></svg>
             </a>
-            <a href="#" class="social-icon social-icon-discrete social-icon-twitter">
-              <svg class="icon"><use xlink:href="#icon-twitter"></use></svg>
+            <a href="#" class="social-icon social-icon-discrete social-icon-x">
+              <svg class="icon"><use xlink:href="#icon-x"></use></svg>
             </a>
             <a href="#" class="social-icon social-icon-discrete social-icon-instagram">
               <svg class="icon"><use xlink:href="#icon-instagram"></use></svg>

diff --git a/assets/config/data.json b/assets/config/data.json
@@ -81,6 +81,7 @@
     "home",
     "info",
     "instagram",
+    "linkedin",
     "lock",
     "mail-plane",
     "triangle",
@@ -91,7 +92,7 @@
     "whatsapp",
     "planet",
     "youtube",
-    "linkedin"
+    "x"
   ],
   "feathericons": [
     "activity",

diff --git a/assets/config/social-color.scss b/assets/config/social-color.scss
@@ -76,3 +76,4 @@ $listlyblue: #52b1b3;
 $vine: #00b489;
 $steam: #171a21;
 $discord: #7289da;
+$x: #000000;
diff --git a/assets/icons/x.svg b/assets/icons/x.svg