admin/39950-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4

Browse Source
This commit is contained in:
Flatlogic Bot 2026-05-11 13:20:54 +00:00
parent b073dd491e
commit 7aefb06035
14 changed files with 572 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/colors.ts
View File

@ -11,10 +11,10 @@ export const colorsBgLight = {
white: 'bg-white text-black', white: 'bg-white text-black',
light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white', light: ' bg-white text-black text-black dark:bg-dark-900 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black', contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success: 'bg-emerald-500 border-emerald-500 dark:bg-pavitra-blue dark:border-pavitra-blue text-white', success: 'bg-emerald-500 border-emerald-500 dark:bg-emerald-500 dark:border-emerald-500 text-white',
danger: 'bg-red-500 border-red-500 text-white', danger: 'bg-red-500 border-red-500 text-white',
warning: 'bg-yellow-500 border-yellow-500 text-white', warning: 'bg-yellow-500 border-yellow-500 text-white',
info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-pavitra-blue dark:border-pavitra-blue text-white', info: 'bg-[#0E1A2B] border-[#0E1A2B] dark:bg-[#D8B75E] dark:border-[#D8B75E] text-white dark:text-[#08111F]',
} }
export const colorsText = { export const colorsText = {
@ -53,30 +53,30 @@ export const getButtonColor = (
whiteDark: 'ring-gray-200 dark:ring-dark-500', whiteDark: 'ring-gray-200 dark:ring-dark-500',
lightDark: 'ring-gray-200 dark:ring-gray-500', lightDark: 'ring-gray-200 dark:ring-gray-500',
contrast: 'ring-gray-300 dark:ring-gray-400', contrast: 'ring-gray-300 dark:ring-gray-400',
success: 'ring-emerald-300 dark:ring-pavitra-blue', success: 'ring-emerald-300 dark:ring-emerald-500',
danger: 'ring-red-300 dark:ring-red-700', danger: 'ring-red-300 dark:ring-red-700',
warning: 'ring-yellow-300 dark:ring-yellow-700', warning: 'ring-yellow-300 dark:ring-yellow-700',
info: "ring-[#D8B75E]/35 dark:ring-pavitra-blue", info: "ring-[#D8B75E]/35 dark:ring-[#D8B75E]/35",
}, },
active: { active: {
white: 'bg-gray-100', white: 'bg-gray-100',
whiteDark: 'bg-gray-100 dark:bg-dark-800', whiteDark: 'bg-gray-100 dark:bg-dark-800',
lightDark: 'bg-gray-200 dark:bg-slate-700', lightDark: 'bg-gray-200 dark:bg-slate-700',
contrast: 'bg-gray-700 dark:bg-slate-100', contrast: 'bg-gray-700 dark:bg-slate-100',
success: 'bg-emerald-700 dark:bg-pavitra-blue', success: 'bg-emerald-700 dark:bg-emerald-500',
danger: 'bg-red-700 dark:bg-red-600', danger: 'bg-red-700 dark:bg-red-600',
warning: 'bg-yellow-700 dark:bg-yellow-600', warning: 'bg-yellow-700 dark:bg-yellow-600',
info: 'bg-[#162742] dark:bg-pavitra-blue', info: 'bg-[#162742] dark:bg-[#F2C95C]',
}, },
bg: { bg: {
white: 'bg-white text-black', white: 'bg-white text-black',
whiteDark: 'bg-white text-black dark:bg-dark-900 dark:text-white', whiteDark: 'bg-white text-black dark:bg-dark-900 dark:text-white',
lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white', lightDark: 'bg-gray-100 text-black dark:bg-slate-800 dark:text-white',
contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black', contrast: 'bg-gray-800 text-white dark:bg-white dark:text-black',
success: 'bg-emerald-600 dark:bg-pavitra-blue text-white', success: 'bg-emerald-600 dark:bg-emerald-500 text-white',
danger: 'bg-red-600 text-white dark:bg-red-500 ', danger: 'bg-red-600 text-white dark:bg-red-500 ',
warning: 'bg-yellow-600 dark:bg-yellow-500 text-white', warning: 'bg-yellow-600 dark:bg-yellow-500 text-white',
info: " bg-[#0E1A2B] dark:bg-pavitra-blue text-white ", info: " bg-[#0E1A2B] dark:bg-[#D8B75E] text-white dark:text-[#08111F] ",
}, },
bgHover: { bgHover: {
white: 'hover:bg-gray-100', white: 'hover:bg-gray-100',
@ -84,39 +84,39 @@ export const getButtonColor = (
lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700', lightDark: 'hover:bg-gray-200 hover:dark:bg-slate-700',
contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100', contrast: 'hover:bg-gray-700 hover:dark:bg-slate-100',
success: success:
'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-pavitra-blue hover:dark:border-pavitra-blue', 'hover:bg-emerald-700 hover:border-emerald-700 hover:dark:bg-emerald-600 hover:dark:border-emerald-600',
danger: danger:
'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600', 'hover:bg-red-700 hover:border-red-700 hover:dark:bg-red-600 hover:dark:border-red-600',
warning: warning:
'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600', 'hover:bg-yellow-700 hover:border-yellow-700 hover:dark:bg-yellow-600 hover:dark:border-yellow-600',
info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-pavitra-blue/80 hover:dark:border-pavitra-blue/80", info: "hover:bg-[#162742] hover:border-[#162742] hover:dark:bg-[#F2C95C] hover:dark:border-[#F2C95C]",
}, },
borders: { borders: {
white: 'border-white', white: 'border-white',
whiteDark: 'border-white dark:border-dark-900', whiteDark: 'border-white dark:border-dark-900',
lightDark: 'border-gray-100 dark:border-slate-800', lightDark: 'border-gray-100 dark:border-slate-800',
contrast: 'border-gray-800 dark:border-white', contrast: 'border-gray-800 dark:border-white',
success: 'border-emerald-600 dark:border-pavitra-blue', success: 'border-emerald-600 dark:border-emerald-500',
danger: 'border-red-600 dark:border-red-500', danger: 'border-red-600 dark:border-red-500',
warning: 'border-yellow-600 dark:border-yellow-500', warning: 'border-yellow-600 dark:border-yellow-500',
info: "border-[#0E1A2B] dark:border-pavitra-blue", info: "border-[#0E1A2B] dark:border-[#D8B75E]",
}, },
text: { text: {
contrast: 'dark:text-slate-100', contrast: 'dark:text-slate-100',
success: 'text-emerald-600 dark:text-pavitra-blue', success: 'text-emerald-600 dark:text-emerald-400',
danger: 'text-red-600 dark:text-red-500', danger: 'text-red-600 dark:text-red-500',
warning: 'text-yellow-600 dark:text-yellow-500', warning: 'text-yellow-600 dark:text-yellow-500',
info: 'text-[#0E1A2B] dark:text-pavitra-blue', info: 'text-[#0E1A2B] dark:text-[#D8B75E]',
}, },
outlineHover: { outlineHover: {
contrast: contrast:
'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black', 'hover:bg-gray-800 hover:text-gray-100 hover:dark:bg-slate-100 hover:dark:text-black',
success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue', success: 'hover:bg-emerald-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-emerald-500',
danger: danger:
'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600', 'hover:bg-red-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-red-600',
warning: warning:
'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600', 'hover:bg-yellow-600 hover:text-white hover:text-white hover:dark:text-white hover:dark:border-yellow-600',
info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:text-white hover:dark:border-pavitra-blue", info: "hover:bg-[#0E1A2B] hover:text-white hover:dark:bg-[#D8B75E] hover:dark:text-[#08111F] hover:dark:border-[#D8B75E]",
}, },
} }

6
frontend/src/components/AsideMenuLayer.tsx
View File

@ -30,9 +30,9 @@ export default function AsideMenuLayer({ menu, className = '', ...props }: Props
<aside <aside
id='asideMenu' id='asideMenu'
className={`${className} zzz fixed top-0 z-40 flex h-screen w-80 overflow-hidden transition-position lg:py-3 lg:pl-3`} className={`${className} zzz fixed top-0 z-40 flex h-screen w-80 overflow-hidden transition-position lg:py-3 lg:pl-3`}
> >
<div <div
className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:bg-dark-900 ${asideStyle} ${corners}`} className={`flex-1 flex flex-col overflow-hidden border border-[#E5E0D6] shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#0B1120] dark:shadow-black/30 ${asideStyle} ${corners}`}
> >
<div <div
className={`flex flex-row items-center justify-between px-5 py-5 ${asideBrandStyle}`} className={`flex flex-row items-center justify-between px-5 py-5 ${asideBrandStyle}`}

2
frontend/src/components/BigCalendar.tsx
View File

@ -115,7 +115,7 @@ const BigCalendar = ({
}; };
return ( return (
<div className='h-[600px] p-4'> <div className='legal-governance-calendar h-[680px] p-4 md:p-6'>
<Calendar <Calendar
defaultDate={defaultDate} defaultDate={defaultDate}
defaultView={Views.MONTH} defaultView={Views.MONTH}

10
frontend/src/components/FormField.tsx
View File

@ -34,12 +34,12 @@ const FormField = ({ icons = [], ...props }: Props) => {
} }
const controlClassName = [ const controlClassName = [
`px-3 py-2 max-w-full border-gray-300 dark:border-dark-700 ${corners} w-full dark:placeholder-gray-400`, `px-3 py-2 max-w-full border-gray-300 text-[#0E1A2B] dark:border-[#334155] dark:text-slate-100 ${corners} w-full dark:placeholder-slate-500`,
`${focusRing}`, `${focusRing}`,
props.hasTextareaHeight ? 'h-24' : 'h-12', props.hasTextareaHeight ? 'h-24' : 'h-12',
props.isBorderless ? 'border-0' : 'border', props.isBorderless ? 'border-0' : 'border',
props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? ` bg-white` : bgColor} dark:bg-dark-800`, props.isTransparent ? 'bg-transparent' : `${props.websiteBg ? ` bg-white` : bgColor} dark:bg-[#0F172A]`,
props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-dark-900 disabled' : '', props.disabled ? 'bg-gray-200 text-gray-100 dark:bg-[#111827] dark:text-slate-500 disabled' : '',
props.borderButtom ? `border-0 border-b ${props.diversity ? "border-gray-400" : " placeholder-white border-gray-300/10 border-white "} rounded-none focus:ring-0` : '', props.borderButtom ? `border-0 border-b ${props.diversity ? "border-gray-400" : " placeholder-white border-gray-300/10 border-white "} rounded-none focus:ring-0` : '',
].join(' '); ].join(' ');
@ -48,7 +48,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
{props.label && ( {props.label && (
<label <label
htmlFor={props.labelFor} htmlFor={props.labelFor}
className={`block font-bold mb-2 ${props.labelFor ? 'cursor-pointer' : ''}`} className={`block font-bold mb-2 dark:text-slate-100 ${props.labelFor ? 'cursor-pointer' : ''}`}
> >
{props.label} {props.label}
</label> </label>
@ -71,7 +71,7 @@ const FormField = ({ icons = [], ...props }: Props) => {
))} ))}
</div> </div>
{props.help && ( {props.help && (
<div className='text-xs text-gray-500 dark:text-dark-600 mt-1'>{props.help}</div> <div className='text-xs text-gray-500 dark:text-slate-400 mt-1'>{props.help}</div>
)} )}
</div> </div>
) )

18
frontend/src/components/LegalOpsPageIntro.tsx
View File

@ -22,24 +22,24 @@ export default function LegalOpsPageIntro({
children, children,
}: Props) { }: Props) {
return ( return (
<section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10'> <section className='mb-6 overflow-hidden rounded-xl border border-[#DDD5C7] bg-white shadow-sm shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
<div className='grid gap-5 p-6 lg:grid-cols-[1fr_auto] lg:items-start'> <div className='grid gap-5 p-6 lg:grid-cols-[1fr_auto] lg:items-start'>
<div> <div>
<p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13]'>{eyebrow}</p> <p className='text-xs font-semibold uppercase tracking-[0.16em] text-[#7A5B13] dark:text-[#D8B75E]'>{eyebrow}</p>
<h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B]'>{title}</h2> <h2 className='mt-2 text-2xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{title}</h2>
<p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472]'>{description}</p> <p className='mt-3 max-w-3xl text-sm leading-6 text-[#5B6472] dark:text-slate-300'>{description}</p>
</div> </div>
{children && <div className='flex flex-wrap gap-2 lg:max-w-xl lg:justify-end'>{children}</div>} {children && <div className='flex flex-wrap gap-2 lg:max-w-xl lg:justify-end'>{children}</div>}
</div> </div>
<div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] md:grid-cols-3'> <div className='grid border-t border-[#E5E0D6] bg-[#FBF8F1] dark:border-[#273447] dark:bg-[#0F172A] md:grid-cols-3'>
{metrics.map((metric) => ( {metrics.map((metric) => (
<div <div
key={metric.label} key={metric.label}
className='border-b border-[#E5E0D6] p-5 last:border-b-0 md:border-b-0 md:border-r md:last:border-r-0' className='border-b border-[#E5E0D6] p-5 last:border-b-0 dark:border-[#273447] md:border-b-0 md:border-r md:last:border-r-0'
> >
<p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61]'>{metric.label}</p> <p className='text-xs font-semibold uppercase tracking-[0.14em] text-[#8B7A61] dark:text-[#D8B75E]'>{metric.label}</p>
<p className='mt-2 text-xl font-semibold text-[#0E1A2B]'>{metric.value}</p> <p className='mt-2 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>{metric.value}</p>
<p className='mt-1 text-xs leading-5 text-[#6B7280]'>{metric.helper}</p> <p className='mt-1 text-xs leading-5 text-[#6B7280] dark:text-slate-400'>{metric.helper}</p>
</div> </div>
))} ))}
</div> </div>

6
frontend/src/components/NavBar.tsx
View File

@ -33,9 +33,9 @@ export default function NavBar({ menu, className = '', children }: Props) {
return ( return (
<nav <nav
className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position lg:w-auto dark:bg-dark-800`} className={`${className} fixed inset-x-0 top-0 z-30 h-14 w-screen border-b border-[#DDD5C7] bg-[#F6F3EC]/95 backdrop-blur transition-position dark:border-[#273447] dark:bg-[#08111F]/95 lg:w-auto`}
> >
<div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:border-dark-700' : ''}`}> <div className={`flex lg:items-stretch ${containerMaxW} ${isScrolled ? 'shadow-sm shadow-[#83755E]/10 dark:shadow-none' : ''}`}>
<div className="flex flex-1 items-stretch h-14">{children}</div> <div className="flex flex-1 items-stretch h-14">{children}</div>
<div className="flex-none items-stretch flex h-14 lg:hidden"> <div className="flex-none items-stretch flex h-14 lg:hidden">
<NavBarItemPlain onClick={handleMenuNavBarToggleClick}> <NavBarItemPlain onClick={handleMenuNavBarToggleClick}>
@ -45,7 +45,7 @@ export default function NavBar({ menu, className = '', children }: Props) {
<div <div
className={`${ className={`${
isMenuNavBarActive ? 'block' : 'hidden' isMenuNavBarActive ? 'block' : 'hidden'
} absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none dark:bg-dark-800`} } absolute left-0 top-14 flex max-h-screen-menu w-screen items-center overflow-y-auto bg-[#F6F3EC] shadow-lg dark:bg-[#08111F] dark:shadow-none lg:static lg:flex lg:w-auto lg:overflow-visible lg:bg-transparent lg:shadow-none`}
> >
<NavBarMenuList menu={menu} /> <NavBarMenuList menu={menu} />
</div> </div>

2
frontend/src/components/Search.tsx
View File

@ -36,7 +36,7 @@ const Search = () => {
name='search' name='search'
validate={validateSearch} validate={validateSearch}
placeholder='Search governance records' placeholder='Search governance records'
className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:bg-dark-900 dark:placeholder-dark-600 ${focusRing}`} className={`${corners} relative ml-2 w-full border-[#DDD5C7] bg-white/80 p-2.5 text-sm text-[#111827] placeholder-[#8A8173] shadow-none dark:border-[#273447] dark:bg-[#111827] dark:text-slate-100 dark:placeholder-slate-500 ${focusRing}`}
/> />
{errors.search && touched.search && values.search.length < 2 ? ( {errors.search && touched.search && values.search.length < 2 ? (
<div className='text-red-500 text-sm ml-2 absolute'>{errors.search}</div> <div className='text-red-500 text-sm ml-2 absolute'>{errors.search}</div>

311
frontend/src/css/_calendar.css
View File

@ -1,39 +1,302 @@
.rbc-event { .legal-governance-calendar {
@apply bg-blue-600 !important; color: #0E1A2B;
} }
.rbc-show-more { .legal-governance-calendar .rbc-calendar {
@apply dark:text-white bg-transparent !important; border: 1px solid #DDD5C7;
border-radius: 14px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 10px 24px rgba(131, 117, 94, 0.08);
} }
.rbc-btn-group button { .legal-governance-calendar .rbc-toolbar {
@apply dark:text-white !important; align-items: center;
gap: 12px;
margin-bottom: 18px;
} }
.rbc-btn-group button:hover { .legal-governance-calendar .rbc-toolbar-label {
@apply text-white dark:bg-dark-700 !important; color: #0E1A2B;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0;
padding: 0 12px;
} }
.rbc-btn-group button.rbc-active { .legal-governance-calendar .rbc-btn-group {
@apply text-black dark:bg-blue-600 !important; display: inline-flex;
overflow: hidden;
border: 1px solid #D8D0C2;
border-radius: 10px;
background: #FFFFFF;
box-shadow: 0 1px 2px rgba(131, 117, 94, 0.08);
} }
.rbc-btn-group button:focus { .legal-governance-calendar .rbc-btn-group button {
@apply dark:bg-blue-600 !important; min-height: 38px;
border: 0 !important;
border-right: 1px solid #E5E0D6 !important;
background: #FFFFFF !important;
color: #0E1A2B !important;
font-weight: 600;
padding: 8px 16px;
transition: background-color 150ms ease, color 150ms ease;
} }
.rbc-day-bg.rbc-off-range-bg { .legal-governance-calendar .rbc-btn-group button:last-child {
@apply dark:bg-dark-800 !important; border-right: 0 !important;
}
.rbc-current-time-indicator{
@apply h-1 !important;
}
.rbc-today {
@apply dark:bg-dark-600/40 !important;
} }
.rbc-day-bg.rbc-selected-cell { .legal-governance-calendar .rbc-btn-group button:hover,
@apply dark:bg-dark-500 !important; .legal-governance-calendar .rbc-btn-group button:focus {
background: #FBF8F1 !important;
color: #7A5B13 !important;
box-shadow: none !important;
}
.legal-governance-calendar .rbc-btn-group button.rbc-active,
.legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
.legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
background: #0E1A2B !important;
color: #FFFFFF !important;
box-shadow: none !important;
}
.legal-governance-calendar .rbc-month-view,
.legal-governance-calendar .rbc-time-view,
.legal-governance-calendar .rbc-agenda-view {
border-color: #DDD5C7;
border-radius: 12px;
overflow: hidden;
}
.legal-governance-calendar .rbc-header {
min-height: 38px;
border-color: #E5E0D6;
background: #FBF8F1;
color: #7A5B13;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.12em;
line-height: 38px;
text-transform: uppercase;
}
.legal-governance-calendar .rbc-month-row,
.legal-governance-calendar .rbc-day-bg,
.legal-governance-calendar .rbc-date-cell,
.legal-governance-calendar .rbc-timeslot-group,
.legal-governance-calendar .rbc-time-content,
.legal-governance-calendar .rbc-time-header-content,
.legal-governance-calendar .rbc-time-header.rbc-overflowing {
border-color: #E5E0D6;
}
.legal-governance-calendar .rbc-month-row {
min-height: 104px;
}
.legal-governance-calendar .rbc-date-cell {
padding: 6px 8px;
color: #0E1A2B;
font-size: 0.86rem;
font-weight: 700;
}
.legal-governance-calendar .rbc-off-range {
color: #A59B8B;
}
.legal-governance-calendar .rbc-off-range-bg {
background: #F7F5EF !important;
}
.legal-governance-calendar .rbc-today {
background: #FFF8DF !important;
}
.legal-governance-calendar .rbc-selected-cell {
background: #F1E7C7 !important;
}
.legal-governance-calendar .rbc-event {
min-height: 28px;
border: 0 !important;
border-left: 4px solid #D8B75E !important;
border-radius: 7px;
background: #0E1A2B !important;
color: #FFFFFF !important;
padding: 4px 8px !important;
box-shadow: 0 6px 14px rgba(14, 26, 43, 0.14);
}
.legal-governance-calendar .rbc-event:focus,
.legal-governance-calendar .rbc-event.rbc-selected {
outline: 2px solid rgba(216, 183, 94, 0.45);
outline-offset: 2px;
}
.legal-governance-calendar .rbc-event-content {
font-size: 0.82rem;
font-weight: 650;
line-height: 1.3;
}
.legal-governance-calendar .rbc-show-more {
display: inline-flex;
align-items: center;
min-height: 24px;
border-radius: 999px;
background: #FFF8DF !important;
color: #7A5B13 !important;
font-size: 0.76rem;
font-weight: 800;
padding: 2px 8px;
}
.legal-governance-calendar .rbc-current-time-indicator {
height: 2px !important;
background: #D8B75E;
}
.legal-governance-calendar .rbc-agenda-table {
border-color: #DDD5C7;
}
.legal-governance-calendar .rbc-agenda-table th {
background: #FBF8F1;
color: #7A5B13;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.legal-governance-calendar .rbc-agenda-table td {
border-color: #E5E0D6;
color: #374151;
}
.legal-governance-calendar .rbc-time-gutter,
.legal-governance-calendar .rbc-label {
color: #6B7280;
font-size: 0.78rem;
}
.dark .legal-governance-calendar {
color: #F8FAFC;
}
.dark .legal-governance-calendar .rbc-calendar {
border-color: #273447;
background: #111827;
box-shadow: none;
}
.dark .legal-governance-calendar .rbc-toolbar-label {
color: #F8FAFC;
}
.dark .legal-governance-calendar .rbc-btn-group {
border-color: #273447;
background: #0F172A;
box-shadow: none;
}
.dark .legal-governance-calendar .rbc-btn-group button {
border-right-color: #273447 !important;
background: #0F172A !important;
color: #CBD5E1 !important;
}
.dark .legal-governance-calendar .rbc-btn-group button:hover,
.dark .legal-governance-calendar .rbc-btn-group button:focus {
background: #172033 !important;
color: #F8FAFC !important;
}
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active,
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:hover,
.dark .legal-governance-calendar .rbc-btn-group button.rbc-active:focus {
background: #D8B75E !important;
color: #08111F !important;
}
.dark .legal-governance-calendar .rbc-month-view,
.dark .legal-governance-calendar .rbc-time-view,
.dark .legal-governance-calendar .rbc-agenda-view {
border-color: #273447;
}
.dark .legal-governance-calendar .rbc-header {
border-color: #273447;
background: #0F172A;
color: #D8B75E;
}
.dark .legal-governance-calendar .rbc-month-row,
.dark .legal-governance-calendar .rbc-day-bg,
.dark .legal-governance-calendar .rbc-date-cell,
.dark .legal-governance-calendar .rbc-timeslot-group,
.dark .legal-governance-calendar .rbc-time-content,
.dark .legal-governance-calendar .rbc-time-header-content,
.dark .legal-governance-calendar .rbc-time-header.rbc-overflowing {
border-color: #273447;
}
.dark .legal-governance-calendar .rbc-date-cell {
color: #E2E8F0;
}
.dark .legal-governance-calendar .rbc-off-range {
color: #64748B;
}
.dark .legal-governance-calendar .rbc-off-range-bg {
background: #0B1120 !important;
}
.dark .legal-governance-calendar .rbc-today {
background: rgba(216, 183, 94, 0.12) !important;
}
.dark .legal-governance-calendar .rbc-selected-cell {
background: rgba(216, 183, 94, 0.18) !important;
}
.dark .legal-governance-calendar .rbc-event {
border-left-color: #F2C95C !important;
background: #D8B75E !important;
color: #08111F !important;
box-shadow: none;
}
.dark .legal-governance-calendar .rbc-event:focus,
.dark .legal-governance-calendar .rbc-event.rbc-selected {
outline-color: rgba(248, 250, 252, 0.5);
}
.dark .legal-governance-calendar .rbc-show-more {
background: rgba(216, 183, 94, 0.14) !important;
color: #F2C95C !important;
}
.dark .legal-governance-calendar .rbc-agenda-table {
border-color: #273447;
}
.dark .legal-governance-calendar .rbc-agenda-table th {
background: #0F172A;
color: #D8B75E;
}
.dark .legal-governance-calendar .rbc-agenda-table td {
border-color: #273447;
color: #CBD5E1;
}
.dark .legal-governance-calendar .rbc-time-gutter,
.dark .legal-governance-calendar .rbc-label {
color: #94A3B8;
} }

35
frontend/src/css/_table.css
View File

@ -72,6 +72,33 @@
.datagrid--table { .datagrid--table {
@apply rounded-xl border-none !important; @apply rounded-xl border-none !important;
--legal-grid-accent: #7A5B13;
--legal-grid-bg: #FFFFFF;
--legal-grid-border: #DDD5C7;
--legal-grid-border-muted: #E5E0D6;
--legal-grid-cell-text: #374151;
--legal-grid-checkbox: #8B7A61;
--legal-grid-footer-bg: #FBF8F1;
--legal-grid-header-bg: #FBF8F1;
--legal-grid-header-text: #0E1A2B;
--legal-grid-hover-bg: #FFF8E8;
--legal-grid-selected-bg: #FFF3C9;
--legal-grid-selected-hover-bg: #FFEDB1;
}
.dark .datagrid--table {
--legal-grid-accent: #D8B75E;
--legal-grid-bg: #111827;
--legal-grid-border: #273447;
--legal-grid-border-muted: #1F2A3A;
--legal-grid-cell-text: #CBD5E1;
--legal-grid-checkbox: #94A3B8;
--legal-grid-footer-bg: #0F172A;
--legal-grid-header-bg: #0F172A;
--legal-grid-header-text: #F8FAFC;
--legal-grid-hover-bg: #172033;
--legal-grid-selected-bg: rgba(216, 183, 94, 0.18);
--legal-grid-selected-hover-bg: rgba(216, 183, 94, 0.24);
} }
.datagrid--header { .datagrid--header {
@ -95,7 +122,7 @@
} }
.datagrid--row { .datagrid--row {
@apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important; @apply even:bg-[#F7F5EF] odd:bg-white dark:even:bg-[#0F172A] dark:odd:bg-[#111827] !important;
} }
.datagrid--table .MuiDataGrid-cell, .datagrid--table .MuiDataGrid-cell,
@ -119,7 +146,7 @@
} }
.datagrid--table .MuiDataGrid-cellContent { .datagrid--table .MuiDataGrid-cellContent {
color: #374151; color: var(--legal-grid-cell-text);
} }
@ -128,7 +155,7 @@
} }
.datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled { .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled {
@apply dark:text-dark-700; @apply dark:text-slate-600;
} }
.datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover { .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover {
@ -136,6 +163,6 @@
} }
.datagrid--table .MuiButton-colorInherit { .datagrid--table .MuiButton-colorInherit {
@apply text-blue-600 dark:text-dark-700 !important; @apply text-blue-600 dark:text-slate-300 !important;
} }
} }

71
frontend/src/css/_theme.css
View File

@ -101,3 +101,74 @@
@apply text-pavitra-800; @apply text-pavitra-800;
} }
} }
@layer base {
.dark {
color-scheme: dark;
}
.dark .bg-white:not([class*="!bg-"]) {
background-color: #111827 !important;
}
.dark .bg-slate-50,
.dark .bg-gray-50,
.dark .bg-gray-100,
.dark [class*="bg-slate-50/"],
.dark [class*="bg-[#FBF8F1]"],
.dark [class*="bg-[#F6F3EC]"],
.dark [class*="bg-[#F7F5EF]"] {
background-color: #0F172A !important;
}
.dark [class*="bg-[#F1E7C7]"],
.dark [class*="bg-[#FFF8DF]"],
.dark [class*="bg-[#EFF6FF]"] {
background-color: rgba(216, 183, 94, 0.14) !important;
}
.dark .text-black,
.dark .text-slate-950,
.dark .text-slate-900,
.dark [class*="text-[#0E1A2B]"],
.dark [class*="text-[#111827]"] {
color: #F8FAFC !important;
}
.dark .text-slate-700,
.dark .text-slate-600,
.dark .text-slate-500,
.dark .text-gray-500,
.dark [class*="text-[#5B6472]"],
.dark [class*="text-[#6B7280]"] {
color: #CBD5E1 !important;
}
.dark .text-slate-400,
.dark [class*="text-[#8B7A61]"],
.dark [class*="text-[#7A5B13]"],
.dark [class*="text-[#1D4ED8]"] {
color: #D8B75E !important;
}
.dark [class*="border-[#DDD5C7]"],
.dark [class*="border-[#E5E0D6]"],
.dark [class*="border-[#D8D0C2]"],
.dark [class*="border-[#D6E0F5]"],
.dark [class*="border-[#DBEAFE]"],
.dark .border-gray-300,
.dark .border-stone-300,
.dark .border-slate-200,
.dark .border-slate-300 {
border-color: #273447 !important;
}
.dark .divide-stone-300 > :not([hidden]) ~ :not([hidden]) {
border-color: #273447 !important;
}
.dark [class*="shadow-[#83755E]/10"],
.dark [class*="shadow-slate-200/50"] {
box-shadow: none !important;
}
}

14
frontend/src/layouts/Authenticated.tsx
View File

@ -102,14 +102,14 @@ export default function LayoutAuthenticated({
if (!isAuthReady) { if (!isAuthReady) {
return ( return (
<div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B]`}> <div className={`${darkMode ? 'dark' : ''} min-h-screen bg-[#F6F3EC] text-[#0E1A2B] dark:bg-[#08111F] dark:text-slate-50`}>
<div className='flex min-h-screen items-center justify-center px-5'> <div className='flex min-h-screen items-center justify-center px-5'>
<div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10'> <div className='w-full max-w-md rounded-xl border border-[#DDD5C7] bg-white p-6 text-center shadow-xl shadow-[#83755E]/10 dark:border-[#273447] dark:bg-[#111827] dark:shadow-none'>
<div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E]'> <div className='mx-auto flex h-12 w-12 items-center justify-center rounded-md bg-[#0E1A2B] text-[#D8B75E] dark:bg-[#D8B75E] dark:text-[#08111F]'>
<BaseIcon path={mdiShieldCheckOutline} size={26} /> <BaseIcon path={mdiShieldCheckOutline} size={26} />
</div> </div>
<h1 className='mt-5 text-xl font-semibold text-[#0E1A2B]'>Checking secure workspace access</h1> <h1 className='mt-5 text-xl font-semibold text-[#0E1A2B] dark:text-slate-50'>Checking secure workspace access</h1>
<p className='mt-3 text-sm leading-6 text-[#6B7280]'> <p className='mt-3 text-sm leading-6 text-[#6B7280] dark:text-slate-400'>
We are verifying your session before opening the legal AI governance workspace. We are verifying your session before opening the legal AI governance workspace.
</p> </p>
</div> </div>
@ -123,7 +123,7 @@ export default function LayoutAuthenticated({
<div <div
className={`${layoutAsidePadding} ${ className={`${layoutAsidePadding} ${
isAsideMobileExpanded ? 'ml-80 lg:ml-0' : '' isAsideMobileExpanded ? 'ml-80 lg:ml-0' : ''
} pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor} dark:bg-dark-800 dark:text-slate-100`} } pt-14 min-h-screen w-screen transition-position lg:w-auto ${bgColor} dark:bg-[#08111F] dark:text-slate-100`}
> >
<NavBar <NavBar
menu={menuNavBar} menu={menuNavBar}
@ -141,7 +141,7 @@ export default function LayoutAuthenticated({
> >
<BaseIcon path={mdiMenu} size="24" /> <BaseIcon path={mdiMenu} size="24" />
</NavBarItemPlain> </NavBarItemPlain>
<div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] 2xl:flex'> <div className='hidden items-center gap-2 px-4 text-xs font-semibold uppercase tracking-[0.14em] text-[#7A5B13] dark:text-[#D8B75E] 2xl:flex'>
<span className='h-2 w-2 rounded-full bg-emerald-500' /> <span className='h-2 w-2 rounded-full bg-emerald-500' />
<span>Audit trail active</span> <span>Audit trail active</span>
</div> </div>

64
frontend/src/pages/ai_use_cases/ai_use_cases-list.tsx
View File

@ -25,6 +25,7 @@ const Ai_use_casesTablesPage = () => {
const [csvFile, setCsvFile] = useState<File | null>(null); const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false); const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false); const [showTableView, setShowTableView] = useState(false);
const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
const { currentUser } = useAppSelector((state) => state.auth); const { currentUser } = useAppSelector((state) => state.auth);
@ -121,29 +122,54 @@ const Ai_use_casesTablesPage = () => {
{ label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' }, { label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
]} ]}
> >
{hasCreatePermission && <BaseButton href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New AI intake'/>} <div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
<BaseButton href={'/governance-workbench'} color='whiteDark' label='Governance workbench'/>
<BaseButton
color='info'
label='Add filter'
onClick={addFilter}
/>
<BaseButton color='whiteDark' label='Export CSV' onClick={getAi_use_casesCSV} />
{hasCreatePermission && ( {hasCreatePermission && (
<BaseButton <BaseButton
color='whiteDark' href={'/ai_use_cases/ai_use_cases-new'}
label='Upload CSV' color='info'
onClick={() => setIsModalActive(true)} label='New AI intake'
className={actionButtonClass}
/> />
)} )}
<BaseButton
<div className='md:inline-flex items-center ms-auto'> href={'/governance-workbench'}
<div id='delete-rows-button'></div> color='info'
</div> outline
label='Governance workbench'
<BaseButton href={'/ai_use_cases/ai_use_cases-table'} color='whiteDark' label='Table view'/> className={actionButtonClass}
/>
<BaseButton
color='info'
outline
label='Add filter'
onClick={addFilter}
className={actionButtonClass}
/>
<BaseButton
color='info'
outline
label='Export CSV'
onClick={getAi_use_casesCSV}
className={actionButtonClass}
/>
{hasCreatePermission && (
<BaseButton
color='info'
outline
label='Upload CSV'
onClick={() => setIsModalActive(true)}
className={actionButtonClass}
/>
)}
<div id='delete-rows-button' className='contents'></div>
<BaseButton
href={'/ai_use_cases/ai_use_cases-table'}
color='info'
outline
label='Table view'
className={actionButtonClass}
/>
</div>
</LegalOpsPageIntro> </LegalOpsPageIntro>
<TableAi_use_cases <TableAi_use_cases

92
frontend/src/pages/ai_use_cases/ai_use_cases-table.tsx
View File

@ -6,11 +6,11 @@ import CardBox from '../../components/CardBox'
import LayoutAuthenticated from '../../layouts/Authenticated' import LayoutAuthenticated from '../../layouts/Authenticated'
import SectionMain from '../../components/SectionMain' import SectionMain from '../../components/SectionMain'
import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton' import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'
import LegalOpsPageIntro from '../../components/LegalOpsPageIntro'
import { getPageTitle } from '../../config' import { getPageTitle } from '../../config'
import TableAi_use_cases from '../../components/Ai_use_cases/TableAi_use_cases' import TableAi_use_cases from '../../components/Ai_use_cases/TableAi_use_cases'
import BaseButton from '../../components/BaseButton' import BaseButton from '../../components/BaseButton'
import axios from "axios"; import axios from "axios";
import Link from "next/link";
import {useAppDispatch, useAppSelector} from "../../stores/hooks"; import {useAppDispatch, useAppSelector} from "../../stores/hooks";
import CardBoxModal from "../../components/CardBoxModal"; import CardBoxModal from "../../components/CardBoxModal";
import DragDropFilePicker from "../../components/DragDropFilePicker"; import DragDropFilePicker from "../../components/DragDropFilePicker";
@ -26,6 +26,7 @@ const Ai_use_casesTablesPage = () => {
const [csvFile, setCsvFile] = useState<File | null>(null); const [csvFile, setCsvFile] = useState<File | null>(null);
const [isModalActive, setIsModalActive] = useState(false); const [isModalActive, setIsModalActive] = useState(false);
const [showTableView, setShowTableView] = useState(false); const [showTableView, setShowTableView] = useState(false);
const actionButtonClass = 'min-h-[44px] w-full justify-center px-4 text-sm font-semibold';
const { currentUser } = useAppSelector((state) => state.auth); const { currentUser } = useAppSelector((state) => state.auth);
@ -34,33 +35,33 @@ const Ai_use_casesTablesPage = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const [filters] = useState([{label: 'UseCaseTitle', title: 'title'},{label: 'Description', title: 'description'},{label: 'BusinessGoal', title: 'business_goal'},{label: 'ReviewNotes', title: 'review_notes'}, const [filters] = useState([{label: 'Use case title', title: 'title'},{label: 'Description', title: 'description'},{label: 'Business goal', title: 'business_goal'},{label: 'Review notes', title: 'review_notes'},
{label: 'ExpectedHoursSaved', title: 'expected_hours_saved', number: 'true'}, {label: 'Expected hours saved', title: 'expected_hours_saved', number: 'true'},
{label: 'SubmittedAt', title: 'submitted_at', date: 'true'},{label: 'ApprovedAt', title: 'approved_at', date: 'true'}, {label: 'Submitted at', title: 'submitted_at', date: 'true'},{label: 'Approved at', title: 'approved_at', date: 'true'},
{label: 'Owner', title: 'owner'}, {label: 'Owner', title: 'owner'},
{label: 'PracticeGroup', title: 'practice_group'}, {label: 'Practice group', title: 'practice_group'},
{label: 'MatterType', title: 'matter_type'}, {label: 'Matter type', title: 'matter_type'},
{label: 'DataClassification', title: 'data_classification'}, {label: 'Data classification', title: 'data_classification'},
{label: 'IntendedAITool', title: 'intended_tool'}, {label: 'Intended AI tool', title: 'intended_tool'},
{label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'RiskLevel', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']}, {label: 'Status', title: 'status', type: 'enum', options: ['draft','submitted','risk_review','security_review','ethics_review','approved','rejected','needs_changes','retired']},{label: 'Risk level', title: 'risk_level', type: 'enum', options: ['low','medium','high','critical']},
]); ]);
const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_AI_USE_CASES'); const hasCreatePermission = currentUser && hasPermission(currentUser, 'CREATE_AI_USE_CASES');
@ -106,41 +107,64 @@ const Ai_use_casesTablesPage = () => {
return ( return (
<> <>
<Head> <Head>
<title>{getPageTitle('Ai_use_cases')}</title> <title>{getPageTitle('AI request register table')}</title>
</Head> </Head>
<SectionMain> <SectionMain>
<SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="Ai_use_cases" main> <SectionTitleLineWithButton icon={mdiChartTimelineVariant} title="AI request register table" main>
{''} {''}
</SectionTitleLineWithButton> </SectionTitleLineWithButton>
<CardBox className='mb-6' cardBoxClassName='flex flex-wrap'> <LegalOpsPageIntro
eyebrow='AI governance intake'
{hasCreatePermission && <BaseButton className={'mr-3'} href={'/ai_use_cases/ai_use_cases-new'} color='info' label='New Item'/>} title='Review proposed AI workflows in table view'
description='Use the table when you need dense scanning, filtering, CSV review, or quick edits across the AI request register.'
<BaseButton metrics={[
className={'mr-3'} { label: 'View mode', value: 'Table', helper: 'Best for bulk review and governance cleanup.' },
color='info' { label: 'Review model', value: 'Human approval', helper: 'Partner, GC, security, and ethics review stay visible.' },
label='Filter' { label: 'Evidence', value: 'ROI tracked', helper: 'Hours saved, notes, and approvals become an audit trail.' },
onClick={addFilter} ]}
/> >
<BaseButton className={'mr-3'} color='info' label='Download CSV' onClick={getAi_use_casesCSV} /> <div className='grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3'>
{hasCreatePermission && ( {hasCreatePermission && (
<BaseButton <BaseButton
href={'/ai_use_cases/ai_use_cases-new'}
color='info' color='info'
label='Upload CSV' label='New AI intake'
onClick={() => setIsModalActive(true)} className={actionButtonClass}
/> />
)} )}
<BaseButton
<div className='md:inline-flex items-center ms-auto'> color='info'
<div id='delete-rows-button'></div> outline
label='Add filter'
<Link href={'/ai_use_cases/ai_use_cases-list'}> onClick={addFilter}
Back to <span className='capitalize'>kanban</span> className={actionButtonClass}
</Link> />
<BaseButton
color='info'
outline
label='Export CSV'
onClick={getAi_use_casesCSV}
className={actionButtonClass}
/>
{hasCreatePermission && (
<BaseButton
color='info'
outline
label='Upload CSV'
onClick={() => setIsModalActive(true)}
className={actionButtonClass}
/>
)}
<div id='delete-rows-button' className='contents'></div>
<BaseButton
href={'/ai_use_cases/ai_use_cases-list'}
color='info'
outline
label='Card view'
className={actionButtonClass}
/>
</div> </div>
</CardBox> </LegalOpsPageIntro>
<CardBox className="mb-6" hasTable> <CardBox className="mb-6" hasTable>
<TableAi_use_cases <TableAi_use_cases
filterItems={filterItems} filterItems={filterItems}

70
frontend/src/styles.ts
View File

@ -25,29 +25,29 @@ interface StyleObject {
} }
export const white: StyleObject = { export const white: StyleObject = {
aside: 'bg-[#FBF8F1] text-[#374151] dark:text-white', aside: 'bg-[#FBF8F1] text-[#374151] dark:bg-[#0B1120] dark:text-slate-100',
asideScrollbars: 'aside-scrollbars-light', asideScrollbars: 'aside-scrollbars-light',
asideBrand: '', asideBrand: '',
asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800', asideMenuItem: 'text-[#374151] hover:bg-[#F1E7C7]/70 hover:text-[#0E1A2B] dark:text-slate-300 dark:hover:text-white dark:hover:bg-[#1E293B]',
asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:text-white', asideMenuItemActive: 'font-semibold text-[#0E1A2B] dark:bg-[#172033] dark:text-white',
asideMenuDropdown: 'bg-transparent', asideMenuDropdown: 'bg-transparent',
navBarItemLabel: 'text-[#4B5563]', navBarItemLabel: 'text-[#4B5563] dark:text-slate-300',
navBarItemLabelHover: 'hover:text-[#0E1A2B]', navBarItemLabelHover: 'hover:text-[#0E1A2B] dark:hover:text-white',
navBarItemLabelActiveColor: 'text-[#0E1A2B]', navBarItemLabelActiveColor: 'text-[#0E1A2B] dark:text-white',
overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC]', overlay: 'from-[#F6F3EC] via-[#E9E1D2] to-[#F6F3EC] dark:from-[#08111F] dark:via-[#0F172A] dark:to-[#08111F]',
activeLinkColor: 'bg-[#F1E7C7]', activeLinkColor: 'bg-[#F1E7C7] dark:bg-[#1F2937]',
bgLayoutColor: 'bg-[#F6F3EC]', bgLayoutColor: 'bg-[#F6F3EC] dark:bg-[#08111F]',
iconsColor: 'text-[#7A5B13]', iconsColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
cardsColor: 'bg-white', cardsColor: 'bg-white dark:bg-[#111827]',
focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:focus:ring-[#D8B75E] dark:focus:border-[#D8B75E]', focusRingColor: 'focus:ring focus:ring-[#D8B75E]/35 focus:border-[#D8B75E] focus:outline-none border-[#C9BFAE] dark:border-[#334155] dark:focus:ring-[#D8B75E]/35 dark:focus:border-[#D8B75E]',
corners: 'rounded-lg', corners: 'rounded-lg',
cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10', cardsStyle: 'bg-white border border-[#DDD5C7] shadow-sm shadow-[#83755E]/10 dark:bg-[#111827] dark:border-[#273447] dark:shadow-none',
linkColor: 'text-[#7A5B13]', linkColor: 'text-[#7A5B13] dark:text-[#D8B75E]',
websiteHeder: 'border-b border-[#DDD5C7]', websiteHeder: 'border-b border-[#DDD5C7] dark:border-[#273447]',
borders: 'border-[#DDD5C7]', borders: 'border-[#DDD5C7] dark:border-[#273447]',
shadow: 'shadow-sm shadow-[#83755E]/10', shadow: 'shadow-sm shadow-[#83755E]/10 dark:shadow-none',
websiteSectionStyle: '', websiteSectionStyle: '',
textSecondary: 'text-[#6B7280]', textSecondary: 'text-[#6B7280] dark:text-slate-400',
} }
@ -57,8 +57,8 @@ export const white: StyleObject = {
export const dataGridStyles = { export const dataGridStyles = {
'& .MuiDataGrid-cell': { '& .MuiDataGrid-cell': {
alignItems: 'center', alignItems: 'center',
borderColor: '#E5E0D6', borderColor: 'var(--legal-grid-border-muted)',
color: '#374151', color: 'var(--legal-grid-cell-text)',
display: 'flex', display: 'flex',
fontSize: '0.9rem', fontSize: '0.9rem',
lineHeight: 1.25, lineHeight: 1.25,
@ -68,7 +68,7 @@ export const dataGridStyles = {
'& .MuiDataGrid-columnHeader': { '& .MuiDataGrid-columnHeader': {
minHeight: '58px !important', minHeight: '58px !important',
padding: '10px 18px', padding: '10px 18px',
color: '#0E1A2B', color: 'var(--legal-grid-header-text)',
fontWeight: 700, fontWeight: 700,
}, },
'& .MuiDataGrid-columnHeaderCheckbox': { '& .MuiDataGrid-columnHeaderCheckbox': {
@ -79,11 +79,11 @@ export const dataGridStyles = {
maxHeight: 'unset !important', maxHeight: 'unset !important',
borderStartStartRadius: 7, borderStartStartRadius: 7,
borderStartEndRadius: 7, borderStartEndRadius: 7,
backgroundColor: '#FBF8F1', backgroundColor: 'var(--legal-grid-header-bg)',
borderColor: '#DDD5C7', borderColor: 'var(--legal-grid-border)',
}, },
'& .MuiDataGrid-columnHeaderTitle': { '& .MuiDataGrid-columnHeaderTitle': {
color: '#0E1A2B', color: 'var(--legal-grid-header-text)',
fontSize: '0.72rem', fontSize: '0.72rem',
fontWeight: 800, fontWeight: 800,
letterSpacing: '0.07em', letterSpacing: '0.07em',
@ -115,36 +115,36 @@ export const dataGridStyles = {
paddingY: 0.5, paddingY: 0.5,
borderEndStartRadius: 7, borderEndStartRadius: 7,
borderEndEndRadius: 7, borderEndEndRadius: 7,
borderColor: '#DDD5C7', borderColor: 'var(--legal-grid-border)',
backgroundColor: '#FBF8F1', backgroundColor: 'var(--legal-grid-footer-bg)',
minHeight: '60px', minHeight: '60px',
}, },
'& .MuiDataGrid-root': { '& .MuiDataGrid-root': {
border: '1px solid #DDD5C7', border: '1px solid var(--legal-grid-border)',
borderRadius: '12px', borderRadius: '12px',
overflow: 'hidden', overflow: 'hidden',
backgroundColor: '#FFFFFF', backgroundColor: 'var(--legal-grid-bg)',
}, },
'& .MuiDataGrid-row': { '& .MuiDataGrid-row': {
borderColor: '#E5E0D6', borderColor: 'var(--legal-grid-border-muted)',
}, },
'& .MuiDataGrid-row.Mui-selected': { '& .MuiDataGrid-row.Mui-selected': {
backgroundColor: '#FFF3C9', backgroundColor: 'var(--legal-grid-selected-bg)',
}, },
'& .MuiDataGrid-row.Mui-selected:hover': { '& .MuiDataGrid-row.Mui-selected:hover': {
backgroundColor: '#FFEDB1', backgroundColor: 'var(--legal-grid-selected-hover-bg)',
}, },
'& .MuiDataGrid-row:hover': { '& .MuiDataGrid-row:hover': {
backgroundColor: '#FFF8E8', backgroundColor: 'var(--legal-grid-hover-bg)',
}, },
'& .MuiDataGrid-iconButtonContainer .MuiIconButton-root': { '& .MuiDataGrid-iconButtonContainer .MuiIconButton-root': {
color: '#7A5B13', color: 'var(--legal-grid-accent)',
}, },
'& .MuiCheckbox-root': { '& .MuiCheckbox-root': {
color: '#8B7A61', color: 'var(--legal-grid-checkbox)',
}, },
'& .MuiCheckbox-root.Mui-checked': { '& .MuiCheckbox-root.Mui-checked': {
color: '#7A5B13', color: 'var(--legal-grid-accent)',
}, },
}; };