gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-18 11:46:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: ui tweaks and fixes (#170)

Browse source 
* add subtle gradient to home page

* tweak autumn theme primary color

* reduce home page top margin on mobile

* use focus-active instead of focus for outline

* fix gradient on rewind page

* align checkbox on login form

* i forgot what the pseudo class was called
This commit is contained in:
Gabe Farrell 2026-01-22 21:31:14 -05:00 • committed by GitHub
parent 08fc9eed86
commit 1ed055d098
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client/app/routes/Home.tsx
View file

@ -10,20 +10,17 @@ import PeriodSelector from "~/components/PeriodSelector";
import { useAppContext } from "~/providers/AppProvider";
export function meta({}: Route.MetaArgs) {
return [
{ title: "Koito" },
{ name: "description", content: "Koito" },
];
return [{ title: "Koito" }, { name: "description", content: "Koito" }];
}
export default function Home() {
const [period, setPeriod] = useState('week')
const [period, setPeriod] = useState("week");
const { homeItems } = useAppContext();
return (
<main className="flex flex-grow justify-center pb-4">
<div className="flex-1 flex flex-col items-center gap-16 min-h-0 mt-20">
<main className="flex flex-grow justify-center pb-4 w-full bg-linear-to-b to-(--color-bg) from-(--color-bg-secondary) to-60%">
<div className="flex-1 flex flex-col items-center gap-16 min-h-0 sm:mt-20 mt-10">
<div className="flex flex-col md:flex-row gap-10 md:gap-20">
<AllTimeStats />
<ActivityGrid configurable />
@ -33,7 +30,10 @@ export default function Home() {
<TopArtists period={period} limit={homeItems} />
<TopAlbums period={period} limit={homeItems} />
<TopTracks period={period} limit={homeItems} />
<LastPlays showNowPlaying={true} limit={Math.floor(homeItems * 2.7)} />
<LastPlays
showNowPlaying={true}
limit={Math.floor(homeItems * 2.7)}
/>
</div>
</div>
</main>

2
client/app/routes/RewindPage.tsx
View file

@ -59,7 +59,7 @@ export default function RewindPage() {
useEffect(() => {
if (!stats.top_artists[0]) return;
const img = (stats.top_artists[0] as any)?.image;
const img = (stats.top_artists[0] as any)?.item.image;
if (!img) return;
average(imageUrl(img, "small"), { amount: 1 }).then((color) => {