Merge pull request #1523 from ecency/bugfix/styles

Bugfix/styles
ecency · Dec 7, 2023 · ee3b097 · ee3b097
2 parents 3c289f2 + e772d15
commit ee3b097
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 31 deletions.
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
@@ -178,7 +178,7 @@ export const SearchListItem = ({
     <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-default flex flex-col">
-          <div className="flex items-center grow hot-item-link">
+          <div className="flex items-center grow hot-item-link dark:text-gray-400">
             {author && (
               <img
                 src={`https://images.ecency.com/${
@@ -225,7 +225,7 @@ export const SearchListItem = ({
           <div onClick={() => onEntryView()} className="pointer">
             {title && (
               <div className="flex">
-                <div className="hot-item-link font-bold mt-3">{title}</div>
+                <div className="hot-item-link dark:text-white font-bold mt-3">{title}</div>
               </div>
             )}
 
@@ -237,7 +237,9 @@ export const SearchListItem = ({
                 }}
               />
             )}
-            <div className="mt-3 hot-item-post-count deck-item-body text-gray-600">{body}</div>
+            <div className="mt-3 hot-item-post-count deck-item-body text-gray-600 dark:text-gray-400">
+              {body}
+            </div>
           </div>
         </div>
         <div className="item-controls mt-3 flex items-center">
@@ -251,7 +253,7 @@ export const SearchListItem = ({
           />
           <EntryPayout entry={entry} />
           <EntryVotes history={history!!} entry={entry} icon={voteSvg} />
-          <Link to={`${url}#discussion`} className="text-gray-600">
+          <Link to={`${url}#discussion`} className="text-gray-600 dark:text-gray-400">
             <div className="flex items-center comments">
               <div style={{ paddingRight: 4 }}>{commentSvg}</div>
               <div>{entry.children}</div>

diff --git a/src/common/components/decks/deck-grid.tsx b/src/common/components/decks/deck-grid.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useMemo, useState } from "react";
 import { DragDropContext, Draggable, Droppable, DropResult } from "react-beautiful-dnd";
 import { DeckGridContext } from "./deck-manager";
 import { DeckAddColumn, DeckUserColumn } from "./columns";
@@ -26,6 +26,7 @@ import { DeckFaqColumn } from "./columns/deck-faq-column";
 import { DeckWalletBalanceColumn } from "./columns/deck-wallet-balance-column";
 import { DeckWhatsNewColumn } from "./columns/deck-whats-new-column";
 import { Button } from "@ui/button";
+import { arrowLeftSvg, arrowRightSvg } from "../../img/svg";
 
 interface Props {
   history: History;
@@ -35,9 +36,19 @@ export const DeckGrid = ({ history }: Props) => {
   const deckContext = useContext(DeckGridContext);
   const previousLayout = usePrevious(deckContext.layout);
 
+  const [scrollValue, setScrollValue] = useState(0);
   const [addColumnButtonVisible, setAddColumnButtonVisible] = useState(true);
   const [addColumnButtonKey, setAddColumnButtonKey] = useState(uuid.v4());
 
+  const isScrollStarted = useMemo(() => scrollValue > 0, [scrollValue]);
+  const isScrollEnded = useMemo(() => {
+    const el = document.querySelector("#draggable-container");
+    if (el) {
+      return Math.round(scrollValue) === Math.round(el.scrollWidth - el.clientWidth);
+    }
+    return false;
+  }, [scrollValue]);
+
   useOldDeckMigration();
 
   const onDragEnd = (result: DropResult) => {
@@ -66,8 +77,37 @@ export const DeckGrid = ({ history }: Props) => {
     }
   }, [deckContext.layout]);
 
+  const scrollTo = (direction: "left" | "right") => {
+    const el = document.querySelector("#draggable-container");
+    if (!el) {
+      return;
+    }
+
+    if (direction === "left") {
+      el.scrollTo(el.scrollLeft - 300, 0);
+    } else {
+      el.scrollTo(el.scrollLeft + 300, 0);
+    }
+  };
+
   return (
     <div className="deck-grid">
+      {isScrollStarted && (
+        <div
+          className="arrow-right hidden md:flex h-full items-center px-3 opacity-50 hover:opacity-100 cursor-pointer duration-300 bg-gradient-to-l from-transparent to-dark-200 fixed left-[72px] w-12 z-30"
+          onClick={() => scrollTo("left")}
+        >
+          {arrowLeftSvg}
+        </div>
+      )}
+      {!isScrollEnded && (
+        <div
+          className="arrow-right hidden md:flex h-full flex items-center px-3 opacity-50 hover:opacity-100 cursor-pointer duration-300 bg-gradient-to-r from-transparent to-dark-200 fixed right-0 w-12 z-30"
+          onClick={() => scrollTo("right")}
+        >
+          {arrowRightSvg}
+        </div>
+      )}
       <DragDropContext onDragEnd={onDragEnd} onDragStart={onDragStart}>
         <Droppable droppableId="droppable" direction="horizontal">
           {(provided, snapshot) => (
@@ -76,6 +116,7 @@ export const DeckGrid = ({ history }: Props) => {
               ref={provided.innerRef}
               {...provided.droppableProps}
               id="draggable-container"
+              onScroll={(e) => setScrollValue(e.currentTarget.scrollLeft)}
             >
               {deckContext.layout.columns.map(({ type, id, settings, key }, index) => (
                 <Draggable key={id} draggableId={id} index={index}>

diff --git a/src/common/components/introduction/_index.scss b/src/common/components/introduction/_index.scss
@@ -12,7 +12,7 @@
   height: 55vh;
   width: 55vw;
   @apply bg-white;
-  @include themify(night){
+  @include themify(night) {
     @apply bg-dark-default;
   }
   left: 50%;
@@ -60,23 +60,6 @@
   top: -70px;
   margin-left: 5%;
   transform: rotateZ(-15deg);
-
-  @media screen and (max-width: $sm-break) {
-    border-left: 0px solid transparent;
-    border-right: 30px solid transparent;
-    border-bottom: 40px solid;
-    @apply border-white;
-    @include themify(night) {
-      @apply border-b-dark-default;
-    }
-    content: "";
-    position: absolute;
-    top: -32px;
-    margin-left: 0%;
-    -webkit-transform: rotateZ(-15deg);
-    transform: rotateZ(11deg);
-
-  }
 }
 
 .paragraph {

diff --git a/src/common/components/search-communities/index.tsx b/src/common/components/search-communities/index.tsx
@@ -82,8 +82,8 @@ export class SearchCommunities extends BaseComponent<Props, State> {
     const { loading, results } = this.state;
 
     return (
-      <div className="border bg-white rounded search-communities">
-        <div className="bg-gray-100 border-b p-3">
+      <div className="border border-[--border-color] bg-white rounded search-communities">
+        <div className="bg-gray-100 dark:bg-dark-default border-b border-[--border-color] p-3">
           <strong>{_t("search-communities.title")}</strong>
         </div>
         <div className="p-3">

diff --git a/src/common/components/search-people/index.tsx b/src/common/components/search-people/index.tsx
@@ -75,8 +75,8 @@ export class SearchPeople extends BaseComponent<Props, State> {
     const { loading, results } = this.state;
 
     return (
-      <div className="border bg-white rounded  search-people">
-        <div className="bg-gray-100 border-b p-3">
+      <div className="border border-[--border-color] bg-white rounded  search-people">
+        <div className="bg-gray-100 dark:bg-dark-default border-b border-[--border-color] p-3">
           <strong>{_t("search-people.title")}</strong>
         </div>
         <div className="p-3">

diff --git a/src/common/components/search-topics/index.tsx b/src/common/components/search-topics/index.tsx
@@ -72,8 +72,8 @@ export class SearchTopics extends BaseComponent<Props, State> {
     const { results, loading } = this.state;
 
     return (
-      <div className="border bg-white rounded  search-topics">
-        <div className="bg-gray-100 border-b p-3">
+      <div className="border border-[--border-color] bg-white rounded  search-topics">
+        <div className="bg-gray-100 dark:bg-dark-default border-b border-[--border-color] p-3">
           <strong>{_t("search-topics.title")}</strong>
         </div>
         <div className="p-3">

diff --git a/src/common/features/ui/accordion/accordion-toggle.tsx b/src/common/features/ui/accordion/accordion-toggle.tsx
@@ -5,6 +5,7 @@ import { useFilteredProps } from "../../../util/props-filter";
 interface Props extends PropsWithChildren<any> {
   as?: any;
   eventKey: string;
+  onClick?: () => void;
 }
 
 export function AccordionToggle(props: Props) {
@@ -15,11 +16,13 @@ export function AccordionToggle(props: Props) {
     props.as ?? "div",
     {
       ...nativeProps,
-      onClick: () =>
+      onClick: () => {
         setShow({
           ...show,
           [props.eventKey]: !show[props.eventKey] ?? false
-        })
+        });
+        props.onClick?.();
+      }
     },
     props.children
   );