leaflet.pub
a tool for shared writing and social publishing
added a placeholder title and description to pages/index, fixed imports in highlight toolbar, adjusted our secondary color
cozylittle.house
+17
components/Pages/index.tsx
+17
components/Pages/index.tsx
···
35
35
import { MoreOptionsTiny } from "components/Icons/MoreOptionsTiny";
36
36
import { PaintSmall } from "components/Icons/PaintSmall";
37
37
import { ShareSmall } from "components/Icons/ShareSmall";
38
+
import Link from "next/link";
38
39
39
40
export function Pages(props: { rootPage: string }) {
40
41
let rootPage = useEntity(props.rootPage, "root/page")[0];
···
233
234
}}
234
235
/>
235
236
) : null}
237
+
<div
238
+
className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-6 ${cardBorderHidden?.data.value ? "sm:pt-4 pt-0" : "sm:pt-6 pt-2"}`}
239
+
>
240
+
<Link
241
+
href="/"
242
+
className="text-accent-contrast font-bold hover:no-underline"
243
+
>
244
+
Publication Name
245
+
</Link>
246
+
<h2 className="">Titles Are Cool</h2>
247
+
<p className="italic text-secondary">
248
+
This is a description! What happens if it's just a little but longer,
249
+
since it's nice to be able to say a few more words...
250
+
</p>
251
+
<p className="text-sm text-tertiary">Draft</p>
252
+
</div>
236
253
<Blocks entityID={props.entityID} />
237
254
{/* we handle page bg in this sepate div so that
238
255
we can apply an opacity the background image
+2
-1
components/Toolbar/HighlightToolbar.tsx
+2
-1
components/Toolbar/HighlightToolbar.tsx
···
10
10
import * as Tooltip from "@radix-ui/react-tooltip";
11
11
import { theme } from "../../tailwind.config";
12
12
import {
13
-
ColorPicker,
14
13
pickers,
15
14
SectionArrow,
16
15
setColorAttribute,
17
16
} from "components/ThemeManager/ThemeSetter";
17
+
import { ColorPicker } from "components/ThemeManager/ColorPicker";
18
18
import { useEntity, useReplicache } from "src/replicache";
19
19
import { useEffect, useMemo, useState } from "react";
20
20
import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
···
29
29
import { PopoverArrow } from "components/Icons/PopoverArrow";
30
30
import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
31
31
import { PaintSmall } from "components/Icons/PaintSmall";
32
+
import { Color } from "react-aria-components";
32
33
33
34
export const HighlightButton = (props: {
34
35
lastUsedHighlight: string;
+1
-1
tailwind.config.js
+1
-1
tailwind.config.js
···
21
21
//TEXT COLORS.
22
22
primary: "rgb(var(--primary))",
23
23
secondary:
24
-
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 15%)",
24
+
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 25%)",
25
25
tertiary:
26
26
"color-mix(in oklab, rgb(var(--primary)), rgb(var(--bg-page)) 55%)",
27
27
border: