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

Color simplification and reordering save refresh

Browse Source
This commit is contained in:
Joshua Ryder
2025-12-08 15:52:00 -05:00
parent 542757990e
commit bd4c6e0c3a
1 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -172,9 +172,8 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
}; };
const ColorPicker = ({ selectedColor, onSelect }: { selectedColor: string; onSelect: (color: string) => void }) => ( 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]"> <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">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2 font-medium">Choose a color</p> <div className="grid grid-cols-6 gap-2">
<div className="grid grid-cols-3 gap-2">
{SECTION_COLORS.map(color => ( {SECTION_COLORS.map(color => (
<button <button
key={color.value} key={color.value}
@@ -182,25 +181,24 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
onSelect(color.value); onSelect(color.value);
setShowColorPicker(null); setShowColorPicker(null);
}} }}
className={`flex items-center gap-2 px-2 py-1.5 rounded-lg transition-colors ${ className={`w-8 h-8 rounded-full transition-all ${
selectedColor === color.value selectedColor === color.value
? 'bg-gray-100 dark:bg-gray-700 ring-2 ring-blue-500' ? 'ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800'
: 'hover:bg-gray-50 dark:hover:bg-gray-700' : 'hover:scale-110'
}`} }`}
>
<div
className="w-6 h-6 rounded-full flex-shrink-0 border border-gray-200 dark:border-gray-600"
style={{ backgroundColor: color.value }} style={{ backgroundColor: color.value }}
title={color.name}
/> />
<span className="text-xs text-gray-700 dark:text-gray-300 truncate">
{color.name}
</span>
</button>
))} ))}
</div> </div>
</div> </div>
); );
const handleSaveAndClose = () => {
onSectionChange(); // Refresh parent state from server
onClose();
};
return ( return (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"> <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden"> <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">
@@ -208,10 +206,10 @@ const SectionsManager: React.FC<SectionsManagerProps> = ({
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700"> <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Manage Sections</h2> <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Manage Sections</h2>
<button <button
onClick={onClose} onClick={handleSaveAndClose}
className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded" className="px-3 py-1 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
> >
<X className="h-5 w-5 text-gray-500" /> Done
</button> </button>
</div> </div>