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":