Tailwind migration: fixed UI

src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`(1) Default render 1`] = `
     Set Beneficiaries
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -46,7 +46,7 @@ exports[`(2) Default render with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -76,7 +76,7 @@ exports[`(3) DialogBody 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"
@@ -106,7 +106,7 @@ exports[`(4) DialogBody with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex justify-center items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 "
   >
     <svg
       viewBox="0 0 24 24"

src/common/components/chart-stats/__snapshots__/index.spec.tsx.snap

@@ -5,34 +5,34 @@ exports[`(1) Default render 1`] = `
   className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
 >
   <table
-    className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+    className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
   >
     <thead>
       <tr
         className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
       >
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Last Price
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           24h volume
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Bid
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Ask
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           Spread
         </th>
@@ -90,42 +90,42 @@ exports[`(2) Render with loading 1`] = `
   className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
 >
   <table
-    className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+    className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
   >
     <thead>
       <tr
         className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
       >
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"
           />
         </th>
         <th
-          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+          className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
         >
           <div
             className="skeleton skeleton-loading mr-5"

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-c8231097-5f22-42ab-863c-724def2d870a"
+      id="editor-tool-emoji-picker-fec72906-7b57-4b29-bfaa-dc1edc171f08"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-7955455d-222f-4212-b4a6-a73756b00589"
+      id="editor-tool-emoji-picker-883ace21-bed9-4ce1-ba59-54d3d34e906f"
       role="none"
       title="Emoji"
     >

src/common/components/community-roles/__snapshots__/index.spec.tsx.snap

@@ -11,14 +11,14 @@ exports[`(1) Default render 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -28,7 +28,7 @@ exports[`(1) Default render 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -38,7 +38,7 @@ exports[`(1) Default render 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>
@@ -146,14 +146,14 @@ exports[`(2) Should not show add user button 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -163,7 +163,7 @@ exports[`(2) Should not show add user button 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -173,7 +173,7 @@ exports[`(2) Should not show add user button 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>
@@ -281,14 +281,14 @@ exports[`(3) Should show add user button 1`] = `
     className="border dark:border-gray-700 overflow-hidden rounded-xl w-full"
   >
     <table
-      className="table-auto border-collapse text-xs sm:text-sm md:text-md w-full"
+      className="table-auto border-collapse text-xs sm:text-sm md:text-base w-full"
     >
       <thead>
         <tr
           className="[&:last-child>td]:border-b-0 [&:nth-child(even)]:bg-light-200 dark:[&:nth-child(even)]:bg-dark-300"
         >
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "200px",
@@ -298,7 +298,7 @@ exports[`(3) Should show add user button 1`] = `
             Account
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 "
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 "
             style={
               Object {
                 "width": "74px",
@@ -308,7 +308,7 @@ exports[`(3) Should show add user button 1`] = `
             Role
           </th>
           <th
-            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-sm text-gray-700 dark:text-white border-r last:border-r-0 p-2 text-xs sm:text-sm md:text-md p-1 sm:p-2 border p-3"
+            className="border-b dark:border-gray-700 text-left font-[500] bg-gray-100 dark:bg-dark-200 text-gray-700 dark:text-white border-r last:border-r-0 text-xs sm:text-sm md:text-base p-1 sm:p-2 border p-3"
           >
             Title
           </th>

src/common/components/edit-history/index.scss

@@ -39,10 +39,12 @@
         .diff-select {
           width: 55%;
           flex-shrink: 0;
+
           label {
             font-size: 0.9rem;
           }
         }
+
         select {
           font-size: 0.9rem;
         }
@@ -56,6 +58,10 @@
           @apply bg-light-300;
         }
 
+        @include themify(night) {
+          @apply bg-gray-800;
+        }
+
         .diff-select {
           padding-left: 40px;
           margin: 20px 0;
@@ -68,6 +74,7 @@
           grid-template-rows: 24px 24px;
           cursor: pointer;
           padding: 10px 0;
+          border: 0;
 
           &.selected {
             .item-title {
@@ -79,7 +86,7 @@
             }
 
             @include themify(night) {
-              @apply bg-blue-dusky-2;
+              @apply bg-blue-dusky;
             }
           }
 

src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap

@@ -353,7 +353,7 @@ exports[`(3) Active user. Trending filter 1`] = `
         >
           <li>
             <a
-              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 active"
+              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 bg-blue-dark-sky text-white hover:text-white"
               href="/@foo/feed"
               id="feed"
               onClick={[Function]}
@@ -768,7 +768,7 @@ exports[`(4) Active user. Friends 1`] = `
         >
           <li>
             <a
-              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 active"
+              className="rounded-2xl flex items-center text-blue-dark-sky hover:text-blue-dark-sky-hover font-[500] px-2.5 bg-blue-dark-sky text-white hover:text-white"
               href="/@foo/feed"
               id="feed"
               onClick={[Function]}

src/common/components/entry-index-menu/index.tsx

@@ -470,12 +470,12 @@ export class EntryIndexMenu extends Component<Props, States> {
                           filter === "feed" &&
                           (introduction === IntroductionType.NONE ||
                             introduction === IntroductionType.FRIENDS)
-                            ? "active"
+                            ? "bg-blue-dark-sky text-white hover:text-white"
                             : ""
                         }   ${
                           introduction !== IntroductionType.NONE &&
                           introduction === IntroductionType.FRIENDS
-                            ? "active"
+                            ? "bg-blue-dark-sky text-white hover:text-white"
                             : ""
                         }`
                       )}

src/common/components/entry-list-item/index.tsx

@@ -24,7 +24,6 @@ import { ProfilePopover } from "../profile-popover";
 import { match } from "react-router-dom";
 import { getPost } from "../../api/bridge";
 import "./_index.scss";
-import useMountedState from "react-use/lib/useMountedState";
 import { useMappedStore } from "../../store/use-mapped-store";
 import useMount from "react-use/lib/useMount";
 import { useUnmount } from "react-use";
@@ -68,8 +67,6 @@ export function EntryListItem({
 
   const { global, activeUser, addAccount, updateEntry } = useMappedStore();
 
-  const isMounted = useMountedState();
-
   useMount(() => {
     document.getElementsByTagName("html")[0].style.position = "relative";
   });
@@ -206,12 +203,11 @@ export function EntryListItem({
           </span>
         </div>
         <div className="item-header-features">
-          {(community && !!entry.stats?.is_pinned) ||
-            (entry.permlink === pinned && (
-              <Tooltip content={_t("entry-list-item.pinned")}>
-                <span className="pinned">{pinSvg}</span>
-              </Tooltip>
-            ))}
+          {((community && !!entry.stats?.is_pinned) || entry.permlink === pinned) && (
+            <Tooltip content={_t("entry-list-item.pinned")}>
+              <span className="pinned">{pinSvg}</span>
+            </Tooltip>
+          )}
           {reBlogged && (
             <span className="reblogged">
               {repeatSvg} {_t("entry-list-item.reblogged", { n: reBlogged })}

src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap

@@ -17,7 +17,7 @@ Array [
       type="button"
     >
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <svg
           className="slider-svg-up"
@@ -158,7 +158,7 @@ Array [
       type="button"
     >
       <div
-        className="flex justify-center items-center w-5 h-5 undefined"
+        className="flex justify-center items-center w-5 h-5 "
       >
         <svg
           className="slider-svg-down"

src/common/components/faq-category/__snapshots__/index.spec.tsx.snap

@@ -42,7 +42,7 @@ exports[`(1) Default render 1`] = `
             type="button"
           >
             <div
-              className="flex justify-center items-center w-5 h-5 undefined"
+              className="flex justify-center items-center w-5 h-5 "
             >
               <svg
                 className="slider-svg-down"