feat: update logo (#6979)

README.md

@@ -1,7 +1,7 @@
 <a href="https://excalidraw.com/" target="_blank" rel="noopener">
   <picture>
-    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover_dark.png" />
-    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2FExcalidraw_Github_cover.png" />
+    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />
+    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2.png" />
   </picture>
 </a>
 

dev-docs/docusaurus.config.js

@@ -10,7 +10,7 @@ const config = {
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.ico",
+  favicon: "img/favicon.png",
   organizationName: "Excalidraw", // Usually your GitHub org/user name.
   projectName: "excalidraw", // Usually your repo name.
 
@@ -123,7 +123,7 @@ const config = {
       prism: {
         theme: require("prism-react-renderer/themes/dracula"),
       },
-      image: "img/og-image.png",
+      image: "img/og-image-2.png",
       docs: {
         sidebar: {
           hideable: true,

index.html

@@ -20,7 +20,7 @@
       name="description"
       content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
-    <meta name="image" content="https://excalidraw.com/og-general-v1.png" />
+    <meta name="image" content="https://excalidraw.com/og-image-2.png" />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:site_name" content="Excalidraw" />
@@ -35,7 +35,7 @@
       property="og:description"
       content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
     />
-    <meta property="og:image" content="https://excalidraw.com/og-fb-v1.png" />
+    <meta property="og:image" content="https://excalidraw.com/og-image-2.png" />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
@@ -51,7 +51,7 @@
     />
     <meta
       property="twitter:image"
-      content="https://excalidraw.com/og-twitter-v1.png"
+      content="https://excalidraw.com/og-twitter-v2.png"
     />
 
     <!-- General tags -->
@@ -99,7 +99,9 @@
     </script>
     <% } %>
 
-    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
 
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />

public/manifest.json

@@ -4,8 +4,8 @@
   "description": "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
   "icons": [
     {
-      "src": "logo-180x180.png",
-      "sizes": "180x180",
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
       "type": "image/png"
     },
     {

src/components/ExcalidrawLogo.scss

@@ -0,0 +1,73 @@
+.excalidraw {
+  .ExcalidrawLogo {
+    --logo-icon--xs: 2rem;
+    --logo-text--xs: 1.5rem;
+
+    --logo-icon--small: 2.5rem;
+    --logo-text--small: 1.75rem;
+
+    --logo-icon--normal: 3rem;
+    --logo-text--normal: 2.2rem;
+
+    --logo-icon--large: 90px;
+    --logo-text--large: 65px;
+
+    display: flex;
+    align-items: center;
+
+    svg {
+      flex: 0 0 auto;
+    }
+
+    .ExcalidrawLogo-icon {
+      width: auto;
+      color: var(--color-logo-icon);
+    }
+
+    .ExcalidrawLogo-text {
+      margin-left: 0.75rem;
+      width: auto;
+      color: var(--color-logo-text);
+    }
+
+    &.is-xs {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--xs);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--xs);
+      }
+    }
+
+    &.is-small {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--small);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--small);
+      }
+    }
+
+    &.is-normal {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--normal);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--normal);
+      }
+    }
+
+    &.is-large {
+      .ExcalidrawLogo-icon {
+        height: var(--logo-icon--large);
+      }
+
+      .ExcalidrawLogo-text {
+        height: var(--logo-text--large);
+      }
+    }
+  }
+}

src/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -3,8 +3,9 @@ import { getShortcutFromShortcutName } from "../../actions/shortcuts";
 import { t, useI18n } from "../../i18n";
 import { useDevice, useExcalidrawActionManager } from "../App";
 import { useTunnels } from "../../context/tunnels";
-import { ExcalLogo, HelpIcon, LoadIcon, usersIcon } from "../icons";
+import { HelpIcon, LoadIcon, usersIcon } from "../icons";
 import { useUIAppState } from "../../context/ui-appState";
+import { ExcalidrawLogo } from "../ExcalidrawLogo";
 
 const WelcomeScreenMenuItemContent = ({
   icon,
@@ -109,7 +110,7 @@ Center.displayName = "Center";
 const Logo = ({ children }: { children?: React.ReactNode }) => {
   return (
     <div className="welcome-screen-center__logo virgil welcome-screen-decor">
-      {children || <>{ExcalLogo} Excalidraw</>}
+      {children || <ExcalidrawLogo withText />}
     </div>
   );
 };

src/components/welcome-screen/WelcomeScreen.scss

@@ -10,6 +10,13 @@
     pointer-events: none;
 
     color: var(--color-gray-40);
+
+    a {
+      --color: var(--color-primary);
+      color: var(--color);
+      text-decoration: none;
+      margin-bottom: -6px;
+    }
   }
 
   &.theme--dark {
@@ -136,11 +143,6 @@
     align-items: center;
     column-gap: 0.75rem;
     font-size: 2.25rem;
-
-    svg {
-      width: 1.625rem;
-      height: auto;
-    }
   }
 
   .welcome-screen-center__heading {

src/css/theme.scss

@@ -126,6 +126,9 @@
   --color-success: #268029;
   --color-success-lighter: #cafccc;
 
+  --color-logo-icon: var(--color-primary);
+  --color-logo-text: #190064;
+
   --border-radius-md: 0.375rem;
   --border-radius-lg: 0.5rem;
 
@@ -219,5 +222,7 @@
     --color-muted-background-darker: var(--color-gray-20);
 
     --color-promo: #d297ff;
+
+    --color-logo-text: #e2dfff;
   }
 }

src/excalidraw-app/components/ExportToExcalidrawPlus.tsx

@@ -7,7 +7,6 @@ import { FileId, NonDeletedExcalidrawElement } from "../../element/types";
 import { AppState, BinaryFileData, BinaryFiles } from "../../types";
 import { nanoid } from "nanoid";
 import { useI18n } from "../../i18n";
-import { excalidrawPlusIcon } from "./icons";
 import { encryptData, generateEncryptionKey } from "../../data/encryption";
 import { isInitializedImageElement } from "../../element/typeChecks";
 import { FILE_UPLOAD_MAX_BYTES } from "../app_constants";
@@ -15,6 +14,7 @@ import { encodeFilesForUpload } from "../data/FileManager";
 import { MIME_TYPES } from "../../constants";
 import { trackEvent } from "../../analytics";
 import { getFrame } from "../../utils";
+import { ExcalidrawLogo } from "../../components/ExcalidrawLogo";
 
 export const exportToExcalidrawPlus = async (
   elements: readonly NonDeletedExcalidrawElement[],
@@ -82,7 +82,15 @@ export const ExportToExcalidrawPlus: React.FC<{
   const { t } = useI18n();
   return (
     <Card color="primary">
-      <div className="Card-icon">{excalidrawPlusIcon}</div>
+      <div className="Card-icon">
+        <ExcalidrawLogo
+          style={{
+            [`--color-logo-icon` as any]: "#fff",
+            width: "2.8rem",
+            height: "2.8rem",
+          }}
+        />
+      </div>
       <h2>Excalidraw+</h2>
       <div className="Card-details">
         {t("exportDialog.excalidrawplus_description")}

vite.config.ts

@@ -104,8 +104,8 @@ export default defineConfig({
           "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
         icons: [
           {
-            src: "logo-180x180.png",
-            sizes: "180x180",
+            src: "android-chrome-192x192.png",
+            sizes: "192x192",
             type: "image/png",
           },
           {