lewis.moe
Monorepo for Tangled
appview/pages: finesse account selector styles
Signed-off-by: oppiliappan <me@oppi.li>
+35
-28
appview/pages/templates/layouts/fragments/topbar.html
+35
-28
appview/pages/templates/layouts/fragments/topbar.html
···
53
53
/>
54
54
<span class="hidden md:inline">{{ $user | resolve | truncateAt30 }}</span>
55
55
</summary>
56
-
<div class="absolute right-0 mt-4 p-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg z-50" style="width: 14rem;">
56
+
<div class="absolute right-0 mt-4 rounded bg-white dark:bg-gray-800 dark:text-white border border-gray-200 dark:border-gray-700 shadow-lg z-50 text-sm" style="width: 14rem;">
57
57
{{ $active := .Active.Did }}
58
-
59
-
<div class="pb-2 mb-2 border-b border-gray-200 dark:border-gray-700">
60
-
<div class="flex items-center gap-2">
61
-
<img src="{{ tinyAvatar $active }}" alt="" class="rounded-full h-8 w-8 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
62
-
<div class="flex-1 overflow-hidden">
63
-
<p class="font-medium text-sm truncate">{{ $active | resolve }}</p>
64
-
<p class="text-xs text-green-600 dark:text-green-400">active</p>
65
-
</div>
66
-
</div>
67
-
</div>
58
+
{{ $linkStyle := "flex items-center gap-3 px-4 py-2 hover:no-underline hover:bg-gray-50 hover:dark:bg-gray-700/50" }}
68
59
69
60
{{ $others := .Accounts | otherAccounts $active }}
70
61
{{ if $others }}
71
-
<div class="pb-2 mb-2 border-b border-gray-200 dark:border-gray-700">
72
-
<p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">Switch Account</p>
73
-
{{ range $others }}
62
+
<div class="text-sm text-gray-500 dark:text-gray-400 px-3 py-1 pt-2">switch account</div>
63
+
{{ range $others }}
74
64
<button
75
65
type="button"
76
66
hx-post="/account/switch"
77
67
hx-vals='{"did": "{{ .Did }}"}'
78
68
hx-swap="none"
79
-
class="flex items-center gap-2 w-full py-1.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 text-left"
69
+
class="{{$linkStyle}} w-full text-left pl-3"
80
70
>
81
-
<img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full h-6 w-6 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
82
-
<span class="text-sm truncate flex-1">{{ .Did | resolve }}</span>
71
+
<img src="{{ tinyAvatar .Did }}" alt="" class="rounded-full size-6 flex-shrink-0 border border-gray-300 dark:border-gray-700" />
72
+
<span class="truncate flex-1">{{ .Did | resolve }}</span>
83
73
</button>
84
-
{{ end }}
85
-
</div>
74
+
{{ end }}
86
75
{{ end }}
87
76
88
-
<a href="/login?mode=add_account" class="flex items-center gap-2 py-1 text-sm">
89
-
{{ i "plus" "w-4 h-4 flex-shrink-0" }}
90
-
<span>Add another account</span>
77
+
<a href="/login?mode=add_account" class="{{$linkStyle}} pl-3">
78
+
<div class="size-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
79
+
{{ i "plus" "size-3" }}
80
+
</div>
81
+
82
+
<div class="text-left flex-1 min-w-0 block truncate">
83
+
add account
84
+
</div>
91
85
</a>
92
86
93
-
<div class="pt-2 mt-2 border-t border-gray-200 dark:border-gray-700 space-y-1">
94
-
<a href="/{{ $active }}" class="block py-1 text-sm">profile</a>
95
-
<a href="/{{ $active }}?tab=repos" class="block py-1 text-sm">repositories</a>
96
-
<a href="/{{ $active }}?tab=strings" class="block py-1 text-sm">strings</a>
97
-
<a href="/settings" class="block py-1 text-sm">settings</a>
87
+
<div class="border-t border-gray-200 dark:border-gray-700">
88
+
<a href="/{{ $active }}" class="{{$linkStyle}}">
89
+
{{ i "user" "size-4" }}
90
+
profile
91
+
</a>
92
+
<a href="/{{ $active }}?tab=repos" class="{{$linkStyle}}">
93
+
{{ i "book-marked" "size-4" }}
94
+
repositories
95
+
</a>
96
+
<a href="/{{ $active }}?tab=strings" class="{{$linkStyle}}">
97
+
{{ i "line-squiggle" "size-4" }}
98
+
strings
99
+
</a>
100
+
<a href="/settings" class="{{$linkStyle}}">
101
+
{{ i "cog" "size-4" }}
102
+
settings
103
+
</a>
98
104
<a href="#"
99
105
hx-post="/logout"
100
106
hx-swap="none"
101
-
class="block py-1 text-sm text-red-400 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
107
+
class="{{$linkStyle}} text-red-400 hover:text-red-400 hover:bg-red-100 dark:hover:bg-red-700/20 pb-2">
108
+
{{ i "log-out" "size-4" }}
102
109
logout
103
110
</a>
104
111
</div>