mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
fix(groups): colour-picker highlight follows the live selection
The selected-swatch ring compared each swatch against `groupData.groupColors`, which is only written back on save — so clicking a colour updated the local `colors` state (and the top preview swatches) but the highlight ring never moved, leaving the two in visible disagreement until you left and reopened the tab. Compare against `colors[0]`/`colors[1]` (the live state) instead.
This commit is contained in:
@@ -113,7 +113,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
|
|||||||
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
||||||
{ groupData.groupColors && groupCustomize?.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
|
{ groupData.groupColors && groupCustomize?.groupColorsA && groupCustomize.groupColorsA.map((item, index) =>
|
||||||
{
|
{
|
||||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
|
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((colors[0] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(0, item.id) }></div>;
|
||||||
}) }
|
}) }
|
||||||
</AutoGrid>
|
</AutoGrid>
|
||||||
</Column>
|
</Column>
|
||||||
@@ -122,7 +122,7 @@ export const GroupTabColorsView: FC<GroupTabColorsViewProps> = props =>
|
|||||||
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
<AutoGrid columnCount={ 7 } columnMinHeight={ 16 } columnMinWidth={ 16 } gap={ 1 }>
|
||||||
{ groupData.groupColors && groupCustomize?.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
|
{ groupData.groupColors && groupCustomize?.groupColorsB && groupCustomize.groupColorsB.map((item, index) =>
|
||||||
{
|
{
|
||||||
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((groupData.groupColors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
|
return <div key={ index } className={ classNames('relative rounded-[.25rem] w-[16px] h-[16px] bg-[#fff] border-2 border-[solid] border-[#fff] [box-shadow:inset_3px_3px_#0000001a] [box-shadow:inset_2px_2px_#0003] cursor-pointer', ((colors[1] === item.id) && 'bg-primary [box-shadow:none]')) } style={ { backgroundColor: '#' + item.color } } onClick={ () => selectColor(1, item.id) }></div>;
|
||||||
}) }
|
}) }
|
||||||
</AutoGrid>
|
</AutoGrid>
|
||||||
</Column>
|
</Column>
|
||||||
|
|||||||
Reference in New Issue
Block a user