Internal rework

src/components/generic/Blur.tsx

@@ -15,14 +15,14 @@ export const Blur = ({
   return (
     <div
       className={`absolute inset-0 z-20 w-full h-full transition-opacity ${
-        disableOnMd ? 'md:hidden' : 'test'
+        disableOnMd ? 'md:hidden' : ''
       } ${className}`}
       {...props}
     >
       <div
         onClick={onClick}
         className={`absolute inset-0 w-full h-full backdrop-filter backdrop-blur-sm ${
-          disableOnMd ? 'md:hidden' : 'test'
+          disableOnMd ? 'md:hidden' : ''
         }`}
         tabIndex={0}
       ></div>

src/components/generic/Button.tsx

@@ -9,6 +9,7 @@ interface ButtonProps extends DefaultButtonProps {
   circle?: boolean;
   active?: boolean;
   border?: boolean;
+  padding?: number;
   confirmAction?: () => void;
 }
 
@@ -21,6 +22,7 @@ export const Button = ({
   confirmAction,
   disabled,
   children,
+  padding = 3,
   ...props
 }: ButtonProps): JSX.Element => {
   const [hasConfirmed, setHasConfirmed] = React.useState(false);
@@ -43,7 +45,9 @@ export const Button = ({
       className={`items-center select-none flex dark:text-white active:scale-95 transition duration-200 ease-in-out ${
         active && !disabled ? 'bg-gray-100 dark:bg-gray-700' : ''
       } ${
-        circle ? 'rounded-full h-10 w-10' : 'rounded-md p-3 space-x-3 text-sm'
+        circle
+          ? 'rounded-full h-10 w-10'
+          : `rounded-md p-${padding} space-x-3 text-sm`
       } ${
         disabled
           ? 'cursor-not-allowed dark:bg-primaryDark bg-white'

src/components/generic/Card.tsx

@@ -24,7 +24,7 @@ export const Card = ({
 }: CardProps): JSX.Element => {
   return (
     <div
-      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none dark:bg-primaryDark border-gray-300 dark:border-transparent md:rounded-md  ${className}`}
+      className={`relative flex flex-col flex-auto dark:text-white border-y md:border shadow-md select-none bg-white dark:bg-primaryDark border-gray-300 dark:border-gray-600 md:rounded-md  ${className}`}
       {...props}
     >
       {loading && <Loading />}

src/components/generic/Modal.tsx

@@ -0,0 +1,37 @@
+import type React from 'react';
+
+import { useAppSelector } from '@app/hooks/redux';
+import { Dialog } from '@headlessui/react';
+
+export interface ModalProps {
+  children: React.ReactNode;
+  open: boolean;
+  onClose: () => void;
+}
+
+export const Modal = ({ children, open, onClose }: ModalProps): JSX.Element => {
+  const darkMode = useAppSelector((state) => state.app.darkMode);
+  return (
+    <>
+      <Dialog
+        as="div"
+        className={`fixed inset-0 z-30 ${darkMode ? 'dark' : ''}`}
+        open={open}
+        onClose={onClose}
+      >
+        <Dialog.Overlay className="fixed w-full h-full backdrop-filter backdrop-blur-sm" />
+        <div className="text-center ">
+          <span
+            className="inline-block h-screen align-middle "
+            aria-hidden="true"
+          >
+            &#8203;
+          </span>
+          <div className="inline-block w-full max-w-3xl align-middle">
+            {children}
+          </div>
+        </div>
+      </Dialog>
+    </>
+  );
+};

src/components/generic/StatCard.tsx

@@ -7,7 +7,7 @@ export interface StatCardProps {
 
 export const StatCard = ({ title, value }: StatCardProps): JSX.Element => {
   return (
-    <div className="w-full border-gray-300 shadow-md border-y md:border h-28 md:rounded-3xl dark:bg-primaryDark dark:border-transparent ">
+    <div className="w-full bg-white border-gray-300 shadow-md select-none dark:text-white border-y md:border dark:bg-primaryDark dark:border-gray-600 md:rounded-md ">
       <div className="m-4">
         <div className="text-lg font-light">{title}</div>
         <div className="text-3xl font-bold">{value}</div>