From 43510ebdd5e324f7e36e38b2402de04a5adc6c51 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 27 Mar 2024 16:29:35 -0600
Subject: [PATCH] Use separate buttons for export control

---
 web/src/components/overlay/SaveExportOverlay.tsx | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/web/src/components/overlay/SaveExportOverlay.tsx b/web/src/components/overlay/SaveExportOverlay.tsx
index 79bef9c9f..b84bda04b 100644
--- a/web/src/components/overlay/SaveExportOverlay.tsx
+++ b/web/src/components/overlay/SaveExportOverlay.tsx
@@ -1,5 +1,4 @@
 import { Button } from "../ui/button";
-import { LuX } from "react-icons/lu";
 
 type SaveExportOverlayProps = {
   className: string;
@@ -16,20 +15,15 @@ export default function SaveExportOverlay({
   return (
     <div className={className}>
       <div
-        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto bg-selected rounded-lg *:text-white *:hover:bg-transparent ${
+        className={`flex justify-center px-2 gap-2 items-center pointer-events-auto rounded-lg *:text-white ${
           show ? "animate-in slide-in-from-top duration-500" : "invisible"
         }  text-center mt-5 mx-auto`}
       >
-        <Button className="p-0" variant="ghost" size="sm" onClick={onSave}>
+        <Button variant="select" size="sm" onClick={onSave}>
           Save Export
         </Button>
-        <Button
-          className="cursor-pointer"
-          size="xs"
-          variant="ghost"
-          onClick={onCancel}
-        >
-          <LuX />
+        <Button size="sm" variant="secondary" onClick={onCancel}>
+          Cancel
         </Button>
       </div>
     </div>