From f282761ad2ffa4e33d539d2f750bf6fb825ecc3d Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Wed, 15 Jan 2025 16:16:44 +0530
Subject: [PATCH] Conv

---
 web/packages/new/photos/components/SearchBar.tsx     |  6 +++---
 .../new/photos/components/gallery/BarImpl.tsx        | 12 ++++++++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/packages/new/photos/components/SearchBar.tsx b/web/packages/new/photos/components/SearchBar.tsx
index 42aa32d489..b92010351a 100644
--- a/web/packages/new/photos/components/SearchBar.tsx
+++ b/web/packages/new/photos/components/SearchBar.tsx
@@ -324,13 +324,13 @@ const Control = ({ children, ...props }: ControlProps<SearchOption, false>) => (
             }}
         >
             <Box
-                sx={(theme) => ({
+                sx={{
                     display: "inline-flex",
                     // Match the default padding of the ValueContainer to make
                     // the icon look properly spaced and aligned.
                     pl: "8px",
-                    color: theme.colors.stroke.muted,
-                })}
+                    color: "stroke.muted",
+                }}
             >
                 {iconForOption(props.getValue()[0])}
             </Box>
diff --git a/web/packages/new/photos/components/gallery/BarImpl.tsx b/web/packages/new/photos/components/gallery/BarImpl.tsx
index b9009263c1..fb401169fe 100644
--- a/web/packages/new/photos/components/gallery/BarImpl.tsx
+++ b/web/packages/new/photos/components/gallery/BarImpl.tsx
@@ -351,8 +351,12 @@ const ModeButton = styled(UnstyledButton, {
     shouldForwardProp: (propName) => propName != "active",
 })<{ active: boolean }>(
     ({ theme, active }) => `
-    p { color: ${active ? theme.colors.text.base : theme.colors.text.muted} }
-    p:hover { color: ${theme.colors.text.base} }
+p {
+    color: ${active ? theme.vars.palette.text.base : theme.vars.palette.text.muted}
+}
+p:hover {
+    color: ${theme.vars.palette.text.base}
+}
 `,
 );
 
@@ -374,8 +378,8 @@ const ScrollButtonBase_ = styled("button")(({ theme }) => ({
     padding: 0,
     margin: 0,
     borderRadius: "50%",
-    backgroundColor: theme.palette.backdrop.muted,
-    color: theme.colors.stroke.base,
+    backgroundColor: theme.vars.palette.backdrop.muted,
+    color: theme.vars.palette.stroke.base,
     cursor: "pointer",
     "& > svg": {
         borderRadius: "50%",