diff --git a/frontend/index.html b/frontend/index.html index 736504b..4099128 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,8 @@ - + + Handy-Insel Portal diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 1c81a2a..9030cd3 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,6 +1,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'; import { api, type App as PortalApp, type Links, type News, type NewsInput, type User } from './api'; import { Icon } from './icons'; +import { useTheme } from './useTheme'; function greeting(date = new Date()): string { const h = date.getHours(); @@ -25,14 +26,14 @@ export function App() { }); }, []); - if (!me) return
Lade Portal …
; + if (!me) return
Lade Portal …
; return (
-

+

{greeting()},
{me.user.firstName}. @@ -49,6 +50,7 @@ export function App() { function Header({ user, links }: { user: User; links: Links }) { const [open, setOpen] = useState(false); + const { theme, toggle } = useTheme(); const ref = useRef(null); useEffect(() => { @@ -65,19 +67,28 @@ function Header({ user, links }: { user: User; links: Links }) { }, [open]); return ( -
+
- - + + Handy-Insel -
+
+ @@ -231,15 +242,15 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) { setEditing(null)} onSave={save} /> )} - {error &&

{error}

} - {news && !news.length && !editing &&

Es gibt noch keine Neuigkeiten.

} + {error &&

{error}

} + {news && !news.length && !editing &&

Es gibt noch keine Neuigkeiten.

}
    {news?.map((item) => ( -
  • +
  • -

    - {item.pinned && } +

    + {item.pinned && } {item.title}

    {canEdit && ( @@ -249,10 +260,10 @@ function NewsPanel({ canEdit }: { canEdit: boolean }) {

    )}
-
+
{dateFmt.format(new Date(item.createdAt))} · {item.author}
- {item.body &&

{item.body}

} + {item.body &&

{item.body}

} ))} @@ -267,7 +278,7 @@ function IconButton({ label, icon, onClick }: { label: string; icon: 'pencil' | onClick={onClick} title={label} aria-label={label} - className="grid h-7 w-7 place-items-center rounded-md text-slate-500 hover:bg-slate-100 hover:text-ink" + className="grid h-7 w-7 place-items-center rounded-md text-fg-3 hover:bg-surface-3 hover:text-fg" > @@ -301,24 +312,24 @@ function NewsForm({ } } - const field = 'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm focus:border-brand-500 focus:outline-none'; + const field = 'w-full rounded-md border border-line-2 bg-surface px-3 py-2 text-sm focus:border-accent focus:outline-none'; return ( -
+ setTitle(e.target.value)} maxLength={200} required autoFocus />