leaflet.pub
a tool for shared writing and social publishing
added cardBordHidden styling to notifications
cozylittle.house
+30
-40
-26
app/(home-pages)/notifications/CommentNotication.tsx
-26
app/(home-pages)/notifications/CommentNotication.tsx
···
52
52
/>
53
53
);
54
54
};
55
-
56
-
export const DummyCommentNotification = () => {
57
-
return (
58
-
<Notification
59
-
icon={<CommentTiny />}
60
-
actionText={<>celine commented on your post</>}
61
-
content={
62
-
<ContentLayout
63
-
postTitle="This is the Post Title"
64
-
publication={{ name: "My Publication" } as PubLeafletPublication.Record}
65
-
>
66
-
<CommentInNotification
67
-
className=""
68
-
avatar={undefined}
69
-
displayName="celine"
70
-
index={[]}
71
-
plaintext={
72
-
"heyyyyy this is a dummt comment! I'm just gonna put this here so I know what I'm about but it really oughta be wired up at some point..."
73
-
}
74
-
facets={[]}
75
-
/>
76
-
</ContentLayout>
77
-
}
78
-
/>
79
-
);
80
-
};
+27
-8
app/(home-pages)/notifications/Notification.tsx
+27
-8
app/(home-pages)/notifications/Notification.tsx
···
1
1
import { Avatar } from "components/Avatar";
2
2
import { BaseTextBlock } from "app/lish/[did]/[publication]/[rkey]/BaseTextBlock";
3
-
import {
4
-
PubLeafletDocument,
5
-
PubLeafletPublication,
6
-
PubLeafletRichtextFacet,
7
-
} from "lexicons/api";
3
+
import { PubLeafletPublication, PubLeafletRichtextFacet } from "lexicons/api";
4
+
import { useEntity, useReplicache } from "src/replicache";
8
5
9
6
export const Notification = (props: {
10
7
icon: React.ReactNode;
11
8
actionText: React.ReactNode;
12
9
content?: React.ReactNode;
10
+
cardBorderHidden?: boolean;
13
11
}) => {
12
+
let { rootEntity } = useReplicache();
13
+
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
14
+
.value;
15
+
14
16
return (
15
-
<div className="flex flex-col w-full">
16
-
<div className="flex flex-row gap-2 items-center">
17
+
<div
18
+
className={`flex flex-col w-full sm:p-4 px-3 pl-2 sm:pl-3 pt-2 sm:pt-3! ${
19
+
cardBorderHidden
20
+
? ""
21
+
: " block-border border-border! hover:outline-border "
22
+
}`}
23
+
style={{
24
+
backgroundColor: cardBorderHidden
25
+
? "transparent"
26
+
: "rgba(var(--bg-page), var(--bg-page-alpha))",
27
+
}}
28
+
>
29
+
<div className={`flex flex-row gap-2 items-center`}>
17
30
<div className="text-secondary shrink-0">{props.icon}</div>
18
31
<div className="text-secondary font-bold">{props.actionText}</div>
19
32
</div>
···
32
45
postTitle: string;
33
46
publication: PubLeafletPublication.Record;
34
47
}) => {
48
+
let { rootEntity } = useReplicache();
49
+
let cardBorderHidden = useEntity(rootEntity, "theme/card-border-hidden")?.data
50
+
.value;
51
+
35
52
return (
36
-
<div className="border border-border-light rounded-md px-2 py-[6px] w-full">
53
+
<div
54
+
className={`border border-border-light rounded-md px-2 py-[6px] w-full ${cardBorderHidden ? "transparent" : "bg-bg-page"}`}
55
+
>
37
56
<div className="text-tertiary text-sm italic font-bold pb-1">
38
57
{props.postTitle}
39
58
</div>
+1
-5
app/(home-pages)/notifications/NotificationList.tsx
+1
-5
app/(home-pages)/notifications/NotificationList.tsx
···
16
16
markAsRead();
17
17
}, 500);
18
18
}, []);
19
-
let { rootEntity } = useReplicache();
20
-
21
-
let showPageBackground = !useEntity(rootEntity, "theme/card-border-hidden")
22
-
?.data.value;
23
19
24
20
return (
25
21
<div className="max-w-prose mx-auto w-full">
26
-
<div className="flex flex-col gap-6 pt-1">
22
+
<div className="flex flex-col gap-2">
27
23
{notifications.map((n) => {
28
24
if (n.type === "comment") {
29
25
n;
+1
-1
app/(home-pages)/notifications/page.tsx
+1
-1
app/(home-pages)/notifications/page.tsx