Update more of the UI to use new design elements

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

@@ -4,9 +4,9 @@ import { ServerContext } from '@/state/server';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
-import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import { Button } from '@/components/elements/button/index';
+import { Dialog } from '@/components/elements/dialog';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 
 interface Props {
     scheduleId: number;
@@ -38,20 +38,23 @@ export default ({ scheduleId, onDeleted }: Props) => {
 
     return (
         <>
-            <ConfirmationModal
-                visible={visible}
-                title={'Delete schedule?'}
-                buttonText={'Yes, delete schedule'}
+            <Dialog.Confirm
+                open={visible}
+                onClose={() => setVisible(false)}
+                title={'Delete Schedule'}
+                confirm={'Delete'}
                 onConfirmed={onDelete}
-                showSpinnerOverlay={isLoading}
-                onModalDismissed={() => setVisible(false)}
             >
-                Are you sure you want to delete this schedule? All tasks will be removed and any running processes
-                will be terminated.
-            </ConfirmationModal>
-            <Button css={tw`flex-1 sm:flex-none mr-4 border-transparent`} color={'red'} isSecondary onClick={() => setVisible(true)}>
+                <SpinnerOverlay visible={isLoading} />
+                All tasks will be removed and any running processes will be terminated.
+            </Dialog.Confirm>
+            <Button.Danger
+                variant={Button.Variants.Secondary}
+                className={'flex-1 sm:flex-none mr-4 border-transparent'}
+                onClick={() => setVisible(true)}
+            >
                 Delete
-            </Button>
+            </Button.Danger>
         </>
     );
 };

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

@@ -9,7 +9,7 @@ import { httpErrorToHuman } from '@/api/http';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import ModalContext from '@/context/ModalContext';
 import asModal from '@/hoc/asModal';
 import Switch from '@/components/elements/Switch';
@@ -135,7 +135,7 @@ const EditScheduleModal = ({ schedule }: Props) => {
                         />
                     </div>
                     <div css={tw`mt-6 text-right`}>
-                        <Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
+                        <Button className={'w-full sm:w-auto'} type={'submit'} disabled={isSubmitting}>
                             {schedule ? 'Save changes' : 'Create schedule'}
                         </Button>
                     </div>

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

@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
-import Button from '@/components/elements/Button';
-import tw from 'twin.macro';
+import { Button } from '@/components/elements/button/index';
 
 interface Props {
     schedule: Schedule;
@@ -14,7 +13,7 @@ export default ({ schedule }: Props) => {
     return (
         <>
             <TaskDetailsModal schedule={schedule} visible={visible} onModalDismissed={() => setVisible(false)}/>
-            <Button onClick={() => setVisible(true)} css={tw`flex-1`}>
+            <Button onClick={() => setVisible(true)} className={'flex-1'}>
                 New Task
             </Button>
         </>

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import triggerScheduleExecution from '@/api/server/schedules/triggerScheduleExecution';
 import { ServerContext } from '@/state/server';
 import useFlash from '@/plugins/useFlash';
@@ -33,9 +32,8 @@ const RunScheduleButton = ({ schedule }: { schedule: Schedule }) => {
         <>
             <SpinnerOverlay visible={loading} size={'large'}/>
             <Button
-                isSecondary
-                color={'grey'}
-                css={tw`flex-1 sm:flex-none border-transparent`}
+                variant={Button.Variants.Secondary}
+                className={'flex-1 sm:flex-none'}
                 disabled={schedule.isProcessing}
                 onClick={onTriggerExecute}
             >

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

@@ -11,7 +11,7 @@ import Can from '@/components/elements/Can';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import GreyRowBox from '@/components/elements/GreyRowBox';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 
 export default () => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import tw from 'twin.macro';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
+import classNames from 'classnames';
 
 interface Props {
     cron: Schedule['cron'];
@@ -8,26 +8,26 @@ interface Props {
 }
 
 const ScheduleCronRow = ({ cron, className }: Props) => (
-    <div css={tw`flex`} className={className}>
-        <div css={tw`w-1/5 sm:w-auto text-center`}>
-            <p css={tw`font-medium`}>{cron.minute}</p>
-            <p css={tw`text-2xs text-neutral-500 uppercase`}>Minute</p>
+    <div className={classNames('flex', className)}>
+        <div className={'w-1/5 sm:w-auto text-center'}>
+            <p className={'font-medium'}>{cron.minute}</p>
+            <p className={'text-2xs text-neutral-500 uppercase'}>Minute</p>
         </div>
-        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
-            <p css={tw`font-medium`}>{cron.hour}</p>
-            <p css={tw`text-2xs text-neutral-500 uppercase`}>Hour</p>
+        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+            <p className={'font-medium'}>{cron.hour}</p>
+            <p className={'text-2xs text-neutral-500 uppercase'}>Hour</p>
         </div>
-        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
-            <p css={tw`font-medium`}>{cron.dayOfMonth}</p>
-            <p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Month)</p>
+        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+            <p className={'font-medium'}>{cron.dayOfMonth}</p>
+            <p className={'text-2xs text-neutral-500 uppercase'}>Day (Month)</p>
         </div>
-        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
-            <p css={tw`font-medium`}>{cron.month}</p>
-            <p css={tw`text-2xs text-neutral-500 uppercase`}>Month</p>
+        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+            <p className={'font-medium'}>{cron.month}</p>
+            <p className={'text-2xs text-neutral-500 uppercase'}>Month</p>
         </div>
-        <div css={tw`w-1/5 sm:w-auto text-center ml-4`}>
-            <p css={tw`font-medium`}>{cron.dayOfWeek}</p>
-            <p css={tw`text-2xs text-neutral-500 uppercase`}>Day (Week)</p>
+        <div className={'w-1/5 sm:w-auto text-center ml-4'}>
+            <p className={'font-medium'}>{cron.dayOfWeek}</p>
+            <p className={'text-2xs text-neutral-500 uppercase'}>Day (Week)</p>
         </div>
     </div>
 );

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

@@ -11,7 +11,7 @@ import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import PageContentBlock from '@/components/elements/PageContentBlock';
 import tw from 'twin.macro';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import ScheduleTaskRow from '@/components/server/schedules/ScheduleTaskRow';
 import isEqual from 'react-fast-compare';
 import { format } from 'date-fns';
@@ -117,15 +117,9 @@ export default () => {
                             </div>
                             <div css={tw`flex sm:block mt-3 sm:mt-0`}>
                                 <Can action={'schedule.update'}>
-                                    <Button
-                                        isSecondary
-                                        color={'grey'}
-                                        size={'small'}
-                                        css={tw`flex-1 mr-4 border-transparent`}
-                                        onClick={toggleEditModal}
-                                    >
+                                    <Button.Text className={'flex-1 mr-4'} onClick={toggleEditModal}>
                                         Edit
-                                    </Button>
+                                    </Button.Text>
                                     <NewTaskButton schedule={schedule}/>
                                 </Can>
                             </div>

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

@@ -12,7 +12,7 @@ import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
 import tw from 'twin.macro';
 import Label from '@/components/elements/Label';
 import { Textarea } from '@/components/elements/Input';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import Select from '@/components/elements/Select';
 import ModalContext from '@/context/ModalContext';
 import asModal from '@/hoc/asModal';