Switch to Vite + improvements

src/components/generic/Blur.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/Button.tsx

@@ -67,49 +67,3 @@ export const Button = ({
     </button>
   );
 };
-
-// import React from 'react';
-
-// type DefaultButtonProps = JSX.IntrinsicElements['button'];
-
-// export interface ButtonProps extends DefaultButtonProps {
-//   icon?: JSX.Element;
-//   circle?: boolean;
-//   active?: boolean;
-//   border?: boolean;
-//   confirmAction?: () => void;
-//   rightIcon?: React.ReactNode;
-//   leftIcon?: React.ReactNode;
-//   nested?: boolean;
-// }
-
-// export const Button = ({
-//   rightIcon,
-//   leftIcon,
-//   children,
-//   nested,
-//   ...props
-// }: ButtonProps): JSX.Element => {
-//   return (
-//     <button
-//       className={`select-none flex hover:bg-gray-300 dark:hover:bg-gray-500 rounded-md cursor-pointer active:scale-95 dark:text-white ${
-//         nested
-//           ? 'hover:bg-gray-300 dark:hover:bg-gray-500 dark:bg-gray-600 bg-gray-200'
-//           : 'dark:bg-gray-700 bg-gray-200'
-//       }`}
-//       {...props}
-//     >
-//       {leftIcon && (
-//         <div className="flex py-1 bg-gray-00 rounded-l-md">
-//           <div className="mx-2 my-auto">{leftIcon}</div>
-//         </div>
-//       )}
-//       <div className="flex px-4 py-2 space-x-2 leading-4">{children}</div>
-//       {rightIcon && (
-//         <div className="flex py-2 bg-gray-200 rounded-r-md">
-//           <div className="mx-2 my-auto">{rightIcon}</div>
-//         </div>
-//       )}
-//     </button>
-//   );
-// };

src/components/generic/Card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/Cover.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface CoverProps {
   content: JSX.Element;

src/components/generic/Drawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import { Blur } from '@components/generic/Blur';
 

src/components/generic/IconButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaulButtonProps = JSX.IntrinsicElements['button'];
 

src/components/generic/SidebarItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 

src/components/generic/StatCard.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface StatCardProps {
   title: string;

src/components/generic/form/Checkbox.tsx

@@ -34,7 +34,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
                 ? 'border-red-500'
                 : props.disabled
                 ? 'border-gray-200'
-                : ' focus-within:border-primary hover:border-primary'
+                : 'focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
             }`}
             {...props}
           />

src/components/generic/form/InputWrapper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface LabelProps {
   error?: string;
@@ -21,7 +21,7 @@ export const InputWrapper = ({
         ? 'border-red-500'
         : disabled
         ? 'border-gray-200'
-        : ' focus-within:border-primary hover:border-primary'
+        : ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
     }`}
   >
     {children}

src/components/generic/form/Label.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 export interface LabelProps {
   label: string;

src/components/generic/form/Select.tsx

@@ -29,8 +29,8 @@ export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
         <InputWrapper>
           <select
             ref={ref}
-            className={`w-full bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
-              small ? 'py-1 mx-1' : 'h-10 mx-2'
+            className={`w-full rounded-md bg-white dark:bg-transparent focus:outline-none focus:border-primary ${
+              small ? 'p-1' : 'h-10 px-2'
             }`}
             disabled={
               props.disabled