diff --git a/frontend/src/components/ContextualSaveBar/index.jsx b/frontend/src/components/ContextualSaveBar/index.jsx
index aab0b36fe91251e6b142ca25311dc69505e602da..c94a06c9f0f5c4db2b2fc1d5bfd697528f47f4bc 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 72b3d73ef97b0ccf41ac55b25a1f98cb0c73b257..de94135729464159190f848d434f46f88345fa67 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 e6b643a499420baf130428151b88f86cd8f1761a..e96c5f3ea4039f6b92490d773b5b3823aaa2c4d6 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 a75a353820ad37160a9ee2f82e6de7dee0997d48..1f1c1fd8b5643ccecad866b1058406b67c29c386 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 52ca7e63df6d3210932605e24fb87b377816b44e..05d6eabdc9ff915a6a0ee71565b9ee4707fd41d3 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 00b1cc46b173aab876cc814763eb3f1af4035938..82d0a0a6bfbbb10e5f4ff46b8407428be9be23d3 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 b3fc454530698ca9f8e35076332c26fe3a8d5ee2..79cc6f254e4432166914fe97756b4b841f31a968 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 ed18dcd424285b4c3cecc0968961f16ede3c1fc8..97a34f0f66085666bc4d814274d59486f34993b9 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 46c4b7fd09d8312f81e87d860ee972672891dbe5..bf1581e141198e063c5d0ed9774c0dad81f00f67 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 c8d942d043cb2f53bb8606c668ac8806efbff9f5..8ad2ed6a5ba5b2a400d6e37e2940fc8202fd025c 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 441d8426179f0e8e4b65d7727580bd05faa2062a..66b40e0645618a58d90e6d73570b7184f92a5e7e 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 541d2db5295e24a74d460b4ae48312117933ffe0..f976c6344acf4fbb47d84c5196474a359359066d 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 04a61b4017e9fe495ad79ca421a47dae6261c94c..a599e406d1f6aed155ab5cc16f73c023282f7d24 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 93427f0f9457f899782725260a6529680b927aa3..b439a552a6a856bb31f5ed7022c473ffc22ca74a 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 f3fa95eae6f4831c1542de9fb8e0f5dac6431bb0..0d796116aa66270ba14aa5478930c583aaa7e652 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 b2ff33bfc7f05488322c35df451cec6f11caf9f8..9d7b35b0a3815ff30bb2e89aae85e9b3f62d0b3c 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 62235feddf9d0b1d05d256a9ff5fe14221175f23..4b25ce091680f8f802cc105836fdd3d2429998b7 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 42e7b04be012b35fccc3c7ed7b908e5598a96188..eff29c53a190ebee2019c9b0eab3b1443848f29d 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 0c46c9ce0e2e841e56ec2729c6c483ab8a456e1c..9650c38fbfe7e133e95bb2838ce956ac7a1cc533 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 40043f15ab65c576ea22ca89220f873268000a3a..7e026ac83d9ac9121aecd2e12b788056b94563f5 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 51284bfa4dcc6eee91ba3d13c4b5fc2db256a500..41a1c8f2dee2d12c20301f89650726574d97817a 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 58bb1489be11465abfe7f05a4e04294d20796aec..b45aaa22a9c39e40ae0b1a3c47a1d7eb41071c87 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 d428de0f4bf1d3233f0da1b8d0c24ef68e052899..e3213b63dc53a2e2956fceb9bfb11012cac7ba3d 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 52a3c43404d799053ccb1b1bbde1472f9a0ed673..3cc778044e791e07eb631a23de5869f8bc832d3a 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 4d032dc016df521d28d20dc4faf8597e6e2da949..9c52c2714705168545ad5bdc76ea34e74d4cc338 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 70d1d135abbd3a7dea73bf62381cb6ce0fe65f33..407c33099c2dfe76dd0854a4574297f7bd4abeeb 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 07907af721e0c839739d8a405629a56ad19b223a..35a0622e76d17a049a5fcb2c1174df098fa83114 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 a782410e52d128089ce289604c969136d23e947c..15dad464555948fb2226963993d449e4496c613f 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 7b31e2ac3db2bad94916f3cfc1740dd03e47c429..bca66843e4d4f99abe6da512c146125bd5c33ad4 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 903395a773c93305d3f3f5464b5b69cc0592ba5c..61afe83f6f25d0b68c98796ab8e51bc9c5a3cfbb 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 804fe8aef2c42bff45cf8fb65df9dc7eb3899fcb..64784c08479dee4364af445587f97e2692f4867d 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 51c1158173344513054f3fb5454de99a49e5ed8a..e5d226a07bb0e028fed4d740f2252722774ab699 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 872d2a422b09c139f2bfe4cd18ad6ecfa6b1a427..481311963913b4e77aca3f32c007fbb24a6f2996 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 511ed34bc48f44f897b81bb8eae2824773fdef6d..2d82307edcbbce758d393930d67dbb66d94bcb88 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 e5410f403074aaaa93dd8529cf6187efe9731d1a..383ef8cd8b9fb8e97b315c8c8b566658a8bf6c56 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 cd9e1ed1f90f7c9ab7b3a2cf0a35292ad60a3374..098486b23c9828e8e13861efcdf21942d43f7cde 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":