fix: improve TimePicker footer layout and button styling (#24831)

web/app/components/base/date-and-time-picker/time-picker/footer.tsx

@@ -10,26 +10,25 @@ const Footer: FC<TimePickerFooterProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='flex items-center justify-end border-t-[0.5px] border-divider-regular p-2'>
-      <div className='flex items-center gap-x-1'>
-        {/* Now */}
-        <button
-          type='button'
-          className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
-          onClick={handleSelectCurrentTime}
-        >
-          <span className='px-[3px]'>{t('time.operation.now')}</span>
-        </button>
-        {/* Confirm Button */}
-        <Button
-          variant='primary'
-          size='small'
-          className='w-16 px-1.5 py-1'
-          onClick={handleConfirm.bind(null)}
-        >
-          {t('time.operation.ok')}
-        </Button>
-      </div>
+    <div className='flex items-center justify-between border-t-[0.5px] border-divider-regular p-2'>
+      {/* Now Button */}
+      <Button
+        variant='secondary-accent'
+        size='small'
+        className='mr-1 flex-1'
+        onClick={handleSelectCurrentTime}
+      >
+        {t('time.operation.now')}
+      </Button>
+      {/* Confirm Button */}
+      <Button
+        variant='primary'
+        size='small'
+        className='ml-1 flex-1'
+        onClick={handleConfirm.bind(null)}
+      >
+        {t('time.operation.ok')}
+      </Button>
     </div>
   )
 }