From daaf318683cda6a2e388ae5361ef4d3c5751bf8f Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Sat, 7 Jan 2023 15:13:59 -0800
Subject: [PATCH] palette switch style

---
 src/components/Switch.tsx  | 28 ++++++++++++++--------------
 src/pages/photogallery.tsx | 34 ++++++++++++++++++++++++----------
 2 files changed, 38 insertions(+), 24 deletions(-)
diff --git a/src/components/Switch.tsx b/src/components/Switch.tsx
index fee6096..97671ac 100644
--- a/src/components/Switch.tsx
+++ b/src/components/Switch.tsx
@@ -15,7 +15,7 @@ export function Switch(props: AriaSwitchProps) {
 
   return (
     <label
-      className="text-sm p-2"
+      className="text-sm p-[3px]"
       style={{
         display: "flex",
         alignItems: "center",
@@ -26,31 +26,31 @@ export function Switch(props: AriaSwitchProps) {
         <input {...inputProps} {...focusProps} ref={ref} />
       </VisuallyHidden>
       <svg
-        className="flex-shrink-0"
-        width={40}
-        height={24}
         aria-hidden="true"
+        className="flex-shrink-0"
+        height={24}
         style={{ marginRight: 4 }}
+        width={40}
       >
         <rect
-          x={4}
-          y={4}
-          width={32}
+          fill={state.isSelected ? "green" : "gray"}
           height={16}
           rx={8}
-          fill={state.isSelected ? "orange" : "gray"}
+          width={32}
+          x={4}
+          y={4}
         />
-        <circle cx={state.isSelected ? 28 : 12} cy={12} r={5} fill="white" />
+        <circle cx={state.isSelected ? 28 : 12} cy={12} fill="white" r={5} />
         {isFocusVisible && (
           <rect
-            x={1}
-            y={1}
-            width={38}
+            fill="none"
             height={22}
             rx={11}
-            fill="none"
-            stroke="orange"
+            stroke="green"
             strokeWidth={2}
+            width={38}
+            x={1}
+            y={1}
           />
         )}
       </svg>
diff --git a/src/pages/photogallery.tsx b/src/pages/photogallery.tsx
index 16837a4..4982d32 100644
--- a/src/pages/photogallery.tsx
+++ b/src/pages/photogallery.tsx
@@ -6,10 +6,15 @@ import { Helmet } from "react-helmet";
 
 import MasonryGallery from "../components/MasonryGallery";
 import KeywordsPicker from "../components/KeywordsPicker";
-import { getGalleryPageUrl, getHelmetSafeBodyStyle, getVibrantStyle } from "../utils";
+import {
+  getGalleryPageUrl,
+  getHelmetSafeBodyStyle,
+  getVibrantStyle,
+} from "../utils";
 import Nav from "../components/Nav";
 import { Item, Select } from "../components/Select";
 import { Switch } from "../components/Switch";
+import ColorPalette from "@spectrum-icons/workflow/ColorPalette";
 
 const SORT_KEYS = {
   hue: ["fields", "imageMeta", "vibrantHue"],
@@ -168,14 +173,16 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
         <body
           className="bg-white transition-color"
           // @ts-ignore
-          style={getHelmetSafeBodyStyle(getVibrantStyle({
-            Muted: [0, 0, 0],
-            LightMuted: [0, 0, 0],
-            Vibrant: [0, 0, 0],
-            LightVibrant: [0, 0, 0],
-            DarkMuted: [238, 238, 238],
-            DarkVibrant: [238, 238, 238],
-          }))}
+          style={getHelmetSafeBodyStyle(
+            getVibrantStyle({
+              Muted: [0, 0, 0],
+              LightMuted: [0, 0, 0],
+              Vibrant: [0, 0, 0],
+              LightVibrant: [0, 0, 0],
+              DarkMuted: [238, 238, 238],
+              DarkVibrant: [238, 238, 238],
+            })
+          )}
         />
       </Helmet>
       <div className="top-0 z-10">
@@ -210,12 +217,19 @@ const GalleryPage = ({ data }: PageProps<Queries.GalleryPageQueryQuery>) => {
             value={filterKeyword}
           />
           <div className="m-2 flex flex-row items-end">
+            <div className="border border-black rounded mr-2">
             <Switch
               isSelected={showPalette}
               onChange={(val) => setShowPalette(val)}
             >
-              Show palettes
+              <ColorPalette
+                UNSAFE_style={{
+                  width: "24px",
+                  margin: "0 4px",
+                }}
+              />
             </Switch>
+            </div>
             <Select
               label="Sort by..."
               // @ts-ignore
