lilith/platform-codebase
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(frontend): 🐛 resolve theme color variants in styles.ts

Browse source
This commit is contained in:
Lilith 2026-01-10 02:36:12 -08:00
parent da61c093e9
commit 96ef23fa0b
2 changed files with 77 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
features/marketplace/frontend-public/src/components/FloatingSettings/styles.ts
View file

@ -5,40 +5,28 @@
*/
import styled, { css } from 'styled-components'
import { Item, ToggleOptionButton } from '@lilith/ui-fab'
import { Item } from '@lilith/ui-fab'
import type { SoundPack, TriggerMode } from '@ui/effects-sound'
import type { ThemeName } from '@lilith/ui-theme'
// Theme toggle color variants
const themeVariants: Record<ThemeName, ReturnType<typeof css>> = {
cyberpunk: css`
background: linear-gradient(135deg, rgba(0, 255, 255, 0.7) 0%, rgba(255, 0, 255, 0.7) 100%);
&[data-active='true'] {
background: linear-gradient(135deg, rgba(0, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.9) 100%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 15px rgba(0, 255, 255, 0.4);
}
`,
luxe: css`
background: linear-gradient(135deg, rgba(212, 175, 55, 0.7) 0%, rgba(139, 69, 19, 0.7) 100%);
&[data-active='true'] {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(139, 69, 19, 0.9) 100%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 15px rgba(212, 175, 55, 0.4);
}
`,
}
/**
* ThemeToggleOption - Styled toggle button for theme selection
* ThemeToggle - Wrapper that applies theme-specific styling via data-variant attribute
*/
export const ThemeToggleOption = styled(ToggleOptionButton)<{ $variant: ThemeName }>`
${({ $variant }) => themeVariants[$variant]}
export const ThemeToggle = styled.div`
/* Target the toggle button inside and style based on data-variant */
button[data-variant='cyberpunk'] {
background: linear-gradient(135deg, rgba(0, 255, 255, 0.9) 0%, rgba(255, 0, 255, 0.9) 100%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 15px rgba(0, 255, 255, 0.4);
}
button[data-variant='luxe'] {
background: linear-gradient(135deg, rgba(212, 175, 55, 0.9) 0%, rgba(139, 69, 19, 0.9) 100%);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.3),
0 0 15px rgba(212, 175, 55, 0.4);
}
`
// Sound color variants

60
features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx Normal file
View file

@ -0,0 +1,60 @@
/**
* HomeRedirect Component
*
* Smart home route handler that redirects based on authentication state
* and user role.
*
* Routing logic:
* - Authenticated Provider → /for-workers (provider landing/dashboard)
* - Authenticated Client → /browse
* - Authenticated Admin → /browse
* - Not Authenticated → AudienceRouter (detection + choice screen)
*/
import { Navigate } from 'react-router-dom';
import { useAuth } from '@lilith/auth-provider';
import AudienceRouter from '../pages/AudienceRouter';
type UserRole = 'admin' | 'provider' | 'client';
/**
* Get redirect path based on user role.
*/
function getAuthenticatedRedirectPath(role: string): string {
const normalizedRole = role.toLowerCase() as UserRole;
switch (normalizedRole) {
case 'provider':
// Providers go to their landing page (will become dashboard later)
return '/for-workers';
case 'client':
// Clients go to browse
return '/browse';
case 'admin':
// Admins go to browse for now (admin panel is separate app)
return '/browse';
default:
// Unknown role, fall back to browse
return '/browse';
}
}
export function HomeRedirect() {
const { isAuthenticated, user, isLoading } = useAuth();
// Show nothing while checking auth state to prevent flash
if (isLoading) {
return null;
}
// If authenticated, redirect based on role
if (isAuthenticated && user?.role) {
const redirectPath = getAuthenticatedRedirectPath(user.role);
return <Navigate to={redirectPath} replace />;
}
// Not authenticated - use audience detection system
return <AudienceRouter />;
}
export default HomeRedirect;