Make custom button

astro/src/components/AddRetailerForm.tsx

@@ -2,7 +2,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/Button"
 import {
   Form,
   FormControl,

astro/src/components/KiosMap.tsx

@@ -6,6 +6,7 @@ import L, { LatLngBounds } from 'leaflet';
 import { useQuery, useMutation, useQueryClient, queryOptions } from "@tanstack/react-query";
 import axios from "axios";
 import Contacts from './Contacts';
+import { Button } from './ui/Button';
 
 //Todo: Move types to own file
 interface User {
@@ -210,7 +211,7 @@ export const KiosMap = () => {
   }
 
   const handleAcceptRoute = () => {
-    
+
   }
 
   const blackDotIcon = L.divIcon({
@@ -240,12 +241,18 @@ export const KiosMap = () => {
           <div className='absolute bg-white border-gray-950 border-2 z-[999] left-10 top-1/4 p-4'>
             <div className='flex gap-8 flex-col'>
               {selectedMaker !== undefined && (
+                <div>
                 <Contacts
                   name={selectedMaker.name}
                   email={selectedMaker.email}
                   phoneNumber={selectedMaker.phoneNumber}
                   role={'maker'}
-                />
+                  />
+                  <Button 
+                    variant="kios"
+                    onClick={() => handleOpenCatalogue()}
+                    >See catalogue</Button>
+                </div>
               )}
 
               {selectedRetailer !== undefined && (
@@ -284,12 +291,12 @@ export const KiosMap = () => {
                   ) :
                     <div>
                       <h2 className='text-xl font-bold underline-offset-2 underline py-2'>No courier!</h2>
-                      <button 
+                      <Button 
-                        className="border-2 border-gray-950 py-2 px-4 w-full hover:bg-gray-950 transition-all hover:text-white hover:font-bold"
+                        variant={"kios"}
                         onClick={() => handleAcceptRoute()}
                         >
                           Accept route as courier
-                        </button>
+                        </Button>
                     </div>
                   }
                 </div>

astro/src/components/ui/Button.tsx

@@ -9,6 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
+        kios: "border-2 border-gray-950 py-2 px-4 w-full hover:bg-gray-950 transition-all hover:text-white hover:font-bold rounded-none",
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90",