diff --git a/frontend/src/components/ContextualSaveBar/index.jsx b/frontend/src/components/ContextualSaveBar/index.jsx
index aab0b36fe..c94a06c9f 100644
--- a/frontend/src/components/ContextualSaveBar/index.jsx
+++ b/frontend/src/components/ContextualSaveBar/index.jsx
@@ -8,7 +8,7 @@ export default function ContextualSaveBar({
if (!showing) return null;
return (
- <div className="fixed top-0 left-0 right-0 h-14 bg-[#18181B] flex items-center justify-end px-4 z-[999]">
+ <div className="fixed top-0 left-0 right-0 h-14 bg-dark-input flex items-center justify-end px-4 z-[999]">
<div className="absolute ml-4 left-0 md:left-1/2 transform md:-translate-x-1/2 flex items-center gap-x-2">
<Warning size={18} className="text-white" />
<p className="text-white font-medium text-xs">Unsaved Changes</p>
@@ -21,7 +21,7 @@ export default function ContextualSaveBar({
Cancel
</button>
<button
- className="border-none text-[#222628] font-medium text-sm px-[10px] py-[6px] rounded-md bg-[#46C8FF] hover:bg-[#3DB5E8]"
+ className="border-none text-dark-text font-medium text-sm px-[10px] py-[6px] rounded-md bg-primary-button hover:bg-[#3DB5E8]"
onClick={onSave}
>
Save
diff --git a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
index 72b3d73ef..de9413572 100644
--- a/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
+++ b/frontend/src/components/EmbeddingSelection/EmbedderItem/index.jsx
@@ -29,7 +29,7 @@ export default function EmbedderItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
diff --git a/frontend/src/components/LLMSelection/LLMItem/index.jsx b/frontend/src/components/LLMSelection/LLMItem/index.jsx
index e6b643a49..e96c5f3ea 100644
--- a/frontend/src/components/LLMSelection/LLMItem/index.jsx
+++ b/frontend/src/components/LLMSelection/LLMItem/index.jsx
@@ -29,7 +29,7 @@ export default function LLMItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
diff --git a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
index a75a35382..1f1c1fd8b 100644
--- a/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
+++ b/frontend/src/components/Modals/DisplayRecoveryCodeModal/index.jsx
@@ -32,7 +32,7 @@ export default function RecoveryCodeModal({
};
return (
- <div className="inline-block bg-[#2C2F36] rounded-lg text-left overflow-hidden shadow-xl transform transition-all border-2 border-[#BCC9DB]/10 w-[600px] mx-4">
+ <div className="inline-block bg-secondary rounded-lg text-left overflow-hidden shadow-xl transform transition-all border-2 border-[#BCC9DB]/10 w-[600px] mx-4">
<div className="md:py-[35px] md:px-[50px] py-[28px] px-[20px]">
<div className="flex gap-x-2">
<Key size={24} className="text-white" weight="bold" />
@@ -51,7 +51,7 @@ export default function RecoveryCodeModal({
<b className="mt-4">These recovery codes are only shown once!</b>
</p>
<div
- className="bg-[#1C1E21] text-white hover:text-[#46C8FF]
+ className="bg-dark-highlight text-white hover:text-primary-button
flex items-center justify-center rounded-md mt-6 cursor-pointer"
onClick={handleCopyToClipboard}
>
@@ -68,7 +68,7 @@ export default function RecoveryCodeModal({
<div className="flex w-full justify-center items-center p-3 space-x-2 rounded-b border-gray-500/50 -mt-4 mb-4">
<button
type="button"
- className="transition-all duration-300 text-xs md:w-[500px] md:h-[34px] h-[48px] w-full m-2 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] border-2 border-transparent hover:border-[#46C8FF] hover:text-white whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] flex justify-center items-center gap-x-2"
+ className="transition-all duration-300 text-xs md:w-[500px] md:h-[34px] h-[48px] w-full m-2 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] flex justify-center items-center gap-x-2"
onClick={downloadClicked ? handleClose : downloadRecoveryCodes}
>
{downloadClicked ? (
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 52ca7e63d..05d6eabdc 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx
@@ -146,7 +146,7 @@ export default function ConfluenceOptions() {
<button
type="submit"
disabled={loading}
- className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-[#222628] text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
+ className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-dark-text text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
>
{loading ? "Collecting pages..." : "Submit"}
</button>
diff --git a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
index 00b1cc46b..82d0a0a6b 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Github/index.jsx
@@ -146,7 +146,7 @@ export default function GithubOptions() {
<button
type="submit"
disabled={loading}
- className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-[#222628] text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
+ className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-dark-text text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
>
{loading ? "Collecting files..." : "Submit"}
</button>
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 b3fc45453..79cc6f254 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/WebsiteDepth/index.jsx
@@ -116,7 +116,7 @@ export default function WebsiteDepthOptions() {
disabled={loading}
className={`mt-2 w-full ${
loading ? "cursor-not-allowed animate-pulse" : ""
- } justify-center border border-slate-200 px-4 py-2 rounded-lg text-[#222628] text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed`}
+ } justify-center border border-slate-200 px-4 py-2 rounded-lg text-dark-text text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed`}
>
{loading ? "Scraping website..." : "Submit"}
</button>
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 ed18dcd42..97a34f0f6 100644
--- a/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Youtube/index.jsx
@@ -73,7 +73,7 @@ export default function YoutubeOptions() {
<button
type="submit"
disabled={loading}
- className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-[#222628] text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
+ className="mt-2 w-full justify-center border border-slate-200 px-4 py-2 rounded-lg text-dark-text text-sm font-bold items-center flex gap-x-2 bg-slate-200 hover:bg-slate-300 hover:text-slate-800 disabled:bg-slate-300 disabled:cursor-not-allowed"
>
{loading ? "Collecting transcript..." : "Collect transcript"}
</button>
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
index 46c4b7fd0..bf1581e14 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FolderRow/index.jsx
@@ -22,7 +22,7 @@ export default function FolderRow({
<>
<tr
onClick={onRowClick}
- className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-[#1C1E21] hover:bg-sky-500/20 cursor-pointer w-full file-row ${
+ className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 bg-dark-highlight hover:bg-sky-500/20 cursor-pointer w-full file-row ${
selected ? "selected" : ""
}`}
>
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
index c8d942d04..8ad2ed6a5 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
@@ -256,9 +256,9 @@ function Directory({
onClick={() =>
setShowFolderSelection(!showFolderSelection)
}
- className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:bg-neutral-800/80 flex justify-center items-center group"
+ className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-dark-text hover:bg-neutral-800/80 flex justify-center items-center group"
>
- <MoveToFolderIcon className="text-[#222628] group-hover:text-white" />
+ <MoveToFolderIcon className="text-dark-text group-hover:text-white" />
</button>
{showFolderSelection && (
<FolderSelectionPopup
@@ -272,7 +272,7 @@ function Directory({
</div>
<button
onClick={deleteFiles}
- className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-[#222628] hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
+ className="border-none text-sm font-semibold bg-white h-[32px] w-[32px] rounded-lg text-dark-text hover:text-white hover:bg-neutral-800/80 flex justify-center items-center"
>
<Trash size={18} weight="bold" />
</button>
diff --git a/frontend/src/components/Modals/Password/MultiUserAuth.jsx b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
index 441d84261..66b40e064 100644
--- a/frontend/src/components/Modals/Password/MultiUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/MultiUserAuth.jsx
@@ -81,13 +81,13 @@ const RecoveryForm = ({ onSubmit, setShowRecoveryForm }) => {
<div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
<button
type="submit"
- className="md:text-[#46C8FF] md:bg-transparent md:w-[300px] text-[#222628] text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-[#46C8FF] bg-[#46C8FF] focus:z-10 w-full"
+ className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
>
Reset Password
</button>
<button
type="button"
- className="text-white text-sm flex gap-x-1 hover:text-[#46C8FF] hover:underline -mb-8"
+ className="text-white text-sm flex gap-x-1 hover:text-primary-button hover:underline -mb-8"
onClick={() => setShowRecoveryForm(false)}
>
Back to Login
@@ -150,7 +150,7 @@ const ResetPasswordForm = ({ onSubmit }) => {
<div className="flex items-center md:p-12 md:px-0 px-6 mt-12 md:mt-0 space-x-2 border-gray-600 w-full flex-col gap-y-8">
<button
type="submit"
- className="md:text-[#46C8FF] md:bg-transparent md:w-[300px] text-[#222628] text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-[#46C8FF] bg-[#46C8FF] focus:z-10 w-full"
+ className="md:text-primary-button md:bg-transparent md:w-[300px] text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
>
Reset Password
</button>
@@ -319,13 +319,13 @@ export default function MultiUserAuth() {
<button
disabled={loading}
type="submit"
- className="md:text-[#46C8FF] md:bg-transparent text-[#222628] text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-[#46C8FF] bg-[#46C8FF] focus:z-10 w-full"
+ className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
>
{loading ? "Validating..." : "Login"}
</button>
<button
type="button"
- className="text-white text-sm flex gap-x-1 hover:text-[#46C8FF] hover:underline"
+ className="text-white text-sm flex gap-x-1 hover:text-primary-button hover:underline"
onClick={handleResetPassword}
>
Forgot password?<b>Reset</b>
diff --git a/frontend/src/components/Modals/Password/SingleUserAuth.jsx b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
index 541d2db52..f976c6344 100644
--- a/frontend/src/components/Modals/Password/SingleUserAuth.jsx
+++ b/frontend/src/components/Modals/Password/SingleUserAuth.jsx
@@ -104,7 +104,7 @@ export default function SingleUserAuth() {
<button
disabled={loading}
type="submit"
- className="md:text-[#46C8FF] md:bg-transparent text-[#222628] text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-[#46C8FF] bg-[#46C8FF] focus:z-10 w-full"
+ className="md:text-primary-button md:bg-transparent text-dark-text text-sm font-bold focus:ring-4 focus:outline-none rounded-md border-[1.5px] border-[#46C8FF] md:h-[34px] h-[48px] md:hover:text-white md:hover:bg-primary-button bg-primary-button focus:z-10 w-full"
>
{loading ? "Validating..." : "Login"}
</button>
diff --git a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
index 04a61b401..a599e406d 100644
--- a/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
+++ b/frontend/src/components/VectorDBSelection/VectorDBItem/index.jsx
@@ -29,7 +29,7 @@ export default function VectorDBItem({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
diff --git a/frontend/src/components/lib/CTAButton/index.jsx b/frontend/src/components/lib/CTAButton/index.jsx
index 93427f0f9..b439a552a 100644
--- a/frontend/src/components/lib/CTAButton/index.jsx
+++ b/frontend/src/components/lib/CTAButton/index.jsx
@@ -8,7 +8,7 @@ export default function CTAButton({
<button
disabled={disabled}
onClick={() => onClick?.()}
- className={`text-xs px-4 py-1 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] hover:text-white h-[34px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] w-fit ${className}`}
+ className={`text-xs px-4 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary hover:text-white h-[34px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)] w-fit ${className}`}
>
<div className="flex items-center justify-center gap-2">{children}</div>
</button>
diff --git a/frontend/src/index.css b/frontend/src/index.css
index f3fa95eae..0d796116a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -616,7 +616,7 @@ dialog::backdrop {
}
.file-row:nth-child(even) {
- @apply bg-[#1C1E21];
+ @apply bg-dark-highlight;
}
.file-row:nth-child(odd) {
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
index b2ff33bfc..9d7b35b0a 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/DBConnection.jsx
@@ -33,7 +33,7 @@ export default function DBConnection({ connection, onRemove, setHasChanges }) {
<div className="flex w-full items-center justify-between">
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{database_id}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{engine}</div>
+ <div className="mt-1 text-xs text-description">{engine}</div>
</div>
<button
type="button"
diff --git a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
index 62235fedd..4b25ce091 100644
--- a/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
+++ b/frontend/src/pages/Admin/Agents/SQLConnectorSelection/NewConnectionModal.jsx
@@ -239,7 +239,7 @@ export default function NewSQLConnection({ isOpen, closeModal, onSubmit }) {
<button
type="submit"
form="sql-connection-form"
- className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+ className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Save connection
</button>
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
index 42e7b04be..eff29c53a 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/SearchProviderItem/index.jsx
@@ -19,7 +19,7 @@ export default function SearchProviderItem({ provider, checked, onClick }) {
<img src={logo} alt={`${name} logo`} className="w-10 h-10 rounded-md" />
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
diff --git a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
index 0c46c9ce0..9650c38fb 100644
--- a/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
+++ b/frontend/src/pages/Admin/Agents/WebSearchSelection/index.jsx
@@ -149,9 +149,9 @@ export default function AgentWebSearchSelection({
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -172,7 +172,7 @@ export default function AgentWebSearchSelection({
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -192,7 +192,7 @@ export default function AgentWebSearchSelection({
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -206,7 +206,7 @@ export default function AgentWebSearchSelection({
<div className="text-sm font-semibold text-white">
{selectedSearchProviderObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedSearchProviderObject.description}
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
index 40043f15a..7e026ac83 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/CustomMessages/index.jsx
@@ -62,7 +62,7 @@ export default function CustomMessages() {
Customize the automatic messages displayed to your users.
</p>
</div>
- <div className="mt-3 flex flex-col gap-y-6 bg-[#1C1E21] rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
+ <div className="mt-3 flex flex-col gap-y-6 bg-dark-highlight rounded-lg pr-[31px] pl-[12px] pt-4 max-w-[700px]">
{messages.map((message, index) => (
<div key={index} className="flex flex-col gap-y-2">
{message.user && (
diff --git a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
index 51284bfa4..41a1c8f2d 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/FooterCustomization/NewIconForm/index.jsx
@@ -56,7 +56,7 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
<form onSubmit={handleSubmit} className="flex items-center gap-x-1.5">
<div className="relative" ref={dropdownRef}>
<div
- className="h-[34px] w-[34px] bg-[#1C1E21] rounded-full flex items-center justify-center cursor-pointer"
+ className="h-[34px] w-[34px] bg-dark-highlight rounded-full flex items-center justify-center cursor-pointer"
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
>
{React.createElement(ICON_COMPONENTS[selectedIcon] || Plus, {
@@ -70,7 +70,7 @@ export default function NewIconForm({ icon, url, onSave, onRemove }) {
<button
key={iconName}
type="button"
- className="flex justify-center items-center border border-transparent hover:bg-[#1C1E21] hover:border-slate-100 rounded-full p-2"
+ className="flex justify-center items-center border border-transparent hover:bg-dark-highlight hover:border-slate-100 rounded-full p-2"
onClick={() => handleIconChange(iconName)}
>
{React.createElement(ICON_COMPONENTS[iconName], {
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
index 58bb1489b..b45aaa22a 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/stt.jsx
@@ -109,9 +109,9 @@ export default function SpeechToTextProvider({ settings }) {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -132,7 +132,7 @@ export default function SpeechToTextProvider({ settings }) {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -153,7 +153,7 @@ export default function SpeechToTextProvider({ settings }) {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -167,7 +167,7 @@ export default function SpeechToTextProvider({ settings }) {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedProviderObject.description}
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
index d428de0f4..e3213b63d 100644
--- a/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
+++ b/frontend/src/pages/GeneralSettings/AudioPreference/tts.jsx
@@ -124,9 +124,9 @@ export default function TextToSpeechProvider({ settings }) {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -147,7 +147,7 @@ export default function TextToSpeechProvider({ settings }) {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -168,7 +168,7 @@ export default function TextToSpeechProvider({ settings }) {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -182,7 +182,7 @@ export default function TextToSpeechProvider({ settings }) {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedProviderObject.description}
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/Chats/index.jsx b/frontend/src/pages/GeneralSettings/Chats/index.jsx
index 52a3c4340..3cc778044 100644
--- a/frontend/src/pages/GeneralSettings/Chats/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Chats/index.jsx
@@ -128,7 +128,7 @@ export default function WorkspaceChats() {
<button
ref={openMenuButton}
onClick={toggleMenu}
- className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-[#46C8FF] hover:text-white text-xs font-semibold hover:bg-[#2C2F36] shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
+ className="flex items-center gap-x-2 px-4 py-1 rounded-lg bg-primary-button hover:text-white text-xs font-semibold hover:bg-secondary shadow-[0_4px_14px_rgba(0,0,0,0.25)] h-[34px] w-fit"
>
<Download size={18} weight="bold" />
Export
@@ -138,7 +138,7 @@ export default function WorkspaceChats() {
ref={menuRef}
className={`${
showMenu ? "slide-down" : "slide-up hidden"
- } z-20 w-fit rounded-lg absolute top-full right-0 bg-[#2C2F36] mt-2 shadow-md`}
+ } z-20 w-fit rounded-lg absolute top-full right-0 bg-secondary mt-2 shadow-md`}
>
<div className="py-2">
{Object.entries(exportOptions).map(([key, data]) => (
diff --git a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
index 4d032dc01..9c52c2714 100644
--- a/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/EmbeddingPreference/index.jsx
@@ -257,9 +257,9 @@ export default function GeneralEmbeddingPreference() {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -280,7 +280,7 @@ export default function GeneralEmbeddingPreference() {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -301,7 +301,7 @@ export default function GeneralEmbeddingPreference() {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -315,7 +315,7 @@ export default function GeneralEmbeddingPreference() {
<div className="text-sm font-semibold text-white">
{selectedEmbedderObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedEmbedderObject.description}
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
index 70d1d135a..407c33099 100644
--- a/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/LLMPreference/index.jsx
@@ -341,9 +341,9 @@ export default function GeneralLLMPreference() {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -364,7 +364,7 @@ export default function GeneralLLMPreference() {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -388,7 +388,7 @@ export default function GeneralLLMPreference() {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -402,7 +402,7 @@ export default function GeneralLLMPreference() {
<div className="text-sm font-semibold text-white">
{selectedLLMObject?.name || "None selected"}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedLLMObject?.description ||
"You need to select an LLM"}
</div>
diff --git a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
index 07907af72..35a0622e7 100644
--- a/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
+++ b/frontend/src/pages/GeneralSettings/TranscriptionPreference/index.jsx
@@ -149,9 +149,9 @@ export default function TranscriptionModelPreference() {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -172,7 +172,7 @@ export default function TranscriptionModelPreference() {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -193,7 +193,7 @@ export default function TranscriptionModelPreference() {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -207,7 +207,7 @@ export default function TranscriptionModelPreference() {
<div className="text-sm font-semibold text-white">
{selectedProviderObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedProviderObject.description}
</div>
</div>
diff --git a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
index a782410e5..15dad4645 100644
--- a/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/GeneralSettings/VectorDatabase/index.jsx
@@ -224,9 +224,9 @@ export default function GeneralVectorDatabase() {
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -247,7 +247,7 @@ export default function GeneralVectorDatabase() {
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -268,7 +268,7 @@ export default function GeneralVectorDatabase() {
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -282,7 +282,7 @@ export default function GeneralVectorDatabase() {
<div className="text-sm font-semibold text-white">
{selectedVDBObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedVDBObject.description}
</div>
</div>
diff --git a/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
index 7b31e2ac3..bca66843e 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/Home/index.jsx
@@ -8,7 +8,7 @@ export default function OnboardingHome() {
const navigate = useNavigate();
return (
<>
- <div className="relative w-screen h-screen flex overflow-hidden bg-[#2C2F35] md:bg-main-gradient">
+ <div className="relative w-screen h-screen flex overflow-hidden bg-mobile-onboarding md:bg-main-gradient">
<div
className="hidden md:block fixed bottom-10 left-10 w-[320px] h-[320px] bg-no-repeat bg-contain"
style={{ backgroundImage: `url(${LGroupImg})` }}
diff --git a/frontend/src/pages/OnboardingFlow/Steps/index.jsx b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
index 903395a77..61afe83f6 100644
--- a/frontend/src/pages/OnboardingFlow/Steps/index.jsx
+++ b/frontend/src/pages/OnboardingFlow/Steps/index.jsx
@@ -37,7 +37,7 @@ export function OnboardingLayout({ children }) {
if (isMobile) {
return (
- <div className="w-screen h-screen overflow-y-auto bg-[#2C2F35] overflow-hidden">
+ <div className="w-screen h-screen overflow-y-auto bg-mobile-onboarding overflow-hidden">
<div className="flex flex-col">
<div className="w-full relative py-10 px-2">
<div className="flex flex-col w-fit mx-auto gap-y-1 mb-[55px]">
@@ -87,7 +87,7 @@ export function OnboardingLayout({ children }) {
}
return (
- <div className="w-screen overflow-y-auto bg-[#2C2F35] md:bg-main-gradient flex justify-center overflow-hidden">
+ <div className="w-screen overflow-y-auto bg-mobile-onboarding md:bg-main-gradient flex justify-center overflow-hidden">
<div className="flex w-1/5 h-screen justify-center items-center">
{backBtn.showing && (
<button
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/AgentLLMItem/index.jsx
index 804fe8aef..64784c084 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({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
@@ -137,7 +137,7 @@ function SetupProvider({
<button
type="submit"
form="provider-form"
- className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+ className="border-none text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Save {LLMOption.name} settings
</button>
diff --git a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
index 51c115817..e5d226a07 100644
--- a/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/AgentConfig/AgentLLMSelection/index.jsx
@@ -124,9 +124,9 @@ export default function AgentLLMSelection({
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -147,7 +147,7 @@ export default function AgentLLMSelection({
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -169,7 +169,7 @@ export default function AgentLLMSelection({
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -183,7 +183,7 @@ export default function AgentLLMSelection({
<div className="text-sm font-semibold text-white">
{selectedLLMObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedLLMObject.description}
</div>
</div>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/WorkspaceLLMItem/index.jsx
index 872d2a422..481311963 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({
/>
<div className="flex flex-col">
<div className="text-sm font-semibold text-white">{name}</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">{description}</div>
+ <div className="mt-1 text-xs text-description">{description}</div>
</div>
</div>
</div>
@@ -137,7 +137,7 @@ function SetupProvider({
<button
type="submit"
form="provider-form"
- className="text-xs px-2 py-1 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+ className="text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-fit -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Save {LLMOption.name} settings
</button>
diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
index 511ed34bc..2d82307ed 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/WorkspaceLLMSelection/index.jsx
@@ -80,9 +80,9 @@ export default function WorkspaceLLMSelection({
/>
)}
{searchMenuOpen ? (
- <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-[#18181B] rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
+ <div className="absolute top-0 left-0 w-full max-w-[640px] max-h-[310px] overflow-auto white-scrollbar min-h-[64px] bg-dark-input rounded-lg flex flex-col justify-between cursor-pointer border-2 border-[#46C8FF] z-20">
<div className="w-full flex flex-col gap-y-1">
- <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-[#18181B]">
+ <div className="flex items-center sticky top-0 border-b border-[#9CA3AF] mx-4 bg-dark-input">
<MagnifyingGlass
size={20}
weight="bold"
@@ -103,7 +103,7 @@ export default function WorkspaceLLMSelection({
<X
size={20}
weight="bold"
- className="cursor-pointer text-white hover:text-[#9CA3AF]"
+ className="cursor-pointer text-white hover:text-x-button"
onClick={handleXButton}
/>
</div>
@@ -125,7 +125,7 @@ export default function WorkspaceLLMSelection({
</div>
) : (
<button
- className="w-full max-w-[640px] h-[64px] bg-[#18181B] rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
+ className="w-full max-w-[640px] h-[64px] bg-dark-input rounded-lg flex items-center p-[14px] justify-between cursor-pointer border-2 border-transparent hover:border-[#46C8FF] transition-all duration-300"
type="button"
onClick={() => setSearchMenuOpen(true)}
>
@@ -139,7 +139,7 @@ export default function WorkspaceLLMSelection({
<div className="text-sm font-semibold text-white">
{selectedLLMObject.name}
</div>
- <div className="mt-1 text-xs text-[#D2D5DB]">
+ <div className="mt-1 text-xs text-description">
{selectedLLMObject.description}
</div>
</div>
diff --git a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
index e5410f403..383ef8cd8 100644
--- a/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/Members/AddMemberModal/index.jsx
@@ -152,7 +152,7 @@ export default function AddMemberModal({ closeModal, workspace, users }) {
</div>
<button
type="submit"
- className="transition-all duration-300 text-xs px-2 py-1 font-semibold rounded-lg bg-[#46C8FF] hover:bg-[#2C2F36] border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-[68px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
+ className="transition-all duration-300 text-xs px-2 py-1 font-semibold rounded-lg bg-primary-button hover:bg-secondary border-2 border-transparent hover:border-[#46C8FF] hover:text-white h-[32px] w-[68px] -mr-8 whitespace-nowrap shadow-[0_4px_14px_rgba(0,0,0,0.25)]"
>
Save
</button>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index cd9e1ed1f..098486b23 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -27,7 +27,15 @@ export default {
sidebar: "#25272C",
"historical-msg-system": "rgba(255, 255, 255, 0.05);",
"historical-msg-user": "#2C2F35",
- outline: "#4E5153"
+ outline: "#4E5153",
+ "primary-button": "#46C8FF",
+ secondary: "#2C2F36",
+ "dark-input": "#18181B",
+ "mobile-onboarding": "#2C2F35",
+ "dark-highlight": "#1C1E21",
+ "dark-text": "#222628",
+ description: "#D2D5DB",
+ "x-button": "#9CA3AF"
},
backgroundImage: {
"preference-gradient":