Update Twitter to X Logo (#470)

_includes/footer.html

@@ -70,7 +70,7 @@ <h4 class="footerHeaderStyle align-center-md"><b>Development</b></h4>
                                     <div id="own-ssk" class="d-flex">
                                         <a href="https://www.facebook.com/SugarLabsforall/timeline/" class="ion-icon ion-logo-facebook"></a>
                                         <a href="https://github.com/sugarlabs" class="ion-icon ion-logo-github"></a>
-                                        <a href="https://twitter.com/sugar_labs" class="ion-icon ion-logo-twitter"></a>
+                                        <a href="https://x.com/sugar_labs" class="ion-icon ion-logo-X"></a>
                                         <a rel="me" href="https://mastodon.social/@sugar_labs" class="ion-icon ion-logo-mastodon"></a>
                                     </div>
                                     <div id="own-ssk" class="d-flex">

css/ion_icon_customization.scss

@@ -18,11 +18,11 @@ $github-color-hover: darken($github-color, $darken-percent);
 $github-background: black;
 $github-background-hover: darken($github-background, $darken-percent);
 
-// Twitter colors
-$twitter-color: white;
-$twitter-color-hover: darken($twitter-color, $darken-percent);
-$twitter-background: #38A1F3;
-$twitter-background-hover: darken($twitter-background, $darken-percent);
+// X colors
+$X-color: white;
+$X-color-hover: darken($X-color, $darken-percent);
+$X-background: black;
+$X-background-hover: darken($X-background, $darken-percent);
 
 // Instagram colors
 // Instagram uses the background on both for both sticky and non sticky icons
@@ -107,13 +107,13 @@ $medium-background-hover: darken($medium-background, $darken-percent);
       }
     }
 
-    &twitter {
-      background: $twitter-background;
+    &X {
+      background: $X-background;
       text-indent: 1px;
       margin-right: -1px;
 
       &:hover {
-        background: $twitter-background-hover;
+        background: $X-background-hover;
       }
     }
 
@@ -205,10 +205,10 @@ $medium-background-hover: darken($medium-background, $darken-percent);
       }
     }
 
-    &twitter {
-      color: $twitter-color;
-      border: 1px solid $twitter-background;
-      background-color: $twitter-background;
+    &X {
+      color: $X-color;
+      border: 1px solid $X-background;
+      background-color: $X-background;
       font-size: 1.5rem;
       height: 3rem;
       width: 3rem;
@@ -217,7 +217,7 @@ $medium-background-hover: darken($medium-background, $darken-percent);
       justify-content: center;
 
       &:hover {
-        color: $twitter-color-hover;
+        color: $X-color-hover;
       }
     }