Added outline variant for cancel button

src/components/global/button.tsx

@@ -3,12 +3,17 @@
 interface ButtonProps {
   children: string | number;
   onClick: () => void;
+  variant?: "default" | "outline";
 }
 
-const Button = ({ children, onClick }: ButtonProps) => {
+const Button = ({ children, onClick, variant = "default" }: ButtonProps) => {
   return (
     <button
-      className="rounded-md bg-starlight-blue px-8 py-2 font-serif text-white hover:opacity-80"
+      className={`rounded-md px-8 py-2 font-serif hover:opacity-80 ${
+        variant === "outline"
+          ? "border border-starlight-blue bg-white text-starlight-blue"
+          : "bg-starlight-blue text-white"
+      }`}
       onClick={onClick}
     >
       {children}

src/components/programs/add.tsx

@@ -60,7 +60,9 @@ const Add = () => {
       />
       <AlertDialogFooter>
         <AlertDialogCancel asChild>
-          <Button onClick={() => {}}>Cancel</Button>
+          <Button onClick={() => {}} variant="outline">
+            Cancel
+          </Button>
         </AlertDialogCancel>
         <AlertDialogAction asChild>
           <Button onClick={() => {}}>Add</Button>