fix: ui tweaks and fixes (#170)

* 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

client/app/app.css

@@ -138,11 +138,11 @@ textarea {
 input[type="checkbox"] {
   height: fit-content;
 }
-input:focus,
-button:focus,
-a:focus,
-select:focus,
-textarea:focus {
+input:focus-visible,
+button:focus-visible,
+a:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
   border-color: transparent;
   outline: 2px solid var(--color-fg-tertiary);
 }

client/app/components/modals/LoginForm.tsx

@@ -54,7 +54,7 @@ export default function LoginForm() {
             className="w-full mx-auto fg bg rounded p-2"
             onChange={(e) => setPassword(e.target.value)}
           />
-          <div className="flex gap-2">
+          <div className="flex gap-2 items-center">
             <input
               type="checkbox"
               name="koito-remember"

client/app/routes/Home.tsx

@@ -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>

client/app/routes/RewindPage.tsx

@@ -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) => {

client/app/styles/themes.css.ts

@@ -92,7 +92,7 @@ export const themes: Record<string, Theme> = {
     fg: "#fef9f3",
     fgSecondary: "#dbc6b0",
     fgTertiary: "#a3917a",
-    primary: "#d97706",
+    primary: "#F0850A",
     primaryDim: "#b45309",
     accent: "#8c4c28",
     accentDim: "#6b3b1f",