Merge pull request #1501 from ecency/bugfix/tailwind-migration

Tailwind migration: fixed UI issues
ecency · Nov 7, 2023 · dfc0125 · dfc0125
2 parents 29756b1 + ea17741
commit dfc0125
Show file tree

Hide file tree

Showing 27 changed files with 123 additions and 163 deletions.
diff --git a/src/common/components/beneficiary-editor/__snapshots__/index.spec.tsx.snap b/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 items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 undefined"
   >
     <svg
       viewBox="0 0 24 24"
@@ -46,7 +46,7 @@ exports[`(2) Default render with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 undefined"
   >
     <svg
       viewBox="0 0 24 24"
@@ -76,7 +76,7 @@ exports[`(3) DialogBody 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 undefined"
   >
     <svg
       viewBox="0 0 24 24"
@@ -106,7 +106,7 @@ exports[`(4) DialogBody with author 1`] = `
     Set Beneficiaries (1)
   </div>
   <div
-    className="flex items-center w-5 h-5 undefined"
+    className="flex justify-center items-center w-5 h-5 undefined"
   >
     <svg
       viewBox="0 0 24 24"

diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/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-ef9a0d67-1460-433f-9070-d78c3bd3337e"
+      id="editor-tool-emoji-picker-c8231097-5f22-42ab-863c-724def2d870a"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-7dbda6fb-eec0-4458-a263-161efa77cbc1"
+      id="editor-tool-emoji-picker-7955455d-222f-4212-b4a6-a73756b00589"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/converts/index.tsx b/src/common/components/converts/index.tsx
@@ -77,7 +77,7 @@ export class List extends BaseComponent<Props, State> {
       <div className="conversion-content">
         <div className="list-body">
           {sliced.length === 0 && <div className="empty-list">{_t("g.empty-list")}</div>}
-          <Table>
+          <Table full={true}>
             <thead>
               <Tr>
                 <Th>{_t("conversion-requests.request-id")}</Th>

diff --git a/src/common/components/entry-list-item/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-list-item/__snapshots__/index.spec.tsx.snap
@@ -117,7 +117,7 @@ exports[`(1) Default render 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>
@@ -401,7 +401,7 @@ exports[`(2) Grid view 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>
@@ -677,7 +677,7 @@ exports[`(3) Nsfw 1`] = `
     >
       <img
         alt="Awesome Hive"
-        className="w-full sm:w-auto"
+        className="w-full"
         src="nsfw.png"
       />
     </div>
@@ -728,7 +728,7 @@ exports[`(3) Nsfw 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>
@@ -1004,7 +1004,7 @@ exports[`(4) Nsfw with active user 1`] = `
     >
       <img
         alt="Awesome Hive"
-        className="w-full sm:w-auto"
+        className="w-full"
         src="nsfw.png"
       />
     </div>
@@ -1055,7 +1055,7 @@ exports[`(4) Nsfw with active user 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>
@@ -1331,7 +1331,7 @@ exports[`(5) Nsfw but allowed 1`] = `
     >
       <img
         alt="Awesome Hive"
-        className="w-full sm:w-auto"
+        className="w-full"
         src="nsfw.png"
       />
     </div>
@@ -1382,7 +1382,7 @@ exports[`(5) Nsfw but allowed 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>
@@ -1701,7 +1701,7 @@ exports[`(6) Cross post. Bottom menu 1`] = `
           />
           <img
             alt=""
-            className="w-full sm:w-auto"
+            className="w-full"
           />
         </picture>
       </a>

diff --git a/src/common/components/entry-list-item/entry-list-item-thumbnail.tsx b/src/common/components/entry-list-item/entry-list-item-thumbnail.tsx
@@ -37,19 +37,15 @@ export function EntryListItemThumbnail({ entry, noImage, isCrossPost, entryProp,
         <div>
           {global.listStyle === "grid" ? (
             <img
-              className="w-full sm:w-auto"
+              className="w-full mx-auto"
               src={imgGrid}
               alt={isGridLoading ? "" : entry.title}
-              style={{ width: imgGrid === noImage ? "172px" : "auto" }}
+              style={{ width: imgGrid === noImage ? "172px" : "100%" }}
             />
           ) : (
             <picture>
               <source srcSet={imgRow} media="(min-width: 576px)" />
-              <img
-                className="w-full sm:w-auto"
-                srcSet={imgRow}
-                alt={isRowLoading ? "" : entry.title}
-              />
+              <img className="w-full" srcSet={imgRow} alt={isRowLoading ? "" : entry.title} />
             </picture>
           )}
         </div>

diff --git a/src/common/components/entry-list-item/index.tsx b/src/common/components/entry-list-item/index.tsx
@@ -231,7 +231,7 @@ export function EntryListItem({
         {nsfw && !showNsfw && !global.nsfw ? (
           <>
             <div className="item-image item-image-nsfw">
-              <img className="w-full sm:w-auto" src={nsfwImage} alt={entry.title} />
+              <img className="w-full" src={nsfwImage} alt={entry.title} />
             </div>
             <div className="item-summary">
               <div className="item-nsfw">
@@ -280,7 +280,7 @@ export function EntryListItem({
         {showModMuted && showMuted ? (
           <>
             <div className="item-image item-image-nsfw">
-              <img className="w-full sm:w-auto" src={nsfwImage} alt={entry.title} />
+              <img className="w-full" src={nsfwImage} alt={entry.title} />
             </div>
             <div className="item-summary">
               <div className="item-nsfw">

diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -5,12 +5,19 @@ Array [
   <div
     className="voting-controls voting-controls-up disable"
   >
-    <div
-      className="btn-vote btn-up-vote vote-btn-lg primary-btn-vote"
+    <button
+      className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid flex items-center justify-center gap-2 border-blue-dark-sky hover:border-blue-dark-sky-hover focus:border-blue-dark-sky-active text-blue-dark-sky hover:text-blue-dark-sky-hover focus:text-blue-dark-sky-active h-[2rem] text-sm font-[500] px-2 text-xs w-8 !p-0"
       onClick={[Function]}
+      size="xs"
+      style={
+        Object {
+          "outline": "none",
+        }
+      }
+      type="button"
     >
-      <span
-        className="btn-inner"
+      <div
+        className="flex justify-center items-center w-5 h-5 undefined"
       >
         <svg
           className="slider-svg-up"
@@ -21,8 +28,8 @@ Array [
             fill="currentColor"
           />
         </svg>
-      </span>
-    </div>
+      </div>
+    </button>
     <div
       className="estimated"
     >
@@ -139,12 +146,19 @@ Array [
     >
       100.0%
     </div>
-    <div
-      className="btn-vote btn-down-vote vote-btn-lg secondary-btn-vote"
+    <button
+      className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid flex items-center justify-center gap-2 border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030 h-[2rem] text-sm font-[500] px-2 text-xs w-8 !p-0"
       onClick={[Function]}
+      size="xs"
+      style={
+        Object {
+          "outline": "none",
+        }
+      }
+      type="button"
     >
-      <span
-        className="btn-inner"
+      <div
+        className="flex justify-center items-center w-5 h-5 undefined"
       >
         <svg
           className="slider-svg-down"
@@ -159,8 +173,8 @@ Array [
             fill="currentColor"
           />
         </svg>
-      </span>
-    </div>
+      </div>
+    </button>
   </div>,
   <div
     className="vote-error error-message"

diff --git a/src/common/components/entry-vote-btn/_index.scss b/src/common/components/entry-vote-btn/_index.scss
@@ -6,6 +6,7 @@
   @media (max-width: $xxsm-break) {
     margin-right: 5px;
   }
+
   .btn-vote {
     @include btn-vote;
   }
@@ -71,6 +72,7 @@
     pointer-events: none;
     opacity: 0.5;
   }
+
   .btn-vote {
     @include btn-vote;
   }
@@ -312,40 +314,6 @@
   @apply bg-transparent;
 }
 
-.primary-btn-vote {
-  @include themify(night) {
-    @apply text-blue-dark-sky;
-    @apply bg-transparent;
-  }
-
-  @include themify(day) {
-    @apply text-blue-dark-sky;
-    @apply bg-white;
-  }
-
-  .btn-inner {
-    @include themify(night) {
-      @apply text-blue-dark-sky;
-      @apply bg-transparent;
-    }
-
-    @include themify(day) {
-      @apply text-blue-dark-sky;
-      @apply bg-white;
-    }
-  }
-
-  &:hover {
-    @apply bg-blue-dark-sky;
-    @apply text-white;
-
-    .btn-inner {
-      @apply text-white;
-      @apply bg-blue-dark-sky;
-    }
-  }
-}
-
 .primary-btn-done {
   @include themify(night) {
     @apply text-white;
@@ -370,54 +338,13 @@
   }
 }
 
-.secondary-btn-vote {
-  @apply text-red-020;
-
-  @include themify(night) {
-    @apply bg-transparent;
-  }
-
-  @include themify(day) {
-    @apply bg-white;
-  }
-
-  svg {
-    @apply fill-red-020;
-    transform: none !important;
-  }
-
-  .btn-inner {
-    @apply text-red-020;
-
-    @include themify(night) {
-      @apply bg-transparent;
-    }
-    @include themify(day) {
-      @apply bg-white;
-    }
-  }
-
-  &:hover {
-    @apply bg-red-020;
-    @apply text-white;
-
-    .btn-inner {
-      @apply text-white;
-      @apply bg-red-020;
-
-      svg {
-        @apply fill-white;
-      }
-    }
-  }
-}
-
 .vote-error {
   font-size: 12px;
   @apply text-red;
   display: flex;
   justify-content: center;
   margin-top: 10px;
+
   p {
     margin: 0px;
   }
@@ -441,6 +368,7 @@
   display: flex;
   justify-content: center;
   margin-top: 8px;
+
   p {
     margin: 0px;
   }
@@ -460,6 +388,7 @@
   display: flex;
   justify-content: center;
   margin-top: 8px;
+
   p {
     margin: 0px;
   }