Edit UI

Moves cron time display under title bar.

Author: notAreYouScared

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

@@ -28,9 +28,9 @@ interface State {
 }
 
 const CronBox = ({ title, value }: { title: string; value: string }) => (
-    <div css={tw`bg-neutral-700 rounded p-4`}>
+    <div css={tw`bg-neutral-700 rounded p-3`}>
         <p css={tw`text-neutral-300 text-sm`}>{title}</p>
-        <p css={tw`text-2xl font-medium text-neutral-100`}>{value}</p>
+        <p css={tw`text-xl font-medium text-neutral-100`}>{value}</p>
     </div>
 );
 
@@ -88,13 +88,6 @@ export default () => {
                 :
                 <>
                     <ScheduleCronRow cron={schedule.cron} css={tw`sm:hidden bg-neutral-700 rounded mb-4 p-3`}/>
-                    <div css={tw`hidden sm:grid grid-cols-6 md:grid-cols-7 gap-4 mb-6`}>
-                        <CronBox title={'Minute'} value={schedule.cron.minute}/>
-                        <CronBox title={'Hour'} value={schedule.cron.hour}/>
-                        <CronBox title={'Day (Month)'} value={schedule.cron.dayOfMonth}/>
-                        <CronBox title={'Month'} value={schedule.cron.month}/>
-                        <CronBox title={'Day (Week)'} value={schedule.cron.dayOfWeek}/>
-                    </div>
                     <div css={tw`rounded shadow`}>
                         <div css={tw`sm:flex items-center bg-neutral-900 p-3 sm:p-6 border-b-4 border-neutral-600 rounded-t`}>
                             <div css={tw`flex-1`}>
@@ -143,6 +136,13 @@ export default () => {
                                 </Can>
                             </div>
                         </div>
+                        <div css={tw`hidden sm:grid grid-cols-5 md:grid-cols-5 gap-4 mb-4 mt-4`}>
+                            <CronBox title={'Minute'} value={schedule.cron.minute}/>
+                            <CronBox title={'Hour'} value={schedule.cron.hour}/>
+                            <CronBox title={'Day (Month)'} value={schedule.cron.dayOfMonth}/>
+                            <CronBox title={'Month'} value={schedule.cron.month}/>
+                            <CronBox title={'Day (Week)'} value={schedule.cron.dayOfWeek}/>
+                        </div>
                         <div css={tw`bg-neutral-700 rounded-b`}>
                             {schedule.tasks.length > 0 ?
                                 schedule.tasks.map(task => (