From 662e2e04bc1f4236496a6806a1bbbfa064bc5f0a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 17:47:19 +0000 Subject: [PATCH 01/12] Initial plan From 6da17e5f8f2191abe5388f7780b0e7a73793739c Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 17:58:13 +0000 Subject: [PATCH 02/12] Add dark mode support with user settings page - Configure Tailwind CSS with dark mode class strategy - Create UserSettingsProvider for managing theme preferences - Add Settings page with theme selector (light/dark/system) - Update Header and RootLayout with dark mode styles - Persist theme preference to localStorage - Add settings link to header navigation Co-authored-by: coder13 <881394+coder13@users.noreply.github.com> --- dev-dist/sw.js | 2 +- src/App.tsx | 23 ++++--- src/layouts/RootLayout/Header.tsx | 32 +++++++--- src/layouts/RootLayout/index.tsx | 2 +- src/pages/Settings/index.tsx | 51 ++++++++++++++++ .../UserSettingsContext.tsx | 17 ++++++ .../UserSettingsProvider.tsx | 60 +++++++++++++++++++ src/providers/UserSettingsProvider/index.ts | 3 + tailwind.config.js | 1 + 9 files changed, 171 insertions(+), 20 deletions(-) create mode 100644 src/pages/Settings/index.tsx create mode 100644 src/providers/UserSettingsProvider/UserSettingsContext.tsx create mode 100644 src/providers/UserSettingsProvider/UserSettingsProvider.tsx create mode 100644 src/providers/UserSettingsProvider/index.ts diff --git a/dev-dist/sw.js b/dev-dist/sw.js index 7a0a0a8..f1cb6e8 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -81,7 +81,7 @@ define(['./workbox-5357ef54'], function (workbox) { [ { url: 'index.html', - revision: '0.3rdphr8mv9', + revision: '0.m4cfs2nec8', }, ], {}, diff --git a/src/App.tsx b/src/App.tsx index a289226..882b13e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -28,12 +28,14 @@ import CompetitionScramblerSchedule from './pages/Competition/ScramblerSchedule' import CompetitionStats from './pages/Competition/Stats'; import CompetitionStreamSchedule from './pages/Competition/StreamSchedule'; import Home from './pages/Home'; +import Settings from './pages/Settings'; import Support from './pages/Support'; import Test from './pages/Test'; import UserLogin from './pages/UserLogin'; import { AppProvider } from './providers/AppProvider'; import { AuthProvider, useAuth } from './providers/AuthProvider'; import { QueryProvider } from './providers/QueryProvider/QueryProvider'; +import { UserSettingsProvider } from './providers/UserSettingsProvider'; import { useWCIF } from './providers/WCIFProvider'; const PersonalSchedule = () => { @@ -119,6 +121,7 @@ const Navigation = () => { } /> } /> + } /> } /> } /> @@ -129,15 +132,17 @@ const Navigation = () => { const App = () => ( - - - - - - - - - + + + + + + + + + + + ); diff --git a/src/layouts/RootLayout/Header.tsx b/src/layouts/RootLayout/Header.tsx index a3f1fff..9197d88 100644 --- a/src/layouts/RootLayout/Header.tsx +++ b/src/layouts/RootLayout/Header.tsx @@ -49,13 +49,15 @@ export default function Header() { }, [comp, competitionId, queryClient, wcif]); return ( -
+
- + - {competitionId && {' / '}} - + {competitionId && {' / '}} + {competitioName}
@@ -71,9 +73,16 @@ export default function Header() { }} // a style object to be applied to the popover container content={
setIsPopoverOpen(!isPopoverOpen)}> -
@@ -85,9 +94,14 @@ export default function Header() { ) : ( - +
+ + + + +
)}
); diff --git a/src/layouts/RootLayout/index.tsx b/src/layouts/RootLayout/index.tsx index 7267047..d7aedf4 100644 --- a/src/layouts/RootLayout/index.tsx +++ b/src/layouts/RootLayout/index.tsx @@ -8,7 +8,7 @@ export function RootLayout() { const { updateAvailable, updateSW } = usePWAUpdate(); return ( -
+
{updateAvailable && (
diff --git a/src/pages/Settings/index.tsx b/src/pages/Settings/index.tsx new file mode 100644 index 0000000..e09ca5a --- /dev/null +++ b/src/pages/Settings/index.tsx @@ -0,0 +1,51 @@ +import { Container } from '@/components'; +import { Theme, useUserSettings } from '@/providers/UserSettingsProvider'; + +export default function Settings() { + const { theme, setTheme } = useUserSettings(); + + const themeOptions: { value: Theme; label: string; description: string }[] = [ + { value: 'light', label: 'Light', description: 'Always use light theme' }, + { value: 'dark', label: 'Dark', description: 'Always use dark theme' }, + { value: 'system', label: 'System', description: 'Use system preference' }, + ]; + + return ( + +
+

Settings

+ +
+

Appearance

+ +
+ + {themeOptions.map((option) => ( +
+ setTheme(option.value)} + className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 dark:border-gray-600 dark:bg-gray-700" + /> + +
+ ))} +
+
+
+ + ); +} diff --git a/src/providers/UserSettingsProvider/UserSettingsContext.tsx b/src/providers/UserSettingsProvider/UserSettingsContext.tsx new file mode 100644 index 0000000..a09ef0c --- /dev/null +++ b/src/providers/UserSettingsProvider/UserSettingsContext.tsx @@ -0,0 +1,17 @@ +import { createContext, useContext } from 'react'; + +export type Theme = 'light' | 'dark' | 'system'; + +export interface UserSettingsContextProps { + theme: Theme; + setTheme: (theme: Theme) => void; + effectiveTheme: 'light' | 'dark'; +} + +export const UserSettingsContext = createContext({ + theme: 'system', + setTheme: () => {}, + effectiveTheme: 'light', +}); + +export const useUserSettings = () => useContext(UserSettingsContext); diff --git a/src/providers/UserSettingsProvider/UserSettingsProvider.tsx b/src/providers/UserSettingsProvider/UserSettingsProvider.tsx new file mode 100644 index 0000000..6c671df --- /dev/null +++ b/src/providers/UserSettingsProvider/UserSettingsProvider.tsx @@ -0,0 +1,60 @@ +import { PropsWithChildren, useEffect, useState } from 'react'; +import { getLocalStorage, setLocalStorage } from '@/lib/localStorage'; +import { Theme, UserSettingsContext } from './UserSettingsContext'; + +const THEME_STORAGE_KEY = 'theme'; + +const getSystemTheme = (): 'light' | 'dark' => { + if (typeof window === 'undefined') return 'light'; + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; +}; + +const getStoredTheme = (): Theme => { + const stored = getLocalStorage(THEME_STORAGE_KEY); + if (stored === 'light' || stored === 'dark' || stored === 'system') { + return stored; + } + return 'system'; +}; + +export function UserSettingsProvider({ children }: PropsWithChildren) { + const [theme, setThemeState] = useState(getStoredTheme); + const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme); + + const effectiveTheme = theme === 'system' ? systemTheme : theme; + + useEffect(() => { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const handleChange = (e: MediaQueryListEvent) => { + setSystemTheme(e.matches ? 'dark' : 'light'); + }; + + mediaQuery.addEventListener('change', handleChange); + return () => mediaQuery.removeEventListener('change', handleChange); + }, []); + + useEffect(() => { + const root = document.documentElement; + if (effectiveTheme === 'dark') { + root.classList.add('dark'); + } else { + root.classList.remove('dark'); + } + }, [effectiveTheme]); + + const setTheme = (newTheme: Theme) => { + setThemeState(newTheme); + setLocalStorage(THEME_STORAGE_KEY, newTheme); + }; + + return ( + + {children} + + ); +} diff --git a/src/providers/UserSettingsProvider/index.ts b/src/providers/UserSettingsProvider/index.ts new file mode 100644 index 0000000..adfd274 --- /dev/null +++ b/src/providers/UserSettingsProvider/index.ts @@ -0,0 +1,3 @@ +export { UserSettingsProvider } from './UserSettingsProvider'; +export { useUserSettings } from './UserSettingsContext'; +export type { Theme } from './UserSettingsContext'; diff --git a/tailwind.config.js b/tailwind.config.js index 2d9051f..977cf77 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ module.exports = { content: ['./src/**/*.{html,js,tsx}'], + darkMode: 'class', theme: { extend: {}, }, From 778838e26ea54e8ee0f6a1e27c327276e2d2a71a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 18:01:51 +0000 Subject: [PATCH 03/12] Add dark mode styles to key components - Update CompetitionListItem with dark mode background and text colors - Add dark mode support to Home page links and text - Update UpcomingCompetitions error messages and buttons - Add dark mode to CompetitionList titles and empty states - Update LastFetchedAt component with dark mode text - Update test snapshots for dark mode classes Co-authored-by: coder13 <881394+coder13@users.noreply.github.com> --- src/components/CompetitionList/CompetitionList.tsx | 6 ++++-- .../CompetitionListItem/CompetitionListItem.tsx | 6 +++--- .../__snapshots__/CompetitionListItem.test.tsx.snap | 12 ++++++------ src/components/LastFetchedAt/LastFetchedAt.tsx | 2 +- .../UpcomingCompetitions/UpcomingCompetitions.tsx | 7 ++++--- src/pages/Home/index.tsx | 6 +++--- 6 files changed, 21 insertions(+), 18 deletions(-) diff --git a/src/components/CompetitionList/CompetitionList.tsx b/src/components/CompetitionList/CompetitionList.tsx index cf3a129..8f2faa1 100644 --- a/src/components/CompetitionList/CompetitionList.tsx +++ b/src/components/CompetitionList/CompetitionList.tsx @@ -31,7 +31,7 @@ export function CompetitionListFragment({ return (
- {title} + {title} {loading ? :
} {!!competitions.length && (
    @@ -47,7 +47,9 @@ export function CompetitionListFragment({ )} {!!lastFetchedAt && } {!loading && !competitions.length && ( -
    {t('common.competitionList.noneFound')}
    +
    + {t('common.competitionList.noneFound')} +
    )}
); diff --git a/src/components/CompetitionListItem/CompetitionListItem.tsx b/src/components/CompetitionListItem/CompetitionListItem.tsx index 594c00f..cc1b116 100644 --- a/src/components/CompetitionListItem/CompetitionListItem.tsx +++ b/src/components/CompetitionListItem/CompetitionListItem.tsx @@ -33,7 +33,7 @@ export const CompetitionListItem = ({
  • {getUnicodeFlagIcon(country_iso2)}
    • )}
    -

    {name}

    {' '} -

    +

    {name}

    {' '} +

    {formatDateRange(start_date, end_date)} {' '}–{' '} {city} diff --git a/src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap b/src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap index 5db7a40..41defb4 100644 --- a/src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap +++ b/src/components/CompetitionListItem/__snapshots__/CompetitionListItem.test.tsx.snap @@ -7,7 +7,7 @@ exports[`CompetitionListItem matches snapshot (default) 1`] = ` href="/competitions/123" >

  • Test Competition @@ -28,7 +28,7 @@ exports[`CompetitionListItem matches snapshot (default) 1`] = `

    Jan 1 – 2, 2024 @@ -50,7 +50,7 @@ exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] = href="/competitions/123" >

  • Test Competition @@ -71,7 +71,7 @@ exports[`CompetitionListItem renders with all props (live and bookmarked) 1`] =

    Jan 1 – 2, 2024 diff --git a/src/components/LastFetchedAt/LastFetchedAt.tsx b/src/components/LastFetchedAt/LastFetchedAt.tsx index 38f659a..7a7c069 100644 --- a/src/components/LastFetchedAt/LastFetchedAt.tsx +++ b/src/components/LastFetchedAt/LastFetchedAt.tsx @@ -9,7 +9,7 @@ export const LastFetchedAt = ({ lastFetchedAt }: LastFetchAtProps) => { const { t } = useTranslation(); return ( -

    +
    {t('common.lastFetched', { date: intlFormatDistance(lastFetchedAt, new Date(), { locale: navigator.language, diff --git a/src/containers/UpcomingCompetitions/UpcomingCompetitions.tsx b/src/containers/UpcomingCompetitions/UpcomingCompetitions.tsx index faec146..ffcd628 100644 --- a/src/containers/UpcomingCompetitions/UpcomingCompetitions.tsx +++ b/src/containers/UpcomingCompetitions/UpcomingCompetitions.tsx @@ -40,7 +40,7 @@ export default function UpcomingCompetitions() { prefix="" /> )} - {status === 'error' &&
    Error: {error?.toString()}
    } + {status === 'error' &&
    Error: {error?.toString()}
    } fetchNextPage()} - disabled={!hasNextPage || isFetchingNextPage}> + disabled={!hasNextPage || isFetchingNextPage} + className="dark:text-gray-300"> {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load Newer' : ''}
    @@ -64,7 +65,7 @@ export default function UpcomingCompetitions() {
    -
    {__GIT_COMMIT__}
    +
    {__GIT_COMMIT__}
    {}
    diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index a90d42e..92fd84c 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -16,16 +16,16 @@ export default function Home() { return (
    -
    +

    {t('home.subtitle')}

    {t('home.explanation')}

    - + {t('home.learnMore')}
    {t('home.support')} From 2291babb29ef036d4e7ffc227b12cae7947b460e Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 18:04:19 +0000 Subject: [PATCH 04/12] Add comprehensive dark mode implementation guide - Create DARK_MODE.md with implementation patterns - Document architecture and theme management - Provide examples and best practices - Include accessibility guidelines - Add color palette reference Co-authored-by: coder13 <881394+coder13@users.noreply.github.com> --- DARK_MODE.md | 211 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 DARK_MODE.md diff --git a/DARK_MODE.md b/DARK_MODE.md new file mode 100644 index 0000000..d36f003 --- /dev/null +++ b/DARK_MODE.md @@ -0,0 +1,211 @@ +# Dark Mode Implementation Guide + +This document describes the dark mode implementation in the Competition Groups application and provides guidance for developers adding dark mode support to new components. + +## Overview + +The application uses Tailwind CSS's class-based dark mode strategy. The theme preference is managed via a React context provider and persisted in localStorage. + +## Architecture + +### Theme Management + +- **Provider**: `UserSettingsProvider` manages the theme state +- **Context**: `UserSettingsContext` provides access to theme settings +- **Hook**: `useUserSettings()` hook for accessing theme in components +- **Storage**: Theme preference is stored in localStorage with the key `competition-groups.{CLIENT_ID}.theme` + +### Theme Options + +1. **Light**: Always use light theme +2. **Dark**: Always use dark theme +3. **System**: Follow the system's color scheme preference + +### Implementation Details + +The `UserSettingsProvider`: + +- Monitors system theme preference via `window.matchMedia('(prefers-color-scheme: dark)')` +- Applies the `dark` class to `document.documentElement` when dark mode is active +- Persists the user's theme choice to localStorage +- Restores the theme on page load + +## Adding Dark Mode to Components + +### Basic Pattern + +Use Tailwind's `dark:` variant to add dark mode styles: + +```tsx +
    +

    Title

    +

    Description

    +
    +``` + +### Common Patterns + +#### Background Colors + +```tsx +// Main backgrounds +className = 'bg-white dark:bg-gray-900'; + +// Card/panel backgrounds +className = 'bg-white dark:bg-gray-800'; + +// Nested/elevated backgrounds +className = 'bg-gray-50 dark:bg-gray-700'; +``` + +#### Text Colors + +```tsx +// Primary text +className = 'text-gray-900 dark:text-white'; + +// Secondary text +className = 'text-gray-600 dark:text-gray-400'; + +// Muted/tertiary text +className = 'text-gray-500 dark:text-gray-500'; +``` + +#### Borders + +```tsx +// Default borders +className = 'border-gray-200 dark:border-gray-700'; + +// Emphasized borders +className = 'border-gray-300 dark:border-gray-600'; +``` + +#### Links + +```tsx +// Primary links +className = 'text-blue-700 dark:text-blue-400'; + +// With underline +className = 'text-blue-700 dark:text-blue-400 underline'; +``` + +#### Interactive States + +```tsx +// Hover +className = 'hover:bg-gray-100 dark:hover:bg-gray-700'; + +// Focus +className = 'focus:ring-blue-500 dark:focus:ring-blue-400'; + +// Active/Selected +className = 'bg-blue-100 dark:bg-blue-900'; +``` + +#### Shadows + +```tsx +// Subtle shadow +className = 'shadow-md dark:shadow-gray-800'; + +// No shadow in dark mode (optional) +className = 'shadow-md dark:shadow-none'; +``` + +## Examples from the Codebase + +### Header Component + +```tsx +
    + + + +
    +``` + +### List Item Component + +```tsx +
  • +

    {title}

    +

    {subtitle}

    +
    • +``` + +### Button Component + +```tsx + +``` + +## Testing Dark Mode + +### Manual Testing + +1. Navigate to `/settings` +2. Select "Dark" theme +3. Verify all visible components display correctly +4. Check for: + - Proper contrast between text and backgrounds + - Visible borders and dividers + - Readable link colors + - Appropriate hover states + +### Automated Testing + +When adding dark mode classes to components with snapshot tests, update the snapshots: + +```bash +yarn test -u +``` + +## Color Palette Reference + +### Light Mode + +- Background: `white`, `gray-50` +- Text: `gray-900`, `gray-600`, `gray-500` +- Borders: `gray-200`, `gray-300` +- Links: `blue-700` + +### Dark Mode + +- Background: `gray-900`, `gray-800`, `gray-700` +- Text: `white`, `gray-400`, `gray-500` +- Borders: `gray-700`, `gray-600` +- Links: `blue-400` + +## Best Practices + +1. **Always pair background and text colors**: When you change a background to dark, update text colors for contrast +2. **Test with both themes**: Always check that your component looks good in both light and dark mode +3. **Use semantic color scales**: Stick to the established gray and blue scales for consistency +4. **Consider interactive states**: Don't forget to add dark mode variants for hover, focus, and active states +5. **Update tests**: Remember to update snapshot tests when adding dark mode classes + +## Accessibility + +- Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text) +- Test with high contrast mode enabled +- Ensure focus indicators are visible in both themes + +## Future Enhancements + +Potential improvements to the dark mode system: + +- Add more theme options (e.g., high contrast, custom themes) +- Implement per-page theme overrides +- Add transition animations when switching themes +- Create a theme preview component +- Add keyboard shortcuts for theme switching From 99c85a99f07397676a71d7dc67b0d1993bc78064 Mon Sep 17 00:00:00 2001 From: Cailyn Sinclair Date: Sat, 10 Jan 2026 12:50:09 -0800 Subject: [PATCH 05/12] added darkmode everywhere --- dev-dist/sw.js | 2 +- src/components/ActivityRow/ActivityRow.tsx | 2 +- .../AssignmentLabel/AssignmentLabel.tsx | 48 ++++++++--- src/components/Breadcrumbs/Breadcrumbs.tsx | 6 +- src/components/Button/Button.tsx | 23 +++++- .../CompetitionSelect/CompetitionSelect.tsx | 80 ++++++++++++++++++ src/components/ExternalLink/ExternalLink.tsx | 2 +- src/components/LinkButton/LinkButton.tsx | 18 +++-- src/components/Notebox/Notebox.tsx | 2 +- src/components/Pill/Pill.tsx | 24 ++++++ .../PinCompetitionButton.tsx | 2 +- .../Competitors/CompetitorListItem.tsx | 10 +-- src/containers/Competitors/Competitors.tsx | 8 +- .../PersonalBests/PersonalBests.tsx | 26 +++--- .../PersonalSchedule/Assignments.tsx | 10 +-- .../PersonalSchedule/PersonHeader.tsx | 18 ++--- .../PersonalExtraAssignment.tsx | 19 +++-- .../PersonalNormalAssignment.tsx | 29 ++++--- .../PersonalSchedule/PersonalSchedule.tsx | 6 +- src/containers/Schedule/Schedule.tsx | 2 +- .../StyledNavLink/StyledNavLink.tsx | 5 +- src/index.css | 6 +- .../CompetitionLayout/CompetitionLayout.tsx | 4 +- src/layouts/RootLayout/index.tsx | 2 +- src/lib/assignments.ts | 2 +- src/pages/About/index.tsx | 2 +- src/pages/Competition/ByGroup/Events.tsx | 11 ++- src/pages/Competition/ByGroup/Group.tsx | 32 ++++---- src/pages/Competition/ByGroup/GroupList.tsx | 8 +- src/pages/Competition/Home/index.tsx | 2 +- src/pages/Competition/Information/UserRow.tsx | 14 ++-- src/pages/Competition/Information/index.tsx | 6 +- .../PsychSheet/PsychSheetEvent.tsx | 7 +- .../Competition/Schedule/EventActivity.tsx | 38 ++++----- .../Competition/Schedule/OtherActivity.tsx | 4 +- src/pages/Competition/Schedule/PeopleList.tsx | 81 +++++++++++-------- src/pages/Competition/Schedule/Room.tsx | 10 ++- src/pages/Competition/Schedule/Rooms.tsx | 6 +- src/pages/Competition/Schedule/Schedule.tsx | 2 +- src/pages/Settings/index.tsx | 60 +++++++------- src/pages/Support/index.tsx | 6 +- 41 files changed, 415 insertions(+), 230 deletions(-) diff --git a/dev-dist/sw.js b/dev-dist/sw.js index f1cb6e8..72af64e 100644 --- a/dev-dist/sw.js +++ b/dev-dist/sw.js @@ -81,7 +81,7 @@ define(['./workbox-5357ef54'], function (workbox) { [ { url: 'index.html', - revision: '0.m4cfs2nec8', + revision: '0.mtq2duqj29g', }, ], {}, diff --git a/src/components/ActivityRow/ActivityRow.tsx b/src/components/ActivityRow/ActivityRow.tsx index aec2ac4..00aa1ac 100644 --- a/src/components/ActivityRow/ActivityRow.tsx +++ b/src/components/ActivityRow/ActivityRow.tsx @@ -31,7 +31,7 @@ export function ActivityRow({ activity, stage, timeZone, showRoom = true }: Acti + {t('common.assignments.staff-judge.noun', { defaultValue: assignmentCode.replace('staff-', ''), })} - + ); } @@ -25,24 +25,46 @@ export function AssignmentLabel({ assignmentCode }: AssignmentLabelProps) { switch (assignmentCode) { case 'competitor': - return {name}; + return ( + {name} + ); case 'staff-scrambler': - return {name}; + return ( + {name} + ); case 'staff-runner': - return {name}; + return ( + {name} + ); case 'staff-dataentry': - return {name}; + return ( + {name} + ); case 'staff-announcer': - return {name}; + return ( + {name} + ); case 'staff-delegate': - return {name}; + return ( + {name} + ); case 'staff-stagelead': - return {name}; + return ( + + {name} + + ); case 'staff-stream': - return {name}; + return ( + {name} + ); case 'staff-photo': - return {name}; + return ( + {name} + ); default: - return {name}; + return ( + {name} + ); } } diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx index 397694d..a04d4ed 100644 --- a/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames'; import { Fragment } from 'react'; import { Link } from 'react-router-dom'; -import { Pill, PillProps } from '../Pill'; +import { BreadcrumbPill, Pill, PillProps } from '../Pill'; export type Breadcrumb = | { @@ -25,14 +25,14 @@ export const Breadcrumbs = ({ breadcrumbs }: BreadcrumbsProps) => { {index > 0 && ·} {'href' in breadcrumb ? ( - {label} - + ) : ( {label} diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 4ca5e2c..977f0d2 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -3,8 +3,27 @@ import { ButtonHTMLAttributes, PropsWithChildren } from 'react'; export interface ButtonProps extends PropsWithChildren> { className?: string; + variant?: 'blue' | 'green' | 'gray' | 'light'; } -export const Button = ({ className, ...props }: ButtonProps) => { - return