yoten.app
Yōten: A social tracker for your language learning journey built on the atproto.
feat: redesign button group to tab group
brookjeynes.dev
+6
-6
internal/server/views/index.templ
+6
-6
internal/server/views/index.templ
···
9
9
@layouts.Base(layouts.BaseParams{Title: "home"}) {
10
10
@partials.Header(partials.HeaderProps{User: params.User})
11
11
<div class="container mx-auto max-w-2xl px-4 py-8">
12
-
<div class="flex flex-col sm:flex-row sm:items-center justify-between mt-4 mb-8 gap-4">
12
+
<div class="flex flex-col sm:flex-row sm:items-center justify-between mb-8 gap-4">
13
13
<div>
14
14
<h1 class="text-3xl font-bold">Study Feed</h1>
15
15
<p class="text-text-muted mt-1">See what the community is learning</p>
···
20
20
</a>
21
21
</div>
22
22
<div x-data="{ mode: 'global' }" class="flex flex-col">
23
-
<div class="flex border border-bg-dark rounded-lg p-1 bg-bg-light">
23
+
<div class="flex p-1">
24
24
<button
25
25
type="button"
26
26
hx-target="#study-feed"
···
31
31
hx-indicator="#feed-spinner"
32
32
@click="mode = 'global'"
33
33
:disabled="mode === 'global'"
34
-
:class="mode === 'global' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
35
-
class="cursor-pointer w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
34
+
:class="mode === 'global' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
35
+
class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
36
36
>
37
37
Global
38
38
</button>
···
47
47
hx-indicator="#feed-spinner"
48
48
@click="mode = 'friends'"
49
49
:disabled="mode === 'friends'"
50
-
:class="mode === 'friends' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
51
-
class="cursor-pointer w-1/2 py-2 px-4 rounded-md font-semibold transition-all"
50
+
:class="mode === 'friends' ? 'border-b-primary text-text font-semibold' : 'border-b-bg text-text-muted'"
51
+
class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
52
52
>
53
53
Friends
54
54
</button>
+5
-5
internal/server/views/new-study-session.templ
+5
-5
internal/server/views/new-study-session.templ
···
32
32
hx-disabled-elt="#save-button,#cancel-button,#start-timer-button,#pause-timer-button,#reset-timer-button,#stop-timer-button"
33
33
>
34
34
<h1 class="text-3xl font-bold">Log New Study Session</h1>
35
-
<div class="flex border border-bg-dark rounded-lg p-1 mt-2 mb-6 bg-bg-light">
35
+
<div class="flex p-1">
36
36
<button
37
37
type="button"
38
38
@click="mode = 'manual'"
39
-
:class="mode === 'manual' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
40
-
class="w-1/2 py-2 px-4 rounded-md font-semibold transition-all cursor-pointer"
39
+
:class="mode === 'manual' ? 'border-b-primary text-text font-semibold' : 'border-b-white text-text-muted'"
40
+
class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
41
41
>Manual Entry</button>
42
42
<button
43
43
type="button"
44
44
@click="mode = 'timer'"
45
-
:class="mode === 'timer' ? 'bg-primary shadow-sm text-text' : 'text-text-muted'"
46
-
class="w-1/2 py-2 px-4 rounded-md font-semibold transition-all cursor-pointer"
45
+
:class="mode === 'timer' ? 'border-b-primary text-text font-semibold' : 'border-b-white text-text-muted'"
46
+
class="cursor-pointer w-1/2 py-2 px-4 border-b-2 transition-all"
47
47
>Use Timer</button>
48
48
</div>
49
49
<div class="flex flex-col gap-4">