From 61018b5e672ce00ed088541fb111092f031f0520 Mon Sep 17 00:00:00 2001
From: DaneEveritt <dane@daneeveritt.com>
Date: Mon, 20 Jun 2022 15:28:27 -0400
Subject: [PATCH] Update more of the UI to use new design elements

---
 .../scripts/components/elements/Code.tsx      |  5 +-
 .../elements/button/style.module.css          |  2 +-
 .../server/network/AllocationRow.tsx          | 49 +++++++++----------
 .../server/network/DeleteAllocationButton.tsx | 36 ++++++++------
 .../server/network/NetworkContainer.tsx       | 12 ++---
 .../server/schedules/DeleteScheduleButton.tsx | 31 ++++++------
 .../server/schedules/EditScheduleModal.tsx    |  4 +-
 .../server/schedules/NewTaskButton.tsx        |  5 +-
 .../server/schedules/RunScheduleButton.tsx    |  8 ++-
 .../server/schedules/ScheduleContainer.tsx    |  2 +-
 .../server/schedules/ScheduleCronRow.tsx      | 34 ++++++-------
 .../schedules/ScheduleEditContainer.tsx       | 12 ++---
 .../server/schedules/TaskDetailsModal.tsx     |  2 +-
 .../server/users/AddSubuserButton.tsx         |  7 +--
 14 files changed, 100 insertions(+), 109 deletions(-)

diff --git a/resources/scripts/components/elements/Code.tsx b/resources/scripts/components/elements/Code.tsx
index 047ddecf0..30eac0d86 100644
--- a/resources/scripts/components/elements/Code.tsx
+++ b/resources/scripts/components/elements/Code.tsx
@@ -3,12 +3,13 @@ import classNames from 'classnames';
 
 interface CodeProps {
     dark?: boolean | undefined;
+    className?: string;
     children: React.ReactChild | React.ReactFragment | React.ReactPortal;
 }
 
-export default ({ dark, children }: CodeProps) => (
+export default ({ dark, className, children }: CodeProps) => (
     <code
-        className={classNames('font-mono text-sm px-2 py-1 rounded', {
+        className={classNames('font-mono text-sm px-2 py-1 inline-block rounded', className, {
             'bg-neutral-700': !dark,
             'bg-neutral-900 text-gray-100': dark,
         })}
diff --git a/resources/scripts/components/elements/button/style.module.css b/resources/scripts/components/elements/button/style.module.css
index a9ccd40f4..27f7fd61d 100644
--- a/resources/scripts/components/elements/button/style.module.css
+++ b/resources/scripts/components/elements/button/style.module.css
@@ -5,7 +5,7 @@
 
     /* Sizing Controls */
     &.small {
-        @apply px-4 py-1 font-normal text-sm focus:ring-2;
+        @apply px-4 py-0 h-8 font-normal text-sm focus:ring-2;
     }
 
     &.large {
diff --git a/resources/scripts/components/server/network/AllocationRow.tsx b/resources/scripts/components/server/network/AllocationRow.tsx
index 73e7e7ef2..0bcceaade 100644
--- a/resources/scripts/components/server/network/AllocationRow.tsx
+++ b/resources/scripts/components/server/network/AllocationRow.tsx
@@ -6,21 +6,21 @@ import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import InputSpinner from '@/components/elements/InputSpinner';
 import { Textarea } from '@/components/elements/Input';
 import Can from '@/components/elements/Can';
-import Button from '@/components/elements/Button';
+import { Button } from '@/components/elements/button/index';
 import GreyRowBox from '@/components/elements/GreyRowBox';
 import { Allocation } from '@/api/server/getServer';
 import styled from 'styled-components/macro';
 import { debounce } from 'debounce';
 import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import CopyOnClick from '@/components/elements/CopyOnClick';
 import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
 import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
 import { formatIp } from '@/helpers';
+import Code from '@/components/elements/Code';
 
-const Code = styled.code`${tw`font-mono py-1 px-2 bg-neutral-900 rounded text-sm inline-block`}`;
 const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
 
 interface Props {
@@ -29,7 +29,7 @@ interface Props {
 
 const AllocationRow = ({ allocation }: Props) => {
     const [ loading, setLoading ] = useState(false);
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const { mutate } = getServerAllocations();
 
@@ -39,69 +39,64 @@ const AllocationRow = ({ allocation }: Props) => {
 
     const setAllocationNotes = debounce((notes: string) => {
         setLoading(true);
-        clearFlashes('server:network');
+        clearFlashes();
 
         setServerAllocationNotes(uuid, allocation.id, notes)
             .then(() => onNotesChanged(allocation.id, notes))
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }))
+            .catch(error => clearAndAddHttpError(error))
             .then(() => setLoading(false));
     }, 750);
 
     const setPrimaryAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
         mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
 
         setPrimaryServerAllocation(uuid, allocation.id)
             .catch(error => {
-                clearAndAddHttpError({ key: 'server:network', error });
+                clearAndAddHttpError(error);
                 mutate();
             });
     };
 
     return (
-        <GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}>
-            <div css={tw`flex items-center w-full md:w-auto`}>
-                <div css={tw`pl-4 pr-6 text-neutral-400`}>
+        <GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
+            <div className={'flex items-center w-full md:w-auto'}>
+                <div className={'pl-4 pr-6 text-neutral-400'}>
                     <FontAwesomeIcon icon={faNetworkWired}/>
                 </div>
-                <div css={tw`mr-4 flex-1 md:w-40`}>
+                <div className={'mr-4 flex-1 md:w-40'}>
                     {allocation.alias ?
-                        <CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> :
-                        <CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>}
+                        <CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
+                        <CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
                     <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
                 </div>
-                <div css={tw`w-16 md:w-24 overflow-hidden`}>
-                    <Code>{allocation.port}</Code>
+                <div className={'w-16 md:w-24 overflow-hidden'}>
+                    <Code dark>{allocation.port}</Code>
                     <Label>Port</Label>
                 </div>
             </div>
-            <div css={tw`mt-4 w-full md:mt-0 md:flex-1 md:w-auto`}>
+            <div className={'mt-4 w-full md:mt-0 md:flex-1 md:w-auto'}>
                 <InputSpinner visible={loading}>
                     <Textarea
-                        css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`}
+                        className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
                         placeholder={'Notes'}
                         defaultValue={allocation.notes || undefined}
                         onChange={e => setAllocationNotes(e.currentTarget.value)}
                     />
                 </InputSpinner>
             </div>
-            <div css={tw`w-full md:flex-none md:w-40 md:text-center mt-4 md:mt-0 ml-4 flex items-center justify-end`}>
+            <div className={'flex justify-end space-x-4 mt-4 w-full md:mt-0 md:w-48'}>
                 {allocation.isDefault ?
-                    <span css={tw`bg-green-500 py-1 px-2 rounded text-green-50 text-xs`}>Primary</span>
+                    <Button size={Button.Sizes.Small} className={'!text-gray-50 !bg-blue-600'} disabled>Primary</Button>
                     :
                     <>
                         <Can action={'allocation.delete'}>
                             <DeleteAllocationButton allocation={allocation.id}/>
                         </Can>
                         <Can action={'allocation.update'}>
-                            <Button
-                                isSecondary
-                                size={'xsmall'}
-                                color={'primary'}
-                                onClick={setPrimaryAllocation}
-                            >
+                            <Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
                                 Make Primary
-                            </Button>
+                            </Button.Text>
                         </Can>
                     </>
                 }
diff --git a/resources/scripts/components/server/network/DeleteAllocationButton.tsx b/resources/scripts/components/server/network/DeleteAllocationButton.tsx
index b25d9da1d..a79f262dd 100644
--- a/resources/scripts/components/server/network/DeleteAllocationButton.tsx
+++ b/resources/scripts/components/server/network/DeleteAllocationButton.tsx
@@ -2,11 +2,12 @@ import React, { useState } from 'react';
 import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import tw from 'twin.macro';
 import Icon from '@/components/elements/Icon';
-import ConfirmationModal from '@/components/elements/ConfirmationModal';
 import { ServerContext } from '@/state/server';
 import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
 import getServerAllocations from '@/api/swr/getServerAllocations';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
+import { Dialog } from '@/components/elements/dialog';
+import { Button } from '@/components/elements/button/index';
 
 interface Props {
     allocation: number;
@@ -19,36 +20,41 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
     const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
     const { mutate } = getServerAllocations();
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
 
     const deleteAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
 
         mutate(data => data?.filter(a => a.id !== allocation), false);
         setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
 
         deleteServerAllocation(uuid, allocation)
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }));
+            .catch(error => {
+                clearAndAddHttpError(error);
+                mutate();
+            });
     };
 
     return (
         <>
-            <ConfirmationModal
-                visible={confirm}
-                title={'Remove this allocation?'}
-                buttonText={'Delete'}
+            <Dialog.Confirm
+                open={confirm}
+                onClose={() => setConfirm(false)}
+                title={'Remove Allocation'}
+                confirm={'Delete'}
                 onConfirmed={deleteAllocation}
-                onModalDismissed={() => setConfirm(false)}
             >
-                This allocation will be immediately removed from your server. Are you sure you want to continue?
-            </ConfirmationModal>
-            <button
-                css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`}
+                This allocation will be immediately removed from your server.
+            </Dialog.Confirm>
+            <Button.Danger
+                variant={Button.Variants.Secondary}
+                size={Button.Sizes.Small}
+                shape={Button.Shapes.IconSquare}
                 type={'button'}
                 onClick={() => setConfirm(true)}
             >
                 <Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
-            </button>
+            </Button.Danger>
         </>
     );
 };
diff --git a/resources/scripts/components/server/network/NetworkContainer.tsx b/resources/scripts/components/server/network/NetworkContainer.tsx
index ec4406da1..76c091ef7 100644
--- a/resources/scripts/components/server/network/NetworkContainer.tsx
+++ b/resources/scripts/components/server/network/NetworkContainer.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import Spinner from '@/components/elements/Spinner';
-import useFlash from '@/plugins/useFlash';
+import { useFlashKey } from '@/plugins/useFlash';
 import ServerContentBlock from '@/components/elements/ServerContentBlock';
 import { ServerContext } from '@/state/server';
 import AllocationRow from '@/components/server/network/AllocationRow';
@@ -20,7 +20,7 @@ const NetworkContainer = () => {
     const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
     const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
 
-    const { clearFlashes, clearAndAddHttpError } = useFlash();
+    const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
     const { data, error, mutate } = getServerAllocations();
 
     useEffect(() => {
@@ -28,9 +28,7 @@ const NetworkContainer = () => {
     }, []);
 
     useEffect(() => {
-        if (error) {
-            clearAndAddHttpError({ key: 'server:network', error });
-        }
+        clearAndAddHttpError(error);
     }, [ error ]);
 
     useDeepCompareEffect(() => {
@@ -40,7 +38,7 @@ const NetworkContainer = () => {
     }, [ data ]);
 
     const onCreateAllocation = () => {
-        clearFlashes('server:network');
+        clearFlashes();
 
         setLoading(true);
         createServerAllocation(uuid)
@@ -48,7 +46,7 @@ const NetworkContainer = () => {
                 setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
                 return mutate(data?.concat(allocation), false);
             })
-            .catch(error => clearAndAddHttpError({ key: 'server:network', error }))
+            .catch(error => clearAndAddHttpError(error))
             .then(() => setLoading(false));
     };
 
diff --git a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx b/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
index 463202dce..cc5175fd1 100644
--- a/resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
+++ b/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>
         </>
     );
 };
diff --git a/resources/scripts/components/server/schedules/EditScheduleModal.tsx b/resources/scripts/components/server/schedules/EditScheduleModal.tsx
index 4cfb1a682..71d722ecb 100644
--- a/resources/scripts/components/server/schedules/EditScheduleModal.tsx
+++ b/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>
diff --git a/resources/scripts/components/server/schedules/NewTaskButton.tsx b/resources/scripts/components/server/schedules/NewTaskButton.tsx
index 2ac7b276c..6c798146e 100644
--- a/resources/scripts/components/server/schedules/NewTaskButton.tsx
+++ b/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>
         </>
diff --git a/resources/scripts/components/server/schedules/RunScheduleButton.tsx b/resources/scripts/components/server/schedules/RunScheduleButton.tsx
index 96424b06e..c410ba9c7 100644
--- a/resources/scripts/components/server/schedules/RunScheduleButton.tsx
+++ b/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}
             >
diff --git a/resources/scripts/components/server/schedules/ScheduleContainer.tsx b/resources/scripts/components/server/schedules/ScheduleContainer.tsx
index c1609674a..98bc06dc3 100644
--- a/resources/scripts/components/server/schedules/ScheduleContainer.tsx
+++ b/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 () => {
diff --git a/resources/scripts/components/server/schedules/ScheduleCronRow.tsx b/resources/scripts/components/server/schedules/ScheduleCronRow.tsx
index 2a733b2d4..187478f55 100644
--- a/resources/scripts/components/server/schedules/ScheduleCronRow.tsx
+++ b/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>
 );
diff --git a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx b/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
index 88c85c5a8..682be4b55 100644
--- a/resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
+++ b/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>
diff --git a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx b/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
index c83d754c0..a9c41b401 100644
--- a/resources/scripts/components/server/schedules/TaskDetailsModal.tsx
+++ b/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';
diff --git a/resources/scripts/components/server/users/AddSubuserButton.tsx b/resources/scripts/components/server/users/AddSubuserButton.tsx
index fa8b2f8e6..9d6da00b2 100644
--- a/resources/scripts/components/server/users/AddSubuserButton.tsx
+++ b/resources/scripts/components/server/users/AddSubuserButton.tsx
@@ -1,9 +1,6 @@
 import React, { useState } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faUserPlus } from '@fortawesome/free-solid-svg-icons';
 import EditSubuserModal from '@/components/server/users/EditSubuserModal';
-import Button from '@/components/elements/Button';
-import tw from 'twin.macro';
+import { Button } from '@/components/elements/button/index';
 
 export default () => {
     const [ visible, setVisible ] = useState(false);
@@ -12,7 +9,7 @@ export default () => {
         <>
             <EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
             <Button onClick={() => setVisible(true)}>
-                <FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User
+                New User
             </Button>
         </>
     );