ecency · feruzm · Nov 26, 2023 · Nov 21, 2023 · Nov 21, 2023 · Nov 22, 2023
diff --git a/src/common/app.tsx b/src/common/app.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Route, Switch } from "react-router-dom";
 import EntryIndexContainer from "./pages/index";
 import { EntryScreen } from "./pages/entry";
@@ -28,6 +28,8 @@ import { useMappedStore } from "./store/use-mapped-store";
 import { EntriesCacheManager } from "./core";
 
 import { UserActivityRecorder } from "./components/user-activity-recorder";
+import { useGlobalLoader } from "./util/use-global-loader";
+import useMount from "react-use/lib/useMount";
 
 // Define lazy pages
 const ProfileContainer = loadable(() => import("./pages/profile-functional"));
@@ -79,8 +81,12 @@ const DecksPage = loadable(() => import("./pages/decks"));
 
 const App = (props: any) => {
   const { global } = useMappedStore();
+  const { hide } = useGlobalLoader();
+
+  useMount(() => {
+    // Drop hiding from main queue to give React time to render
+    setTimeout(() => hide(), 1);
 
-  useEffect(() => {
     let pathname = window.location.pathname;
     if (pathname !== "/faq") {
       const currentLang = ls.get("current-language");
@@ -89,7 +95,7 @@ const App = (props: any) => {
         i18n.changeLanguage(currentLang);
       }
     }
-  }, []);
+  });
 
   return (
     <EntriesCacheManager>

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-a1cc9845-d2bb-4d53-b31a-443119a1fc53"
+      id="editor-tool-emoji-picker-2b0bdaf3-1d21-4569-ab93-7223d93b6af0"
       role="none"
       title="Emoji"
     >
@@ -551,7 +551,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-e0f444b6-152e-4fe9-9756-80bfd584c550"
+      id="editor-tool-emoji-picker-399e6b28-feb3-4280-bb6a-693d6f4eddf8"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx b/src/common/components/decks/columns/deck-items/deck-search-list-item.tsx
@@ -177,7 +177,7 @@ export const SearchListItem = ({
   return (
     <div ref={ref} className="flex flex-col border-b border-[--border-color] p-3">
       <div className="deck-body flex flex-col w-full">
-        <div className="text-dark flex flex-col">
+        <div className="text-dark-default flex flex-col">
           <div className="flex items-center grow hot-item-link">
             {author && (
               <img

diff --git a/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-index-menu/__snapshots__/index.spec.tsx.snap
@@ -405,7 +405,7 @@ exports[`(3) Active user. Trending filter 1`] = `
                   className="col-span-12 md:col-span-5 p-0 md:px-3"
                 >
                   <div
-                    className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+                    className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
                   >
                     Friends
                   </div>
@@ -588,7 +588,7 @@ exports[`(3) Active user. Trending filter 1`] = `
                     className="col-span-12 md:col-span-5 p-0 md:px-3"
                   >
                     <div
-                      className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+                      className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
                     >
                       Friends
                     </div>

diff --git a/src/common/components/entry-votes/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-votes/__snapshots__/index.spec.tsx.snap
@@ -63,7 +63,7 @@ exports[`(2) No votes 1`] = `
 exports[`(3) Render of detail with votes 1`] = `
 Array [
   <div
-    className="text-sm p-3 rounded-[1rem] bg-warning-040 border border-warning-030 text-warning-default"
+    className="text-sm p-3 rounded-[1rem] bg-warning-040 border border-warning-030 text-orange dark:bg-opacity-[20%] dark:border-opacity-[20%] dark:text-warning-default mb-4"
   >
     Content has pending votes. Please, wait a minute and refresh this dialog to see new votes.
   </div>,

diff --git a/src/common/components/entry-votes/index.tsx b/src/common/components/entry-votes/index.tsx
@@ -159,7 +159,9 @@ export class EntryVotesDetail extends BaseComponent<DetailProps, DetailState> {
     return (
       <>
         {totalVotes !== votes.length && (
-          <Alert appearance="warning">{_t("entry-votes.pending-message")}</Alert>
+          <Alert className="mb-4" appearance="warning">
+            {_t("entry-votes.pending-message")}
+          </Alert>
         )}
         <div className="voters-list">
           <div className="list-body">

diff --git a/src/common/components/feedback/_index.scss b/src/common/components/feedback/_index.scss
@@ -18,6 +18,7 @@
   right: 20px;
   bottom: 60px;
   width: 260px;
+
   &.visible ~ .announcement-container {
     bottom: 10rem !important;
   }
@@ -34,6 +35,7 @@
     align-items: center;
     margin-bottom: 6px;
     animation: feedback-anim 0.5s;
+    overflow: hidden;
 
     @include themify(day) {
       @apply bg-light-300;
@@ -48,24 +50,28 @@
     svg {
       height: 20px;
     }
+
     .feedback-body {
       padding: 30px 6px 0px 6px;
     }
 
     .feedback-content {
       display: flex;
+
       .feedback-img {
         @media (max-width: $md-break) {
           margin-right: 0.8rem;
         }
         margin-right: 2.3rem;
         margin-left: 0.5rem;
         border-radius: 50%;
+
         &.success-img {
           @apply bg-green;
         }
       }
     }
+
     .feedback-close-btn {
       position: absolute;
       right: 8px;
@@ -109,12 +115,15 @@
       .filler {
         height: 100%;
         transition: width 0.125s linear;
+
         &.success {
           @apply bg-green;
         }
+
         &.error {
           @apply bg-red-020;
         }
+
         &.info {
           @apply bg-blue-dark-sky;
         }

diff --git a/src/common/components/introduction/__snapshots__/index.spec.tsx.snap b/src/common/components/introduction/__snapshots__/index.spec.tsx.snap
@@ -45,7 +45,7 @@ exports[`Introduction component (1) renders successfully with minimal props 1`]
         className="col-span-12 md:col-span-5 p-0 md:px-3"
       >
         <div
-          className="text-4xl mb-2 md:mb-4 text-dark font-bold"
+          className="text-4xl mb-2 md:mb-4 text-dark-default font-bold"
         >
           Test Title
         </div>

diff --git a/src/common/components/introduction/index.tsx b/src/common/components/introduction/index.tsx
@@ -50,7 +50,7 @@ export const Introduction = ({
               <img width="100%" src={media} className="media-intro" id="media" />
             </div>
             <div className="col-span-12 md:col-span-5 p-0 md:px-3">
-              <div className="text-4xl mb-2 md:mb-4 text-dark font-bold">{title}</div>
+              <div className="text-4xl mb-2 md:mb-4 text-dark-default font-bold">{title}</div>
               <p className="text-gray-600 paragraph mt-2 md:mt-0" id="description">
                 {description}
               </p>

diff --git a/src/common/components/navbar/navbar-default.tsx b/src/common/components/navbar/navbar-default.tsx
@@ -89,7 +89,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
             </Link>
           )}
           <div onClick={() => !showMobileSearch && setShowMobileSearch(true)}>
-            <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
+            <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
               {showMobileSearch ? (
                 <>
                   <Search containerClassName="w-full" history={history} />
@@ -112,7 +112,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           {!activeUser && (
             <>
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => {
                   toggleUIProp("login");
                   setSmVisible(false);
@@ -122,7 +122,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
                 <div className="ml-3 text-15">{_t("g.login")}</div>
               </div>
               <Link to="/signup" onClick={() => !showMobileSearch && setSmVisible(false)}>
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
                   <div className="navbar-icon">{keySvg}</div>
                   <div className="ml-3 text-15">{_t("g.signup")}</div>
                 </div>
@@ -133,7 +133,7 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           <div>
             {activeUser && (
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => setShowProfileMenu(!showProfileMenu)}
               >
                 <div className="navbar-icon">{userOutlineSvg}</div>
@@ -227,26 +227,26 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
           {activeUser && (
             <>
               <div
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
                 onClick={() => toggleUIProp("notifications")}
               >
-                <div className="navbar-icon text-dark">{notificationSvg}</div>
+                <div className="navbar-icon text-dark-default">{notificationSvg}</div>
                 <div className="ml-3 text-15">{_t("user-nav.notifications")}</div>
               </div>
               <div
                 onClick={() => setShowPurchaseDialog(true)}
-                className="p-2 pl-3 w-full mb-2 flex items-center text-dark"
+                className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
               >
-                <div className="navbar-icon text-dark">{rocketSvg}</div>
+                <div className="navbar-icon text-dark-default">{rocketSvg}</div>
                 <div className="ml-3 text-15">{_t("user-nav.boost")}</div>
               </div>
               <Link
                 className="text-dark-default dark:text-white"
                 to={`/@${activeUser?.username}/wallet`}
                 onClick={() => setSmVisible(false)}
               >
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
-                  <div className="icon-stroke text-dark">{walletSvg}</div>
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
+                  <div className="icon-stroke text-dark-default">{walletSvg}</div>
                   <div className="ml-3 text-15 flex">
                     {_t("user-nav.wallet")}
                     <div className="dot align-self-start ml-1" />
@@ -258,8 +258,10 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
                 to="/submit"
                 onClick={() => setSmVisible(false)}
               >
-                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark">
-                  <div className="icon-stroke text-dark [&>svg]:w-[20px]">{pencilOutlineSvg}</div>
+                <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default">
+                  <div className="icon-stroke text-dark-default [&>svg]:w-[20px]">
+                    {pencilOutlineSvg}
+                  </div>
                   <div className="ml-3 text-15 flex">
                     {_t("user-nav.submit")}
                     <div className="dot align-self-start ml-1" />
@@ -269,12 +271,15 @@ export function NavbarDefault({ setSmVisible, history }: Props) {
             </>
           )}
 
-          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark relative">
+          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default relative">
             <div className="navbar-icon">{globeSvg}</div>
             <SwitchLang label={_t("community-settings.lang")} history={history} />
           </div>
 
-          <div className="p-2 pl-3 w-full mb-2 flex items-center text-dark" onClick={changeTheme}>
+          <div
+            className="p-2 pl-3 w-full mb-2 flex items-center text-dark-default"
+            onClick={changeTheme}
+          >
             <div className="navbar-icon">{global.theme == Theme.day ? moonSvg : sunSvg}</div>
             <div className="ml-3 text-15">
               {_t("user-nav.switch-to")}{" "}

diff --git a/src/common/constants/dmca.json b/src/common/constants/dmca.json
@@ -117,6 +117,7 @@
   "@ellamason612/.*",
   "@ericahonolu/.*",
   "@faumaulloin/.*",
+  "@feizhousexcult/celestine-aka-fei-xuan-zhou-and-the-police",
   "@ficih425/.*",
   "@foul1uxqcse6/.*",
   "@frankkohn/.*",

diff --git a/src/common/features/ui/alert/styles.ts b/src/common/features/ui/alert/styles.ts
@@ -3,8 +3,12 @@ import { Appearance } from "./types";
 export const ALERT_STYLES: Record<Appearance, string> = {
   primary:
     "bg-blue-dark-sky-040 border border-blue-dark-sky-030 text-blue-dark-sky dark:bg-dark-400 dark:border-dark-300 dark:text-white",
-  secondary: "bg-gray-100 border border-gray-200 text-gray-600",
-  success: "bg-green-040 border border-green-030 text-green",
-  warning: "bg-warning-040 border border-warning-030 text-warning-default",
-  danger: "bg-red-040 border border-red-030 text-red"
+  secondary:
+    "bg-gray-100 border border-gray-200 text-gray-600 dark:bg-opacity-[20%] dark:border-opacity-[20%]",
+  success:
+    "bg-green-040 border border-green-030 text-green dark:bg-opacity-[20%] dark:border-opacity-[20%]",
+  warning:
+    "bg-warning-040 border border-warning-030 text-orange dark:bg-opacity-[20%] dark:border-opacity-[20%] dark:text-warning-default",
+  danger:
+    "bg-red-040 border border-red-030 text-red dark:bg-opacity-[20%] dark:border-opacity-[20%]"
 };
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
@@ -360,14 +360,14 @@ export const SignUp = (props: PageProps) => {
 
             {stage === Stage.REGISTER_TYPE ? (
               <div className="form-content">
-                <div className="card border bg-white rounded mb-3 mt-5">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border border-[--border-color] bg-white rounded mb-3 mt-5">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>{_t("sign-up.free-account")}</b>
                   </div>
                   <div className="p-3">
                     <div>{_t("sign-up.free-account-desc")}</div>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Button className="w-full" onClick={regularRegister}>
                       {_t("sign-up.register-free")}
                     </Button>
@@ -378,8 +378,8 @@ export const SignUp = (props: PageProps) => {
                     </div>
                   )}
                 </div>
-                <div className="card border bg-white rounded mb-3">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border bg-white border-[--border-color] rounded mb-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>{_t("sign-up.buy-account")}</b>
                   </div>
                   <div className="p-3">
@@ -390,15 +390,15 @@ export const SignUp = (props: PageProps) => {
                       <li>{_t("sign-up.buy-account-li-3")}</li>
                     </ul>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Button className="w-full" onClick={() => setStage(Stage.BUY_ACCOUNT)}>
                       {_t("sign-up.buy-account")} – $2.99
                     </Button>
                   </div>
                 </div>
 
-                <div className="card border bg-white rounded mb-3">
-                  <div className="bg-gray-100 border-b p-3">
+                <div className="card border bg-white border-[--border-color] rounded mb-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-b border-[--border-color] p-3">
                     <b>
                       {props.activeUser
                         ? _t("onboard.title-active-user")
@@ -416,7 +416,7 @@ export const SignUp = (props: PageProps) => {
                       {!props.activeUser && <li>{_t("onboard.asking-description")}</li>}
                     </ul>
                   </div>
-                  <div className="bg-gray-100 border-t py-2 px-3">
+                  <div className="bg-gray-100 dark:bg-gray-800 border-t border-[--border-color] py-2 px-3">
                     <Link to={`/onboard-friend/asking/${urlHash}`}>
                       <Button className="w-full">
                         {props.activeUser ? _t("onboard.creating") : _t("onboard.asking")}

diff --git a/src/common/util/use-global-loader.ts b/src/common/util/use-global-loader.ts
@@ -0,0 +1,10 @@
+export function useGlobalLoader() {
+  return {
+    show: () =>
+      document
+        .querySelector(".ecency-global-loader")
+        ?.classList.remove("ecency-global-loader-hidden"),
+    hide: () =>
+      document.querySelector(".ecency-global-loader")?.classList.add("ecency-global-loader-hidden")
+  };
+}