feat: update X brand logo & tweak labels (#7518)

packages/excalidraw/components/icons.tsx

@@ -486,10 +486,11 @@ export const DiscordIcon = createIcon(
   modifiedTablerIconProps,
 );
 
-export const TwitterIcon = createIcon(
+export const XBrandIcon = createIcon(
   <g strokeWidth="1.25">
-    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"></path>
+    <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
+    <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
   </g>,
   tablerIconProps,
 );

packages/excalidraw/components/main-menu/DefaultItems.tsx

@@ -17,7 +17,7 @@ import {
   TrashIcon,
   usersIcon,
 } from "../icons";
-import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import { GithubIcon, DiscordIcon, XBrandIcon } from "../icons";
 import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
 import {
@@ -241,7 +241,10 @@ export const Export = () => {
 };
 Export.displayName = "Export";
 
-export const Socials = () => (
+export const Socials = () => {
+  const { t } = useI18n();
+
+  return (
     <>
       <DropdownMenuItemLink
         icon={GithubIcon}
@@ -250,22 +253,23 @@ export const Socials = () => (
       >
         GitHub
       </DropdownMenuItemLink>
+      <DropdownMenuItemLink
+        icon={XBrandIcon}
+        href="https://x.com/excalidraw"
+        aria-label="X"
+      >
+        {t("labels.followUs")}
+      </DropdownMenuItemLink>
       <DropdownMenuItemLink
         icon={DiscordIcon}
         href="https://discord.gg/UexuTaE"
         aria-label="Discord"
       >
-      Discord
+        {t("labels.discordChat")}
-    </DropdownMenuItemLink>
-    <DropdownMenuItemLink
-      icon={TwitterIcon}
-      href="https://twitter.com/excalidraw"
-      aria-label="Twitter"
-    >
-      Twitter
       </DropdownMenuItemLink>
     </>
-);
+  );
+};
 Socials.displayName = "Socials";
 
 export const LiveCollaborationTrigger = ({

packages/excalidraw/locales/en.json

@@ -138,7 +138,9 @@
     "removeAllElementsFromFrame": "Remove all elements from frame",
     "eyeDropper": "Pick color from canvas",
     "textToDiagram": "Text to diagram",
-    "prompt": "Prompt"
+    "prompt": "Prompt",
+    "followUs": "Follow us",
+    "discordChat": "Discord chat"
   },
   "library": {
     "noItems": "No items added yet...",

packages/excalidraw/tests/__snapshots__/excalidraw.test.tsx.snap

@@ -386,6 +386,52 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
           GitHub
         </div>
       </a>
+      <a
+        aria-label="X"
+        class="dropdown-menu-item dropdown-menu-item-base"
+        href="https://x.com/excalidraw"
+        rel="noreferrer"
+        target="_blank"
+        title="X"
+      >
+        <div
+          class="dropdown-menu-item__icon"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            fill="none"
+            focusable="false"
+            role="img"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+          >
+            <g
+              stroke-width="1.25"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+                stroke="none"
+              />
+              <path
+                d="M4 4l11.733 16h4.267l-11.733 -16z"
+              />
+              <path
+                d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772"
+              />
+            </g>
+          </svg>
+        </div>
+        <div
+          class="dropdown-menu-item__text"
+        >
+          Follow us
+        </div>
+      </a>
       <a
         aria-label="Discord"
         class="dropdown-menu-item dropdown-menu-item-base"
@@ -423,50 +469,7 @@ exports[`<Excalidraw/> > Test UIOptions prop > Test canvasActions > should rende
         <div
           class="dropdown-menu-item__text"
         >
-          Discord
+          Discord chat
-        </div>
-      </a>
-      <a
-        aria-label="Twitter"
-        class="dropdown-menu-item dropdown-menu-item-base"
-        href="https://twitter.com/excalidraw"
-        rel="noreferrer"
-        target="_blank"
-        title="Twitter"
-      >
-        <div
-          class="dropdown-menu-item__icon"
-        >
-          <svg
-            aria-hidden="true"
-            class=""
-            fill="none"
-            focusable="false"
-            role="img"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-          >
-            <g
-              stroke-width="1.25"
-            >
-              <path
-                d="M0 0h24v24H0z"
-                fill="none"
-                stroke="none"
-              />
-              <path
-                d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z"
-              />
-            </g>
-          </svg>
-        </div>
-        <div
-          class="dropdown-menu-item__text"
-        >
-          Twitter
         </div>
       </a>
     </div>