patch PR 1 of week ending 1/21/25

packages/react-app-revamp/components/Share/index.tsx

@@ -38,14 +38,14 @@ const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, ch
   };
 
   return (
-    <Menu as="div" className="relative inline-block text-left">
+    <Menu as="div" className="hidden relative md:inline-block text-left">
       <MediaQuery maxWidth={768}>
         <MenuButton className="w-8 h-8 flex items-center rounded-[10px] border border-neutral-11">
           <img src="/forward.svg" alt="share" className="m-auto" width={15} height={13} />
         </MenuButton>
       </MediaQuery>
       <MediaQuery minWidth={769}>
-        <MenuButton className="p-4 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
+        <MenuButton className="p-2 h-8 flex items-center gap-2 text-neutral-11 text-[16px] font-bold rounded-[10px] border border-neutral-11">
           <p className="text-neutral-11 text-[16px] font-bold">share</p>
           <img src="/forward.svg" alt="share" className="ml-1" width={16} height={16} />
         </MenuButton>

packages/react-app-revamp/components/UI/ButtonV3/index.tsx

@@ -17,6 +17,7 @@ export enum ButtonSize {
   LARGE = "large",
   EXTRA_LARGE = "extraLarge",
   EXTRA_LARGE_LONG = "extraLargeLong",
+  EXTRA_LARGE_LONG_MOBILE = "extraLargeLongMobile",
   FULL = "full",
 }
 
@@ -40,6 +41,7 @@ const sizeClasses = {
   [ButtonSize.LARGE]: "w-40 h-[40px]",
   [ButtonSize.EXTRA_LARGE]: "w-[216px] h-[40px]",
   [ButtonSize.EXTRA_LARGE_LONG]: "w-[240px] h-[40px]",
+  [ButtonSize.EXTRA_LARGE_LONG_MOBILE]: "w-[312px] h-[40px]",
   [ButtonSize.FULL]: "w-full h-[40px]",
 };
 

packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx

@@ -49,7 +49,7 @@ const ContestTab = () => {
       return (
         <ButtonV3
           colorClass="bg-gradient-vote rounded-[40px]"
-          size={isMobile ? ButtonSize.FULL : ButtonSize.EXTRA_LARGE_LONG}
+          size={isMobile ? ButtonSize.EXTRA_LARGE_LONG_MOBILE : ButtonSize.EXTRA_LARGE_LONG}
           onClick={openConnectModal}
         >
           connect wallet to enter contest
@@ -64,7 +64,7 @@ const ContestTab = () => {
         <ButtonV3
           colorClass="bg-gradient-purple rounded-[40px]"
           textColorClass="text-[16px] md:text-[20px] font-bold text-true-black"
-          size={isMobile ? ButtonSize.FULL : ButtonSize.EXTRA_LARGE_LONG}
+          size={isMobile ? ButtonSize.EXTRA_LARGE_LONG_MOBILE : ButtonSize.EXTRA_LARGE_LONG}
           onClick={() => {
             setIsSubmitProposalSuccess(false);
             setIsSubmitProposalModalOpen(!isSubmitProposalModalOpen);
@@ -93,7 +93,11 @@ const ContestTab = () => {
           <ContestPrompt prompt={contestPrompt} type="page" />
         </div>
       </div>
-      {contestStatus === ContestStatus.SubmissionOpen && <div className="mt-8">{renderSubmitButton()}</div>}
+      {contestStatus === ContestStatus.SubmissionOpen && (
+        <div className="fixed z-50 bottom-20 left-0 right-0 flex w-full justify-center md:justify-normal md:static md:mt-8">
+          {renderSubmitButton()}
+        </div>
+      )}
       <ContestStickyCards />
 
       <div className={`mt-4 ${isInPwaMode ? "mb-12" : "mb-0"}`}>
@@ -106,7 +110,7 @@ const ContestTab = () => {
           )}
 
           {!isContestLoading && !isListProposalsLoading && isContestSuccess && isListProposalsSuccess && (
-            <div className={`animate-reveal ${contestStatus !== ContestStatus.SubmissionOpen ? "mt-4" : "mt-0"}`}>
+            <div className="animate-reveal">
               <ListProposals />
             </div>
           )}

packages/react-app-revamp/components/_pages/Contest/components/ContestName/index.tsx

@@ -6,14 +6,17 @@ import { FC } from "react";
 import { useMediaQuery } from "react-responsive";
 import CancelContest from "../CancelContest";
 import EditContestName from "./components/EditContestName";
+import ShareDropdown from "@components/Share";
 
 interface ContestNameProps {
+  contestAddress: string;
+  chainName: string;
   contestName: string;
   contestPrompt: string;
   canEditTitle: boolean;
 }
 
-const ContestName: FC<ContestNameProps> = ({ contestName, contestPrompt, canEditTitle }) => {
+const ContestName: FC<ContestNameProps> = ({ contestName, contestAddress, chainName, contestPrompt, canEditTitle }) => {
   const { contestState } = useContestStateStore(state => state);
   const isContestCanceled = contestState === ContestStateEnum.Canceled;
   const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
@@ -48,12 +51,15 @@ const ContestName: FC<ContestNameProps> = ({ contestName, contestPrompt, canEdit
   }
 
   return (
-    <div className="flex items-center justify-between w-full">
-      <GradientText text={contestName} isStrikethrough={isContestCanceled} />
-      <div className="flex items-center gap-2 justify-end">
+    <div className="flex items-center relative w-full">
+      <div className="absolute left-0 -translate-x-full -ml-4 flex items-center gap-2">
         <EditContestName contestName={contestName} contestPrompt={contestPrompt} canEditTitle={canEditTitle} />
         <CancelContest />
       </div>
+      <div className="flex items-center justify-between w-full">
+        <GradientText text={contestName} isStrikethrough={isContestCanceled} />
+        <ShareDropdown contestAddress={contestAddress} chain={chainName} contestName={contestName} />
+      </div>
     </div>
   );
 };

packages/react-app-revamp/components/_pages/Contest/components/Prompt/components/Page/components/Layout/V3/index.tsx

@@ -4,117 +4,91 @@ import { Interweave } from "interweave";
 import { UrlMatcher } from "interweave-autolink";
 import { FC, useState } from "react";
 import EditContestPrompt from "./components/EditContestPrompt";
+import { useLineCount } from "@hooks/useLineCount";
+import { ChevronDownIcon } from "@heroicons/react/24/outline";
+import { useMediaQuery } from "react-responsive";
 
 interface ContestPromptPageV3LayoutProps {
   prompt: string;
   canEditTitleAndDescription: boolean;
 }
 
-const MAX_LENGTH = 200;
-
 const ContestPromptPageV3Layout: FC<ContestPromptPageV3LayoutProps> = ({ prompt, canEditTitleAndDescription }) => {
   const [isExpanded, setIsExpanded] = useState(false);
+  const { elementRef, lineCount } = useLineCount();
+  const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
   const { contestState } = useContestStateStore(state => state);
   const isContestCanceled = contestState === ContestStateEnum.Canceled;
   const { contestSummary, contestEvaluate, contestContactDetails } = parsePrompt(prompt);
+  const shouldShowReadMore = lineCount > 5;
 
-  const shouldDisplayReadMore = () => {
-    const totalLength = contestSummary.length + (contestEvaluate?.length || 0) + (contestContactDetails?.length || 0);
-    return totalLength > MAX_LENGTH;
-  };
-
-  const getContent = () => {
-    if (isExpanded) {
-      return {
-        summaryContent: contestSummary,
-        evaluateContent: contestEvaluate || "",
-        contactDetailsContent: contestContactDetails || "",
-      };
-    }
-
-    let remainingLength = MAX_LENGTH;
-    let summaryContent = contestSummary.slice(0, remainingLength);
-    remainingLength -= summaryContent.length;
-
-    let evaluateContent = "";
-    if (remainingLength > 0 && contestEvaluate) {
-      evaluateContent = contestEvaluate.slice(0, remainingLength);
-      remainingLength -= evaluateContent.length;
-    }
-
-    let contactDetailsContent = "";
-    if (remainingLength > 0 && contestContactDetails) {
-      contactDetailsContent = contestContactDetails.slice(0, remainingLength);
-    }
-
-    const isContentTruncated =
-      contestSummary.length + (contestEvaluate?.length || 0) + (contactDetailsContent?.length || 0) > MAX_LENGTH;
-
-    if (isContentTruncated) {
-      if (contactDetailsContent) {
-        contactDetailsContent = contactDetailsContent.trim() + "...";
-      } else if (evaluateContent) {
-        evaluateContent = evaluateContent.trim() + "...";
-      } else {
-        summaryContent = summaryContent.trim() + "...";
-      }
-    }
-
-    return { summaryContent, evaluateContent, contactDetailsContent };
-  };
-
-  const { summaryContent, evaluateContent, contactDetailsContent } = getContent();
-
-  const shouldDisplayEvaluate = !!evaluateContent;
-  const shouldDisplayContactDetails = !!contactDetailsContent;
+  const renderSection = (content: string, showDivider: boolean) => {
+    if (!content) return null;
 
-  const handleToggle = () => {
-    setIsExpanded(!isExpanded);
+    return (
+      <>
+        {showDivider && <div className="bg-gradient-to-r from-neutral-7 w-full h-[1px] my-6" />}
+        <Interweave content={content} matchers={[new UrlMatcher("url")]} />
+      </>
+    );
   };
 
   return (
-    <div className="flex items-start w-full">
+    <div className="flex items-start relative w-full">
+      <div className="absolute md:top-2 right-0 md:right-auto md:left-0 md:-translate-x-full md:-ml-4">
+        <EditContestPrompt canEditPrompt={canEditTitleAndDescription} prompt={prompt} />
+      </div>
+
       <div className="flex flex-col gap-2 md:gap-4 w-80 xs:w-[460px] sm:w-[560px]">
-        <div
-          className={`overflow-hidden ${isContestCanceled ? "line-through" : ""}`}
-          style={{
-            maxHeight: isExpanded ? "none" : "150px",
-          }}
-        >
-          <div className="prose prose-invert flex flex-col">
-            <>
-              <Interweave content={summaryContent} matchers={[new UrlMatcher("url")]} />
-              {shouldDisplayEvaluate && (
-                <>
-                  <div className="bg-gradient-to-r from-neutral-7 w-full h-[1px] my-6"></div>
-                  <Interweave content={evaluateContent} matchers={[new UrlMatcher("url")]} />
-                </>
-              )}
-              {shouldDisplayContactDetails && (
-                <div>
-                  <div className="bg-gradient-to-r from-neutral-7 w-full h-[1px] my-6"></div>
-                  <Interweave content={contactDetailsContent} matchers={[new UrlMatcher("url")]} />
-                </div>
-              )}
-            </>
+        <div className="relative">
+          <div ref={elementRef} className="prose prose-invert flex flex-col invisible absolute w-full">
+            {renderSection(contestSummary, false)}
+            {renderSection(contestEvaluate, true)}
+            {renderSection(contestContactDetails, true)}
+          </div>
+
+          <div
+            className={`
+              prose prose-invert flex flex-col 
+              ${isContestCanceled ? "line-through" : ""}
+              ${!isExpanded && shouldShowReadMore ? "overflow-hidden" : ""}
+            `}
+            style={{
+              ...(!isExpanded && shouldShowReadMore
+                ? {
+                    maskImage: "linear-gradient(to bottom, black 45%, transparent 100%)",
+                    WebkitMaskImage: "linear-gradient(to bottom, black 45%, transparent 100%)",
+                    maxHeight: `${Math.min(lineCount, 5) * 1.6}em`,
+                  }
+                : {}),
+            }}
+          >
+            {renderSection(contestSummary, false)}
+            {(isExpanded || !shouldShowReadMore) && (
+              <>
+                {renderSection(contestEvaluate, true)}
+                {renderSection(contestContactDetails, true)}
+              </>
+            )}
           </div>
         </div>
-        {shouldDisplayReadMore() && (
-          <div className="flex gap-1 items-center cursor-pointer" onClick={handleToggle}>
-            <p className="text-[16px] text-positive-11">{isExpanded ? "less description" : "full description"}</p>
-            <img
-              src="/contest/chevron.svg"
-              width={24}
-              height={24}
-              alt="toggleRead"
-              className={`transition-transform duration-300 ${isExpanded ? "transform rotate-180 pt-0" : "pt-1"}`}
-            />
+
+        {shouldShowReadMore && !isExpanded && (
+          <div className="w-full flex -mt-12 items-center justify-center">
+            <button
+              onClick={() => setIsExpanded(true)}
+              className="text-[12px] md:text-[16px] font-bold flex z-50 w-[120px] md:w-40 h-10 rounded-lg items-center justify-center bg-primary-1 gap-1 text-positive-11 hover:bg-positive-11 hover:text-primary-1 transition-all duration-300 ease-in-out"
+            >
+              <span>full description</span>
+              <ChevronDownIcon
+                width={isMobile ? 16 : 21}
+                height={isMobile ? 16 : 21}
+                className="md:mt-1 transition-transform duration-300"
+              />
+            </button>
           </div>
         )}
       </div>
-      <div className="ml-auto">
-        <EditContestPrompt canEditPrompt={canEditTitleAndDescription} prompt={prompt} />
-      </div>
     </div>
   );
 };