evan/AnthoLume
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

theme draft 2 (done?)

Browse Source
This commit is contained in:
Evan Reichard
2026-03-22 13:36:02 -04:00
parent 6c2c4f6b8b
commit b13f9b362c
18 changed files with 257 additions and 447 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@ interface FieldProps {
export function Field({ label, children, isEditing: _isEditing = false }: FieldProps) {
return (
<div className="relative rounded">
<div className="relative inline-flex gap-2 text-gray-500">{label}</div>
<div className="relative inline-flex gap-2 text-content-muted">{label}</div>
{children}
</div>
);

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

@@ -90,7 +90,7 @@ export default function Layout() {
{isUserDropdownOpen && (
<div className="absolute right-4 top-16 z-20 pt-4 transition duration-200">
<div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 dark:shadow-gray-800">
<div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-border/30">
<div
className="border-b border-border px-4 py-3"
role="group"

16
frontend/src/components/ReadingHistoryGraph.tsx
View File

@@ -124,10 +124,7 @@ export function getSVGGraphData(
const itemY = svgHeight - itemSize;
const lineX = (idx + 1) * blockOffset;
linePoints.push({
x: lineX,
y: itemY,
});
linePoints.push({ x: lineX, y: itemY });
if (lineX > maxBX) {
maxBX = lineX;
@@ -164,8 +161,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
if (!data || data.length < 2) {
return (
<div className="relative flex h-24 items-center justify-center bg-gray-100 dark:bg-gray-600">
<p className="text-gray-400 dark:text-gray-300">No data available</p>
<div className="relative flex h-24 items-center justify-center bg-surface-muted">
<p className="text-content-subtle">No data available</p>
</div>
);
}
@@ -175,8 +172,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
return (
<div className="relative">
<svg viewBox={`26 0 755 ${svgHeight}`} preserveAspectRatio="none" width="100%" height="6em">
<path fill="#316BBE" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
<path fill="none" stroke="#316BBE" d={BezierPath} />
<path fill="rgb(var(--secondary-600))" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
<path fill="none" stroke="rgb(var(--secondary-600))" d={BezierPath} />
</svg>
<div
className="absolute top-0 flex size-full"
@@ -196,11 +193,10 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
}}
>
<div
className="pointer-events-none absolute top-3 flex flex-col items-center rounded p-2 text-xs dark:text-white"
className="pointer-events-none absolute top-3 flex flex-col items-center rounded bg-surface/80 p-2 text-xs text-content"
style={{
transform: 'translateX(-50%)',
left: '50%',
backgroundColor: 'rgba(128, 128, 128, 0.2)',
}}
>
<span>{formatDate(point.date)}</span>

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

@@ -15,7 +15,7 @@ export function Skeleton({
height,
animation = 'pulse',
}: SkeletonProps) {
const baseClasses = 'bg-gray-200 dark:bg-gray-600';
const baseClasses = 'bg-surface-strong';
const variantClasses = {
default: 'rounded',
@@ -184,7 +184,7 @@ export function PageLoader({ message = 'Loading...', className = '' }: PageLoade
return (
<div className={cn('flex min-h-[400px] flex-col items-center justify-center gap-4', className)}>
<div className="relative">
<div className="size-12 animate-spin rounded-full border-4 border-gray-200 border-t-secondary-500 dark:border-gray-600" />
<div className="size-12 animate-spin rounded-full border-4 border-surface-strong border-t-secondary-500" />
</div>
<p className="text-sm font-medium text-content-muted">{message}</p>
</div>
@@ -206,7 +206,7 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
return (
<div className={cn('flex items-center justify-center', className)}>
<div
className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-secondary-500 dark:border-gray-600`}
className={`${sizeMap[size]} animate-spin rounded-full border-surface-strong border-t-secondary-500`}
/>
</div>
);