Tailwind migration: fixed dark theme datepicker and schedules list items

src/common/components/comment/__snapshots__/index.spec.tsx.snap

@@ -203,7 +203,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-fec72906-7b57-4b29-bfaa-dc1edc171f08"
+      id="editor-tool-emoji-picker-35bbe1bc-68ce-4a67-8a76-3610577db198"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-883ace21-bed9-4ce1-ba59-54d3d34e906f"
+      id="editor-tool-emoji-picker-cc753785-8754-4778-b5a7-577ef5607916"
       role="none"
       title="Emoji"
     >

src/common/components/login/__snapshots__/index.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`(1) Default render 1`] = `
 Array [
   <div
-    className="dialog-header"
+    className="dialog-header flex flex-col items-center justify-center"
   >
     <img
       alt="Logo"
@@ -551,7 +551,7 @@ Array [
 exports[`(4) Show keychain option 1`] = `
 Array [
   <div
-    className="dialog-header"
+    className="dialog-header flex flex-col items-center justify-center"
   >
     <img
       alt="Logo"

src/common/components/login/_index.scss

@@ -49,7 +49,7 @@
       .user-list-body {
         overflow-y: auto;
         max-height: 300px;
-        
+
         .user-list-item {
           align-items: center;
           border-radius: 25px;
@@ -172,6 +172,7 @@
 
       .hs-logo, .kc-logo {
         height: 14px;
+        width: 14px;
         margin-right: 6px;
       }
     }
@@ -182,7 +183,8 @@
       }
     }
   }
-}          
-.google-recaptcha{
+}
+
+.google-recaptcha {
   margin: 16px 0px;
 }

src/common/components/login/index.tsx

@@ -548,7 +548,7 @@ export class Login extends BaseComponent<LoginProps, State> {
     return (
       <>
         {users.length === 0 && (
-          <div className="dialog-header">
+          <div className="dialog-header flex flex-col items-center justify-center">
             <img src={logo} alt="Logo" />
             <h2>{_t("login.title")}</h2>
           </div>

src/common/components/post-scheduler/index.tsx

@@ -50,7 +50,7 @@ export const DialogBody = (props: DialogBodyProps) => {
             <small className="error-info">{_t("post-scheduler.error-message")}</small>
           </div>
         )}
-        <div className="text-center">
+        <div className="text-center mt-4">
           <Button
             disabled={error}
             onClick={() => {

src/common/components/schedules/scheduled-list-item.tsx

@@ -52,11 +52,13 @@ export function ScheduledListItem({ post, deleteFn, moveFn }: Props) {
           <UserAvatar username={author} size="medium" />
           <div className="flex items-center text-sm">
             <div className="font-bold">{author}</div>
-            <div className="text-gray-600 pl-1">({accountReputation(reputation)})</div>
+            <div className="text-gray-600 dark:text-gray-400 pl-1">
+              ({accountReputation(reputation)})
+            </div>
           </div>
         </div>
         <Badge>{tag}</Badge>
-        <div className="text-sm text-gray-600" title={dateFormatted}>
+        <div className="text-sm text-gray-600 dark:text-gray-400" title={dateFormatted}>
           {dateRelative}
         </div>
       </div>
@@ -86,17 +88,21 @@ export function ScheduledListItem({ post, deleteFn, moveFn }: Props) {
           </div>
           <div className="text-gray-steel dark:text-white-075">{summary}</div>
         </div>
+      </div>
+      <div className="flex justify-between items-center px-3 py-2">
         {post.status === 1 && (
           <Tooltip content={dateRelative}>
-            <div className="w-[1.5rem] ml-4 text-gray-steel-light-005 dark:text-blue-metallic">
-              {timeSvg} {dateFormatted}
+            <div className="flex items-center gap-3 text-gray-steel-light-005 dark:text-blue-metallic">
+              <div className="w-[1.5rem]">{timeSvg}</div>
+              <span className="text-xs">{dateFormatted}</span>
             </div>
           </Tooltip>
         )}
         {post.status === 2 && (
           <Tooltip content={dateRelative}>
-            <div className="w-[1.5rem] ml-4 text-orange">
-              {timeSvg} {dateFormatted}
+            <div className="flex items-center gap-3 text-orange">
+              <div className="w-[1.5rem]">{timeSvg}</div>
+              <span className="text-xs">{dateFormatted}</span>
             </div>
           </Tooltip>
         )}

src/style/_base.scss

@@ -200,7 +200,7 @@ a[target="_blank"] {
 // Date picker
 @import "~react-datetime/css/react-datetime.css";
 // dark theme
-.theme-night {
+.dark {
   .rdtPicker {
     @apply bg-blue-metallic;
     border: 1px solid;
@@ -290,10 +290,10 @@ a[target="_blank"] {
 
 /* Track */
 ::-webkit-scrollbar-track {
-  box-shadow: inset 0 0 5px grey; 
+  box-shadow: inset 0 0 5px grey;
   border-radius: 10px;
 }
- 
+
 /* Handle */
 ::-webkit-scrollbar-thumb {
   @apply bg-blue-dark-sky;