fix: minor UI improvements

lexis-solutions · Feb 22, 2022 · 7f632ed · 7f632ed
1 parent 754c514
commit 7f632ed
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 17 deletions.
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
@@ -107,8 +107,11 @@ const Footer: React.FC = () => {
         {renderModals && (
           <>
             {/* Bulk requeue modal */}
-            <Modal id="bulk-requeue" onClose={() => setRenderModals(false)}>
-              <div className="text-xl">Requeue {jobsMsg}</div>
+            <Modal
+              id="bulk-requeue"
+              title={'Requeue ' + jobsMsg + '?'}
+              onClose={() => setRenderModals(false)}
+            >
               <div className="modal-action">
                 <a
                   href="#!"
@@ -130,7 +133,11 @@ const Footer: React.FC = () => {
               </div>
             </Modal>
             {/* Bulk delete modal */}
-            <Modal id="bulk-delete" onClose={() => setRenderModals(false)}>
+            <Modal
+              id="bulk-delete"
+              onClose={() => setRenderModals(false)}
+              title={'Delete ' + jobsMsg + '?'}
+            >
               <div className="text-xl">Delete {jobsMsg}</div>
               <div className="modal-action">
                 <a

diff --git a/client/src/components/Header.tsx b/client/src/components/Header.tsx
@@ -68,7 +68,7 @@ const Header: React.FC = () => {
         <a
           href="#create-job"
           onClick={() => setRenderModal(true)}
-          className="mt-4 btn bg-primary text-primary-content"
+          className="mt-4 btn btn-primary text-primary-content"
         >
           <Plus />
           <span className="ml-2">New Job</span>
@@ -77,12 +77,12 @@ const Header: React.FC = () => {
       {renderModal && (
         <Modal
           id="create-job"
+          title="Create job"
           onClose={() => {
             setRenderModal(false);
             setRenderAlert(false);
           }}
         >
-          <div className="text-xl">Create Job</div>
           <form className="flex flex-col" onSubmit={formik.handleSubmit}>
             <label className="label" htmlFor="name">
               Name
@@ -110,7 +110,7 @@ const Header: React.FC = () => {
               onSelect={(value) => formik.setFieldValue('name', value)}
             />
 
-            <div className="text-xs text-error">
+            <div className="mt-2 text-xs text-error">
               {formik.errors.name && formik.touched.name
                 ? formik.errors.name
                 : ''}
@@ -130,7 +130,9 @@ const Header: React.FC = () => {
               value={formik.values.schedule}
             />
             {formik.errors.schedule && formik.touched.schedule ? (
-              <div className="text-xs text-error">{formik.errors.schedule}</div>
+              <div className="mt-2 text-xs text-error">
+                {formik.errors.schedule}
+              </div>
             ) : null}
             <span className="my-2 text-xs text-base-content">
               Number or{' '}
@@ -158,7 +160,7 @@ const Header: React.FC = () => {
               value={formik.values.repeatInterval}
             />
             {formik.errors.repeatInterval && formik.touched.repeatInterval ? (
-              <div className="text-xs text-error">
+              <div className="mt-2 text-xs text-error">
                 {formik.errors.repeatInterval}
               </div>
             ) : null}
@@ -195,7 +197,9 @@ const Header: React.FC = () => {
               value={formik.values.data}
             />
             {formik.errors.data && formik.touched.data ? (
-              <div className="text-xs text-error">{formik.errors.data}</div>
+              <div className="mt-2 text-xs text-error">
+                {formik.errors.data}
+              </div>
             ) : null}
             {renderAlert && (
               <div className="sticky left-0 right-0 mt-4 -mb-2 alert alert-success">

diff --git a/client/src/components/JobModal.tsx b/client/src/components/JobModal.tsx
@@ -31,8 +31,7 @@ const JobModal: React.FC<PropsType> = ({
   if (!job) return null;
 
   return (
-    <Modal id={id} onClose={onClose}>
-      <div className="text-2xl">{title}</div>
+    <Modal id={id} onClose={onClose} title={title}>
       <div className="flex flex-row">
         ID: {job.job._id}
         <button

diff --git a/client/src/components/JobsTable.tsx b/client/src/components/JobsTable.tsx
@@ -127,8 +127,8 @@ const JobsTable: React.FC = () => {
                 <div className="font-bold text-red-500">
                   Failed At: {formattedFailedAt}
                 </div>
+                <div className="font-bold text-red-500">Reason:</div>
                 <div className="font-bold text-red-500">
-                  Reason:
                   <div className="h-48 overflow-scroll resize-y textarea textarea-bordered">
                     <pre>
                       <code>{modalJob?.job.failReason}</code>
@@ -146,7 +146,7 @@ const JobsTable: React.FC = () => {
           {/* Requeue modal */}
           <JobModal
             id="requeue-job"
-            title="Requeue Job"
+            title="Requeue job?"
             job={modalJob}
             onClose={() => setModalJob(null)}
           >
@@ -171,7 +171,7 @@ const JobsTable: React.FC = () => {
           {/* Delete modal */}
           <JobModal
             id="delete-job"
-            title="Delete Job"
+            title="Delete job?"
             job={modalJob}
             onClose={() => setModalJob(null)}
           >

diff --git a/client/src/components/JobsTableRow.tsx b/client/src/components/JobsTableRow.tsx
@@ -98,6 +98,7 @@ const JobsTableRow: React.FC<PropsType> = ({ job, setModalJob }) => {
             href="#job-data"
             className="btn btn-ghost no-animation"
             onClick={() => setModalJob(job)}
+            title="Info"
           >
             <Info />
           </a>
@@ -106,6 +107,7 @@ const JobsTableRow: React.FC<PropsType> = ({ job, setModalJob }) => {
             href="#requeue-job"
             className="btn btn-ghost no-animation"
             onClick={() => setModalJob(job)}
+            title="Requeue"
           >
             <Refresh />
           </a>
@@ -114,6 +116,7 @@ const JobsTableRow: React.FC<PropsType> = ({ job, setModalJob }) => {
             href="#delete-job"
             className="btn btn-ghost no-animation"
             onClick={() => setModalJob(job)}
+            title="Delete"
           >
             <Trash />
           </a>

diff --git a/client/src/components/Modal.tsx b/client/src/components/Modal.tsx
@@ -2,10 +2,11 @@ import { useEffect } from 'react';
 
 interface PropsType {
   id: string;
+  title: string;
   onClose?: () => void;
 }
 
-const Modal: React.FC<PropsType> = ({ id, onClose, children }) => {
+const Modal: React.FC<PropsType> = ({ id, onClose, title, children }) => {
   useEffect(() => {
     const closeModalOnEsc = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
@@ -21,12 +22,16 @@ const Modal: React.FC<PropsType> = ({ id, onClose, children }) => {
     <div
       id={id}
       className="modal"
-      onClick={() => {
+      onMouseDown={() => {
         window.location.href = '#!';
         if (onClose) onClose();
       }}
     >
-      <div className="space-y-4 modal-box" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="space-y-4 modal-box"
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <div className="text-2xl">{title}</div>
         {children}
       </div>
     </div>