style: toast close icon

lovrozagar · Jun 25, 2024 · b5947a0 · b5947a0
1 parent 2225fe9
commit b5947a0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 92 deletions.
diff --git a/app.tsx b/app.tsx
@@ -1,48 +1,9 @@
-import {
-  Button,
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-  Toaster,
-  Toggle,
-  toast,
-  toastError,
-  toastInfo,
-  toastSuccess,
-  toastWarning,
-} from '@/components'
+import { Button, Dialog, DialogContent, DialogTrigger, Toaster, toastSuccess } from '@/components'
 import React from 'react'
 
 const App = () => {
   return (
     <div className='h-screen w-full flex items-center justify-center gap-8'>
-      <Button
-        onClick={() =>
-          toast({
-            title: 'Uspjeh',
-            description: 'Uspjesna akcija obavljena',
-            action: { label: 'afe', onClick: () => {} },
-          })
-        }
-      >
-        TDefault
-      </Button>
       <Button
         onClick={() =>
           toastSuccess({
@@ -52,59 +13,12 @@ const App = () => {
           })
         }
       >
-        Tsuccess
-      </Button>
-      <Button
-        onClick={() => toastError({ title: 'Uspjeh', description: 'Uspjesna akcija obavljena' })}
-      >
-        Terror
-      </Button>
-      <Button
-        onClick={() => toastWarning({ title: 'Uspjeh', description: 'Uspjesna akcija obavljena' })}
-      >
-        Twarning
-      </Button>
-      <Button
-        onClick={() => toastInfo({ title: 'Uspjeh', description: 'Uspjesna akcija obavljena' })}
-      >
-        Tinfo
-      </Button>
-      <Button color='primary' variant='shadow'>
-        Button
+        TSuccess
       </Button>
-      <Toggle color='destructive'>Toggle</Toggle>
       <Dialog>
-        <DialogTrigger>Dialog</DialogTrigger>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Title</DialogTitle>
-            <DialogDescription>Description</DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button>Close</Button>
-            </DialogClose>
-          </DialogFooter>
-        </DialogContent>
+        <DialogTrigger>Trigger</DialogTrigger>
+        <DialogContent>Content</DialogContent>
       </Dialog>
-      <Sheet>
-        <SheetTrigger>Sheet</SheetTrigger>
-        <SheetContent>
-          <SheetHeader>
-            <SheetTitle>Title</SheetTitle>
-            <SheetDescription>Description</SheetDescription>
-          </SheetHeader>
-          <SheetFooter>
-            <SheetClose asChild>
-              <Button>Close</Button>
-            </SheetClose>
-          </SheetFooter>
-        </SheetContent>
-      </Sheet>
-      <Popover>
-        <PopoverTrigger>Popover</PopoverTrigger>
-        <PopoverContent>Content</PopoverContent>
-      </Popover>
       <Toaster />
     </div>
   )

diff --git a/src/components/toast/components/toast.tsx b/src/components/toast/components/toast.tsx
@@ -67,14 +67,14 @@ const ToastContent = (props: ToastContentProps) => {
       ) : null}
       <button
         className={cn(
-          'absolute cursor-pointer top-[4px] right-[4px] size-[24px] [&_>_svg]:size-[10px] z-[1] flex items-center justify-center p-0 border-none text-neutral-700 transition-colors duration-fast appearance-none bg-transparent rounded',
+          'absolute cursor-pointer top-[4px] right-[4px] size-[24px] z-[1] flex items-center justify-center p-0 border-none text-neutral-700 transition-colors duration-fast appearance-none bg-transparent rounded outline-none ring-offset-0 ring-ring-color focus-visible:ring-[2px]',
           buttonClassName,
           closeButtonClassName,
         )}
         onClick={chain(() => toast.dismiss(t), onCloseButtonClick)}
         {...restCloseButtonProps}
       >
-        {closeButtonChildren ?? <CrossSmallIcon />}
+        {closeButtonChildren ?? <CrossSmallIcon className='size-3.5' />}
       </button>
     </div>
   )