X (twitter) 2141 (#2142)

* fix(ui): Twitter logo. * minor tweak to formatting.
kestra-io · Jan 29, 2025 · 82e2043 · 82e2043
1 parent f0e6924
commit 82e2043
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 31 deletions.
diff --git a/components/common/SocialsList.vue b/components/common/SocialsList.vue
@@ -48,7 +48,7 @@
     import Youtube from "vue-material-design-icons/Youtube.vue";
     import Github from "vue-material-design-icons/Github.vue";
     import Linkedin from "vue-material-design-icons/Linkedin.vue";
-    import Twitter from "vue-material-design-icons/Twitter.vue";
+    import Twitter from "../components/icons/TwitterXIcon.vue";
 
     const props = defineProps({
         page: {

diff --git a/components/company/Team.vue b/components/company/Team.vue
@@ -272,7 +272,7 @@
     import Section from '../../components/layout/Section.vue';
     import Github from "vue-material-design-icons/Github.vue";
     import Linkedin from "vue-material-design-icons/Linkedin.vue";
-    import Twitter from "vue-material-design-icons/Twitter.vue";
+    import Twitter from "../components/icons/TwitterXIcon.vue";
     import Mastodon from "vue-material-design-icons/Mastodon.vue";
 
     export default {

diff --git a/components/icons/TwitterXIcon.vue b/components/icons/TwitterXIcon.vue
@@ -1,35 +1,43 @@
 <template>
-  <span v-bind="$attrs"
-        :aria-hidden="title ? null : true"
-        :aria-label="title"
-        class="material-design-icon slack-icon"
-        role="img"
-        @click="$emit('click', $event)">
-      <svg
-          class="material-design-icon__svg"
-          :fill="fillColor"
-          :height="size"
-          xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 17" fill="none">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M6.4135 0.453613H0.741211L7.4665 9.33692L1.17144 16.7889H4.07995L8.84116 11.1527L13.0689 16.737H18.7412L11.8205 7.59555L11.8327 7.61132L17.7916 0.557348H14.8831L10.4579 5.79576L6.4135 0.453613ZM3.87222 2.00936H5.63809L15.6102 15.1813H13.8443L3.87222 2.00936Z" fill="white"/>
+  <span 
+    v-bind="$attrs" 
+    :aria-hidden="title ? null : true" 
+    :aria-label="title" 
+    class="material-design-icon twitter-icon"
+    role="img" @click="$emit('click', $event)"
+  >
+    <svg 
+      class="material-design-icon__svg" 
+      :fill="fillColor" 
+      :height="size" 
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 19 17" 
+      fill="none"
+    >
+      <path 
+        fill-rule="evenodd" 
+        clip-rule="evenodd"
+        d="M6.4135 0.453613H0.741211L7.4665 9.33692L1.17144 16.7889H4.07995L8.84116 11.1527L13.0689 16.737H18.7412L11.8205 7.59555L11.8327 7.61132L17.7916 0.557348H14.8831L10.4579 5.79576L6.4135 0.453613ZM3.87222 2.00936H5.63809L15.6102 15.1813H13.8443L3.87222 2.00936Z"
+        fill="currentColor" />
     </svg>
   </span>
 </template>
 <script>
-  export default {
-    name: "SlackIcon",
-    emits: ['click'],
-    props: {
-      title: {
-        type: String,
-      },
-      fillColor: {
-        type: String,
-        default: "currentColor"
-      },
-      size: {
-        type: Number,
-        default: 20
-      }
+export default {
+  name: "TwitterXIcon",
+  emits: ['click'],
+  props: {
+    title: {
+      type: String,
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 20
     }
   }
+  }
 </script>
diff --git a/components/layout/Newsletter.vue b/components/layout/Newsletter.vue
@@ -19,7 +19,7 @@
                 <p class="mt-3" data-aos="zoom-in">Stay up to date with the latest features and changes to Kestra</p>
                 <div class="d-flex align-items-center justify-content-center gap-3 socials">
                     <a href="https://twitter.com/kestra_io" class="d-flex align-items-center social-item gap-1" title="Twitter" target="_blank">
-                        <twitter />
+                        <twitter class="mb-1"/>
                         <p class="m-0">Twitter</p>
                     </a>
                     <a href="https://www.youtube.com/@kestra-io" class="d-flex align-items-center social-item gap-1" title="YouTube" target="_blank">
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-    import Twitter from "vue-material-design-icons/Twitter.vue";
+    import Twitter from "../components/icons/TwitterXIcon.vue";
     import Youtube from "vue-material-design-icons/Youtube.vue";
     import newsletterSubmit from "../../utils/newsletterSubmit.js";