Form improvements & ui cleanup

src/components/generic/Card.tsx

@@ -3,10 +3,11 @@ import type React from 'react';
 type DefaultDivProps = JSX.IntrinsicElements['div'];
 
 interface CardProps extends DefaultDivProps {
-  title: string;
-  description: string | JSX.Element;
+  title?: string;
+  description?: string | JSX.Element;
   buttons?: JSX.Element;
   lgPlaceholder?: JSX.Element;
+  loading?: boolean;
 }
 
 export const Card = ({
@@ -23,15 +24,22 @@ export const Card = ({
       className={`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-3xl  ${className}`}
       {...props}
     >
-      <div className="flex items-center justify-between mx-10 mt-10">
-        <div className="flex flex-col">
-          <div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
-            {title}
+      {(title || description) && (
+        <div className="flex items-center justify-between mx-10 mt-10">
+          <div className="flex flex-col">
+            {title && (
+              <div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
+                {title}
+              </div>
+            )}
+
+            {description && (
+              <div className="font-medium text-gray-400">{description}</div>
+            )}
           </div>
-          <div className="font-medium text-gray-400">{description}</div>
+          {buttons}
         </div>
-        {buttons}
-      </div>
+      )}
       <div className="flex">
         <div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
           {children}

src/components/generic/IconButton.tsx

@@ -4,17 +4,27 @@ type DefaulButtonProps = JSX.IntrinsicElements['button'];
 
 export interface IconButtonProps extends DefaulButtonProps {
   icon: React.ReactNode;
+  active?: boolean;
 }
 
 export const IconButton = ({
   icon,
+  active,
+  disabled,
   ...props
 }: IconButtonProps): JSX.Element => {
   return (
     <div className="my-auto text-gray-500 dark:text-gray-400">
       <button
         type="button"
-        className="p-2 transition duration-200 ease-in-out rounded-md active:scale-95 hover:bg-gray-200 dark:hover:bg-gray-600"
+        disabled={disabled}
+        className={`p-2 transition duration-200 ease-in-out rounded-md active:scale-95 ${
+          active
+            ? 'bg-gray-200 dark:bg-gray-600'
+            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
+        } ${
+          disabled ? 'text-gray-400 dark:text-gray-700 cursor-not-allowed' : ''
+        }`}
         {...props}
       >
         {icon}

src/components/generic/SidebarItem.tsx

@@ -18,12 +18,12 @@ export const SidebarItem = ({
 }: SidebarItemProps): JSX.Element => {
   return (
     <div
-      className={`flex p-5 cursor-pointer select-none dark:hover:bg-primaryDark ${
+      className={`flex p-3 cursor-pointer select-none dark:hover:bg-primaryDark ${
         selected ? 'bg-gray-200 dark:bg-primaryDark' : 'dark:bg-secondaryDark'
       }`}
       {...props}
     >
-      <div className="text-gray-500 dark:text-gray-400">{icon}</div>
+      <div className="my-auto text-gray-500 dark:text-gray-400">{icon}</div>
       <div className="ml-3 text-left">
         <div className="font-medium text-left">{title}</div>
         <div className="mt-0.5 text-gray-400 text-sm">{description}</div>

src/components/generic/form/Checkbox.tsx

@@ -27,7 +27,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
             id={id}
             className={`appearance-none w-8 h-8 border rounded-md focus:outline-none checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
               props.disabled
-                ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
+                ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
                 : ''
             } ${
               error

src/components/generic/form/InputWrapper.tsx

@@ -14,7 +14,7 @@ export const InputWrapper = ({
   <div
     className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
       disabled
-        ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400'
+        ? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
         : ''
     } ${
       error

src/components/generic/form/Select.tsx

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