Swap preview pane actions.

src/components/PaletteEditor/PaletteEditor.test.cy.tsx

@@ -170,7 +170,7 @@ it("can perform actions in normal mode", () => {
   cy.get("@row2").contains("#000000");
 });
 
-it("can manually sync picker and palette", () => {
+it.only("can manually sync picker and palette", () => {
   cy.mount(<TestWrapper initialCardState={defaultPaletteCardState} />);
 
   cy.dataCy("hex-value-input").as("hex");
@@ -189,10 +189,10 @@ it("can manually sync picker and palette", () => {
 
   // Select a color and sync it to the picker
   cy.get("@row1").click();
-  cy.get("@palette")
+  cy.get("@palette").should("have.css", "background-color", "rgb(0, 255, 0)");
-    .should("have.css", "background-color", "rgb(0, 255, 0)")
+  cy.get("@picker")
-    .click();
+    .click()
-  cy.get("@picker").should("have.css", "background-color", "rgb(0, 255, 0)");
+    .should("have.css", "background-color", "rgb(0, 255, 0)");
   cy.get("@hex").should("have.value", "#00FF00");
 
   // Select a new color, picker remains the same
@@ -203,7 +203,7 @@ it("can manually sync picker and palette", () => {
   // Change picker color, sync back to palette.
   cy.get("@hex").focus().type("FFFF00{esc}").wait(0);
   cy.get("@picker").should("have.css", "background-color", "rgb(255, 255, 0)");
-  cy.get("@picker").click();
+  cy.get("@palette").click();
   cy.get("@row0").contains("#FFFF00");
 });
 

src/components/PaletteEditor/PaletteEditor.tsx

@@ -384,13 +384,15 @@ function PaletteCard({
       <CardHeader name={cardState.name} onNameChange={actions.setCardName} />
       <PickerColor
         pickerColor={pickerColor}
-        paletteColorId={selectedColor?.id || null}
+        setPickerColor={setPickerColor}
-        setPaletteColor={actions.setColorValue}
+        selectedColor={selectedColor?.hex || null}
         isSynced={isSynced}
       />
       <PaletteColor
         selectedColor={selectedColor?.hex || null}
-        setPickerColor={setPickerColor}
+        pickerColor={pickerColor}
+        paletteColorId={selectedColor?.id || null}
+        setPaletteColor={actions.setColorValue}
         isSynced={isSynced}
       />
       <Palette cardState={cardState} actions={actions} mode={mode} />
@@ -446,20 +448,20 @@ function CardHeader({
 
 function PickerColor({
   pickerColor,
-  paletteColorId,
+  setPickerColor,
-  setPaletteColor,
+  selectedColor,
   isSynced,
 }: {
   pickerColor: HexColor;
-  paletteColorId: string | null;
+  setPickerColor: (hex: HexColor) => void;
-  setPaletteColor: (id: string, hex: HexColor) => void;
+  selectedColor: HexColor | null;
   isSynced: boolean;
 }) {
   const arrowToken = useContrastToken(() => luminanceFromHex(pickerColor));
 
   const handleClick = () => {
-    if (!isSynced && paletteColorId) {
+    if (!isSynced && selectedColor) {
-      setPaletteColor(paletteColorId, pickerColor);
+      setPickerColor(selectedColor);
     }
   };
 
@@ -472,7 +474,7 @@ function PickerColor({
         backgroundColor: formatHexString(pickerColor),
       }}
       onClick={handleClick}
-      title={!isSynced ? "Send to Picker" : ""}
+      title={!isSynced ? "Set to Palette Color" : ""}
     >
       {!isSynced && (
         <div
@@ -482,7 +484,7 @@ function PickerColor({
             [styles.arrowIndicatorLight]: arrowToken === "light",
           })}
         >
-          <ChevronsRight size={32} />
+          <ChevronsLeft size={32} />
         </div>
       )}
     </div>
@@ -491,19 +493,23 @@ function PickerColor({
 
 function PaletteColor({
   selectedColor,
-  setPickerColor,
+  pickerColor,
+  paletteColorId,
+  setPaletteColor,
   isSynced,
 }: {
   selectedColor: HexColor | null;
-  setPickerColor: (hex: HexColor) => void;
+  pickerColor: HexColor;
+  paletteColorId: string | null;
+  setPaletteColor: (id: string, hex: HexColor) => void;
   isSynced: boolean;
 }) {
   const bgColor = selectedColor || DEFAULT_BG;
   const arrowToken = useContrastToken(() => luminanceFromHex(bgColor));
 
   const handleClick = () => {
-    if (!isSynced && selectedColor) {
+    if (!isSynced && paletteColorId) {
-      setPickerColor(selectedColor);
+      setPaletteColor(paletteColorId, pickerColor);
     }
   };
 
@@ -516,7 +522,7 @@ function PaletteColor({
         backgroundColor: formatHexString(bgColor),
       }}
       onClick={handleClick}
-      title={!isSynced ? "Send to Palette" : ""}
+      title={!isSynced ? "Set to Picker Color" : ""}
     >
       {!isSynced && (
         <div
@@ -526,7 +532,7 @@ function PaletteColor({
             [styles.arrowIndicatorLight]: arrowToken === "light",
           })}
         >
-          <ChevronsLeft size={32} />
+          <ChevronsRight size={32} />
         </div>
       )}
     </div>