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

Colors and ordering fix

Browse Source
This commit is contained in:
Joshua Ryder
2025-12-08 15:46:41 -05:00
parent b5bfa1f7ac
commit 542757990e
2 changed files with 33 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -171,9 +171,10 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
setShowColorPicker(null);
};
const ColorPicker = ({ selectedColor, onSelect, target }: { selectedColor: string; onSelect: (color: string) => void; target: number | 'new' }) => (
<div className="absolute z-10 mt-1 p-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg">
<div className="grid grid-cols-6 gap-1">
const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => (
<div className="absolute z-10 mt-2 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl min-w-[280px]">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium">Choose a color</p>
<div className="grid grid-cols-3 gap-2">
{SECTION_COLORS.map(color => (
<button
key={color.value}
@@ -181,12 +182,20 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
onSelect(color.value);
setShowColorPicker(null);
}}
className={`w-6 h-6 rounded-full border-2 ${
selectedColor === color.value ? 'border-gray-900 dark:border-white' : 'border-transparent'
className={`flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors ${
selectedColor === color.value
? 'bg-gray-100 dark:bg-gray-700 ring-2 ring-blue-500'
: 'hover:bg-gray-50 dark:hover:bg-gray-700'
}`}
style={{ backgroundColor: color.value }}
title={color.name}
/>
>
<div
className="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200 dark:border-gray-600"
style={{ backgroundColor: color.value }}
/>
<span className="text-xs text-gray-700 dark:text-gray-300 truncate">
{color.name}
</span>
</button>
))}
</div>
</div>
@@ -239,7 +248,6 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
<ColorPicker
selectedColor={editColor}
onSelect={setEditColor}
target={section.id}
/>
)}
</div>
@@ -342,7 +350,6 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
<ColorPicker
selectedColor={newSectionColor}
onSelect={setNewSectionColor}
target="new"
/>
)}
</div>