a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

tweaked highlight to show which highlight is active in the highlight toolbar, and streamlined the button

celine 08f0981c e372bb75

+21 -11
+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
··· 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 />