Add default style for p, ul elements, fix button, modal styles

src/components/Modal.tsx

@@ -33,7 +33,7 @@ export const Modal = ({
     <div className={`relative ${!show && 'hidden'}`}>
       <div
         className={twMerge(
-          'fixed top-[50%] left-[50%] transform-[translate(-50%,-50%)] max-w-[100vw] max-h-[100vh] overflow-auto z-[1050] bg-white rounded',
+          'fixed -top-1/2 -left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[100vw] max-h-[100vh] overflow-auto z-[1050] bg-white rounded',
           className,
         )}
         {...rest}

src/tailwind.css

@@ -4,31 +4,31 @@
 
 
 .btn {
-  @apply flex items-center px-6 py-2 text-base justify-center rounded-full font-medium border-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-white focus:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none;
+  @apply flex items-center px-6 py-2 text-base justify-center rounded-full font-medium border-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-white focus-visible:ring-offset-1 disabled:opacity-60 disabled:pointer-events-none;
 }
 
 .btn.btn-primary {
-  @apply bg-blue-500 text-white;
+  @apply bg-blue-500 border-blue-500 text-white hover:border-blue-900 hover:bg-blue-900;
 }
 
 .btn.btn-primary-hollow {
   @apply bg-transparent text-blue-500 border-blue-500 hover:text-blue-900 hover:border-blue-900;
 }
 
 .btn.btn-dark {
-  @apply bg-black text-white;
+  @apply bg-gray-700 border-gray-700 text-white hover:bg-black hover:border-black;
 }
 
 .btn.btn-dark-hollow {
-  @apply bg-transparent text-black hover:text-black hover:text-white hover:bg-gray-100 hover:border-black;
+  @apply bg-transparent text-gray-700 border-gray-700 hover:text-black hover:border-black;
 }
 
 .btn.btn-white {
-  @apply bg-white text-black;
+  @apply bg-white border-white text-black hover:text-blue-500;
 }
 
 .btn.btn-white-hollow {
-  @apply bg-transparent text-white hover:text-white hover:text-blue-500 hover:bg-gray-100 hover:border-white;
+  @apply bg-transparent text-white border-white hover:text-blue-500;
 }
 
 .btn.btn-sm {
@@ -54,6 +54,14 @@
     @apply text-blue-500 hover:text-blue-800;
   }
 
+  ul {
+    @apply ps-10 list-disc;
+  }
+
+  p {
+    @apply my-4;
+  }
+
   h1 {
     @apply text-4xl/normal md:text-5xl/normal font-light;
   }
@@ -77,9 +85,4 @@
   h6 {
     @apply text-xs/normal font-semibold;
   }
-
-  * {
-    text-rendering: geometricPrecision;
-    box-sizing: border-box;
-  }
 }

stories/Buttons.mdx

@@ -0,0 +1,11 @@
+<button className="btn mb-4">.btn</button>
+<button className="btn btn-primary">.btn.btn-primary</button>
+<button className="btn btn-primary" disabled>.btn.btn-primary</button>
+<button className="btn btn-primary-hollow">.btn.btn-primary-hollow</button>
+<button className="btn btn-dark">.btn.btn-dark</button>
+<button className="btn btn-dark-hollow">.btn.btn-dark-hollow</button>
+<button className="btn btn-white">.btn.btn-white</button>
+<button className="btn btn-white-hollow">.btn.btn-white-hollow</button>
+<button className="btn btn-primary btn-sm">.btn.btn-primary.btn-sm</button>
+<button className="btn btn-primary btn-lg">.btn.btn-primary.btn-lg</button>
+<button className="btn btn-primary btn-xl">.btn.btn-primary.btn-xl</button>