gabehf/Koito
1
0
Fork 0
mirror of https://github.com/gabehf/Koito.git synced 2026-03-07 13:38:15 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: a couple ui fixes (#147)

Browse source 
* fix: reduce loading component width

* improve theme selector for mobile

* match interest graph width to activity grid
This commit is contained in:
Gabe Farrell 2026-01-15 20:21:05 -05:00 • committed by GitHub
parent 1eb1cd0fd5
commit aa7fddd518
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 43 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/app/components/ActivityGrid.tsx
View file

@ -68,14 +68,14 @@ export default function ActivityGrid({
if (isPending) { if (isPending) {
return ( return (
<div className="w-[500px]"> <div className="w-[350px]">
<h3>Activity</h3> <h3>Activity</h3>
<p>Loading...</p> <p>Loading...</p>
</div> </div>
); );
} else if (isError) { } else if (isError) {
return ( return (
<div className="w-[500px]"> <div className="w-[350px]">
<h3>Activity</h3> <h3>Activity</h3>
<p className="error">Error: {error.message}</p> <p className="error">Error: {error.message}</p>
</div> </div>

2
client/app/components/AllTimeStats.tsx
View file

@ -11,7 +11,7 @@ export default function AllTimeStats() {
if (isPending) { if (isPending) {
return ( return (
<div className="w-[200px]"> <div>
<h3>{header}</h3> <h3>{header}</h3>
<p>Loading...</p> <p>Loading...</p>
</div> </div>

6
client/app/components/InterestGraph.tsx
View file

@ -48,14 +48,14 @@ export default function InterestGraph({
if (isPending) { if (isPending) {
return ( return (
<div className="w-[500px]"> <div className="w-[350px] sm:w-[500px]">
<h3>Interest over time</h3> <h3>Interest over time</h3>
<p>Loading...</p> <p>Loading...</p>
</div> </div>
); );
} else if (isError) { } else if (isError) {
return ( return (
<div className="w-[500px]"> <div className="w-[350px] sm:w-[500px]">
<h3>Interest over time</h3> <h3>Interest over time</h3>
<p className="error">Error: {error.message}</p> <p className="error">Error: {error.message}</p>
</div> </div>
@ -67,7 +67,7 @@ export default function InterestGraph({
// so I think I just have to remove it for now. // so I think I just have to remove it for now.
return ( return (
<div className="flex flex-col items-start w-full max-w-[500px]"> <div className="flex flex-col items-start w-full max-w-[335px] sm:max-w-[500px]">
<h3>Interest over time</h3> <h3>Interest over time</h3>
<AreaChart <AreaChart
style={{ style={{

52
client/app/components/themeSwitcher/ThemeOption.tsx
View file

@ -1,23 +1,43 @@
import type { Theme } from "~/styles/themes.css"; import type { Theme } from "~/styles/themes.css";
interface Props { interface Props {
theme: Theme theme: Theme;
themeName: string themeName: string;
setTheme: Function setTheme: Function;
} }
export default function ThemeOption({ theme, themeName, setTheme }: Props) { export default function ThemeOption({ theme, themeName, setTheme }: Props) {
const capitalizeFirstLetter = (s: string) => {
return s.charAt(0).toUpperCase() + s.slice(1);
};
const capitalizeFirstLetter = (s: string) => { return (
return s.charAt(0).toUpperCase() + s.slice(1); <div
} onClick={() => setTheme(themeName)}
className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-3 items-center border-2 justify-between"
return ( style={{
<div onClick={() => setTheme(themeName)} className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}> background: theme.bg,
<div className="text-xs sm:text-sm">{capitalizeFirstLetter(themeName)}</div> color: theme.fg,
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.bgSecondary}}></div> borderColor: theme.bgSecondary,
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.fgSecondary}}></div> }}
<div className="w-[50px] h-[30px] rounded-md" style={{background: theme.primary}}></div> >
</div> <div className="text-xs sm:text-sm">
) {capitalizeFirstLetter(themeName)}
} </div>
<div className="flex gap-2 w-full">
<div
className="w-2/7 max-w-[50px] h-[30px] rounded-md"
style={{ background: theme.bgSecondary }}
></div>
<div
className="w-2/7 max-w-[50px] h-[30px] rounded-md"
style={{ background: theme.fgSecondary }}
></div>
<div
className="w-2/7 max-w-[50px] h-[30px] rounded-md"
style={{ background: theme.primary }}
></div>
</div>
</div>
);
}

2
client/app/components/themeSwitcher/ThemeSwitcher.tsx
View file

@ -49,7 +49,7 @@ export function ThemeSwitcher() {
<AsyncButton onClick={resetTheme}>Reset</AsyncButton> <AsyncButton onClick={resetTheme}>Reset</AsyncButton>
</div> </div>
</div> </div>
<div className="grid grid-cols-2 items-center gap-2"> <div className="grid grid-cols-1 sm:grid-cols-2 items-center gap-2">
{Object.entries(themes).map(([name, themeData]) => ( {Object.entries(themes).map(([name, themeData]) => (
<ThemeOption <ThemeOption
setTheme={setTheme} setTheme={setTheme}