fix: solve some ui bugs

Author: CMOISDEAD

package.json

@@ -1,7 +1,7 @@
 {
   "name": "doom-react-notifications",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.10",
   "description": "A simple react notification system",
   "author": "camilodavila",
   "license": "MIT",

src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

src/lib/components/Notification.tsx

@@ -11,7 +11,7 @@ const NotificationBox: FC<NotificationType> = ({
   const Icon = checkIcon(type);
   return (
     <div
-      className={`notification animated flex gap-2 content-center items-center notification-${type}`}
+      className={`notification animated notification-${type}`}
       onClick={onClick}
       id={`${id}`}
     >

src/lib/components/index.ts

@@ -1 +1,5 @@
+export * from "./icons/SuccesSvg";
+export * from "./icons/ErrorSvg";
+export * from "./icons/WarningSvg";
+export * from "./icons/InfoSvg";
 export * from "./Notification";

src/lib/index.ts

@@ -6,4 +6,10 @@ export {
   NotificationConsumer,
 } from "./core";
 export { useNotification } from "./hooks";
-export { Notification } from "./components";
+export {
+  Notification,
+  SuccesSvg,
+  ErrorSvg,
+  WarningSvg,
+  InfoSvg,
+} from "./components";

src/lib/styles.css

@@ -1,9 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 .notification {
-  @apply m-2 p-2 border border-neutral-500 rounded w-72 hover:cursor-pointer transition-colors;
+  @apply m-2 py-2 px-2 border border-neutral-500 rounded w-72 hover:cursor-pointer transition-colors flex gap-2 content-center items-center;
 }
 
 .notification.animated {