grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
update dark mode styles
+7
-4
+4
-4
main.tsx
+4
-4
main.tsx
···
1519
1519
/>
1520
1520
{!isCreator && photo.alt
1521
1521
? (
1522
-
<div class="absolute bg-black/80 bottom-2 right-2 sm:bottom-0 sm:right-0 text-xs text-white font-semibold py-[1px] px-[3px]">
1522
+
<div class="absolute bg-zinc-950 dark:bg-zinc-900 bottom-2 right-2 sm:bottom-0 sm:right-0 text-xs text-white font-semibold py-[1px] px-[3px]">
1523
1523
ALT
1524
1524
</div>
1525
1525
)
···
1662
1662
<button
1663
1663
type="button"
1664
1664
hx-delete={`/actions/photo/${new AtUri(uri).rkey}`}
1665
-
class="bg-black/80 z-10 absolute top-0 right-0 cursor-pointer size-4 flex items-center justify-center"
1665
+
class="bg-zinc-950 z-10 absolute top-2 right-2 cursor-pointer size-4 flex items-center justify-center"
1666
1666
_="on htmx:afterOnLoad remove me.parentNode"
1667
1667
>
1668
1668
<i class="fas fa-close text-white"></i>
···
1685
1685
}: Readonly<{ galleryUri: string; cid: string }>) {
1686
1686
return (
1687
1687
<div
1688
-
class="bg-black/80 py-[1px] px-[3px] absolute top-2 left-2 sm:top-0 sm:left-0 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
1688
+
class="bg-zinc-950 dark:bg-zinc-900 py-[1px] px-[3px] absolute top-2 left-2 sm:top-0 sm:left-0 cursor-pointer flex items-center justify-center text-xs text-white font-semibold z-10"
1689
1689
hx-get={`/dialogs/image-alt?galleryUri=${galleryUri}&imageCid=${cid}`}
1690
1690
hx-trigger="click"
1691
1691
hx-target="#layout"
···
1764
1764
<Dialog id="photo-alt-dialog" class="z-30">
1765
1765
<Dialog.Content class="dark:bg-zinc-950">
1766
1766
<Dialog.Title>Add alt text</Dialog.Title>
1767
-
<div class="aspect-square relative bg-zinc-100 dark:bg-zinc-900">
1767
+
<div class="aspect-square relative">
1768
1768
<img
1769
1769
src={photo.fullsize}
1770
1770
alt={photo.alt}