Rename "Twitter" to "X (formerly Twitter)" (#20694)

* Rename "Twitter" to "X (formerly Twitter)"

* Add translations

* Show x logo on light mode

---------

Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>

public/static/images/logo_x.svg

@@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>

src/onboarding/dialogs/community-dialog.ts

@@ -72,11 +72,11 @@ class DialogCommunity extends LitElement {
         <a
           target="_blank"
           rel="noreferrer noopener"
-          href="https://twitter.com/home_assistant"
+          href="https://x.com/home_assistant"
         >
           <ha-list-item hasMeta graphic="icon">
-            <img src="/static/images/logo_twitter.png" slot="graphic" />
+            <img class="x" src="/static/images/logo_x.svg" slot="graphic" />
-            ${this.localize("ui.panel.page-onboarding.welcome.twitter")}
+            ${this.localize("ui.panel.page-onboarding.welcome.x")}
             <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
           </ha-list-item>
         </a>
@@ -96,6 +96,12 @@ class DialogCommunity extends LitElement {
     a {
       text-decoration: none;
     }
+
+    @media (prefers-color-scheme: light) {
+      img.x {
+        filter: invert(1) hue-rotate(180deg);
+      }
+    }
   `;
 }
 

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -61,32 +61,32 @@ const randomTip = (hass: HomeAssistant, narrow: boolean) => {
           href="https://community.home-assistant.io"
           target="_blank"
           rel="noreferrer"
-          >Forums</a
+          >${hass.localize("ui.panel.config.tips.join_forums")}</a
         >`,
         twitter: html`<a
           href=${documentationUrl(hass, `/twitter`)}
           target="_blank"
           rel="noreferrer"
-          >Twitter</a
+          >${hass.localize("ui.panel.config.tips.join_x")}</a
         >`,
         discord: html`<a
           href=${documentationUrl(hass, `/join-chat`)}
           target="_blank"
           rel="noreferrer"
-          >Chat</a
+          >${hass.localize("ui.panel.config.tips.join_chat")}</a
         >`,
         blog: html`<a
           href=${documentationUrl(hass, `/blog`)}
           target="_blank"
           rel="noreferrer"
-          >Blog</a
+          >${hass.localize("ui.panel.config.tips.join_blog")}</a
         >`,
         newsletter: html`<span class="keep-together"
           ><a
             href="https://newsletter.openhomefoundation.org/"
             target="_blank"
             rel="noreferrer"
-            >Newsletter</a
+            >${hass.localize("ui.panel.config.tips.join_newsletter")}</a
           >
         </span>`,
       }),

src/translations/en.json

@@ -5070,6 +5070,11 @@
         "tips": {
           "tip": "Tip!",
           "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}",
+          "join_x": "X (formerly Twitter)",
+          "join_forums": "Forums",
+          "join_chat": "Chat",
+          "join_blog": "Blog",
+          "join_newsletter": "Newsletter",
           "media_storage": "You can add network storage to your Home Assistant instance in the {storage} panel."
         },
         "analytics": {
@@ -6873,7 +6878,7 @@
           "forums": "Home Assistant forums",
           "open_home_newsletter": "Building the Open Home newsletter",
           "discord": "Discord chat",
-          "twitter": "Twitter",
+          "x": "[%key:ui::panel::config::tips::join_x%]",
           "playstore": "Get it on Google Play",
           "appstore": "Download on the App Store"
         },