Fix post scheduling styles

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/components/schedule_form.js

@@ -6,12 +6,12 @@ import React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { setSchedule, removeSchedule } from 'soapbox/actions/compose';
 import IconButton from 'soapbox/components/icon_button';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
 
-import { setSchedule, removeSchedule } from '../../../actions/compose';
-
 const messages = defineMessages({
   schedule: { id: 'schedule.post_time', defaultMessage: 'Post Date/Time' },
   remove: { id: 'schedule.remove', defaultMessage: 'Remove schedule' },
@@ -99,11 +99,11 @@ class ScheduleForm extends React.Component {
     const { intl, scheduledAt } = this.props;
 
     return (
-      <div className={classNames('datepicker', { 'datepicker--error': !this.isFiveMinutesFromNow(scheduledAt) })}>
+      <Stack>
-        <div className='datepicker__hint'>
+        <Text style='muted'>
           <FormattedMessage id='datepicker.hint' defaultMessage='Scheduled to post at…' />
-        </div>
+        </Text>
-        <div className='datepicker__input'>
+        <HStack className='mb-2' space={2} alignItems='center'>
           <BundleContainer fetchComponent={DatePicker}>
             {Component => (<Component
               selected={scheduledAt}
@@ -116,13 +116,20 @@ class ScheduleForm extends React.Component {
               filterDate={this.isCurrentOrFutureDate}
               filterTime={this.isFiveMinutesFromNow}
               ref={this.setRef}
+              className={classNames({
+                'has-error': !this.isFiveMinutesFromNow(scheduledAt),
+              })}
             />)}
           </BundleContainer>
-          <div className='datepicker__cancel'>
+          <IconButton
-            <IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
+            iconClassName='w-4 h-4'
-          </div>
+            className='bg-transparent text-gray-400 hover:text-gray-600'
-        </div>
+            src={require('@tabler/icons/icons/x.svg')}
-      </div>
+            onClick={this.handleRemove}
+            title={intl.formatMessage(messages.remove)}
+          />
+        </HStack>
+      </Stack>
     );
   }
 

app/styles/components/datepicker.scss

@@ -2,6 +2,14 @@
   @apply p-4 font-sans text-xs text-gray-900 border border-solid border-gray-200 rounded-lg;
 }
 
+.react-datepicker__input-container > input {
+  @apply dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500;
+
+  &.has-error {
+    @apply text-red-600 border-red-600;
+  }
+}
+
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
   @apply border-b-white;