Update more of the UI to use new design elements
This commit is contained in:
parent
2824db7352
commit
61018b5e67
14 changed files with 100 additions and 109 deletions
|
@ -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>
|
||||
);
|
||||
|
|
Reference in a new issue