a tool for shared writing and social publishing
tweaked the spacing on the template page
+17
-11
+17
-11
app/templates/TemplateList.tsx
+17
-11
app/templates/TemplateList.tsx
···
14
14
templateID: string; // readonly id for the leaflet that will be duplicated
15
15
}) {
16
16
return (
17
-
<div className="flex flex-col gap-2">
17
+
<div className="flex flex-col gap-4">
18
18
<div className="flex flex-col gap-2">
19
19
<div className="max-w-[274px] h-[154px] relative">
20
20
<Image
···
26
26
/>
27
27
</div>
28
28
</div>
29
-
<div className="flex flex-col gap-2">
30
-
<h3 className="font-bold text-center">{props.title}</h3>
31
-
<div className="text-tertiary text-sm font-normal text-center">
32
-
{props.description}
29
+
<div className={`flex flex-col ${props.description ? "gap-4" : "gap-2"}`}>
30
+
<div className="gap-0">
31
+
<h3 className="font-bold text-center text-secondary">
32
+
{props.title}
33
+
</h3>
34
+
{props.description && (
35
+
<div className="text-tertiary text-sm font-normal text-center">
36
+
{props.description}
37
+
</div>
38
+
)}
33
39
</div>
34
40
<div className="flex gap-2 justify-center items-end bottom-4">
35
41
<Link
···
37
43
target="_blank"
38
44
className="no-underline hover:no-underline"
39
45
>
40
-
<ButtonPrimary className="bg-primary !border-2 !border-white hover:!outline-none hover:scale-105 hover:rotate-3 transition-all">
46
+
<ButtonPrimary className="bg-primary hover:!outline-none hover:scale-105 hover:rotate-3 transition-all">
41
47
Preview
42
48
</ButtonPrimary>
43
49
</Link>
44
50
<ButtonPrimary
45
-
className="!w-fit !border-2 !border-white hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
51
+
className=" hover:!outline-none hover:scale-105 hover:-rotate-2 transition-all"
46
52
onClick={async () => {
47
53
let id = await createNewLeafletFromTemplate(
48
54
props.templateID,
···
66
72
children: React.ReactNode;
67
73
}) {
68
74
return (
69
-
<div className="templateLeafletGrid flex flex-col gap-4">
70
-
<div className="flex flex-col gap-2 text-center">
71
-
<h2 className="">{props.name}</h2>
72
-
<p className="">{props.description}</p>
75
+
<div className="templateLeafletGrid flex flex-col gap-6">
76
+
<div className="flex flex-col gap-0 text-center">
77
+
<h3 className="">{props.name}</h3>
78
+
<p className="text-secondary">{props.description}</p>
73
79
</div>
74
80
<div className="grid auto-rows-max md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-y-8 gap-x-4 sm:gap-6 grow pb-8">
75
81
{props.children}