mirror of
https://github.com/Mintplex-Labs/anything-llm
synced 2026-05-03 04:42:36 +02:00
Light/dark mode UI overhaul (#2629)
* Refactor workspace sidebar component styles (#2380) rely on css for conditional styles * New sidebar colors (#2381) new sidebar colors * Main container color update (#2382) * Dark mode setup themes (#2411) * setup generic tailwind theme + ability to add new themes * add theme context * use correct colors from design for sidebar + fix padding * Settings sidebar UI updates (#2416) settings sidebar ui updates * fix sidebar resizing/truncate issue on hover * Dark mode chat window (#2443) * Support XLSX files (#2403) * support xlsx files * lint * create seperate docs for each xlsx sheet * lint * use node-xlsx pkg for parsing xslx files * lint * update error handling --------- Co-authored-by: timothycarambat <rambat1010@gmail.com> * wip chat window * ux+ux improvements and update new colors * chat window dark mode * remove comment --------- Co-authored-by: timothycarambat <rambat1010@gmail.com> * Dark mode welcome page (#2444) * dark mode welcome page styles + refactor * remove AI_BACKGROUND_COLOR and USER_BACKGROUND_COLOR constants * Dark mode UI for admin and tools pages + mobile view improvements (#2454) * dark mode ui for admin and tools pages + mobile view improvements * lint * ai provider pages + options darkmode ui * placeholder generic class * appearance settings styles * ai providers mobile margin * dark mode styles for agent skills + experimental features * mobile styles on security settings * fine tune flow ui dark mode * workspace settings page * lint * Dark mode onboarding (#2461) dark mode onboarding * update all modals + normalize styles (#2471) * lint * Dark mode privacy & experimental pages (#2479) * document watch + privacy pages ui + mobile modal darkmode * lint * Dark mode login screens (#2483) * multi-user auth screen ui update * dark mode login screen + recovery key modals * remove unneeded import * Workspace preset commands modals dark mode (#2484) update workspace preset dark mode modal * Document pinning modal ui update (#2490) document pinning modal ui update * Experimental agreement modal dark mode (#2491) experimental agreement modal dark mode * Serp options dark mode (#2492) serp options dark mode * field fixes * attempt light mode wip * setting sidebar * Toasts and threads * main page content and privacy page * force rewrite for light * add border for light mode rightside content * more fixes * wip * wip * wip light mode implementation * wip dark light mode file picker * document picker light mode ui * slight ui tweaks * light mode fine tuning flow * light mode tweaks + qa fixes * fix md rendering of light mode + tooltip fixes * lint * qa bug fixes * Add developer hook for theme move provider to outmost layer * qa light mode bug fixes * Linting and hotfixes for UI * Light mode to dev * accept invite light mode ui fix * Fix onboarding inputs in dark mode * fix close icons last minute items * patch z-index on tooltips * patch light mode citations --------- Co-authored-by: timothycarambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield
@@ -32,24 +32,25 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative w-[500px] max-w-2xl max-h-full">
|
||||
<div className="relative bg-main-gradient rounded-lg shadow">
|
||||
<div className="flex items-start justify-between p-4 border-b rounded-t border-gray-500/50">
|
||||
<h3 className="text-xl font-semibold text-white">
|
||||
Edit {user.username}
|
||||
</h3>
|
||||
<div className="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center">
|
||||
<div className="relative w-full max-w-2xl bg-theme-bg-secondary rounded-lg shadow border-2 border-theme-modal-border">
|
||||
<div className="relative p-6 border-b rounded-t border-theme-modal-border">
|
||||
<div className="w-full flex gap-x-2 items-center">
|
||||
<h3 className="text-xl font-semibold text-white overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
Edit {user.username}
|
||||
</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={closeModal}
|
||||
type="button"
|
||||
className="transition-all duration-300 text-gray-400 bg-transparent hover:border-white/60 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center bg-sidebar-button hover:bg-menu-item-selected-gradient hover:border-slate-100 hover:border-opacity-50 border-transparent border"
|
||||
data-modal-hide="staticModal"
|
||||
className="absolute top-4 right-4 transition-all duration-300 bg-transparent rounded-lg text-sm p-1 inline-flex items-center hover:bg-theme-modal-border hover:border-theme-modal-border hover:border-opacity-50 border-transparent border"
|
||||
>
|
||||
<X className="text-gray-300 text-lg" />
|
||||
<X size={24} weight="bold" className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="p-6 space-y-6 flex h-full w-full">
|
||||
<div className="w-full flex flex-col gap-y-4">
|
||||
<div className="p-6">
|
||||
<form onSubmit={handleUpdate}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label
|
||||
htmlFor="username"
|
||||
@@ -60,7 +61,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
|
||||
<input
|
||||
name="username"
|
||||
type="text"
|
||||
className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
|
||||
placeholder="User's username"
|
||||
defaultValue={user.username}
|
||||
minLength={2}
|
||||
@@ -82,7 +83,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
|
||||
<input
|
||||
name="password"
|
||||
type="text"
|
||||
className="bg-zinc-900 placeholder:text-white/20 border-gray-500 text-white text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
|
||||
className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
|
||||
placeholder={`${user.username}'s new password`}
|
||||
autoComplete="off"
|
||||
minLength={8}
|
||||
@@ -103,7 +104,7 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
|
||||
required={true}
|
||||
defaultValue={user.role}
|
||||
onChange={(e) => setRole(e.target.value)}
|
||||
className="rounded-lg bg-zinc-900 px-4 py-2 text-sm text-white border-gray-500 focus:ring-blue-500 focus:border-blue-500 w-full"
|
||||
className="bg-theme-settings-input-bg w-full text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
|
||||
>
|
||||
<option value="default">Default</option>
|
||||
<option value="manager">Manager</option>
|
||||
@@ -121,23 +122,23 @@ export default function EditUserModal({ currentUser, user, closeModal }) {
|
||||
/>
|
||||
{error && <p className="text-red-400 text-sm">Error: {error}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex w-full justify-between items-center p-6 space-x-2 border-t rounded-b border-gray-500/50">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
type="button"
|
||||
className="px-4 py-2 rounded-lg text-white hover:bg-stone-900 transition-all duration-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="transition-all duration-300 border border-slate-200 px-4 py-2 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
|
||||
>
|
||||
Update user
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div className="flex justify-between items-center mt-6 pt-6 border-t border-theme-modal-border">
|
||||
<button
|
||||
onClick={closeModal}
|
||||
type="button"
|
||||
className="transition-all duration-300 text-white hover:bg-zinc-700 px-4 py-2 rounded-lg text-sm"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="transition-all duration-300 bg-white text-black hover:opacity-60 px-4 py-2 rounded-lg text-sm"
|
||||
>
|
||||
Update user
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user