RyderTech/the-bible
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Color picker fix

Browse Source
This commit is contained in:
Joshua Ryder
2025-12-14 12:51:10 -05:00
parent 82bd94de57
commit 4c8edf6265
1 changed files with 8 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/SectionsManager.tsx
View File

@@ -172,8 +172,12 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
};
const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => (
<div className="absolute left-0 z-20 mt-2 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl">
<div className="grid grid-cols-9 gap-1.5">
<div
className="absolute left-0 z-20 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl"
style={{ width: '256px' }}
>
{/* 6 colors per row: 6×32px + 5×8px gaps = 232px, fits in 256-24 padding = 232px */}
<div className="flex flex-wrap gap-2">
{SECTION_COLORS.map(color => (
<button
key={color.value}
@@ -181,9 +185,9 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
onSelect(color.value);
setShowColorPicker(null);
}}
className={`w-6 h-6 rounded-full transition-all flex-shrink-0 ${
className={`w-8 h-8 rounded-full transition-all ${
selectedColor === color.value
? 'ring-2 ring-blue-500 ring-offset-1 dark:ring-offset-gray-800 scale-110'
? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800'
: 'hover:scale-110 active:scale-95'
}`}
style={{ backgroundColor: color.value }}