Skip to content

Commit eb75f1c

Browse files
arianrhodsandlotarianrhodsandlot
committed
fix: better styles for company logos and device info
1 parent da11050 commit eb75f1c

File tree

12 files changed

+369
-315
lines changed

12 files changed

+369
-315
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
"@types/react": "19.0.10",
7676
"@types/react-dom": "19.0.4",
7777
"@types/sax": "1.2.7",
78-
"better-sqlite3": "11.8.1",
78+
"better-sqlite3": "11.9.0",
7979
"drizzle-kit": "0.30.5",
8080
"eslint": "9.22.0",
8181
"libretrodb": "1.0.0",
@@ -92,7 +92,7 @@
9292
"wrangler": "4.0.0",
9393
"zx": "8.4.1"
9494
},
95-
"packageManager": "[email protected].2",
95+
"packageManager": "[email protected].3",
9696
"pnpm": {
9797
"onlyBuiltDependencies": [
9898
"@prisma/client",

‎pnpm-lock.yaml

+276-220
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/pages/library/components/app-layout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default function AppLayout({
2727

2828
return (
2929
<ServerDataContextProvider value={value}>
30-
<div className='flex h-screen bg-[var(--theme)]'>
30+
<div className='flex h-screen bg-[var(--accent-9)]'>
3131
<aside className='ml-4 flex w-64 shrink-0 flex-col'>
3232
<div className='flex items-center justify-center gap-2 pb-4 pt-2 font-bold text-white'>
3333
<img alt='logo' height='32' src='/assets/logo/logo-192x192.png' width='32' />

‎src/pages/library/components/device-info.tsx

+12-24
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
import { getPlatformInfo } from '@/controllers/get-platform-info.ts'
22
import { getCDNUrl } from '@/utils/cdn.ts'
33
import { CompanyLogo } from '../platform/components/company-logo.tsx'
4+
import { DeviceNotes } from './device-notes.tsx'
45

56
// todo: move to constants
67
const platformImageMap = {
78
arcade: { logoFilePath: 'arcade/art/system.svg', logoRepo: 'RetroPie/es-theme-carbon' },
8-
atarilynx: {
9-
logoFilePath: 'themes/batocera/lynx/_data/svg/logo.svg',
10-
},
11-
'sg-1000': {
12-
logoFilePath: 'themes/batocera/sg1000/_data/svg/logo.svg',
13-
},
9+
atarilynx: { logoFilePath: 'themes/batocera/lynx/_data/svg/logo.svg' },
10+
megadrive: { logoFilePath: 'genesis/art/system.svg', logoRepo: 'RetroPie/es-theme-carbon' },
11+
'sg-1000': { logoFilePath: 'themes/batocera/sg1000/_data/svg/logo.svg' },
1412
sms: {
1513
devicePhotoFilePath: 'systems/device/mastersystem.png',
1614
logoFilePath: 'themes/batocera/mastersystem/_data/svg/logo.svg',
@@ -47,35 +45,25 @@ export async function DeviceInfo({ platform }: { platform: string }) {
4745
<span className='icon-[mdi--calendar]' />
4846
Released
4947
</div>
50-
<div className='pl-6'>{platformInfo.release_date?.toLocaleDateString() || 'unknown'}</div>
51-
</div>
52-
53-
<div>
54-
<div className='flex items-center gap-2 font-semibold'>
55-
<span className='icon-[mdi--chip]' />
56-
Developer
57-
</div>
58-
<div className='pl-6'>
59-
<CompanyLogo company={platformInfo.developer || ''} />
60-
{platformInfo.developer || 'unknown'}
61-
</div>
48+
<div className='mt-1 pl-6'>{platformInfo.release_date?.toLocaleDateString() || 'unknown'}</div>
6249
</div>
6350

6451
<div>
6552
<div className='flex items-center gap-2 font-semibold'>
6653
<span className='icon-[mdi--factory]' />
6754
Manufacturer
6855
</div>
69-
<div className='pl-6'>
70-
<CompanyLogo company={platformInfo.manufacturer || ''} />
71-
{platformInfo.manufacturer || 'unknown'}
56+
<div className='mt-1 pl-6'>
57+
<CompanyLogo
58+
className='h-5'
59+
company={platformInfo.manufacturer || ''}
60+
fallback={platformInfo.developer || 'unknown'}
61+
/>
7262
</div>
7363
</div>
7464
</div>
7565
</div>
76-
<div className='prose-neutral prose max-w-none whitespace-pre-line px-8 text-justify text-sm font-[Roboto_Slab_Variable] leading-relaxed'>
77-
{platformInfo.notes}
78-
</div>
66+
<DeviceNotes notes={platformInfo.notes || ''} />
7967
</div>
8068

8169
<div className='w-lg shrink-0'>

‎src/pages/library/components/device-notes.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
'use client'
2+
import { Button } from '@radix-ui/themes'
3+
import { useResizeObserver, useToggle } from '@react-hookz/web'
4+
import clsx from 'clsx'
5+
import { useRef } from 'react'
6+
7+
export function DeviceNotes({ notes }: { notes: string }) {
8+
const ref = useRef<HTMLDivElement>()
9+
const [expandable, toggleExpandable] = useToggle(true)
10+
const [expanded, toggleExpanded] = useToggle()
11+
useResizeObserver(ref, (entry) => {
12+
if (!expanded) {
13+
toggleExpandable(entry.target.scrollHeight > entry.target.clientHeight)
14+
}
15+
})
16+
const showExpandButton = expandable && !expanded
17+
return (
18+
<div>
19+
<div
20+
className={clsx(
21+
'prose-neutral prose max-w-none whitespace-pre-line px-8 text-justify text-sm font-[Roboto_Slab_Variable] leading-relaxed',
22+
{ 'line-clamp-5': !expanded },
23+
)}
24+
ref={ref}
25+
>
26+
{notes}
27+
</div>
28+
<div className=' mt-1 flex justify-end px-6'>
29+
<div className='absolute -mt-2'>
30+
{showExpandButton ? (
31+
<Button onClick={() => toggleExpanded()} size='1' type='button' variant='ghost'>
32+
<span className='motion-duration-1000 icon-[mdi--menu-down] motion-preset-blink size-5' />
33+
</Button>
34+
) : null}
35+
36+
{expanded ? (
37+
<Button onClick={() => toggleExpanded()} size='1' type='button' variant='ghost'>
38+
<span className='icon-[mdi--menu-up] size-5' />
39+
</Button>
40+
) : null}
41+
</div>
42+
</div>
43+
</div>
44+
)
45+
}

‎src/pages/library/components/game-entry.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function GameEntry({ rom }) {
2121
<div className='z-1 absolute inset-0'>
2222
<div className='grid h-4/5 w-full place-items-center'>
2323
<div className='backdrop-blur-xs rounded-full bg-white/40 p-1.5'>
24-
<span className='icon-[svg-spinners--180-ring] block size-6 text-[var(--theme)]' />
24+
<span className='icon-[svg-spinners--180-ring] block size-6 text-[var(--accent-9)]' />
2525
</div>
2626
</div>
2727
</div>

‎src/pages/library/platform/components/company-logo.tsx

+15-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import clsx from 'clsx'
2+
import type { ReactNode } from 'react'
23
import { twMerge } from 'tailwind-merge'
34
import { getCDNUrl } from '@/utils/cdn.ts'
45

@@ -50,9 +51,21 @@ function getCompanyLogo(company: string) {
5051
}
5152
}
5253

53-
export function CompanyLogo({ className, company }: { className?: string; company: string }) {
54+
export function CompanyLogo({
55+
className,
56+
company,
57+
fallback,
58+
}: { className?: string; company: string; fallback?: ReactNode }) {
5459
const companyLogo = getCompanyLogo(company)
5560
if (companyLogo) {
56-
return <img alt={company} className={clsx(twMerge('object-contain object-center', className))} src={companyLogo} />
61+
return (
62+
<img
63+
alt={company}
64+
className={clsx(twMerge('object-contain object-center', className))}
65+
src={companyLogo}
66+
title={company}
67+
/>
68+
)
5769
}
70+
return fallback
5871
}

‎src/pages/library/platform/rom/components/game-info.tsx

+15-22
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,17 @@
11
import { platformMap } from '@/constants/platform.ts'
2-
import { CompanyLogo } from '../../components/company-logo.tsx'
32

43
export function GameInfo({ gameInfo, rom }) {
54
return (
65
<div className='rounded bg-zinc-600/10 px-8 py-4'>
7-
<div className='flex'>
6+
<div className='mt-4 flex gap-8 *:min-w-36'>
87
<div>
98
<div className='flex items-center gap-2 font-semibold'>
109
<span className='icon-[mdi--computer-classic]' />
1110
Platform
1211
</div>
1312
<div className='pl-6'>{platformMap[rom.platform].displayName}</div>
1413
</div>
15-
</div>
1614

17-
<div className='mt-4 flex gap-8 *:min-w-36'>
1815
<div>
1916
<div className='flex items-center gap-2 font-semibold'>
2017
<span className='icon-[mdi--calendar]' />
@@ -27,40 +24,36 @@ export function GameInfo({ gameInfo, rom }) {
2724

2825
<div>
2926
<div className='flex items-center gap-2 font-semibold'>
30-
<span className='icon-[mdi--chip]' />
31-
Developer
32-
</div>
33-
<div className='pl-6'>
34-
<CompanyLogo company={gameInfo?.developer} />
35-
{gameInfo?.developer || <span className='opacity-40'>Unknown</span>}
27+
<span className='icon-[mdi--tag-multiple]' />
28+
Genres
3629
</div>
30+
<div className='pl-6'>{gameInfo?.genres || ''}</div>
3731
</div>
3832

3933
<div>
4034
<div className='flex items-center gap-2 font-semibold'>
41-
<span className='icon-[mdi--earth]' />
42-
Publisher
43-
</div>
44-
<div className='pl-6'>
45-
<CompanyLogo company={gameInfo?.publisher} />
46-
{gameInfo?.publisher || <span className='opacity-40'>Unknown</span>}
35+
<span className='icon-[mdi--person-multiple]' />
36+
Players
4737
</div>
38+
<div className='pl-6'>{gameInfo?.max_players || <span className='opacity-40'>Unknown</span>}</div>
4839
</div>
40+
</div>
4941

42+
<div className='mt-4 flex gap-8 *:min-w-36'>
5043
<div>
5144
<div className='flex items-center gap-2 font-semibold'>
52-
<span className='icon-[mdi--tag-multiple]' />
53-
Genres
45+
<span className='icon-[mdi--chip]' />
46+
Developer
5447
</div>
55-
<div className='pl-6'>{gameInfo?.genres || ''}</div>
48+
<div className='pl-6'>{gameInfo?.developer || <span className='opacity-40'>Unknown</span>}</div>
5649
</div>
5750

5851
<div>
5952
<div className='flex items-center gap-2 font-semibold'>
60-
<span className='icon-[mdi--person-multiple]' />
61-
Players
53+
<span className='icon-[mdi--earth]' />
54+
Publisher
6255
</div>
63-
<div className='pl-6'>{gameInfo?.max_players || <span className='opacity-40'>Unknown</span>}</div>
56+
<div className='pl-6'>{gameInfo?.publisher || <span className='opacity-40'>Unknown</span>}</div>
6457
</div>
6558
</div>
6659
</div>

‎src/pages/library/platform/rom/components/game-overlay/game-state.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export function GameState({ state }) {
5757
</div>
5858
<div className='flex h-5 items-center justify-center text-xs text-zinc-600'>
5959
{isMutating ? (
60-
<span className='icon-[svg-spinners--180-ring] block size-3 text-[var(--theme)]' />
60+
<span className='icon-[svg-spinners--180-ring] block size-3 text-[var(--accent-9)]' />
6161
) : (
6262
<div>
6363
Saved at <Badge>{humanizeDate(state.created_at)}</Badge>

‎src/pages/library/platform/rom/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export async function RomPage({ fileName, id, platform }) {
5454
{launchboxGame?.wikipedia_url ? (
5555
<div>
5656
<a
57-
className='inline-flex items-center gap-2 text-[var(--theme)] underline'
57+
className='inline-flex items-center gap-2 text-[var(--accent-9)] underline'
5858
href={launchboxGame.wikipedia_url}
5959
rel='noreferrer'
6060
target='_blank'

‎src/styles/globals.css

-4
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,6 @@ body {
1818
font-family: 'Inter Variable', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
1919
}
2020

21-
body[data-theme='rose'] {
22-
--theme: var(--color-rose-700);
23-
}
24-
2521
button {
2622
cursor: pointer;
2723
}

‎src/styles/radix-theme.css

-37
Original file line numberDiff line numberDiff line change
@@ -31,40 +31,3 @@
3131
--red-indicator: #c70036;
3232
--red-track: #c70036;
3333
}
34-
35-
@supports (color: color(display-p3 1 1 1)) {
36-
@media (color-gamut: p3) {
37-
:root, .light, .light-theme {
38-
--red-1: oklch(99.4% 0.0034 18.94);
39-
--red-2: oklch(98.3% 0.0089 18.94);
40-
--red-3: oklch(95.4% 0.0234 18.94);
41-
--red-4: oklch(92.8% 0.046 18.94);
42-
--red-5: oklch(89.6% 0.0598 18.94);
43-
--red-6: oklch(85.8% 0.072 18.94);
44-
--red-7: oklch(81% 0.0868 18.94);
45-
--red-8: oklch(74.8% 0.1102 18.94);
46-
--red-9: oklch(0.514 0.222 16.935);
47-
--red-10: oklch(47.7% 0.2107 18.94);
48-
--red-11: oklch(55.1% 0.2107 18.94);
49-
--red-12: oklch(34.1% 0.1165 18.94);
50-
51-
--red-a1: color(display-p3 0.6745 0.0235 0.0235 / 0.012);
52-
--red-a2: color(display-p3 0.8784 0.0196 0.0196 / 0.032);
53-
--red-a3: color(display-p3 0.8118 0.0588 0.0078 / 0.083);
54-
--red-a4: color(display-p3 0.8314 0.0353 0.0078 / 0.138);
55-
--red-a5: color(display-p3 0.8392 0.0471 0.0078 / 0.193);
56-
--red-a6: color(display-p3 0.8 0.0196 0.0039 / 0.251);
57-
--red-a7: color(display-p3 0.7333 0.0039 0.0039 / 0.322);
58-
--red-a8: color(display-p3 0.6941 0.0039 0.0039 / 0.42);
59-
--red-a9: color(display-p3 0.6627 0 0.098 / 0.851);
60-
--red-a10: color(display-p3 0.6 0 0.0627 / 0.871);
61-
--red-a11: color(display-p3 0.6902 0 0.0863 / 0.812);
62-
--red-a12: color(display-p3 0.2941 0 0.0275 / 0.895);
63-
64-
--red-contrast: #fff;
65-
--red-surface: color(display-p3 0.9961 0.9608 0.9608 / 0.8);
66-
--red-indicator: oklch(0.514 0.222 16.935);
67-
--red-track: oklch(0.514 0.222 16.935);
68-
}
69-
}
70-
}

0 commit comments

Comments
 (0)