From 6b4ec849724a3a7023c51531ddea7b73087ed767 Mon Sep 17 00:00:00 2001 From: Sean Hatfield Date: Mon, 14 Oct 2024 18:11:50 -0700 Subject: [PATCH] update all modals + normalize styles (#2471) --- .../src/components/ModalWrapper/index.jsx | 6 +- .../Connectors/Confluence/index.jsx | 10 +- .../Connectors/Github/index.jsx | 10 +- .../Connectors/Gitlab/index.jsx | 16 +- .../Connectors/WebsiteDepth/index.jsx | 6 +- .../Connectors/Youtube/index.jsx | 2 +- .../ManageWorkspace/DataConnectors/index.jsx | 2 +- .../Directory/NewFolderModal/index.jsx | 61 ++-- .../Documents/Directory/index.jsx | 6 +- .../Documents/UploadFile/index.jsx | 6 +- .../Documents/WorkspaceDirectory/index.jsx | 8 +- .../Modals/ManageWorkspace/index.jsx | 22 +- .../src/components/Modals/NewWorkspace.jsx | 44 +-- .../UserMenu/AccountModal/index.jsx | 213 +++++++------- .../components/UserMenu/UserButton/index.jsx | 6 +- .../ChatHistory/Citation/index.jsx | 10 +- frontend/src/index.css | 6 +- .../NewConnectionModal.jsx | 262 +++++++++--------- .../Invitations/NewInviteModal/index.jsx | 145 +++++----- .../pages/Admin/Users/NewUserModal/index.jsx | 65 ++--- .../Users/UserRow/EditUserModal/index.jsx | 65 ++--- .../Workspaces/NewWorkspaceModal/index.jsx | 61 ++-- .../ApiKeys/NewApiKeyModal/index.jsx | 81 +++--- .../NewBrowserExtensionApiKeyModal/index.jsx | 82 +++--- .../EmbedRow/CodeSnippetModal/index.jsx | 31 +-- .../EmbedRow/EditEmbedModal/index.jsx | 63 ++--- .../EmbedConfigs/NewEmbedModal/index.jsx | 67 ++--- .../AgentLLMSelection/AgentLLMItem/index.jsx | 42 +-- .../WorkspaceLLMItem/index.jsx | 42 +-- frontend/tailwind.config.js | 3 + 30 files changed, 734 insertions(+), 709 deletions(-) diff --git a/frontend/src/components/ModalWrapper/index.jsx b/frontend/src/components/ModalWrapper/index.jsx index b780e5731..7c45c22c5 100644 --- a/frontend/src/components/ModalWrapper/index.jsx +++ b/frontend/src/components/ModalWrapper/index.jsx @@ -1,7 +1,7 @@ import { createPortal } from "react-dom"; /** * @typedef {Object} ModalWrapperProps - * @property {import("react").ReactComponentElement} children - The DOM/JSX to render + * @property {import("react").ReactComponentElement} children - The DOM/JSX to render * @property {boolean} isOpen - Option that renders the modal * @property {boolean} noPortal - (default: false) Used for creating sub-DOM modals that need to be rendered as a child element instead of a modal placed at the root * Note: This can impact the bg-overlay presentation due to conflicting DOM positions so if using this property you should @@ -17,14 +17,14 @@ export default function ModalWrapper({ children, isOpen, noPortal = false }) { if (noPortal) { return ( -
+
{children}
); } return createPortal( -
+
{children}
, document.getElementById("root") diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx index ee0eaf42c..b6d5c648a 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx @@ -69,7 +69,7 @@ export default function ConfluenceOptions() {
@@ -104,7 +102,7 @@ export default function GitlabOptions() {
@@ -224,7 +222,7 @@ function GitLabBranchSelection({ repo, accessToken }) { {allBranches.map((branch) => { return ( @@ -332,4 +330,4 @@ function PATTooltip({ accessToken }) { ); -} +} \ No newline at end of file diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx index e09472313..2049f7762 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx @@ -64,7 +64,7 @@ export default function WebsiteDepthOptions() { @@ -102,7 +102,7 @@ export default function WebsiteDepthOptions() { type="number" name="maxLinks" min="1" - className="border-none bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" + className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5" required={true} defaultValue="20" /> diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx index 43dc7ab71..68609ab29 100644 --- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx @@ -59,7 +59,7 @@ export default function YoutubeOptions() { setSearchQuery(e.target.value)} diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx index 43063e297..419e7b2d9 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/NewFolderModal/index.jsx @@ -29,24 +29,25 @@ export default function NewFolderModal({ closeModal, files, setFiles }) { }; return ( -
-
-
-

- Create New Folder -

+
+
+
+
+

+ Create New Folder +

+
-
-
-
+
+ +
-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx index 75cbedc55..6e4065fb2 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx @@ -197,7 +197,7 @@ function Directory({ type="search" placeholder="Search for document" onChange={handleSearch} - className="search-input bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]" + className="search-input bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder focus:outline-primary-button active:outline-primary-button outline-none text-sm rounded-lg pl-9 pr-2.5 py-2 w-[250px] h-[32px]" />
-
-
+
+

Name

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx index ad977b73b..3cc53757f 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/UploadFile/index.jsx @@ -78,9 +78,9 @@ export default function UploadFile({ return (
@@ -133,7 +133,7 @@ export default function UploadFile({ disabled={fetchingUrl} name="link" type="url" - className="disabled:bg-zinc-600 disabled:text-slate-300 bg-zinc-900 text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-3/4 p-2.5" + className="disabled:bg-theme-settings-input-bg disabled:text-theme-settings-input-placeholder bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-3/4 p-2.5" placeholder={"https://example.com"} autoComplete="off" /> diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx index e9864f12c..28f4fbb78 100644 --- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx @@ -91,8 +91,8 @@ function WorkspaceDirectory({ {workspace.name}
-
-
+
+

Name

@@ -124,8 +124,8 @@ function WorkspaceDirectory({ highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : "" }`} /> -
-
+
+
{!hasChanges && files.items.some((folder) => folder.items.length > 0) ? ( diff --git a/frontend/src/components/Modals/ManageWorkspace/index.jsx b/frontend/src/components/Modals/ManageWorkspace/index.jsx index fe3f539b9..d7c0b31fd 100644 --- a/frontend/src/components/Modals/ManageWorkspace/index.jsx +++ b/frontend/src/components/Modals/ManageWorkspace/index.jsx @@ -68,14 +68,14 @@ const ManageWorkspace = ({ hideModal = noop, providedSlug = null }) => {
-
-
+
+
@@ -102,23 +102,23 @@ export default memo(ManageWorkspace); const ModalTabSwitcher = ({ selectedTab, setSelectedTab }) => { return (
-
+
+ +
+
-
+
-
+
@@ -78,7 +80,7 @@ export default function NewWorkspaceModal({ hideModal = noop }) {
-
+ ); } diff --git a/frontend/src/components/UserMenu/AccountModal/index.jsx b/frontend/src/components/UserMenu/AccountModal/index.jsx index a771b1fca..4a4a12635 100644 --- a/frontend/src/components/UserMenu/AccountModal/index.jsx +++ b/frontend/src/components/UserMenu/AccountModal/index.jsx @@ -4,6 +4,7 @@ import System from "@/models/system"; import { AUTH_USER } from "@/utils/constants"; import showToast from "@/utils/toast"; import { Plus, X } from "@phosphor-icons/react"; +import ModalWrapper from "@/components/ModalWrapper"; export default function AccountModal({ user, hideModal }) { const { pfp, setPfp } = usePfp(); @@ -61,122 +62,128 @@ export default function AccountModal({ user, hideModal }) { }; return ( -
-
-
-

Edit Account

+ +
+
+
+

+ Edit Account +

+
-
-
-
-
-
+ ); } @@ -198,7 +205,7 @@ function LanguagePreference() {
-
-
- - -
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
-
-
-
- -
+

+ {assembleConnectionString({ engine, ...config })} +

- -
-
- - -
-
- - -
-
- -
- - -
-

- {assembleConnectionString({ engine, ...config })} -

-
+
@@ -268,4 +270,4 @@ function DBEngine({ provider, active, onClick }) { /> ); -} +} \ No newline at end of file diff --git a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx index cdeca6e68..b4ac6f7d2 100644 --- a/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx +++ b/frontend/src/pages/Admin/Invitations/NewInviteModal/index.jsx @@ -58,103 +58,104 @@ export default function NewInviteModal({ closeModal }) { }, []); return ( -
-
-
-

- Create new invite -

+
+
+
+
+

+ Create new invite +

+
-
-
-
+
+ +
{error &&

Error: {error}

} {invite && ( )} -

+

After creation you will be able to copy the invite and send it to a new user where they can create an account as the{" "} default role and automatically be added to workspaces selected.

-
- {workspaces.length > 0 && !invite && ( -
-
-
- -

- You can optionally automatically assign the user to the - workspaces below by selecting them. By default, the user - will not have any workspaces visible. You can assign - workspaces later post-invite acceptance. -

-
+ {workspaces.length > 0 && !invite && ( +
+
+
+ +

+ You can optionally automatically assign the user to the + workspaces below by selecting them. By default, the user + will not have any workspaces visible. You can assign + workspaces later post-invite acceptance. +

+
-
- {workspaces.map((workspace) => ( - - ))} +
+ {workspaces.map((workspace) => ( + + ))} +
-
- )} - -
- {!invite ? ( - <> - - - - ) : ( - )} -
- + +
+ {!invite ? ( + <> + + + + ) : ( + + )} +
+ +
); diff --git a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx index 114f04303..f0d13b1d8 100644 --- a/frontend/src/pages/Admin/Users/NewUserModal/index.jsx +++ b/frontend/src/pages/Admin/Users/NewUserModal/index.jsx @@ -22,24 +22,25 @@ export default function NewUserModal({ closeModal }) { const user = userFromStorage(); return ( -
-
-
-

- Add user to instance -

+
+
+
+
+

+ Add user to instance +

+
-
-
-
+
+ +
-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx index aab90a43f..d87189934 100644 --- a/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx +++ b/frontend/src/pages/Admin/Users/UserRow/EditUserModal/index.jsx @@ -22,24 +22,25 @@ export default function EditUserModal({ currentUser, user, closeModal }) { }; return ( -
-
-
-

- Edit {user.username} -

+
+
+
+
+

+ Edit {user.username} +

+
-
-
-
+
+ +
{error &&

Error: {error}

}
-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx index 3d7a53387..ea272c6c6 100644 --- a/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx +++ b/frontend/src/pages/Admin/Workspaces/NewWorkspaceModal/index.jsx @@ -16,24 +16,25 @@ export default function NewWorkspaceModal({ closeModal }) { }; return ( -
-
-
-

- Create new workspace -

+
+
+
+
+

+ Create new workspace +

+
-
-
-
+
+ +
-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx index cde8bdbe6..dbf2f31c3 100644 --- a/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx +++ b/frontend/src/pages/GeneralSettings/ApiKeys/NewApiKeyModal/index.jsx @@ -36,34 +36,35 @@ export default function NewApiKeyModal({ closeModal }) { }, [copied]); return ( -
-
-
-

- Create new API key -

+
+
+
+
+

+ Create new API key +

+
-
-
-
+
+ +
{error &&

Error: {error}

} {apiKey && ( )} -

+

Once created the API key can be used to programmatically access and configure this AnythingLLM instance.

@@ -76,36 +77,36 @@ export default function NewApiKeyModal({ closeModal }) { Read the API documentation →
-
-
- {!apiKey ? ( - <> +
+ {!apiKey ? ( + <> + + + + ) : ( - - - ) : ( - - )} -
- + )} +
+ +
); diff --git a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx index ee3f86786..1e158237e 100644 --- a/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx +++ b/frontend/src/pages/GeneralSettings/BrowserExtensionApiKey/NewBrowserExtensionApiKeyModal/index.jsx @@ -48,30 +48,32 @@ export default function NewBrowserExtensionApiKeyModal({ }, [copied]); return ( -
-
-
-

- New Browser Extension API Key -

+
+
+
+
+

+ New Browser Extension API Key +

+
-
-
-
+
+ +
{error &&

Error: {error}

} {apiKey && ( )} {isMultiUser && ( @@ -81,46 +83,46 @@ export default function NewBrowserExtensionApiKeyModal({ share it cautiously.

)} -

+

After clicking "Create API Key", AnythingLLM will attempt to connect to your browser extension automatically.

-

+

If you see "Connected to AnythingLLM" in the extension, the connection was successful. If not, please copy the connection string and paste it into the extension manually.

-
-
- {!apiKey ? ( - <> +
+ {!apiKey ? ( + <> + + + + ) : ( - - - ) : ( - - )} -
- + )} +
+ +
); diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx index 2a6fb66ee..694893f4a 100644 --- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/CodeSnippetModal/index.jsx @@ -6,32 +6,31 @@ import "highlight.js/styles/github-dark-dimmed.min.css"; export default function CodeSnippetModal({ embed, closeModal }) { return ( -
-
-
-

- Copy your embed code -

+
+
+
+
+

+ Copy your embed code +

+
-
-
-
- -
+
+
+
-
+
diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx index a1b15eef0..65b430930 100644 --- a/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/EmbedRow/EditEmbedModal/index.jsx @@ -30,24 +30,25 @@ export default function EditEmbedModal({ embed, closeModal }) { }; return ( -
-
-
-

- Update embed #{embed.id} -

+
+
+
+
+

+ Update embed #{embed.id} +

+
-
-
-
+
+ +
{error &&

Error: {error}

} -

+

After creating an embed you will be provided a link that you can publish on your website with a simple - + <script> {" "} tag.

-
-
- - -
- +
+ + +
+ +
); diff --git a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx index cbeabcf48..6c4e73de9 100644 --- a/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx +++ b/frontend/src/pages/GeneralSettings/EmbedConfigs/NewEmbedModal/index.jsx @@ -37,24 +37,25 @@ export default function NewEmbedModal({ closeModal }) { }; return ( -
-
-
-

- Create new embed for workspace -

+
+
+
+
+

+ Create new embed for workspace +

+
-
-
-
+
+ +
@@ -85,7 +86,7 @@ export default function NewEmbedModal({ closeModal }) { /> {error &&

Error: {error}

} -

+

After creating an embed you will be provided a link that you can publish on your website with a simple @@ -94,23 +95,23 @@ export default function NewEmbedModal({ closeModal }) { tag.

-
-
- - -
- +
+ + +
+ +
); @@ -144,7 +145,7 @@ export const WorkspaceSelection = ({ defaultValue = null }) => { name="workspace_id" required={true} defaultValue={defaultValue} - className="min-w-[15rem] rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500" + className="min-w-[15rem] rounded-lg bg-theme-settings-input-bg px-4 py-2 text-sm text-white focus:ring-blue-500 focus:border-blue-500" > {workspaces.map((workspace) => { return ( @@ -313,7 +314,7 @@ export const NumberInput = ({ name, title, hint, defaultValue = 0 }) => { e.target.blur()} @@ -345,4 +346,4 @@ export const BooleanInput = ({ name, title, hint, defaultValue = null }) => {
); -}; +}; \ No newline at end of file diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx index e9cb295e4..4f424cedd 100644 --- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx +++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx @@ -55,7 +55,7 @@ export default function WorkspaceLLM({ />
{name}
-
{description}
+
{description}
@@ -102,42 +102,44 @@ function SetupProvider({ // to the parent container form so we don't have nested forms. return createPortal( -
-
-
-

- Setup {LLMOption.name} -

+
+
+
+
+

+ Setup {LLMOption.name} +

+
-
-
-

- To use {LLMOption.name} as this workspace's LLM you need to set - it up first. -

-
{LLMOption.options({ credentialsOnly: true })}
+
+
+

+ To use {LLMOption.name} as this workspace's LLM you need to set + it up first. +

+
{LLMOption.options({ credentialsOnly: true })}
+
-
+
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx index 610298ee0..33379e6a9 100644 --- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx +++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx @@ -55,7 +55,7 @@ export default function WorkspaceLLM({ />
{name}
-
{description}
+
{description}
@@ -102,42 +102,44 @@ function SetupProvider({ // to the parent container form so we don't have nested forms. return createPortal( -
-
-
-

- Setup {LLMOption.name} -

+
+
+
+
+

+ Setup {LLMOption.name} +

+
- -
-

- To use {LLMOption.name} as this workspace's LLM you need to set - it up first. -

-
{LLMOption.options({ credentialsOnly: true })}
+
+
+

+ To use {LLMOption.name} as this workspace's LLM you need to set + it up first. +

+
{LLMOption.options({ credentialsOnly: true })}
+
-
+
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index ec2fbc4ea..61af84d9f 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -91,6 +91,9 @@ export default { text: 'var(--theme-settings-input-text)', } }, + modal: { + border: 'var(--theme-modal-border)', + } }, }, backgroundImage: {