a tool for shared writing and social publishing
added secondary, tertiary, border, and border-light colors derived from mixing primary and card background colors
+181
-120
+4
-4
app/test/Blocks.tsx
+4
-4
app/test/Blocks.tsx
···
41
41
${props.empty && "group-hover/text:block"}`}
42
42
>
43
43
<div className="flex gap-1 ">
44
-
<button className="opacity-30 hover:opacity-100 hover:text-accent">
44
+
<button className="text-tertiary hover:text-accent">
45
45
<BlockImageSmall />
46
46
</button>
47
47
48
-
<button className="opacity-30 hover:opacity-100 hover:text-accent">
48
+
<button className="text-tertiary hover:text-accent">
49
49
<BlockCardSmall />
50
50
</button>
51
51
52
-
<button className="opacity-30 hover:opacity-100 hover:text-accent">
52
+
<button className="text-tertiary hover:text-accent">
53
53
<LinkSmall />
54
54
</button>
55
55
</div>
···
195
195
setDescription(e.target.value);
196
196
}}
197
197
/>
198
-
<div className="inline-block place-self-end w-full text-xs opacity-30 italic line-clamp-1 truncate group-hover:text-accent group-hover:opacity-100">
198
+
<div className="inline-block place-self-end w-full text-xs text-tertiary italic line-clamp-1 truncate group-hover:text-accent">
199
199
https://www.flickr.com/photos/biodivlibrary/https://www.flickr.com/photos/biodivlibrary/https://www.flickr.com/photos/biodivlibrary/
200
200
</div>
201
201
</div>
+59
-65
app/test/Card.tsx
+59
-65
app/test/Card.tsx
···
5
5
import { TextToolbar } from "./TextToolbar";
6
6
7
7
export const Card = (props: {
8
-
children: React.ReactNode;
9
8
first?: boolean;
10
9
focused?: boolean;
11
10
id: string;
···
44
43
<CardContent cardHeight={props.cardHeight} />
45
44
46
45
{!isMobile && props.focused ? (
47
-
<div className=" sticky bottom-3 w-fit flex gap-[6px] items-center py-2 px-3 mx-auto bg-bg-card border border-border rounded-full shadow-md">
46
+
<div className="textToolbarWrapper sticky bottom-3 w-fit flex gap-[6px] items-center py-2 px-3 mx-auto bg-bg-card border border-border rounded-full shadow-md">
48
47
<TextToolbar />
49
48
</div>
50
49
) : null}
51
-
{/* {!isMobile && props.focused ? (
52
-
<div className=" sticky bottom-0 w-full flex gap-[6px] px-3 pb-3 pt-1 bg-bg-card border-t border-border">
53
-
<TextToolbar />
54
-
</div>
55
-
) : null} */}
56
50
</div>
57
51
</>
58
52
);
59
53
};
60
54
55
+
const CardContent = (props: { cardHeight: number }) => {
56
+
return (
57
+
<div className=" p-3 sm:p-4 flex flex-col">
58
+
<h2>Chapter 1</h2>
59
+
<TextBlock
60
+
lines={6}
61
+
defaultValue="It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters."
62
+
/>
63
+
<TextBlock
64
+
lines={2}
65
+
defaultValue="“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is let at last?”"
66
+
/>
67
+
<TextBlock lines={1} defaultValue="Mr. Bennet replied that he had not." />
68
+
<TextBlock
69
+
lines={2}
70
+
defaultValue="“But it is,” returned she; “for Mrs. Long has just been here, and she told me all about it.”"
71
+
/>
72
+
<TextBlock lines={1} defaultValue="Mr. Bennet made no answer." />
73
+
<TextBlock
74
+
lines={2}
75
+
defaultValue="“Do not you want to know who has taken it?” cried his wife, impatiently."
76
+
/>
77
+
<TextBlock
78
+
lines={1}
79
+
defaultValue="“You want to tell me, and I have no objection to hearing it.”"
80
+
/>
81
+
<TextBlock lines={1} defaultValue="" />
82
+
{/* <h4>Related Links</h4>
83
+
<h3>Related Images</h3>
84
+
<ImageBlock src="./test-image.jpg" cardHeight={props.cardHeight} />
85
+
<ImageBlock src="./test-image-2.jpg" cardHeight={props.cardHeight} /> */}
86
+
<ExternalLinkBlock />
87
+
88
+
<CardBlock screenshot="./card1.png" title="Chapter 2" />
89
+
90
+
<CardBlock
91
+
screenshot="./card2.png"
92
+
title="Notes"
93
+
body="This is me just sort of blabbing on and on and on so that i can make htis thing wrap enough lines and see what it looks like. indeed blah blah blah thats what i have to say about it big yada yada energy"
94
+
/>
95
+
<CardBlock
96
+
screenshot="./card3.png"
97
+
title="Footnote #3"
98
+
body="what if first block very short?"
99
+
/>
100
+
<CardBlock
101
+
screenshot="./card5.png"
102
+
body="This was invitation enough. “Why, my dear, you must know, Mrs. Long says
103
+
that Netherfield is taken by a young man of large fortune from the north
104
+
of England; that he came down on Monday in a chaise and four to see the
105
+
place, and was so much delighted with it that he agreed with Mr. Morris
106
+
immediately; that he is to take possession before Michaelmas, and some
107
+
of his servants are to be in the house by the end of next week.”"
108
+
/>
109
+
</div>
110
+
);
111
+
};
112
+
61
113
const AddCardButton = (props: {
62
114
setCards: ([]) => void;
63
115
setFocusedCardIndex: (index: number) => void;
···
144
196
</ButtonPrimary>
145
197
);
146
198
};
147
-
148
-
const CardContent = (props: { cardHeight: number }) => {
149
-
return (
150
-
<div className=" p-3 sm:p-4 flex flex-col">
151
-
<h2>Chapter 1</h2>
152
-
<TextBlock
153
-
lines={6}
154
-
defaultValue="It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters."
155
-
/>
156
-
<TextBlock
157
-
lines={2}
158
-
defaultValue="“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is let at last?”"
159
-
/>
160
-
<TextBlock lines={1} defaultValue="Mr. Bennet replied that he had not." />
161
-
<TextBlock
162
-
lines={2}
163
-
defaultValue="“But it is,” returned she; “for Mrs. Long has just been here, and she told me all about it.”"
164
-
/>
165
-
<TextBlock lines={1} defaultValue="Mr. Bennet made no answer." />
166
-
<TextBlock
167
-
lines={2}
168
-
defaultValue="“Do not you want to know who has taken it?” cried his wife, impatiently."
169
-
/>
170
-
<TextBlock
171
-
lines={1}
172
-
defaultValue="“You want to tell me, and I have no objection to hearing it.”"
173
-
/>
174
-
<TextBlock lines={1} defaultValue="" />
175
-
{/* <h4>Related Links</h4>
176
-
<h3>Related Images</h3>
177
-
<ImageBlock src="./test-image.jpg" cardHeight={props.cardHeight} />
178
-
<ImageBlock src="./test-image-2.jpg" cardHeight={props.cardHeight} /> */}
179
-
<ExternalLinkBlock />
180
-
181
-
<CardBlock screenshot="./card1.png" title="Chapter 2" />
182
-
183
-
<CardBlock
184
-
screenshot="./card2.png"
185
-
title="Notes"
186
-
body="This is me just sort of blabbing on and on and on so that i can make htis thing wrap enough lines and see what it looks like. indeed blah blah blah thats what i have to say about it big yada yada energy"
187
-
/>
188
-
<CardBlock
189
-
screenshot="./card3.png"
190
-
title="Footnote #3"
191
-
body="what if first block very short?"
192
-
/>
193
-
<CardBlock
194
-
screenshot="./card5.png"
195
-
body="This was invitation enough. “Why, my dear, you must know, Mrs. Long says
196
-
that Netherfield is taken by a young man of large fortune from the north
197
-
of England; that he came down on Monday in a chaise and four to see the
198
-
place, and was so much delighted with it that he agreed with Mr. Morris
199
-
immediately; that he is to take possession before Michaelmas, and some
200
-
of his servants are to be in the house by the end of next week.”"
201
-
/>
202
-
</div>
203
-
);
204
-
};
+34
-4
app/test/page.tsx
+34
-4
app/test/page.tsx
···
6
6
import { Card } from "./Card";
7
7
import { TextToolbar } from "./TextToolbar";
8
8
import { useIsMobile, useIsInitialRender } from "src/hooks/isMobile";
9
+
import { DeleteSmall, MoreOptionsTiny } from "components/Icons";
10
+
import * as Popover from "@radix-ui/react-popover";
9
11
10
12
export type imageArgs = {
11
13
url: string;
···
60
62
61
63
{cards.map((card, index) => (
62
64
<div
63
-
className="flex items-stretch "
65
+
className="flex items-stretch relative"
64
66
key={index}
65
67
ref={index === 0 ? cardRef : null}
66
68
>
···
75
77
card={card}
76
78
cardWidth={cardWidth}
77
79
cardHeight={cardHeight}
78
-
>
79
-
Card {card}
80
-
</Card>
80
+
/>
81
+
{index === focusedCardIndex && <CardOptions />}
81
82
</div>
82
83
))}
83
84
<div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
···
102
103
</div>
103
104
);
104
105
}
106
+
107
+
const CardOptions = () => {
108
+
return (
109
+
<Popover.Root>
110
+
<Popover.Trigger className="px-2 py-1 w-fit absolute top-0 right-3 bg-border text-bg-card rounded-b-md">
111
+
<MoreOptionsTiny />
112
+
</Popover.Trigger>
113
+
<Popover.Portal>
114
+
<Popover.Content
115
+
align="end"
116
+
className="bg-bg-card flex flex-col py-1 gap-0.5 border border-border rounded-md"
117
+
>
118
+
<CardMenuItem>
119
+
Delete Page <DeleteSmall />
120
+
</CardMenuItem>
121
+
<Popover.Arrow />
122
+
</Popover.Content>
123
+
</Popover.Portal>
124
+
</Popover.Root>
125
+
);
126
+
};
127
+
128
+
const CardMenuItem = (props: { children: React.ReactNode }) => {
129
+
return (
130
+
<div className="py-1 px-2 flex gap-2 font-bold hover:bg-accent hover:text-accentText ">
131
+
{props.children}
132
+
</div>
133
+
);
134
+
};
+39
components/Icons.tsx
+39
components/Icons.tsx
···
133
133
);
134
134
};
135
135
136
+
export const DeleteSmall = (props: Props) => {
137
+
return (
138
+
<svg
139
+
width="24"
140
+
height="24"
141
+
viewBox="0 0 24 24"
142
+
fill="none"
143
+
xmlns="http://www.w3.org/2000/svg"
144
+
{...props}
145
+
>
146
+
<path
147
+
fillRule="evenodd"
148
+
clipRule="evenodd"
149
+
d="M10.682 3.11103C9.4724 3.23448 8.89352 3.67017 8.73295 4.09426C8.57457 4.51256 8.71273 5.20871 9.51183 6.08877C9.86249 6.47497 10.3151 6.86398 10.8567 7.2317C11.521 7.68272 12.3093 8.09493 13.1874 8.42742C14.7679 9.02584 16.286 9.23267 17.4457 9.11431C18.6553 8.99087 19.2342 8.55517 19.3948 8.13109C19.5553 7.707 19.4102 6.99716 18.5856 6.10354C17.7951 5.24678 16.5208 4.39634 14.9403 3.79793C13.3598 3.19951 11.8417 2.99268 10.682 3.11103ZM10.5297 1.61879C11.9666 1.47215 13.7204 1.73212 15.4714 2.39511C17.2225 3.0581 18.7086 4.02485 19.6881 5.08636C20.6335 6.11101 21.2677 7.42054 20.7976 8.66223C20.4763 9.51081 19.7476 10.0415 18.8756 10.3377L18.8512 10.5864C18.8085 11.0201 18.7488 11.6195 18.6804 12.2826C18.5439 13.6052 18.3721 15.193 18.2332 16.2206C18.0958 17.2367 17.9216 18.1654 17.782 18.8394C17.7065 19.2037 17.6277 19.5677 17.5385 19.9289C17.3496 20.8304 16.5864 21.4845 15.7038 21.895C14.7878 22.321 13.5933 22.5626 12.2528 22.5626C9.70265 22.5626 7.61297 21.8776 6.98728 20.0005C6.8862 19.6168 6.80407 19.2278 6.72362 18.8394C6.58403 18.1654 6.40982 17.2367 6.27245 16.2206C6.13295 15.1888 5.96088 13.4661 5.82457 12.0139C5.75617 11.2852 5.69637 10.6201 5.65367 10.1372C5.63217 9.89407 5.61097 9.65088 5.58999 9.40767C5.57932 9.28304 5.58998 9.16406 5.60549 9.03837C5.71664 8.13769 6.61126 7.27662 8.06548 6.69616C7.34029 5.75314 6.92513 4.63277 7.33013 3.56312C7.80026 2.32143 9.14275 1.76033 10.5297 1.61879ZM17.1289 10.6396C17.1998 10.6367 17.2702 10.633 17.3398 10.6283C17.2993 11.0382 17.2469 11.56 17.1883 12.1287C17.0517 13.4526 16.882 15.0185 16.7467 16.0196C16.5497 17.4769 16.2709 18.7602 16.145 19.3048C16.121 19.4087 16.0961 19.5125 16.0714 19.6162C16.0259 19.8437 15.774 20.2081 15.0713 20.5349C14.3961 20.8489 13.4274 21.0626 12.2528 21.0626C9.79771 21.0626 8.71725 20.3951 8.41916 19.552C8.39914 19.4697 8.37966 19.3873 8.36059 19.3048C8.31867 19.1234 8.25973 18.86 8.19244 18.5352C8.05767 17.8845 7.89033 16.9916 7.75893 16.0196C7.62416 15.0228 7.45468 13.3299 7.31801 11.8738C7.28819 11.5561 7.26001 11.2505 7.23417 10.9669C7.3779 11.0411 7.52304 11.1123 7.66588 11.1824C7.78804 11.2424 7.90851 11.3016 8.02495 11.361C8.50725 11.6069 9.07475 11.811 9.70356 11.9612C10.4756 12.1457 11.3401 12.249 12.2528 12.249C14.3262 12.249 16.1049 11.5603 17.1289 10.6396ZM13.8382 5.4146C13.6815 5.78286 13.2605 5.9648 12.8828 5.82179C12.4954 5.67512 12.3002 5.24219 12.4469 4.85481C12.5697 4.53047 12.8562 4.18935 13.3052 4.0074C13.7683 3.8197 14.3267 3.83032 14.949 4.06593C15.5712 4.30154 15.9966 4.66339 16.2193 5.11078C16.4352 5.54447 16.4239 5.98976 16.3011 6.31411C16.1544 6.70148 15.7215 6.89661 15.3341 6.74994C14.9564 6.60693 14.7615 6.19178 14.8879 5.81206C14.8869 5.8057 14.8841 5.79446 14.8765 5.77925C14.8604 5.74695 14.7761 5.60439 14.4178 5.46874C14.0596 5.33309 13.9019 5.38404 13.8685 5.39759C13.8528 5.40397 13.8432 5.41054 13.8382 5.4146ZM9.032 12.9912C9.39109 12.9721 9.67224 13.2642 9.69072 13.6111C9.71588 14.0747 9.7415 14.5382 9.76856 15.0016C9.81412 15.782 9.87062 16.6895 9.91555 17.2239C9.98125 18.0053 10.0742 18.693 10.1161 18.9847C10.1701 19.3602 10.074 19.7752 9.6166 19.8464C9.17393 19.9154 8.93368 19.5441 8.87883 19.1625C8.83468 18.8554 8.73864 18.1456 8.66995 17.3287C8.62347 16.7759 8.56612 15.8528 8.52068 15.0745C8.4935 14.609 8.46777 14.1434 8.44249 13.6778C8.42412 13.333 8.67585 13.01 9.032 12.9912ZM16.0647 13.6483C16.083 13.3036 15.8183 13.0094 15.4736 12.9912C15.1289 12.9729 14.8347 13.238 14.8164 13.5827L14.8164 13.584C14.7907 14.0566 14.7647 14.5292 14.7371 15.0016C14.6915 15.782 14.635 16.6895 14.5901 17.2239C14.5463 17.7451 14.4905 18.2237 14.4456 18.5723C14.4215 18.7593 14.3965 18.9464 14.3676 19.1328C14.3145 19.4738 14.548 19.7933 14.889 19.8464C15.2301 19.8995 15.5496 19.666 15.6027 19.325L15.6029 19.324C15.6333 19.1271 15.6599 18.9296 15.6853 18.732C15.7318 18.3708 15.7899 17.8731 15.8357 17.3287C15.8822 16.7759 15.9395 15.8528 15.9849 15.0745C16.0127 14.5998 16.0389 14.1251 16.0646 13.6503L16.0647 13.6483ZM12.9954 14.4678C12.9954 14.1226 12.7156 13.8428 12.3704 13.8428C12.0253 13.8428 11.7454 14.1226 11.7454 14.4678L11.7454 19.3657C11.7454 19.7109 12.0253 19.9907 12.3704 19.9907C12.7156 19.9907 12.9954 19.7109 12.9954 19.3657L12.9954 14.4678ZM8.34005 10.25C8.61619 10.25 8.84005 10.0261 8.84005 9.75C8.84005 9.47386 8.61619 9.25 8.34005 9.25C8.06391 9.25 7.84005 9.47386 7.84005 9.75C7.84005 10.0261 8.06391 10.25 8.34005 10.25ZM8.34005 10.75C8.89233 10.75 9.34005 10.3023 9.34005 9.75C9.34005 9.19772 8.89233 8.75 8.34005 8.75C7.78777 8.75 7.34005 9.19772 7.34005 9.75C7.34005 10.3023 7.78777 10.75 8.34005 10.75ZM11.4369 10.75C11.713 10.75 11.9369 10.5261 11.9369 10.25C11.9369 9.97386 11.713 9.75 11.4369 9.75C11.1607 9.75 10.9369 9.97386 10.9369 10.25C10.9369 10.5261 11.1607 10.75 11.4369 10.75ZM11.4369 11.25C11.9891 11.25 12.4369 10.8023 12.4369 10.25C12.4369 9.69772 11.9891 9.25 11.4369 9.25C10.8846 9.25 10.4369 9.69772 10.4369 10.25C10.4369 10.8023 10.8846 11.25 11.4369 11.25Z"
150
+
fill="currentColor"
151
+
/>
152
+
</svg>
153
+
);
154
+
};
155
+
136
156
export const LinkSmall = (props: Props) => {
137
157
return (
138
158
<svg
···
208
228
fillRule="evenodd"
209
229
clipRule="evenodd"
210
230
d="M13.8372 4.31196C14.3059 3.84333 14.3059 3.08353 13.8372 2.6149C13.3686 2.14627 12.6088 2.14627 12.1402 2.6149L8.18872 6.56637L4.23725 2.6149C3.76862 2.14627 3.00882 2.14627 2.54019 2.6149C2.07156 3.08353 2.07156 3.84333 2.54019 4.31196L6.49166 8.26343L2.54019 12.2149C2.07156 12.6835 2.07156 13.4433 2.54019 13.912C3.00882 14.3806 3.76862 14.3806 4.23725 13.912L8.18872 9.96048L12.1402 13.912C12.6088 14.3806 13.3686 14.3806 13.8372 13.912C14.3059 13.4433 14.3059 12.6835 13.8372 12.2149L9.88578 8.26343L13.8372 4.31196Z"
231
+
fill="currentColor"
232
+
/>
233
+
</svg>
234
+
);
235
+
};
236
+
237
+
export const MoreOptionsTiny = (props: Props) => {
238
+
return (
239
+
<svg
240
+
width="16"
241
+
height="8"
242
+
viewBox="0 0 16 8"
243
+
fill="none"
244
+
xmlns="http://www.w3.org/2000/svg"
245
+
>
246
+
<path
247
+
fillRule="evenodd"
248
+
clipRule="evenodd"
249
+
d="M4.5 4C4.5 3.17157 3.82843 2.5 3 2.5C2.17157 2.5 1.5 3.17157 1.5 4C1.5 4.82843 2.17157 5.5 3 5.5C3.82843 5.5 4.5 4.82843 4.5 4ZM8 2.5C8.82843 2.5 9.5 3.17157 9.5 4C9.5 4.82843 8.82843 5.5 8 5.5C7.17157 5.5 6.5 4.82843 6.5 4C6.5 3.17157 7.17157 2.5 8 2.5ZM13 2.5C13.8284 2.5 14.5 3.17157 14.5 4C14.5 4.82843 13.8284 5.5 13 5.5C12.1716 5.5 11.5 4.82843 11.5 4C11.5 3.17157 12.1716 2.5 13 2.5Z"
211
250
fill="currentColor"
212
251
/>
213
252
</svg>
+39
-41
components/TextBlock/index.tsx
+39
-41
components/TextBlock/index.tsx
···
246
246
}) {
247
247
let { rep } = useReplicache();
248
248
return (
249
-
<div className="absolute top-0 right-0 hidden group-hover/text:block group-focus-within/text:block">
250
-
<div className="flex gap-1">
251
-
<label className="hover:cursor-pointer ">
252
-
<button className="opacity-30 hover:opacity-100 hover:text-accent">
253
-
<BlockImageSmall />
254
-
</button>
255
-
<div className="hidden">
256
-
<input
257
-
type="file"
258
-
accept="image/*"
259
-
onChange={async (e) => {
260
-
let file = e.currentTarget.files?.[0];
261
-
if (!file || !rep) return;
262
-
if (props.factID)
263
-
await rep.mutate.retractFact({ factID: props.factID });
264
-
let entity = props.entityID;
265
-
if (!entity) {
266
-
entity = crypto.randomUUID();
267
-
await rep?.mutate.addBlock({
268
-
parent: props.parent,
269
-
type: "text",
270
-
position: generateKeyBetween(
271
-
props.position,
272
-
props.nextPosition,
273
-
),
274
-
newEntityID: entity,
275
-
});
276
-
}
277
-
await rep.mutate.assertFact({
278
-
entity,
279
-
attribute: "block/type",
280
-
data: { type: "block-type-union", value: "image" },
281
-
});
282
-
await addImage(file, rep, {
283
-
entityID: entity,
284
-
attribute: "block/image",
249
+
<div className="absolute top-0 right-0 group-hover/text:block group-focus-within/text:block">
250
+
<div className="flex gap-1 items-center">
251
+
<button className="text-tertiary hover:text-accent">
252
+
<BlockImageSmall />
253
+
</button>
254
+
<div className="hidden">
255
+
<input
256
+
type="file"
257
+
accept="image/*"
258
+
onChange={async (e) => {
259
+
let file = e.currentTarget.files?.[0];
260
+
if (!file || !rep) return;
261
+
if (props.factID)
262
+
await rep.mutate.retractFact({ factID: props.factID });
263
+
let entity = props.entityID;
264
+
if (!entity) {
265
+
entity = crypto.randomUUID();
266
+
await rep?.mutate.addBlock({
267
+
parent: props.parent,
268
+
type: "text",
269
+
position: generateKeyBetween(
270
+
props.position,
271
+
props.nextPosition,
272
+
),
273
+
newEntityID: entity,
285
274
});
286
-
}}
287
-
/>
288
-
</div>
289
-
</label>
275
+
}
276
+
await rep.mutate.assertFact({
277
+
entity,
278
+
attribute: "block/type",
279
+
data: { type: "block-type-union", value: "image" },
280
+
});
281
+
await addImage(file, rep, {
282
+
entityID: entity,
283
+
attribute: "block/image",
284
+
});
285
+
}}
286
+
/>
287
+
</div>
290
288
<button
291
-
className="opacity-30 hover:opacity-100 hover:text-accent"
289
+
className="text-tertiary hover:text-accent"
292
290
onClick={async () => {
293
291
if (!props.entityID) {
294
292
let entity = crypto.randomUUID();
+2
-2
components/ThemeManager/ThemeSetter.tsx
+2
-2
components/ThemeManager/ThemeSetter.tsx
···
378
378
</ColorField>
379
379
380
380
<label className="hover:cursor-pointer ">
381
-
<div className="opacity-30 hover:opacity-100 hover:text-accent">
381
+
<div className="text-tertiary hover:text-accent">
382
382
<BlockImageSmall />
383
383
</div>
384
384
<div className="hidden">
···
455
455
className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px] bg-cover bg-center bg-no-repeat"
456
456
>
457
457
<label className="hover:cursor-pointer ">
458
-
<div className="opacity-30 hover:opacity-100 hover:text-accent">
458
+
<div className="text-tertiary hover:text-accent">
459
459
<BlockImageSmall />
460
460
</div>
461
461
<div className="hidden">
+4
-4
tailwind.config.js
+4
-4
tailwind.config.js
···
19
19
20
20
//TEXT COLORS.
21
21
"primary" : "rgb(var(--primary))",
22
-
"secondary": "#595959",
23
-
"tertiary": "rgb(var(--primary))",
24
-
"border": "#CCCCCC",
25
-
"border-light": "#E6E6E6",
22
+
"secondary": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 15%)",
23
+
"tertiary": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 55%)",
24
+
"border": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 75%)",
25
+
"border-light": "color-mix(in lch, rgb(var(--primary)), rgb(var(--bg-card)) 90%)",
26
26
27
27
white: "#FFFFFF",
28
28