pl-fe: do not pretend users can edit individual tints

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx

@@ -5,27 +5,33 @@ import Popover from 'pl-fe/components/ui/popover';
 
 interface IColorPicker {
   value: string;
-  onChange: ColorChangeHandler;
+  onChange?: ColorChangeHandler;
   className?: string;
 }
 
-const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => (
-  <div className={className}>
-    <Popover
-      interaction='click'
-      content={
-        <SketchPicker color={value} disableAlpha onChange={onChange} />
-      }
-      isFlush
-    >
-      <div
-        className='size-full'
-        role='presentation'
-        style={{ background: value }}
-        title={value}
-      />
-    </Popover>
-  </div>
-);
-
+const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => {
+  const colorPreview = (
+    <div
+      className='size-full'
+      role='presentation'
+      style={{ background: value }}
+      title={value}
+    />
+  );
+  return (
+    <div className={className}>
+      {onChange ? (
+        <Popover
+          interaction='click'
+          content={
+            <SketchPicker color={value} disableAlpha onChange={onChange} />
+          }
+          isFlush
+        >
+          {colorPreview}
+        </Popover>
+      ) : colorPreview}
+    </div>
+  );
+};
 export { ColorPicker as default };

packages/pl-fe/src/features/preferences/index.tsx

@@ -175,6 +175,7 @@ const Preferences = () => {
           label={intl.formatMessage(messages.brandColor)}
           palette={colors(settings.theme?.brandColor || plFeConfig.brandColor || '#d80482')}
           onChange={(palette) => onBrandColorChange(palette['500'])}
+          allowTintChange={false}
         />
       </List>
 

packages/pl-fe/src/features/theme-editor/components/color.tsx

@@ -6,21 +6,21 @@ import type { ColorChangeHandler } from 'react-color';
 
 interface IColor {
   color: string;
-  onChange: (color: string) => void;
+  onChange?: (color: string) => void;
 }
 
 /** Color input. */
 const Color: React.FC<IColor> = ({ color, onChange }) => {
 
   const handleChange: ColorChangeHandler = (result) => {
-    onChange(result.hex);
+    onChange?.(result.hex);
   };
 
   return (
     <ColorPicker
       className='size-full'
       value={color}
-      onChange={handleChange}
+      onChange={onChange ? handleChange : undefined}
     />
   );
 };

packages/pl-fe/src/features/theme-editor/components/palette.tsx

@@ -17,10 +17,11 @@ interface IPalette {
   palette: ColorGroup;
   onChange: (palette: ColorGroup) => void;
   resetKey?: string;
+  allowTintChange?: boolean;
 }
 
 /** Editable color palette. */
-const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
+const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey, allowTintChange = true }) => {
   const tints = Object.keys(palette).sort(compareId);
 
   const [hue, setHue] = useState(0);
@@ -52,7 +53,7 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
     <Stack className='w-full'>
       <HStack className='h-8 overflow-hidden rounded-md'>
         {tints.map(tint => (
-          <Color color={palette[tint]} onChange={handleChange(tint)} />
+          <Color color={palette[tint]} onChange={allowTintChange ? handleChange(tint) : undefined} />
         ))}
       </HStack>
 

packages/pl-fe/src/features/theme-editor/index.tsx

@@ -249,12 +249,13 @@ interface IPaletteListItem {
   palette: ColorGroup | string;
   onChange: (palette: ColorGroup) => void;
   resetKey?: string;
+  allowTintChange?: boolean;
 }
 
 /** Palette editor inside a ListItem. */
-const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey }) => typeof palette === 'string' ? null : (
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey, allowTintChange }) => typeof palette === 'string' ? null : (
   <ListItem label={<div className='w-20'>{label}</div>}>
-    <Palette palette={palette} onChange={onChange} resetKey={resetKey} />
+    <Palette palette={palette} onChange={onChange} resetKey={resetKey} allowTintChange={allowTintChange} />
   </ListItem>
 );