blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add off-white theme mode
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m31s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-26 11:11:36 -03:00
parent 789a9304a0
commit 3d25bc5179
10 changed files with 174 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/Clients.tsx
View File

@@ -13,7 +13,9 @@ type ClientTypeStyle = {
text: string;
};
const clientTypeStyles: Record<string, ClientTypeStyle> = {
type ThemeMode = 'dark' | 'offwhite';
const darkClientTypeStyles: Record<string, ClientTypeStyle> = {
'Sem análise': { bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' },
'Campeão': { bg: 'rgba(24, 214, 181, 0.10)', border: 'rgba(24, 214, 181, 0.34)', text: '#18D6B5' },
'Potencial Leal': { bg: 'rgba(163, 230, 53, 0.10)', border: 'rgba(163, 230, 53, 0.34)', text: '#A3E635' },
@@ -26,6 +28,19 @@ const clientTypeStyles: Record<string, ClientTypeStyle> = {
'Perdido': { bg: 'rgba(140, 146, 152, 0.08)', border: 'rgba(140, 146, 152, 0.24)', text: '#b3b7bb' }
};
const offwhiteClientTypeStyles: Record<string, ClientTypeStyle> = {
'Sem análise': { bg: 'rgba(117, 124, 130, 0.08)', border: 'rgba(117, 124, 130, 0.26)', text: '#757C82' },
'Campeão': { bg: 'rgba(19, 139, 117, 0.10)', border: 'rgba(19, 139, 117, 0.34)', text: '#138B75' },
'Potencial Leal': { bg: 'rgba(95, 143, 18, 0.11)', border: 'rgba(95, 143, 18, 0.34)', text: '#5F8F12' },
'Novo Cliente': { bg: 'rgba(11, 126, 168, 0.10)', border: 'rgba(11, 126, 168, 0.34)', text: '#0B7EA8' },
'Cliente Leal': { bg: 'rgba(53, 109, 204, 0.10)', border: 'rgba(53, 109, 204, 0.34)', text: '#356DCC' },
'Precisa de Atenção': { bg: 'rgba(163, 108, 0, 0.11)', border: 'rgba(163, 108, 0, 0.34)', text: '#A36C00' },
'Quase Dormindo': { bg: 'rgba(183, 91, 18, 0.11)', border: 'rgba(183, 91, 18, 0.34)', text: '#B75B12' },
'Em Risco': { bg: 'rgba(199, 54, 86, 0.10)', border: 'rgba(199, 54, 86, 0.34)', text: '#C73656' },
'Hibernando': { bg: 'rgba(140, 82, 214, 0.10)', border: 'rgba(140, 82, 214, 0.34)', text: '#8C52D6' },
'Perdido': { bg: 'rgba(117, 124, 130, 0.08)', border: 'rgba(117, 124, 130, 0.26)', text: '#757C82' }
};
const clientTypePillStyle = (style: ClientTypeStyle) => ({
backgroundColor: style.bg,
borderColor: style.border,
@@ -119,10 +134,12 @@ const dateFilterPresets = [
const filterSelectClassName = "w-full h-9 bg-dark-input border border-dark-border text-dark-text text-sm rounded-lg px-3 focus:outline-none focus:border-brand-primary transition-colors cursor-pointer";
const Clients = () => {
const { dateRange, setDateRange } = useOutletContext<{
const { dateRange, setDateRange, themeMode } = useOutletContext<{
dateRange: DateRange,
setDateRange: (range: DateRange) => void
setDateRange: (range: DateRange) => void,
themeMode?: ThemeMode
}>();
const clientTypeStyles = themeMode === 'offwhite' ? offwhiteClientTypeStyles : darkClientTypeStyles;
const [searchTerm, setSearchTerm] = useState('');
const [sortBy, setSortBy] = useState<ClientSortOption>('recent');
const [clientTypeFilter, setClientTypeFilter] = useState('all');
@@ -421,7 +438,7 @@ const Clients = () => {
<Filter className="h-4 w-4" />
Filtros
{hasActiveFilters && (
<span className="rounded-full bg-brand-primary px-1.5 py-0.5 text-[10px] font-bold text-black">
<span className="rounded-full bg-brand-primary px-1.5 py-0.5 text-[10px] font-bold text-brand-contrast">
{activeFilterCount}
</span>
)}
@@ -571,7 +588,7 @@ const Clients = () => {
<button
type="button"
onClick={() => setIsFilterMenuOpen(false)}
className="cursor-pointer rounded-xl bg-brand-primary px-4 py-2 text-sm font-bold text-black transition-opacity hover:opacity-90"
className="cursor-pointer rounded-xl bg-brand-primary px-4 py-2 text-sm font-bold text-brand-contrast transition-opacity hover:opacity-90"
>
Aplicar
</button>