Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update more of the UI to use new design elements

Browse source
This commit is contained in:
DaneEveritt 2022-06-20 15:28:27 -04:00
parent 2824db7352
commit 61018b5e67
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
14 changed files with 100 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
resources/scripts/components/elements/Code.tsx
View file

@ -3,12 +3,13 @@ import classNames from 'classnames';
interface CodeProps { interface CodeProps {
dark?: boolean | undefined; dark?: boolean | undefined;
className?: string;
children: React.ReactChild | React.ReactFragment | React.ReactPortal; children: React.ReactChild | React.ReactFragment | React.ReactPortal;
} }
export default ({ dark, children }: CodeProps) => ( export default ({ dark, className, children }: CodeProps) => (
<code <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-700': !dark,
'bg-neutral-900 text-gray-100': dark, 'bg-neutral-900 text-gray-100': dark,
})} })}

2
resources/scripts/components/elements/button/style.module.css
View file

@ -5,7 +5,7 @@
/* Sizing Controls */ /* Sizing Controls */
&.small { &.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 { &.large {

49
resources/scripts/components/server/network/AllocationRow.tsx
View file

@ -6,21 +6,21 @@ import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
import InputSpinner from '@/components/elements/InputSpinner'; import InputSpinner from '@/components/elements/InputSpinner';
import { Textarea } from '@/components/elements/Input'; import { Textarea } from '@/components/elements/Input';
import Can from '@/components/elements/Can'; 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 GreyRowBox from '@/components/elements/GreyRowBox';
import { Allocation } from '@/api/server/getServer'; import { Allocation } from '@/api/server/getServer';
import styled from 'styled-components/macro'; import styled from 'styled-components/macro';
import { debounce } from 'debounce'; import { debounce } from 'debounce';
import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes'; import setServerAllocationNotes from '@/api/server/network/setServerAllocationNotes';
import useFlash from '@/plugins/useFlash'; import { useFlashKey } from '@/plugins/useFlash';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import CopyOnClick from '@/components/elements/CopyOnClick'; import CopyOnClick from '@/components/elements/CopyOnClick';
import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton'; import DeleteAllocationButton from '@/components/server/network/DeleteAllocationButton';
import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation'; import setPrimaryServerAllocation from '@/api/server/network/setPrimaryServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations'; import getServerAllocations from '@/api/swr/getServerAllocations';
import { formatIp } from '@/helpers'; 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`}`; const Label = styled.label`${tw`uppercase text-xs mt-1 text-neutral-400 block px-1 select-none transition-colors duration-150`}`;
interface Props { interface Props {
@ -29,7 +29,7 @@ interface Props {
const AllocationRow = ({ allocation }: Props) => { const AllocationRow = ({ allocation }: Props) => {
const [ loading, setLoading ] = useState(false); 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 uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const { mutate } = getServerAllocations(); const { mutate } = getServerAllocations();
@ -39,69 +39,64 @@ const AllocationRow = ({ allocation }: Props) => {
const setAllocationNotes = debounce((notes: string) => { const setAllocationNotes = debounce((notes: string) => {
setLoading(true); setLoading(true);
clearFlashes('server:network'); clearFlashes();
setServerAllocationNotes(uuid, allocation.id, notes) setServerAllocationNotes(uuid, allocation.id, notes)
.then(() => onNotesChanged(allocation.id, notes)) .then(() => onNotesChanged(allocation.id, notes))
.catch(error => clearAndAddHttpError({ key: 'server:network', error })) .catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false)); .then(() => setLoading(false));
}, 750); }, 750);
const setPrimaryAllocation = () => { const setPrimaryAllocation = () => {
clearFlashes('server:network'); clearFlashes();
mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false); mutate(data => data?.map(a => ({ ...a, isDefault: a.id === allocation.id })), false);
setPrimaryServerAllocation(uuid, allocation.id) setPrimaryServerAllocation(uuid, allocation.id)
.catch(error => { .catch(error => {
clearAndAddHttpError({ key: 'server:network', error }); clearAndAddHttpError(error);
mutate(); mutate();
}); });
}; };
return ( return (
<GreyRowBox $hoverable={false} css={tw`flex-wrap md:flex-nowrap mt-2`}> <GreyRowBox $hoverable={false} className={'flex-wrap md:flex-nowrap mt-2'}>
<div css={tw`flex items-center w-full md:w-auto`}> <div className={'flex items-center w-full md:w-auto'}>
<div css={tw`pl-4 pr-6 text-neutral-400`}> <div className={'pl-4 pr-6 text-neutral-400'}>
<FontAwesomeIcon icon={faNetworkWired}/> <FontAwesomeIcon icon={faNetworkWired}/>
</div> </div>
<div css={tw`mr-4 flex-1 md:w-40`}> <div className={'mr-4 flex-1 md:w-40'}>
{allocation.alias ? {allocation.alias ?
<CopyOnClick text={allocation.alias}><Code css={tw`w-40 truncate`}>{allocation.alias}</Code></CopyOnClick> : <CopyOnClick text={allocation.alias}><Code dark className={'w-40 truncate'}>{allocation.alias}</Code></CopyOnClick> :
<CopyOnClick text={formatIp(allocation.ip)}><Code>{formatIp(allocation.ip)}</Code></CopyOnClick>} <CopyOnClick text={formatIp(allocation.ip)}><Code dark>{formatIp(allocation.ip)}</Code></CopyOnClick>}
<Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label> <Label>{allocation.alias ? 'Hostname' : 'IP Address'}</Label>
</div> </div>
<div css={tw`w-16 md:w-24 overflow-hidden`}> <div className={'w-16 md:w-24 overflow-hidden'}>
<Code>{allocation.port}</Code> <Code dark>{allocation.port}</Code>
<Label>Port</Label> <Label>Port</Label>
</div> </div>
</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}> <InputSpinner visible={loading}>
<Textarea <Textarea
css={tw`bg-neutral-800 hover:border-neutral-600 border-transparent`} className={'bg-neutral-800 hover:border-neutral-600 border-transparent'}
placeholder={'Notes'} placeholder={'Notes'}
defaultValue={allocation.notes || undefined} defaultValue={allocation.notes || undefined}
onChange={e => setAllocationNotes(e.currentTarget.value)} onChange={e => setAllocationNotes(e.currentTarget.value)}
/> />
</InputSpinner> </InputSpinner>
</div> </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 ? {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'}> <Can action={'allocation.delete'}>
<DeleteAllocationButton allocation={allocation.id}/> <DeleteAllocationButton allocation={allocation.id}/>
</Can> </Can>
<Can action={'allocation.update'}> <Can action={'allocation.update'}>
<Button <Button.Text size={Button.Sizes.Small} onClick={setPrimaryAllocation}>
isSecondary
size={'xsmall'}
color={'primary'}
onClick={setPrimaryAllocation}
>
Make Primary Make Primary
</Button> </Button.Text>
</Can> </Can>
</> </>
} }

36
resources/scripts/components/server/network/DeleteAllocationButton.tsx
View file

@ -2,11 +2,12 @@ import React, { useState } from 'react';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons'; import { faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import tw from 'twin.macro'; import tw from 'twin.macro';
import Icon from '@/components/elements/Icon'; import Icon from '@/components/elements/Icon';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import deleteServerAllocation from '@/api/server/network/deleteServerAllocation'; import deleteServerAllocation from '@/api/server/network/deleteServerAllocation';
import getServerAllocations from '@/api/swr/getServerAllocations'; 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 { interface Props {
allocation: number; allocation: number;
@ -19,36 +20,41 @@ const DeleteAllocationButton = ({ allocation }: Props) => {
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { mutate } = getServerAllocations(); const { mutate } = getServerAllocations();
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const deleteAllocation = () => { const deleteAllocation = () => {
clearFlashes('server:network'); clearFlashes();
mutate(data => data?.filter(a => a.id !== allocation), false); mutate(data => data?.filter(a => a.id !== allocation), false);
setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) })); setServerFromState(s => ({ ...s, allocations: s.allocations.filter(a => a.id !== allocation) }));
deleteServerAllocation(uuid, allocation) deleteServerAllocation(uuid, allocation)
.catch(error => clearAndAddHttpError({ key: 'server:network', error })); .catch(error => {
clearAndAddHttpError(error);
mutate();
});
}; };
return ( return (
<> <>
<ConfirmationModal <Dialog.Confirm
visible={confirm} open={confirm}
title={'Remove this allocation?'} onClose={() => setConfirm(false)}
buttonText={'Delete'} title={'Remove Allocation'}
confirm={'Delete'}
onConfirmed={deleteAllocation} onConfirmed={deleteAllocation}
onModalDismissed={() => setConfirm(false)}
> >
This allocation will be immediately removed from your server. Are you sure you want to continue? This allocation will be immediately removed from your server.
</ConfirmationModal> </Dialog.Confirm>
<button <Button.Danger
css={tw`text-neutral-400 px-2 py-1 mr-2 transition-colors duration-150 hover:text-red-400`} variant={Button.Variants.Secondary}
size={Button.Sizes.Small}
shape={Button.Shapes.IconSquare}
type={'button'} type={'button'}
onClick={() => setConfirm(true)} onClick={() => setConfirm(true)}
> >
<Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/> <Icon icon={faTrashAlt} css={tw`w-3 h-auto`}/>
</button> </Button.Danger>
</> </>
); );
}; };

12
resources/scripts/components/server/network/NetworkContainer.tsx
View file

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Spinner from '@/components/elements/Spinner'; import Spinner from '@/components/elements/Spinner';
import useFlash from '@/plugins/useFlash'; import { useFlashKey } from '@/plugins/useFlash';
import ServerContentBlock from '@/components/elements/ServerContentBlock'; import ServerContentBlock from '@/components/elements/ServerContentBlock';
import { ServerContext } from '@/state/server'; import { ServerContext } from '@/state/server';
import AllocationRow from '@/components/server/network/AllocationRow'; import AllocationRow from '@/components/server/network/AllocationRow';
@ -20,7 +20,7 @@ const NetworkContainer = () => {
const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual); const allocations = ServerContext.useStoreState(state => state.server.data!.allocations, isEqual);
const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState); const setServerFromState = ServerContext.useStoreActions(actions => actions.server.setServerFromState);
const { clearFlashes, clearAndAddHttpError } = useFlash(); const { clearFlashes, clearAndAddHttpError } = useFlashKey('server:network');
const { data, error, mutate } = getServerAllocations(); const { data, error, mutate } = getServerAllocations();
useEffect(() => { useEffect(() => {
@ -28,9 +28,7 @@ const NetworkContainer = () => {
}, []); }, []);
useEffect(() => { useEffect(() => {
if (error) { clearAndAddHttpError(error);
clearAndAddHttpError({ key: 'server:network', error });
}
}, [ error ]); }, [ error ]);
useDeepCompareEffect(() => { useDeepCompareEffect(() => {
@ -40,7 +38,7 @@ const NetworkContainer = () => {
}, [ data ]); }, [ data ]);
const onCreateAllocation = () => { const onCreateAllocation = () => {
clearFlashes('server:network'); clearFlashes();
setLoading(true); setLoading(true);
createServerAllocation(uuid) createServerAllocation(uuid)
@ -48,7 +46,7 @@ const NetworkContainer = () => {
setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) })); setServerFromState(s => ({ ...s, allocations: s.allocations.concat(allocation) }));
return mutate(data?.concat(allocation), false); return mutate(data?.concat(allocation), false);
}) })
.catch(error => clearAndAddHttpError({ key: 'server:network', error })) .catch(error => clearAndAddHttpError(error))
.then(() => setLoading(false)); .then(() => setLoading(false));
}; };

31
resources/scripts/components/server/schedules/DeleteScheduleButton.tsx
View file

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

4
resources/scripts/components/server/schedules/EditScheduleModal.tsx
View file

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

5
resources/scripts/components/server/schedules/NewTaskButton.tsx
View file

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

8
resources/scripts/components/server/schedules/RunScheduleButton.tsx
View file

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

2
resources/scripts/components/server/schedules/ScheduleContainer.tsx
View file

@ -11,7 +11,7 @@ import Can from '@/components/elements/Can';
import useFlash from '@/plugins/useFlash'; import useFlash from '@/plugins/useFlash';
import tw from 'twin.macro'; import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox'; 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'; import ServerContentBlock from '@/components/elements/ServerContentBlock';
export default () => { export default () => {

34
resources/scripts/components/server/schedules/ScheduleCronRow.tsx
View file

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

12
resources/scripts/components/server/schedules/ScheduleEditContainer.tsx
View file

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

2
resources/scripts/components/server/schedules/TaskDetailsModal.tsx
View file

@ -12,7 +12,7 @@ import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
import tw from 'twin.macro'; import tw from 'twin.macro';
import Label from '@/components/elements/Label'; import Label from '@/components/elements/Label';
import { Textarea } from '@/components/elements/Input'; 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 Select from '@/components/elements/Select';
import ModalContext from '@/context/ModalContext'; import ModalContext from '@/context/ModalContext';
import asModal from '@/hoc/asModal'; import asModal from '@/hoc/asModal';

7
resources/scripts/components/server/users/AddSubuserButton.tsx
View file

@ -1,9 +1,6 @@
import React, { useState } from 'react'; 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 EditSubuserModal from '@/components/server/users/EditSubuserModal';
import Button from '@/components/elements/Button'; import { Button } from '@/components/elements/button/index';
import tw from 'twin.macro';
export default () => { export default () => {
const [ visible, setVisible ] = useState(false); const [ visible, setVisible ] = useState(false);
@ -12,7 +9,7 @@ export default () => {
<> <>
<EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/> <EditSubuserModal visible={visible} onModalDismissed={() => setVisible(false)}/>
<Button onClick={() => setVisible(true)}> <Button onClick={() => setVisible(true)}>
<FontAwesomeIcon icon={faUserPlus} css={tw`mr-1`}/> New User New User
</Button> </Button>
</> </>
); );