Merge pull request #1493 from ecency/bugfix/ui-fixes-after-tw-migration

Bugfix/UI fixes after tw migration
ecency · Oct 27, 2023 · 540dfcf · 540dfcf
2 parents 5805388 + 502e51b
commit 540dfcf
Show file tree

Hide file tree

Showing 16 changed files with 61 additions and 200 deletions.
diff --git a/src/common/components/discover-contributors/_index.scss b/src/common/components/discover-contributors/_index.scss
@@ -85,7 +85,7 @@
       }
 
       @include themify(night) {
-        @apply bg-dark-600-010-light;
+        @apply bg-dark-600;
       }
 
       .user-avatar {

diff --git a/src/common/components/editor-toolbar/index.tsx b/src/common/components/editor-toolbar/index.tsx
@@ -40,6 +40,7 @@ import {
 import { VideoUpload } from "../video-upload-threespeak";
 import VideoGallery from "../video-gallery";
 import { ThreeSpeakVideo } from "../../api/threespeak";
+import { v4 } from "uuid";
 
 interface Props {
   global: Global;
@@ -64,6 +65,7 @@ interface State {
   showVideoUpload: boolean;
   showVideoGallery: boolean;
   isMounted: boolean;
+  toolbarId: string;
 }
 
 export const detectEvent = (eventType: string) => {
@@ -86,7 +88,8 @@ export class EditorToolbar extends Component<Props> {
     shGif: false,
     showVideoUpload: false,
     showVideoGallery: false,
-    isMounted: false
+    isMounted: false,
+    toolbarId: v4()
   };
 
   holder = React.createRef<HTMLDivElement>();
@@ -578,17 +581,27 @@ export class EditorToolbar extends Component<Props> {
               </div>
             </Tooltip>
           )}
-          <Tooltip content={_t("editor-toolbar.emoji")}>
-            <div className="editor-tool" id="editor-tool-emoji-picker" role="none">
-              {emoticonHappyOutlineSvg}
-              {showEmoji && this.state.isMounted && (
-                <EmojiPicker
-                  anchor={document.querySelector("#editor-tool-emoji-picker")!! as HTMLElement}
-                  onSelect={(e) => this.insertText(e, "")}
-                />
-              )}
-            </div>
-          </Tooltip>
+          {this.state.isMounted && (
+            <Tooltip content={_t("editor-toolbar.emoji")}>
+              <div
+                className="editor-tool"
+                id={"editor-tool-emoji-picker-" + this.state.toolbarId}
+                role="none"
+              >
+                {emoticonHappyOutlineSvg}
+                {showEmoji && this.state.isMounted && (
+                  <EmojiPicker
+                    anchor={
+                      document.querySelector(
+                        "#editor-tool-emoji-picker-" + this.state.toolbarId
+                      )!! as HTMLElement
+                    }
+                    onSelect={(e) => this.insertText(e, "")}
+                  />
+                )}
+              </div>
+            </Tooltip>
+          )}
           <Tooltip content={_t("Gif")}>
             <div className="editor-tool" role="none">
               <div className="editor-tool-gif-icon" onClick={this.toggleGif}>

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,14 +37,19 @@ export function EntryListItemThumbnail({ entry, noImage, isCrossPost, entryProp,
         <div>
           {global.listStyle === "grid" ? (
             <img
+              className="w-full sm:w-auto"
               src={imgGrid}
               alt={isGridLoading ? "" : entry.title}
               style={{ width: imgGrid === noImage ? "172px" : "auto" }}
             />
           ) : (
             <picture>
               <source srcSet={imgRow} media="(min-width: 576px)" />
-              <img srcSet={imgRow} alt={isRowLoading ? "" : entry.title} />
+              <img
+                className="w-full sm:w-auto"
+                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
@@ -235,7 +235,7 @@ export function EntryListItem({
         {nsfw && !showNsfw && !global.nsfw ? (
           <>
             <div className="item-image item-image-nsfw">
-              <img src={nsfwImage} alt={entry.title} />
+              <img className="w-full sm:w-auto" src={nsfwImage} alt={entry.title} />
             </div>
             <div className="item-summary">
               <div className="item-nsfw">
@@ -284,7 +284,7 @@ export function EntryListItem({
         {showModMuted && showMuted ? (
           <>
             <div className="item-image item-image-nsfw">
-              <img src={nsfwImage} alt={entry.title} />
+              <img className="w-full sm:w-auto" src={nsfwImage} alt={entry.title} />
             </div>
             <div className="item-summary">
               <div className="item-nsfw">

diff --git a/src/common/components/feedback-message/index.tsx b/src/common/components/feedback-message/index.tsx
@@ -19,6 +19,7 @@ export interface FeedbackObject {
   type: FeedbackType;
   message: string;
 }
+
 export interface ErrorFeedbackObject extends FeedbackObject {
   errorType: ErrorTypes;
 }
@@ -96,7 +97,7 @@ export default function FeedbackMessage(props: Props) {
                           {closeSvg}
                         </div>
                         <div className="feedback-content">
-                          <div className="feedback-img success-img">{checkSvg}</div>
+                          <div className="feedback-img flex p-1 success-img">{checkSvg}</div>
                           {x.message}
                         </div>
                       </div>
@@ -114,7 +115,7 @@ export default function FeedbackMessage(props: Props) {
                           {closeSvg}
                         </div>
                         <div className="error-content">
-                          <div className="error-img">{alertCircleSvg}</div>
+                          <div className="error-img flex p-1">{alertCircleSvg}</div>
 
                           <div className=" flex flex-col items-start">
                             {x.message}
@@ -168,7 +169,7 @@ export default function FeedbackMessage(props: Props) {
                           {closeSvg}
                         </div>
                         <div className="feedback-content">
-                          <div className="feedback-img">{informationSvg}</div>
+                          <div className="feedback-img flex p-1">{informationSvg}</div>
                           {x.message}
                         </div>
                       </div>

diff --git a/src/common/components/feedback/index.tsx b/src/common/components/feedback/index.tsx
@@ -1,9 +1,8 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import random from "../../util/rnd";
 import FeedbackMessage from "../feedback-message";
 import { ErrorTypes } from "../../enums";
 import { ActiveUser } from "../../store/active-user/types";
-import { _t } from "../../i18n";
 import "./_index.scss";
 
 export const error = (message: string, errorType = ErrorTypes.COMMON) => {

diff --git a/src/common/components/floating-faq/index.scss b/src/common/components/floating-faq/index.scss
@@ -1,22 +1,5 @@
 @import "src/style/vars_mixins";
 
-.help-btn {
-  position: fixed;
-  z-index: 99;
-  right: 2rem;
-  bottom: 1rem;
-  border-radius: 20px 2px 20px 20px !important;
-  height: 40px;
-}
-
-@media (max-width: 791px) {
-  .help-btn {
-    width: 40px;
-    border-radius: 50% !important;
-    padding: 0 !important;
-  }
-}
-
 .floating-container {
   position: fixed;
   z-index: 3;
@@ -84,6 +67,7 @@
       }
     }
   }
+
   .faq-content-list {
     height: 59vh;
     margin-top: -2.4rem;
@@ -129,6 +113,7 @@
       @apply text-light-600;
     }
   }
+
   .section {
     padding: 12px;
     cursor: pointer;

diff --git a/src/common/components/floating-faq/index.tsx b/src/common/components/floating-faq/index.tsx
@@ -147,11 +147,11 @@ const FloatingFAQ = () => {
           >
             {display && !isSubmitPage && (
               <Button
-                className="help-btn"
+                noPadding={true}
+                className="fixed bottom-4 right-4 w-[2rem] h-[2rem]"
                 onClick={handleShow}
                 icon={helpIconSvg}
                 iconPlacement="left"
-                size="sm"
               >
                 {innerWidth >= 792 ? _t("floating-faq.help") : ""}
               </Button>
@@ -162,11 +162,9 @@ const FloatingFAQ = () => {
                 <div className="faq-welcome">
                   <h3 className="faq-welcome-message">{_t("floating-faq.welcome")}</h3>
                   <Button
-                    appearance="link"
-                    className="close-btn"
-                    onClick={() => {
-                      setShow(false);
-                    }}
+                    className="absolute top-7 right-4"
+                    appearance="gray-link"
+                    onClick={() => setShow(false)}
                     icon={closeSvg}
                   />
                 </div>

diff --git a/src/common/components/market-swap-form/index.tsx b/src/common/components/market-swap-form/index.tsx
@@ -163,7 +163,7 @@ export const MarketSwapForm = ({
   return (
     <div
       className={classNameObject({
-        "market-swap-form": true,
+        "market-swap-form relative": true,
         [padding]: true
       })}
     >

diff --git a/src/common/components/market-swap-form/market-swap-form-header.tsx b/src/common/components/market-swap-form/market-swap-form-header.tsx
@@ -1,8 +1,9 @@
 import { MarketSwapFormStep } from "./form-step";
 import { _t } from "../../i18n";
 import React, { useEffect, useState } from "react";
-import { arrowLeftSvg, syncSvg } from "../../img/svg";
+import { arrowLeftSvg } from "../../img/svg";
 import { Button } from "@ui/button";
+import { Spinner } from "@ui/spinner";
 
 export interface Props {
   step: MarketSwapFormStep;
@@ -34,7 +35,7 @@ export const MarketSwapFormHeader = ({ step, loading, onBack, className }: Props
         <></>
       )}
       <div className="text-blue-dark-sky font-bold">{title}</div>
-      {loading ? <i className="loading-market-svg ml-2 text-blue-dark-sky">{syncSvg}</i> : <></>}
+      {loading ? <Spinner className="w-4 h-4 ml-3" /> : <></>}
     </div>
   );
 };
diff --git a/src/common/components/market-swap-form/swap-mode.tsx b/src/common/components/market-swap-form/swap-mode.tsx
@@ -56,7 +56,7 @@ export const SwapMode = ({ inline = false }: Props) => {
     <div className={"swap-form-container " + (inline ? "inline" : "")}>{form}</div>
   ) : (
     <div className="grid grid-cols-12 pb-5">
-      <div className="col-span-12 md:col-start-2 md:col-span-10 lg:col-start-3 lg:col-span-8 xl:col-start-4 xl:col-span-6">
+      <div className="col-span-12 md:col-start-2 md:col-span-10 lg:col-start-3 lg:col-span-8 xl:col-start-4 xl:col-span-6 relative">
         {form}
       </div>
     </div>

diff --git a/src/common/components/scroll-to-top/_index.scss b/src/common/components/scroll-to-top/_index.scss
@@ -24,11 +24,6 @@
     }
 
     & ~ .floating-faq-button {
-      & > .help-btn {
-        bottom: 1.3rem;
-        right: 5rem;
-      }
-
       & > .floating-container {
         bottom: 4.4rem;
         right: 5rem;

diff --git a/src/common/components/tooltip/index.tsx b/src/common/components/tooltip/index.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from "react";
 import { createPortal } from "react-dom";
 import { usePopper } from "react-popper";
-import useMountedState from "react-use/lib/useMountedState";
 
 interface Props {
   content: string | JSX.Element;
@@ -25,8 +24,6 @@ export function StyledTooltip({ children, content }: StyledProps) {
 
   const popper = usePopper(ref, popperElement);
 
-  const isMounted = useMountedState();
-
   return (
     <div
       ref={setRef}
@@ -39,6 +36,10 @@ export function StyledTooltip({ children, content }: StyledProps) {
         setShow(false);
         popper.update?.();
       }}
+      onClick={() => {
+        setShow(!show);
+        popper.update?.();
+      }}
     >
       {children}
       {createPortal(

diff --git a/src/common/features/ui/button/props.ts b/src/common/features/ui/button/props.ts
@@ -4,6 +4,7 @@ export type ButtonAppearance =
   | "primary"
   | "secondary"
   | "link"
+  | "gray-link"
   | "danger"
   | "success"
   | "warning"

diff --git a/src/common/features/ui/button/styles.ts b/src/common/features/ui/button/styles.ts
@@ -8,7 +8,8 @@ export const BUTTON_STYLES: Record<ButtonAppearance, string> = {
   danger: "bg-red hover:bg-red-020 focus:bg-red-030 text-white",
   success: "",
   warning: "",
-  info: "bg-info-default hover:info-hover focus:bg-info-focus text-white disabled:opacity-50 disabled:hover:bg-info-default disabled:focus:bg-info-default"
+  info: "bg-info-default hover:info-hover focus:bg-info-focus text-white disabled:opacity-50 disabled:hover:bg-info-default disabled:focus:bg-info-default",
+  "gray-link": "text-gray-500 hover:text-blue-dark-sky focus:text-blue-dark-sky-active"
 };
 
 export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
@@ -21,7 +22,8 @@ export const BUTTON_OUTLINE_STYLES: Record<ButtonAppearance, string> = {
     "border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030",
   success: "",
   warning: "",
-  info: "border-info-default hover:border-info-hover focus:border-info-focus text-info-default hover:text-info-hover focus:text-info-focus"
+  info: "border-info-default hover:border-info-hover focus:border-info-focus text-info-default hover:text-info-hover focus:text-info-focus",
+  "gray-link": ""
 };
 
 export const BUTTON_SIZES: Record<ButtonSize, string> = {