Update schedule page

resources/scripts/components/server/schedules/ScheduleTaskRow.tsx

@@ -4,7 +4,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
 import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
-import ConfirmTaskDeletionModal from '@/components/server/schedules/ConfirmTaskDeletionModal';
 import deleteScheduleTask from '@/api/server/schedules/deleteScheduleTask';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
@@ -15,6 +14,8 @@ import useServer from '@/plugins/useServer';
 import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import { faFileArchive } from '@fortawesome/free-solid-svg-icons/faFileArchive';
+import tw from 'twin.macro';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
 
 interface Props {
     schedule: Schedule;
@@ -23,14 +24,14 @@ interface Props {
 
 const getActionDetails = (action: string): [ string, any ] => {
     switch (action) {
-    case 'command':
-        return ['Send Command', faCode];
-    case 'power':
-        return ['Send Power Action', faToggleOn];
-    case 'backup':
-        return ['Create Backup', faFileArchive];
-    default:
-        return ['Unknown Action', faCode];
+        case 'command':
+            return [ 'Send Command', faCode ];
+        case 'power':
+            return [ 'Send Power Action', faToggleOn ];
+        case 'backup':
+            return [ 'Create Backup', faFileArchive ];
+        default:
+            return [ 'Unknown Action', faCode ];
     }
 };
 
@@ -60,38 +61,43 @@ export default ({ schedule, task }: Props) => {
     const [ title, icon ] = getActionDetails(task.action);
 
     return (
-        <div className={'flex items-center bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded'}>
+        <div css={tw`flex items-center bg-neutral-700 border border-neutral-600 mb-2 px-6 py-4 rounded`}>
             <SpinnerOverlay visible={isLoading} fixed={true} size={'large'}/>
             {isEditing && <TaskDetailsModal
                 schedule={schedule}
                 task={task}
                 onDismissed={() => setIsEditing(false)}
             />}
-            <ConfirmTaskDeletionModal
+            <ConfirmationModal
+                title={'Confirm task deletion'}
+                buttonText={'Delete Task'}
+                onConfirmed={onConfirmDeletion}
                 visible={visible}
                 onDismissed={() => setVisible(false)}
-                onConfirmed={() => onConfirmDeletion()}
-            />
-            <FontAwesomeIcon icon={icon} className={'text-lg text-white'}/>
-            <div className={'flex-1'}>
-                <p className={'ml-6 text-neutral-300 uppercase text-xs'}>
+            >
+                Are you sure you want to delete this task? This action cannot be undone.
+            </ConfirmationModal>
+            <FontAwesomeIcon icon={icon} css={tw`text-lg text-white`}/>
+            <div css={tw`flex-1`}>
+                <p css={tw`ml-6 text-neutral-300 uppercase text-xs`}>
                     {title}
                 </p>
                 {task.payload &&
-                <div className={'ml-6 mt-2'}>
-                    {task.action === 'backup' && <p className={'text-xs uppercase text-neutral-400 mb-1'}>Ignoring files & folders:</p>}
-                    <div className={'font-mono bg-neutral-800 rounded py-1 px-2 text-sm w-auto whitespace-pre inline-block'}>
+                <div css={tw`ml-6 mt-2`}>
+                    {task.action === 'backup' &&
+                    <p css={tw`text-xs uppercase text-neutral-400 mb-1`}>Ignoring files & folders:</p>}
+                    <div css={tw`font-mono bg-neutral-800 rounded py-1 px-2 text-sm w-auto whitespace-pre inline-block`}>
                         {task.payload}
                     </div>
                 </div>
                 }
             </div>
             {task.sequenceId > 1 &&
-            <div className={'mr-6'}>
-                <p className={'text-center mb-1'}>
+            <div css={tw`mr-6`}>
+                <p css={tw`text-center mb-1`}>
                     {task.timeOffset}s
                 </p>
-                <p className={'text-neutral-300 uppercase text-2xs'}>
+                <p css={tw`text-neutral-300 uppercase text-2xs`}>
                     Delay Run By
                 </p>
             </div>
@@ -100,7 +106,7 @@ export default ({ schedule, task }: Props) => {
                 <button
                     type={'button'}
                     aria-label={'Edit scheduled task'}
-                    className={'block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4'}
+                    css={tw`block text-sm p-2 text-neutral-500 hover:text-neutral-100 transition-colors duration-150 mr-4`}
                     onClick={() => setIsEditing(true)}
                 >
                     <FontAwesomeIcon icon={faPencilAlt}/>
@@ -110,7 +116,7 @@ export default ({ schedule, task }: Props) => {
                 <button
                     type={'button'}
                     aria-label={'Delete scheduled task'}
-                    className={'block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150'}
+                    css={tw`block text-sm p-2 text-neutral-500 hover:text-red-600 transition-colors duration-150`}
                     onClick={() => setVisible(true)}
                 >
                     <FontAwesomeIcon icon={faTrashAlt}/>