A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: fix old styles & scroll restoration
+50
-49
+2
-2
apps/mobile/app/auth/complete.tsx
+2
-2
apps/mobile/app/auth/complete.tsx
···
41
41
padding: 16,
42
42
}}
43
43
>
44
-
<Ionicons name="film" size={48} color="#a855f7" />
44
+
<Ionicons name="film" size={48} color="#F59E0B" />
45
45
<ActivityIndicator
46
46
size="large"
47
-
color="#a855f7"
47
+
color="#F59E0B"
48
48
style={{ marginVertical: 16 }}
49
49
/>
50
50
<Text style={{ color: "#9ca3af" }}>Completing sign-in...</Text>
+10
-10
apps/mobile/app/movie/[id].tsx
+10
-10
apps/mobile/app/movie/[id].tsx
···
101
101
102
102
// Use server-provided colors with fallbacks
103
103
const movieColors = movie?.colors || {
104
-
primary: "#8b5cf6",
105
-
secondary: "#6366f1",
106
-
accent: "#a855f7",
107
-
muted: "#4c1d95",
104
+
primary: "#F59E0B",
105
+
secondary: "#D97706",
106
+
accent: "#FBBF24",
107
+
muted: "#92400E",
108
108
};
109
109
110
110
// Fetch user's tracked movies
···
391
391
>
392
392
<LinearGradient
393
393
colors={[
394
-
movieColors.primary || "#8b5cf6",
395
-
movieColors.secondary || "#6366f1",
394
+
movieColors.primary || "#F59E0B",
395
+
movieColors.secondary || "#D97706",
396
396
]}
397
397
start={{ x: 0, y: 0 }}
398
398
end={{ x: 1, y: 1 }}
···
483
483
>
484
484
<LinearGradient
485
485
colors={[
486
-
movieColors.primary || "#8b5cf6",
487
-
movieColors.secondary || "#6366f1",
486
+
movieColors.primary || "#F59E0B",
487
+
movieColors.secondary || "#D97706",
488
488
]}
489
489
start={{ x: 0, y: 0 }}
490
490
end={{ x: 1, y: 1 }}
···
574
574
>
575
575
<LinearGradient
576
576
colors={[
577
-
movieColors.primary || "#8b5cf6",
578
-
movieColors.secondary || "#6366f1",
577
+
movieColors.primary || "#F59E0B",
578
+
movieColors.secondary || "#D97706",
579
579
]}
580
580
start={{ x: 0, y: 0 }}
581
581
end={{ x: 1, y: 1 }}
+10
-10
apps/mobile/components/movie/MovieActions.tsx
+10
-10
apps/mobile/components/movie/MovieActions.tsx
···
23
23
onMarkWatched,
24
24
}: MovieActionsProps) {
25
25
const movieColors = movie?.colors || {
26
-
primary: "#8b5cf6",
27
-
secondary: "#6366f1",
28
-
accent: "#a855f7",
29
-
muted: "#4c1d95",
26
+
primary: "#F59E0B",
27
+
secondary: "#D97706",
28
+
accent: "#FBBF24",
29
+
muted: "#92400E",
30
30
};
31
31
32
32
if (!user) {
···
35
35
<TouchableOpacity style={styles.button} activeOpacity={0.8}>
36
36
<LinearGradient
37
37
colors={[
38
-
movieColors.primary || "#8b5cf6",
39
-
movieColors.secondary || "#6366f1",
38
+
movieColors.primary || "#F59E0B",
39
+
movieColors.secondary || "#D97706",
40
40
]}
41
41
start={{ x: 0, y: 0 }}
42
42
end={{ x: 1, y: 1 }}
···
60
60
>
61
61
<LinearGradient
62
62
colors={[
63
-
movieColors.primary || "#8b5cf6",
64
-
movieColors.secondary || "#6366f1",
63
+
movieColors.primary || "#F59E0B",
64
+
movieColors.secondary || "#D97706",
65
65
]}
66
66
start={{ x: 0, y: 0 }}
67
67
end={{ x: 1, y: 1 }}
···
94
94
>
95
95
<LinearGradient
96
96
colors={[
97
-
movieColors.primary || "#8b5cf6",
98
-
movieColors.secondary || "#6366f1",
97
+
movieColors.primary || "#F59E0B",
98
+
movieColors.secondary || "#D97706",
99
99
]}
100
100
start={{ x: 0, y: 0 }}
101
101
end={{ x: 1, y: 1 }}
+1
-1
apps/web/src/components/MovieCard.tsx
+1
-1
apps/web/src/components/MovieCard.tsx
···
158
158
}}
159
159
className="block"
160
160
>
161
-
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-purple-400 transition-colors">
161
+
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-amber-400 transition-colors">
162
162
{movie.title}
163
163
</h3>
164
164
{releaseYear && <p className="text-gray-500 text-sm">{releaseYear}</p>}
+4
-4
apps/web/src/components/MovieHero.tsx
+4
-4
apps/web/src/components/MovieHero.tsx
···
24
24
: null;
25
25
26
26
const colors = movie?.colors || {
27
-
primary: "#8b5cf6",
28
-
secondary: "#6366f1",
29
-
accent: "#a855f7",
30
-
muted: "#4c1d95",
27
+
primary: "#F59E0B",
28
+
secondary: "#D97706",
29
+
accent: "#FBBF24",
30
+
muted: "#92400E",
31
31
};
32
32
33
33
if (isLoading || !movie) {
+1
-1
apps/web/src/components/ShelfEpisodeCard.tsx
+1
-1
apps/web/src/components/ShelfEpisodeCard.tsx
···
113
113
}}
114
114
className="block"
115
115
>
116
-
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-purple-400 transition-colors">
116
+
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-amber-400 transition-colors">
117
117
{tracked.showTitle}
118
118
</h3>
119
119
<p className="text-gray-500 text-sm">
+1
-1
apps/web/src/components/ShelfMovieCard.tsx
+1
-1
apps/web/src/components/ShelfMovieCard.tsx
···
106
106
}}
107
107
className="block"
108
108
>
109
-
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-purple-400 transition-colors">
109
+
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-amber-400 transition-colors">
110
110
{tracked.title}
111
111
</h3>
112
112
{tracked.releaseYear && (
+1
-1
apps/web/src/components/ShowCard.tsx
+1
-1
apps/web/src/components/ShowCard.tsx
···
42
42
params={{ showId, title: createTitleSlug(show.name) }}
43
43
className="block"
44
44
>
45
-
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-purple-400 transition-colors">
45
+
<h3 className="font-semibold text-sm line-clamp-2 mb-1 hover:text-amber-400 transition-colors">
46
46
{show.name}
47
47
</h3>
48
48
{year && <p className="text-gray-500 text-sm">{year}</p>}
+1
-1
apps/web/src/components/UnauthenticatedState.tsx
+1
-1
apps/web/src/components/UnauthenticatedState.tsx
···
21
21
icon = "shelf",
22
22
}: UnauthenticatedStateProps) {
23
23
const Icon = icon === "settings" ? Settings2 : BookOpen;
24
-
const iconColor = icon === "settings" ? "text-amber-500" : "text-purple-500";
24
+
const iconColor = icon === "settings" ? "text-amber-500" : "text-amber-500";
25
25
26
26
return (
27
27
<div className="min-h-screen bg-gray-950 text-gray-50">
+2
-2
apps/web/src/components/ui/badge.tsx
+2
-2
apps/web/src/components/ui/badge.tsx
···
9
9
{
10
10
variants: {
11
11
variant: {
12
-
default: "bg-purple-600 text-white",
12
+
default: "bg-amber-600 text-white",
13
13
secondary: "bg-gray-700 text-gray-200",
14
14
destructive: "bg-red-600 text-white",
15
15
outline: "border border-gray-600 text-gray-200 bg-gray-800",
16
16
ghost: "text-gray-400 hover:text-white hover:bg-gray-800/50",
17
-
link: "text-purple-400 underline-offset-4 hover:underline hover:text-purple-300",
17
+
link: "text-amber-400 underline-offset-4 hover:underline hover:text-amber-300",
18
18
},
19
19
},
20
20
defaultVariants: {
+2
-2
apps/web/src/components/ui/input.tsx
+2
-2
apps/web/src/components/ui/input.tsx
···
8
8
type={type}
9
9
data-slot="input"
10
10
className={cn(
11
-
"placeholder:text-gray-500 selection:bg-purple-500 selection:text-white h-9 w-full min-w-0 rounded-md border border-gray-700 bg-gray-900 px-3 py-1 text-base text-gray-50 shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
-
"focus-visible:border-purple-500 focus-visible:ring-purple-500/50 focus-visible:ring-2",
11
+
"placeholder:text-gray-500 selection:bg-amber-500 selection:text-white h-9 w-full min-w-0 rounded-md border border-gray-700 bg-gray-900 px-3 py-1 text-base text-gray-50 shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12
+
"focus-visible:border-amber-500 focus-visible:ring-amber-500/50 focus-visible:ring-2",
13
13
"aria-invalid:ring-red-500/20 aria-invalid:border-red-500",
14
14
className,
15
15
)}
+2
-2
apps/web/src/components/ui/textarea.tsx
+2
-2
apps/web/src/components/ui/textarea.tsx
···
7
7
<textarea
8
8
data-slot="textarea"
9
9
className={cn(
10
-
"placeholder:text-gray-500 selection:bg-purple-500 selection:text-white min-h-[60px] w-full rounded-md border border-gray-700 bg-gray-900 px-3 py-2 text-base text-gray-50 shadow-xs transition-[color,box-shadow] outline-none resize-none md:text-sm",
11
-
"focus-visible:border-purple-500 focus-visible:ring-purple-500/50 focus-visible:ring-2",
10
+
"placeholder:text-gray-500 selection:bg-amber-500 selection:text-white min-h-[60px] w-full rounded-md border border-gray-700 bg-gray-900 px-3 py-2 text-base text-gray-50 shadow-xs transition-[color,box-shadow] outline-none resize-none md:text-sm",
11
+
"focus-visible:border-amber-500 focus-visible:ring-amber-500/50 focus-visible:ring-2",
12
12
"aria-invalid:ring-red-500/20 aria-invalid:border-red-500",
13
13
className,
14
14
)}
+2
-2
apps/web/src/components/ui/time-picker.tsx
+2
-2
apps/web/src/components/ui/time-picker.tsx
···
26
26
setDate={setDate}
27
27
ref={hourRef}
28
28
onRightFocus={() => minuteRef.current?.focus()}
29
-
className="w-[60px] bg-gray-800 border-gray-700 text-white focus:border-purple-500"
29
+
className="w-[60px] bg-gray-800 border-gray-700 text-white focus:border-amber-500"
30
30
/>
31
31
</div>
32
32
<span className="text-gray-400 mt-5">:</span>
···
40
40
setDate={setDate}
41
41
ref={minuteRef}
42
42
onLeftFocus={() => hourRef.current?.focus()}
43
-
className="w-[60px] bg-gray-800 border-gray-700 text-white focus:border-purple-500"
43
+
className="w-[60px] bg-gray-800 border-gray-700 text-white focus:border-amber-500"
44
44
/>
45
45
</div>
46
46
<div className="flex h-10 items-center mt-4">
+1
apps/web/src/router.tsx
+1
apps/web/src/router.tsx
+3
-3
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.episodes.$episodeNumber.tsx
+3
-3
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.episodes.$episodeNumber.tsx
+3
-3
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.tsx
+3
-3
apps/web/src/routes/shows.$showId.$title.seasons.$seasonNumber.tsx
···
89
89
90
90
const season = seasonData as TmdbSeasonDetailDto | undefined;
91
91
const colors = showData?.colors || {
92
-
primary: "#8b5cf6",
93
-
secondary: "#6366f1",
94
-
accent: "#a855f7",
92
+
primary: "#F59E0B",
93
+
secondary: "#D97706",
94
+
accent: "#FBBF24",
95
95
muted: "#6b7280",
96
96
};
97
97
const backdropUrl = getTmdbBackdropUrl(showData?.backdrop_path);
+3
-3
apps/web/src/routes/shows.$showId.$title.tsx
+3
-3
apps/web/src/routes/shows.$showId.$title.tsx
···
64
64
const seasonCount = show?.number_of_seasons || 0;
65
65
const episodeCount = show?.number_of_episodes || 0;
66
66
const colors = show?.colors || {
67
-
primary: "#8b5cf6",
68
-
secondary: "#6366f1",
69
-
accent: "#a855f7",
67
+
primary: "#F59E0B",
68
+
secondary: "#D97706",
69
+
accent: "#FBBF24",
70
70
muted: "#6b7280",
71
71
};
72
72