diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx index 320c89521c..f494c19f0d 100644 --- a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx +++ b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/color-panel/color-popover.tsx @@ -5,6 +5,7 @@ import { toNormalCase, type Color } from '@onlook/utility'; import { useEffect, useState } from 'react'; import { ColorNameInput } from './color-name-input'; import { DEFAULT_COLOR_NAME } from '@onlook/constants'; +import { useEditorEngine } from '@/components/store/editor'; import { ColorPickerContent } from '../../../editor-bar/inputs/color-picker'; export const ColorPopover = ({ @@ -26,9 +27,11 @@ export const ColorPopover = ({ }) => { const [editedColor, setEditedColor] = useState(color); const [editedName, setEditedName] = useState(brandColor); + const editorEngine = useEditorEngine(); const handleColorChange = (newColor: Color) => { setEditedColor(newColor); + editorEngine.theme.addRecentColors(newColor.toHex()); }; const handleNameChange = (newName: string) => { diff --git a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx index 83e03a682e..2fc7ef5df7 100644 --- a/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx +++ b/apps/web/client/src/app/project/[id]/_components/left-panel/brand-tab/index.tsx @@ -20,6 +20,7 @@ const ColorSquare = ({ color }: ColorSquareProps) => ( export const BrandTab = observer(() => { const editorEngine = useEditorEngine(); + const recentColors = editorEngine.theme.recentColorList; useEffect(() => { editorEngine.font.scanFonts(); @@ -69,6 +70,18 @@ export const BrandTab = observer(() => { +
+
+ Recent Colors +
+ +
+ {recentColors.map((color, index) => ( + + ))} +
+
+