From d3f7c48e559f0f825fae2542de8b6b9d53e33a25 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Fri, 18 Oct 2024 18:11:09 -0400
Subject: [PATCH] Use correct token for preset window

---
 app/src/components/ui/popover.tsx                    |  4 ++--
 app/src/routes/editor/WebviewArea/BrowserControl.tsx | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/src/components/ui/popover.tsx b/app/src/components/ui/popover.tsx
index 22f45f39f..75950571e 100644
--- a/app/src/components/ui/popover.tsx
+++ b/app/src/components/ui/popover.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
@@ -28,4 +28,4 @@ const PopoverContent = React.forwardRef<
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };
diff --git a/app/src/routes/editor/WebviewArea/BrowserControl.tsx b/app/src/routes/editor/WebviewArea/BrowserControl.tsx
index 948cdcce3..6099803c5 100644
--- a/app/src/routes/editor/WebviewArea/BrowserControl.tsx
+++ b/app/src/routes/editor/WebviewArea/BrowserControl.tsx
@@ -172,11 +172,11 @@ function BrowserControls({
                         <ChevronDownIcon />
                     </Button>
                 </PopoverTrigger>
-                <PopoverContent className="backdrop-blur text-sm overflow-hidden bg-background/90 text-white rounded-xl w-64 border border-gray-600 p-0">
-                    <h3 className="text-gray-400 px-4 py-4 border-b border-gray-600">
+                <PopoverContent className="backdrop-blur text-sm overflow-hidden bg-background/90 rounded-xl w-64 border p-0">
+                    <h3 className="text-foreground-tertiary px-4 py-4 border-b">
                         Preset Dimensions
                     </h3>
-                    <div className="">
+                    <div>
                         {PRESETS.map((preset) => (
                             <button
                                 key={preset.name}
@@ -191,8 +191,8 @@ function BrowserControls({
                                     'hover:bg-background-active/80',
                                 )}
                             >
-                                <span className="text-white justify-self-start">{preset.name}</span>
-                                <span className="text-gray-400 justify-self-end">{`${preset.width} x ${preset.height}`}</span>
+                                <span className="justify-self-start">{preset.name}</span>
+                                <span className="text-foreground-tertiary justify-self-end">{`${preset.width} x ${preset.height}`}</span>
                             </button>
                         ))}
                     </div>