@excalidraw/excalidraw 0.17.1-7441-0269e5a → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/main-menu/DefaultItems.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { useI18n } from "../../i18n";
+import { useExcalidrawSetAppState, useExcalidrawActionManager, useExcalidrawElements, useAppProps, } from "../App";
+import { ExportIcon, ExportImageIcon, HelpIcon, LoadIcon, MoonIcon, save, SunIcon, TrashIcon, usersIcon, } from "../icons";
+import { GithubIcon, DiscordIcon, TwitterIcon } from "../icons";
+import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
+import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
+import { actionClearCanvas, actionLoadScene, actionSaveToActiveFile, actionShortcuts, actionToggleTheme, } from "../../actions";
+import "./DefaultItems.scss";
+import clsx from "clsx";
+import { useSetAtom } from "jotai";
+import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
+import { jotaiScope } from "../../jotai";
+import { useUIAppState } from "../../context/ui-appState";
+import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
+import Trans from "../Trans";
+export const LoadScene = () => {
+    const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    const elements = useExcalidrawElements();
+    if (!actionManager.isActionEnabled(actionLoadScene)) {
+        return null;
+    }
+    const handleSelect = async () => {
+        if (!elements.length ||
+            (await openConfirmModal({
+                title: t("overwriteConfirm.modal.loadFromFile.title"),
+                actionLabel: t("overwriteConfirm.modal.loadFromFile.button"),
+                color: "warning",
+                description: (_jsx(Trans, { i18nKey: "overwriteConfirm.modal.loadFromFile.description", bold: (text) => _jsx("strong", { children: text }), br: () => _jsx("br", {}) })),
+            }))) {
+            actionManager.executeAction(actionLoadScene);
+        }
+    };
+    return (_jsx(DropdownMenuItem, { icon: LoadIcon, onSelect: handleSelect, "data-testid": "load-button", shortcut: getShortcutFromShortcutName("loadScene"), "aria-label": t("buttons.load"), children: t("buttons.load") }));
+};
+LoadScene.displayName = "LoadScene";
+export const SaveToActiveFile = () => {
+    const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    if (!actionManager.isActionEnabled(actionSaveToActiveFile)) {
+        return null;
+    }
+    return (_jsx(DropdownMenuItem, { shortcut: getShortcutFromShortcutName("saveScene"), "data-testid": "save-button", onSelect: () => actionManager.executeAction(actionSaveToActiveFile), icon: save, "aria-label": `${t("buttons.save")}`, children: `${t("buttons.save")}` }));
+};
+SaveToActiveFile.displayName = "SaveToActiveFile";
+export const SaveAsImage = () => {
+    const setAppState = useExcalidrawSetAppState();
+    const { t } = useI18n();
+    return (_jsx(DropdownMenuItem, { icon: ExportImageIcon, "data-testid": "image-export-button", onSelect: () => setAppState({ openDialog: { name: "imageExport" } }), shortcut: getShortcutFromShortcutName("imageExport"), "aria-label": t("buttons.exportImage"), children: t("buttons.exportImage") }));
+};
+SaveAsImage.displayName = "SaveAsImage";
+export const Help = () => {
+    const { t } = useI18n();
+    const actionManager = useExcalidrawActionManager();
+    return (_jsx(DropdownMenuItem, { "data-testid": "help-menu-item", icon: HelpIcon, onSelect: () => actionManager.executeAction(actionShortcuts), shortcut: "?", "aria-label": t("helpDialog.title"), children: t("helpDialog.title") }));
+};
+Help.displayName = "Help";
+export const ClearCanvas = () => {
+    const { t } = useI18n();
+    const setActiveConfirmDialog = useSetAtom(activeConfirmDialogAtom, jotaiScope);
+    const actionManager = useExcalidrawActionManager();
+    if (!actionManager.isActionEnabled(actionClearCanvas)) {
+        return null;
+    }
+    return (_jsx(DropdownMenuItem, { icon: TrashIcon, onSelect: () => setActiveConfirmDialog("clearCanvas"), "data-testid": "clear-canvas-button", "aria-label": t("buttons.clearReset"), children: t("buttons.clearReset") }));
+};
+ClearCanvas.displayName = "ClearCanvas";
+export const ToggleTheme = () => {
+    const { t } = useI18n();
+    const appState = useUIAppState();
+    const actionManager = useExcalidrawActionManager();
+    if (!actionManager.isActionEnabled(actionToggleTheme)) {
+        return null;
+    }
+    return (_jsx(DropdownMenuItem, { onSelect: (event) => {
+            // do not close the menu when changing theme
+            event.preventDefault();
+            return actionManager.executeAction(actionToggleTheme);
+        }, icon: appState.theme === "dark" ? SunIcon : MoonIcon, "data-testid": "toggle-dark-mode", shortcut: getShortcutFromShortcutName("toggleTheme"), "aria-label": appState.theme === "dark"
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode"), children: appState.theme === "dark"
+            ? t("buttons.lightMode")
+            : t("buttons.darkMode") }));
+};
+ToggleTheme.displayName = "ToggleTheme";
+export const ChangeCanvasBackground = () => {
+    const { t } = useI18n();
+    const appState = useUIAppState();
+    const actionManager = useExcalidrawActionManager();
+    const appProps = useAppProps();
+    if (appState.viewModeEnabled ||
+        !appProps.UIOptions.canvasActions.changeViewBackgroundColor) {
+        return null;
+    }
+    return (_jsxs("div", { style: { marginTop: "0.5rem" }, children: [_jsx("div", { "data-testid": "canvas-background-label", style: { fontSize: ".75rem", marginBottom: ".5rem" }, children: t("labels.canvasBackground") }), _jsx("div", { style: { padding: "0 0.625rem" }, children: actionManager.renderAction("changeViewBackgroundColor") })] }));
+};
+ChangeCanvasBackground.displayName = "ChangeCanvasBackground";
+export const Export = () => {
+    const { t } = useI18n();
+    const setAppState = useExcalidrawSetAppState();
+    return (_jsx(DropdownMenuItem, { icon: ExportIcon, onSelect: () => {
+            setAppState({ openDialog: { name: "jsonExport" } });
+        }, "data-testid": "json-export-button", "aria-label": t("buttons.export"), children: t("buttons.export") }));
+};
+Export.displayName = "Export";
+export const Socials = () => (_jsxs(_Fragment, { children: [_jsx(DropdownMenuItemLink, { icon: GithubIcon, href: "https://github.com/excalidraw/excalidraw", "aria-label": "GitHub", children: "GitHub" }), _jsx(DropdownMenuItemLink, { icon: DiscordIcon, href: "https://discord.gg/UexuTaE", "aria-label": "Discord", children: "Discord" }), _jsx(DropdownMenuItemLink, { icon: TwitterIcon, href: "https://twitter.com/excalidraw", "aria-label": "Twitter", children: "Twitter" })] }));
+Socials.displayName = "Socials";
+export const LiveCollaborationTrigger = ({ onSelect, isCollaborating, }) => {
+    const { t } = useI18n();
+    return (_jsx(DropdownMenuItem, { "data-testid": "collab-button", icon: usersIcon, className: clsx({
+            "active-collab": isCollaborating,
+        }), onSelect: onSelect, children: t("labels.liveCollaboration") }));
+};
+LiveCollaborationTrigger.displayName = "LiveCollaborationTrigger";

package/dist/packages/excalidraw/components/main-menu/DefaultItems.scss

@@ -0,0 +1,21 @@
+.excalidraw {
+  .ActiveFile {
+    .ActiveFile__fileName {
+      display: flex;
+      align-items: center;
+
+      span {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        width: 9.3em;
+      }
+
+      svg {
+        width: 1.15em;
+        margin-inline-end: 0.3em;
+        transform: scaleY(0.9);
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/main-menu/MainMenu.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDevice, useExcalidrawSetAppState } from "../App";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+import * as DefaultItems from "./DefaultItems";
+import { UserList } from "../UserList";
+import { t } from "../../i18n";
+import { HamburgerMenuIcon } from "../icons";
+import { withInternalFallback } from "../hoc/withInternalFallback";
+import { composeEventHandlers } from "../../utils";
+import { useTunnels } from "../../context/tunnels";
+import { useUIAppState } from "../../context/ui-appState";
+const MainMenu = Object.assign(withInternalFallback("MainMenu", ({ children, onSelect, }) => {
+    const { MainMenuTunnel } = useTunnels();
+    const device = useDevice();
+    const appState = useUIAppState();
+    const setAppState = useExcalidrawSetAppState();
+    const onClickOutside = device.editor.isMobile
+        ? undefined
+        : () => setAppState({ openMenu: null });
+    return (_jsx(MainMenuTunnel.In, { children: _jsxs(DropdownMenu, { open: appState.openMenu === "canvas", children: [_jsx(DropdownMenu.Trigger, { onToggle: () => {
+                        setAppState({
+                            openMenu: appState.openMenu === "canvas" ? null : "canvas",
+                        });
+                    }, "data-testid": "main-menu-trigger", className: "main-menu-trigger", children: HamburgerMenuIcon }), _jsxs(DropdownMenu.Content, { onClickOutside: onClickOutside, onSelect: composeEventHandlers(onSelect, () => {
+                        setAppState({ openMenu: null });
+                    }), children: [children, device.editor.isMobile && appState.collaborators.size > 0 && (_jsxs("fieldset", { className: "UserList-Wrapper", children: [_jsx("legend", { children: t("labels.collaborators") }), _jsx(UserList, { mobile: true, collaborators: appState.collaborators, userToFollow: appState.userToFollow?.socketId || null })] }))] })] }) }));
+}), {
+    Trigger: DropdownMenu.Trigger,
+    Item: DropdownMenu.Item,
+    ItemLink: DropdownMenu.ItemLink,
+    ItemCustom: DropdownMenu.ItemCustom,
+    Group: DropdownMenu.Group,
+    Separator: DropdownMenu.Separator,
+    DefaultItems,
+});
+export default MainMenu;

package/dist/packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { actionLoadScene, actionShortcuts } from "../../actions";
+import { getShortcutFromShortcutName } from "../../actions/shortcuts";
+import { t, useI18n } from "../../i18n";
+import { useDevice, useExcalidrawActionManager } from "../App";
+import { useTunnels } from "../../context/tunnels";
+import { HelpIcon, LoadIcon, usersIcon } from "../icons";
+import { useUIAppState } from "../../context/ui-appState";
+import { ExcalidrawLogo } from "../ExcalidrawLogo";
+const WelcomeScreenMenuItemContent = ({ icon, shortcut, children, }) => {
+    const device = useDevice();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "welcome-screen-menu-item__icon", children: icon }), _jsx("div", { className: "welcome-screen-menu-item__text", children: children }), shortcut && !device.editor.isMobile && (_jsx("div", { className: "welcome-screen-menu-item__shortcut", children: shortcut }))] }));
+};
+WelcomeScreenMenuItemContent.displayName = "WelcomeScreenMenuItemContent";
+const WelcomeScreenMenuItem = ({ onSelect, children, icon, shortcut, className = "", ...props }) => {
+    return (_jsx("button", { ...props, type: "button", className: `welcome-screen-menu-item ${className}`, onClick: onSelect, children: _jsx(WelcomeScreenMenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+};
+WelcomeScreenMenuItem.displayName = "WelcomeScreenMenuItem";
+const WelcomeScreenMenuItemLink = ({ children, href, icon, shortcut, className = "", ...props }) => {
+    return (_jsx("a", { ...props, className: `welcome-screen-menu-item ${className}`, href: href, target: "_blank", rel: "noreferrer", children: _jsx(WelcomeScreenMenuItemContent, { icon: icon, shortcut: shortcut, children: children }) }));
+};
+WelcomeScreenMenuItemLink.displayName = "WelcomeScreenMenuItemLink";
+const Center = ({ children }) => {
+    const { WelcomeScreenCenterTunnel } = useTunnels();
+    return (_jsx(WelcomeScreenCenterTunnel.In, { children: _jsx("div", { className: "welcome-screen-center", children: children || (_jsxs(_Fragment, { children: [_jsx(Logo, {}), _jsx(Heading, { children: t("welcomeScreen.defaults.center_heading") }), _jsxs(Menu, { children: [_jsx(MenuItemLoadScene, {}), _jsx(MenuItemHelp, {})] })] })) }) }));
+};
+Center.displayName = "Center";
+const Logo = ({ children }) => {
+    return (_jsx("div", { className: "welcome-screen-center__logo virgil welcome-screen-decor", children: children || _jsx(ExcalidrawLogo, { withText: true }) }));
+};
+Logo.displayName = "Logo";
+const Heading = ({ children }) => {
+    return (_jsx("div", { className: "welcome-screen-center__heading welcome-screen-decor virgil", children: children }));
+};
+Heading.displayName = "Heading";
+const Menu = ({ children }) => {
+    return _jsx("div", { className: "welcome-screen-menu", children: children });
+};
+Menu.displayName = "Menu";
+const MenuItemHelp = () => {
+    const actionManager = useExcalidrawActionManager();
+    return (_jsx(WelcomeScreenMenuItem, { onSelect: () => actionManager.executeAction(actionShortcuts), shortcut: "?", icon: HelpIcon, children: t("helpDialog.title") }));
+};
+MenuItemHelp.displayName = "MenuItemHelp";
+const MenuItemLoadScene = () => {
+    const appState = useUIAppState();
+    const actionManager = useExcalidrawActionManager();
+    if (appState.viewModeEnabled) {
+        return null;
+    }
+    return (_jsx(WelcomeScreenMenuItem, { onSelect: () => actionManager.executeAction(actionLoadScene), shortcut: getShortcutFromShortcutName("loadScene"), icon: LoadIcon, children: t("buttons.load") }));
+};
+MenuItemLoadScene.displayName = "MenuItemLoadScene";
+const MenuItemLiveCollaborationTrigger = ({ onSelect, }) => {
+    const { t } = useI18n();
+    return (_jsx(WelcomeScreenMenuItem, { shortcut: null, onSelect: onSelect, icon: usersIcon, children: t("labels.liveCollaboration") }));
+};
+MenuItemLiveCollaborationTrigger.displayName =
+    "MenuItemLiveCollaborationTrigger";
+// -----------------------------------------------------------------------------
+Center.Logo = Logo;
+Center.Heading = Heading;
+Center.Menu = Menu;
+Center.MenuItem = WelcomeScreenMenuItem;
+Center.MenuItemLink = WelcomeScreenMenuItemLink;
+Center.MenuItemHelp = MenuItemHelp;
+Center.MenuItemLoadScene = MenuItemLoadScene;
+Center.MenuItemLiveCollaborationTrigger = MenuItemLiveCollaborationTrigger;
+export { Center };

package/dist/packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from "../../i18n";
+import { useTunnels } from "../../context/tunnels";
+import { WelcomeScreenHelpArrow, WelcomeScreenMenuArrow, WelcomeScreenTopToolbarArrow, } from "../icons";
+const MenuHint = ({ children }) => {
+    const { WelcomeScreenMenuHintTunnel } = useTunnels();
+    return (_jsx(WelcomeScreenMenuHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu", children: [WelcomeScreenMenuArrow, _jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.menuHint") })] }) }));
+};
+MenuHint.displayName = "MenuHint";
+const ToolbarHint = ({ children }) => {
+    const { WelcomeScreenToolbarHintTunnel } = useTunnels();
+    return (_jsx(WelcomeScreenToolbarHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar", children: [_jsx("div", { className: "welcome-screen-decor-hint__label", children: children || t("welcomeScreen.defaults.toolbarHint") }), WelcomeScreenTopToolbarArrow] }) }));
+};
+ToolbarHint.displayName = "ToolbarHint";
+const HelpHint = ({ children }) => {
+    const { WelcomeScreenHelpHintTunnel } = useTunnels();
+    return (_jsx(WelcomeScreenHelpHintTunnel.In, { children: _jsxs("div", { className: "virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help", children: [_jsx("div", { children: children || t("welcomeScreen.defaults.helpHint") }), WelcomeScreenHelpArrow] }) }));
+};
+HelpHint.displayName = "HelpHint";
+export { HelpHint, MenuHint, ToolbarHint };

package/dist/packages/excalidraw/components/welcome-screen/WelcomeScreen.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Center } from "./WelcomeScreen.Center";
+import { MenuHint, ToolbarHint, HelpHint } from "./WelcomeScreen.Hints";
+import "./WelcomeScreen.scss";
+const WelcomeScreen = (props) => {
+    return (_jsx(_Fragment, { children: props.children || (_jsxs(_Fragment, { children: [_jsx(Center, {}), _jsx(MenuHint, {}), _jsx(ToolbarHint, {}), _jsx(HelpHint, {})] })) }));
+};
+WelcomeScreen.displayName = "WelcomeScreen";
+WelcomeScreen.Center = Center;
+WelcomeScreen.Hints = { MenuHint, ToolbarHint, HelpHint };
+export default WelcomeScreen;

package/dist/packages/excalidraw/components/welcome-screen/WelcomeScreen.scss

@@ -0,0 +1,285 @@
+.excalidraw {
+  .virgil {
+    font-family: "Virgil";
+  }
+
+  // WelcomeSreen common
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-decor {
+    pointer-events: none;
+
+    color: var(--color-gray-40);
+
+    a {
+      --color: var(--color-primary);
+      color: var(--color);
+      text-decoration: none;
+      margin-bottom: -6px;
+    }
+  }
+
+  &.theme--dark {
+    .welcome-screen-decor {
+      color: var(--color-gray-60);
+    }
+  }
+
+  // WelcomeScreen.Hints
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-decor-hint {
+    @media (max-height: 599px) {
+      display: none !important;
+    }
+
+    @media (max-width: 1024px), (max-width: 800px) {
+      .welcome-screen-decor {
+        &--help,
+        &--menu {
+          display: none;
+        }
+      }
+    }
+
+    &--help {
+      display: flex;
+      position: absolute;
+      right: 0;
+      bottom: 100%;
+
+      :root[dir="rtl"] & {
+        left: 0;
+        right: auto;
+      }
+
+      svg {
+        margin-top: 0.5rem;
+        width: 85px;
+        height: 71px;
+
+        transform: scaleX(-1) rotate(80deg);
+
+        :root[dir="rtl"] & {
+          transform: rotate(80deg);
+        }
+      }
+    }
+
+    &--toolbar {
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      margin-top: 2.5rem;
+      display: flex;
+      align-items: baseline;
+
+      .welcome-screen-decor-hint__label {
+        width: 120px;
+        position: relative;
+        top: -0.5rem;
+      }
+
+      svg {
+        width: 38px;
+        height: 78px;
+
+        :root[dir="rtl"] & {
+          transform: scaleX(-1);
+        }
+      }
+    }
+
+    &--menu {
+      position: absolute;
+      width: 320px;
+      font-size: 1rem;
+
+      top: 100%;
+      margin-top: 0.25rem;
+      margin-inline-start: 0.6rem;
+
+      display: flex;
+      align-items: flex-end;
+      gap: 0.5rem;
+
+      svg {
+        width: 41px;
+        height: 94px;
+
+        :root[dir="rtl"] & {
+          transform: scaleX(-1);
+        }
+      }
+
+      @media (max-width: 860px) {
+        .welcome-screen-decor-hint__label {
+          max-width: 160px;
+        }
+      }
+    }
+  }
+
+  // WelcomeSreen.Center
+  // ---------------------------------------------------------------------------
+
+  .welcome-screen-center {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    pointer-events: none;
+    left: 1rem;
+    top: 1rem;
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  .welcome-screen-center__logo {
+    display: flex;
+    align-items: center;
+    column-gap: 0.75rem;
+    font-size: 2.25rem;
+  }
+
+  .welcome-screen-center__heading {
+    font-size: 1.125rem;
+    text-align: center;
+  }
+
+  .welcome-screen-menu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .welcome-screen-menu-item {
+    box-sizing: border-box;
+
+    pointer-events: var(--ui-pointerEvents);
+
+    color: var(--color-gray-50);
+    font-size: 0.875rem;
+
+    width: 100%;
+    min-width: 300px;
+    max-width: 400px;
+    display: grid;
+    align-items: center;
+    justify-content: space-between;
+
+    background: none;
+    border: 1px solid transparent;
+
+    padding: 0.75rem;
+
+    border-radius: var(--border-radius-md);
+
+    grid-template-columns: calc(var(--default-icon-size) + 0.5rem) 1fr 3rem;
+
+    &__text {
+      display: flex;
+      align-items: center;
+      margin-right: auto;
+      text-align: left;
+      column-gap: 0.5rem;
+    }
+
+    &__icon {
+      width: var(--default-icon-size);
+      height: var(--default-icon-size);
+    }
+
+    &__shortcut {
+      margin-left: auto;
+      color: var(--color-gray-40);
+      font-size: 0.75rem;
+    }
+  }
+
+  .welcome-screen-menu-item:hover {
+    text-decoration: none;
+    background: var(--button-hover-bg);
+
+    .welcome-screen-menu-item__shortcut {
+      color: var(--color-gray-50);
+    }
+
+    .welcome-screen-menu-item__text {
+      color: var(--color-gray-100);
+    }
+  }
+
+  .welcome-screen-menu-item:active {
+    background: var(--button-hover-bg);
+    border-color: var(--color-brand-active);
+
+    .welcome-screen-menu-item__shortcut {
+      color: var(--color-gray-50);
+    }
+
+    .welcome-screen-menu-item__text {
+      color: var(--color-gray-100);
+    }
+
+    &--promo {
+      color: var(--color-promo) !important;
+
+      &:hover {
+        .welcome-screen-menu-item__text {
+          color: var(--color-promo) !important;
+        }
+      }
+    }
+  }
+
+  &.theme--dark {
+    .welcome-screen-menu-item {
+      color: var(--color-gray-60);
+
+      &__shortcut {
+        color: var(--color-gray-60);
+      }
+    }
+
+    .welcome-screen-menu-item:hover {
+      background-color: var(--color-surface-low);
+      .welcome-screen-menu-item__shortcut {
+        color: var(--color-gray-50);
+      }
+
+      .welcome-screen-menu-item__text {
+        color: var(--color-gray-10);
+      }
+    }
+
+    .welcome-screen-menu-item:active {
+      .welcome-screen-menu-item__text {
+        color: var(--color-gray-10);
+      }
+    }
+  }
+
+  @media (max-height: 599px) {
+    .welcome-screen-center {
+      margin-top: 4rem;
+    }
+  }
+  @media (min-height: 600px) and (max-height: 900px) {
+    .welcome-screen-center {
+      margin-top: 8rem;
+    }
+  }
+  @media (max-height: 500px), (max-width: 320px) {
+    .welcome-screen-center {
+      display: none;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+}