tijs.org
The Appview for the kipclip.com atproto bookmarking service
Unify detail modal button colors with brand palette
Open button uses coral brand color as primary action. Share and Edit
use neutral gray outlines. URL link also uses coral instead of blue.
+7
-5
frontend/components/BookmarkDetail.tsx
+7
-5
frontend/components/BookmarkDetail.tsx
···
100
100
href={bookmark.subject}
101
101
target="_blank"
102
102
rel="noopener noreferrer"
103
-
className="text-sm text-blue-600 hover:text-blue-800 hover:underline break-all block"
103
+
className="text-sm hover:underline break-all block"
104
+
style={{ color: "var(--coral)" }}
104
105
onClick={(e) => e.stopPropagation()}
105
106
>
106
107
{bookmark.subject}
···
162
163
</div>
163
164
164
165
{/* Action buttons */}
165
-
<div className="flex gap-3 pt-2">
166
+
<div className="flex gap-2.5 pt-2">
166
167
<button
167
168
type="button"
168
169
onClick={onOpen}
169
-
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-blue-50 text-blue-700 font-medium hover:bg-blue-100 transition border border-blue-200"
170
+
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-white font-medium hover:opacity-90 transition"
171
+
style={{ backgroundColor: "var(--coral)" }}
170
172
>
171
173
<svg
172
174
className="w-4 h-4"
···
187
189
<button
188
190
type="button"
189
191
onClick={onShare}
190
-
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-emerald-50 text-emerald-700 font-medium hover:bg-emerald-100 transition border border-emerald-200"
192
+
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition border border-gray-200"
191
193
>
192
194
<svg
193
195
className="w-4 h-4"
···
208
210
<button
209
211
type="button"
210
212
onClick={onEdit}
211
-
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-amber-50 text-amber-700 font-medium hover:bg-amber-100 transition border border-amber-200"
213
+
className="flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-gray-700 font-medium hover:bg-gray-100 transition border border-gray-200"
212
214
>
213
215
<svg
214
216
className="w-4 h-4"