a tool for shared writing and social publishing
tweaked highlight to show which highlight is active in the highlight toolbar, and streamlined the button
+21
-11
+15
-10
components/Toolbar/HighlightButton.tsx
+15
-10
components/Toolbar/HighlightButton.tsx
···
33
33
34
34
export const HighlightColorButton = (props: {
35
35
color: "1" | "2" | "3";
36
+
lastUsedHighlight: "1" | "2" | "3";
36
37
setLastUsedHightlight: (color: "1" | "2" | "3") => void;
37
38
}) => {
38
39
let focusedBlock = useUIState((s) => s.focusedBlock);
···
68
69
}}
69
70
>
70
71
<div
71
-
className={`w-6 h-6 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
72
-
style={{
73
-
backgroundColor:
74
-
props.color === "1"
75
-
? theme.colors["highlight-1"]
76
-
: props.color === "2"
77
-
? theme.colors["highlight-2"]
78
-
: theme.colors["highlight-3"],
79
-
}}
80
-
/>
72
+
className={`w-6 h-6 rounded-md flex items-center justify-center ${props.lastUsedHighlight === props.color ? "bg-border" : ""}`}
73
+
>
74
+
<div
75
+
className={`w-5 h-5 rounded-full border-2 border-white shadow-[0_0_0_1px_#8C8C8C]`}
76
+
style={{
77
+
backgroundColor:
78
+
props.color === "1"
79
+
? theme.colors["highlight-1"]
80
+
: props.color === "2"
81
+
? theme.colors["highlight-2"]
82
+
: theme.colors["highlight-3"],
83
+
}}
84
+
/>
85
+
</div>
81
86
</button>
82
87
);
83
88
};
+6
-1
components/Toolbar/index.tsx
+6
-1
components/Toolbar/index.tsx
···
134
134
className="pr-2"
135
135
>
136
136
<div
137
-
className={`w-[6px] h-[20px] rounded-[2px] border border-white shadow-[0_0_0_1px_#8C8C8C]`}
137
+
className={`w-2 h-[22px] rounded-[2px] border border-border`}
138
138
style={{
139
139
backgroundColor:
140
140
lastUsedHighlight === "1"
···
169
169
) : toolbarState === "highlight" ? (
170
170
<HighlightToolbar
171
171
onClose={() => setToolbarState("default")}
172
+
lastUsedHighlight={lastUsedHighlight}
172
173
setLastUsedHighlight={(color: "1" | "2" | "3") =>
173
174
setlastUsedHighlight(color)
174
175
}
···
206
207
207
208
const HighlightToolbar = (props: {
208
209
onClose: () => void;
210
+
lastUsedHighlight: "1" | "2" | "3";
209
211
setLastUsedHighlight: (color: "1" | "2" | "3") => void;
210
212
}) => {
211
213
return (
···
217
219
<Separator />
218
220
<HighlightColorButton
219
221
color="1"
222
+
lastUsedHighlight={props.lastUsedHighlight}
220
223
setLastUsedHightlight={props.setLastUsedHighlight}
221
224
/>
222
225
<HighlightColorButton
223
226
color="2"
227
+
lastUsedHighlight={props.lastUsedHighlight}
224
228
setLastUsedHightlight={props.setLastUsedHighlight}
225
229
/>
226
230
<HighlightColorButton
227
231
color="3"
232
+
lastUsedHighlight={props.lastUsedHighlight}
228
233
setLastUsedHightlight={props.setLastUsedHighlight}
229
234
/>
230
235
<HighlightColorSettings />