Form improvements & ui cleanup

src/components/FormFooter.tsx

@@ -0,0 +1,36 @@
+import type React from 'react';
+
+import { FiSave, FiXCircle } from 'react-icons/fi';
+
+import { IconButton } from './generic/IconButton';
+
+export interface FormFooterProps {
+  dirty: boolean;
+  clearAction: () => void;
+  saveAction: () => void;
+}
+
+export const FormFooter = ({
+  dirty,
+  clearAction,
+  saveAction,
+}: FormFooterProps): JSX.Element => {
+  return (
+    <div className="flex float-right gap-2">
+      <IconButton
+        icon={<FiXCircle className="w-5 h-5" />}
+        disabled={!dirty}
+        onClick={(): void => {
+          clearAction();
+        }}
+      />
+      <IconButton
+        disabled={!dirty}
+        onClick={(): void => {
+          saveAction();
+        }}
+        icon={<FiSave className="w-5 h-5" />}
+      />
+    </div>
+  );
+};

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

src/components/templates/PrimaryTemplate.tsx

@@ -4,7 +4,8 @@ export interface PrimaryTemplateProps {
   children: React.ReactNode;
   title: string;
   tagline: string;
-  button?: JSX.Element;
+  leftButton?: JSX.Element;
+  rightButton?: JSX.Element;
   footer?: JSX.Element;
 }
 
@@ -12,13 +13,13 @@ export const PrimaryTemplate = ({
   children,
   title,
   tagline,
-  button,
+  leftButton,
+  rightButton,
   footer,
 }: PrimaryTemplateProps): JSX.Element => {
   return (
     <div className="flex flex-col flex-auto h-full min-w-0">
       <div className="flex p-4 bg-white border-b border-gray-300 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
-        {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
         <div className="flex-1 min-w-0">
           <a className="font-medium whitespace-nowrap text-primary">
             {tagline}
@@ -27,13 +28,16 @@ export const PrimaryTemplate = ({
             {title}
           </h2>
         </div>
+        {rightButton}
       </div>
-      <div className="flex-auto flex-grow py-6 overflow-y-auto bg-white md:p-10 dark:bg-secondaryDark">
+      <div className="flex-auto flex-grow py-6 overflow-y-auto bg-white md:p-5 dark:bg-secondaryDark">
         {children}
       </div>
       {footer && (
-        <div className="flex p-4 bg-white border-t border-gray-300 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
-          {button && <div className="pr-2 m-auto md:hidden">{button}</div>}
+        <div className="flex px-4 py-2 bg-white border-t border-gray-300 md: md:py-4 md:flex-row flex-0 md:items-center md:justify-between md:px-10 dark:border-gray-600 dark:bg-secondaryDark">
+          {leftButton && (
+            <div className="pr-2 m-auto md:hidden">{leftButton}</div>
+          )}
           <div className="flex-1 min-w-0">{footer}</div>
         </div>
       )}