diff --git a/.github/assets/logo.png b/.github/assets/logo.png deleted file mode 100644 index d9b8953e..00000000 Binary files a/.github/assets/logo.png and /dev/null differ diff --git a/README.md b/README.md index 48529165..3a3d1c4d 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ - - Excalidraw + + Excalidraw diff --git a/dev-docs/docusaurus.config.js b/dev-docs/docusaurus.config.js index 390c619a..706101f6 100644 --- a/dev-docs/docusaurus.config.js +++ b/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, diff --git a/dev-docs/static/img/favicon.ico b/dev-docs/static/img/favicon.ico index 518c8962..e40a39d8 100644 Binary files a/dev-docs/static/img/favicon.ico and b/dev-docs/static/img/favicon.ico differ diff --git a/dev-docs/static/img/favicon.png b/dev-docs/static/img/favicon.png new file mode 100644 index 00000000..041545cb Binary files /dev/null and b/dev-docs/static/img/favicon.png differ diff --git a/dev-docs/static/img/logo.svg b/dev-docs/static/img/logo.svg index 8770e525..ee996762 100644 --- a/dev-docs/static/img/logo.svg +++ b/dev-docs/static/img/logo.svg @@ -1,4 +1,7 @@ - - - + + + + + + diff --git a/dev-docs/static/img/og-image-2.png b/dev-docs/static/img/og-image-2.png new file mode 100644 index 00000000..9c341b9e Binary files /dev/null and b/dev-docs/static/img/og-image-2.png differ diff --git a/dev-docs/static/img/og-image-sm.png b/dev-docs/static/img/og-image-sm.png deleted file mode 100644 index 5e88dba0..00000000 Binary files a/dev-docs/static/img/og-image-sm.png and /dev/null differ diff --git a/index.html b/index.html index cbdc7706..b1e0f2ab 100644 --- a/index.html +++ b/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." /> - + @@ -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." /> - + @@ -51,7 +51,7 @@ /> @@ -99,7 +99,9 @@ <% } %> - + + + diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 00000000..34c7c2fc Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 00000000..24ea4de7 Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png index 40af4de2..bcbbeaf9 100644 Binary files a/public/apple-touch-icon.png and b/public/apple-touch-icon.png differ diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 00000000..eead5736 Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 00000000..041545cb Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index 518c8962..e40a39d8 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 00000000..ee996762 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/logo-180x180.png b/public/logo-180x180.png deleted file mode 100644 index 9aa9b103..00000000 Binary files a/public/logo-180x180.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json index 85dc878f..64f7e5ba 100644 --- a/public/manifest.json +++ b/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" }, { diff --git a/public/maskable_icon_x192.png b/public/maskable_icon_x192.png new file mode 100644 index 00000000..321f0bb7 Binary files /dev/null and b/public/maskable_icon_x192.png differ diff --git a/public/maskable_icon_x512.png b/public/maskable_icon_x512.png new file mode 100644 index 00000000..0a620acf Binary files /dev/null and b/public/maskable_icon_x512.png differ diff --git a/public/og-fb-v1.png b/public/og-fb-v1.png deleted file mode 100644 index b626ee60..00000000 Binary files a/public/og-fb-v1.png and /dev/null differ diff --git a/public/og-general-v1.png b/public/og-general-v1.png deleted file mode 100644 index 0a6fbb34..00000000 Binary files a/public/og-general-v1.png and /dev/null differ diff --git a/public/og-image-2.png b/public/og-image-2.png new file mode 100644 index 00000000..4fe1c83c Binary files /dev/null and b/public/og-image-2.png differ diff --git a/public/og-image-sm.png b/public/og-image-sm.png deleted file mode 100644 index 5e88dba0..00000000 Binary files a/public/og-image-sm.png and /dev/null differ diff --git a/public/og-image.png b/public/og-image.png deleted file mode 100644 index 8f05f7ba..00000000 Binary files a/public/og-image.png and /dev/null differ diff --git a/public/og-twitter-v1.png b/public/og-twitter-v1.png deleted file mode 100644 index e7834c33..00000000 Binary files a/public/og-twitter-v1.png and /dev/null differ diff --git a/src/components/ExcalidrawLogo.scss b/src/components/ExcalidrawLogo.scss new file mode 100644 index 00000000..e59e8a90 --- /dev/null +++ b/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); + } + } + } +} diff --git a/src/components/ExcalidrawLogo.tsx b/src/components/ExcalidrawLogo.tsx new file mode 100644 index 00000000..01d07fc5 --- /dev/null +++ b/src/components/ExcalidrawLogo.tsx @@ -0,0 +1,69 @@ +import "./ExcalidrawLogo.scss"; + +const LogoIcon = () => ( + + + +); + +const LogoText = () => ( + + + + + + +); + +type LogoSize = "xs" | "small" | "normal" | "large" | "custom"; + +interface LogoProps { + size?: LogoSize; + withText?: boolean; + style?: React.CSSProperties; + /** + * If true, the logo will not be wrapped in a Link component. + * The link prop will be ignored as well. + * It will merely be a plain div. + */ + isNotLink?: boolean; +} + +export const ExcalidrawLogo = ({ + style, + size = "small", + withText, +}: LogoProps) => { + return ( +
+ + {withText && } +
+ ); +}; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index c24b61d0..97fc2530 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -255,14 +255,12 @@ export const WelcomeScreenTopToolbarArrow = createIcon( // custom export const ExcalLogo = createIcon( - , - { width: 26, height: 62, fill: "none" }, + { width: 40, height: 40, fill: "none" }, ); // custom diff --git a/src/components/welcome-screen/WelcomeScreen.Center.tsx b/src/components/welcome-screen/WelcomeScreen.Center.tsx index 2d43761e..46a51e3f 100644 --- a/src/components/welcome-screen/WelcomeScreen.Center.tsx +++ b/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 (
- {children || <>{ExcalLogo} Excalidraw} + {children || }
); }; diff --git a/src/components/welcome-screen/WelcomeScreen.scss b/src/components/welcome-screen/WelcomeScreen.scss index f856d459..a1b88d8b 100644 --- a/src/components/welcome-screen/WelcomeScreen.scss +++ b/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 { diff --git a/src/css/theme.scss b/src/css/theme.scss index 643f9346..1db22313 100644 --- a/src/css/theme.scss +++ b/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; } } diff --git a/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx b/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx index 8e6342d3..956becca 100644 --- a/src/excalidraw-app/components/ExportToExcalidrawPlus.tsx +++ b/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 ( -
{excalidrawPlusIcon}
+
+ +

Excalidraw+

{t("exportDialog.excalidrawplus_description")} diff --git a/src/excalidraw-app/components/icons.tsx b/src/excalidraw-app/components/icons.tsx deleted file mode 100644 index 5e701ce8..00000000 --- a/src/excalidraw-app/components/icons.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createIcon } from "../../components/icons"; - -export const excalidrawPlusIcon = createIcon( - <> - - - - , - { width: 89, height: 131, style: { transform: "translateX(4px)" } }, -); diff --git a/src/tests/__snapshots__/MobileMenu.test.tsx.snap b/src/tests/__snapshots__/MobileMenu.test.tsx.snap index d85989e6..c33b4a8d 100644 --- a/src/tests/__snapshots__/MobileMenu.test.tsx.snap +++ b/src/tests/__snapshots__/MobileMenu.test.tsx.snap @@ -7,28 +7,45 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u