Update styles

PotLock · Nov 26, 2024 · 16477af · 16477af
1 parent 80dbc7b
commit 16477af
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 22 deletions.
diff --git a/src/common/ui/components/molecules/multi-select.tsx b/src/common/ui/components/molecules/multi-select.tsx
@@ -153,7 +153,7 @@ const MultiSelectorTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
       <div
         ref={ref}
         className={cn(
-          "flex flex-wrap gap-1 rounded-lg border border-muted bg-background p-1 py-2",
+          "border-muted bg-background flex flex-wrap gap-1 rounded-lg border p-1 py-2",
           className,
         )}
         {...props}
@@ -163,7 +163,7 @@ const MultiSelectorTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
             key={item}
             className={cn(
               "flex items-center gap-1 rounded-xl px-1",
-              activeIndex === index && "ring-2 ring-muted-foreground ",
+              activeIndex === index && "ring-muted-foreground ring-2 ",
             )}
             variant={"secondary"}
           >
@@ -176,7 +176,7 @@ const MultiSelectorTrigger = forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
               onClick={() => onValueChange(item)}
             >
               <span className="sr-only">Remove {item} option</span>
-              <RemoveIcon className="h-4 w-4 hover:stroke-destructive" />
+              <RemoveIcon className="hover:stroke-destructive h-4 w-4" />
             </button>
           </Badge>
         ))}
@@ -203,7 +203,7 @@ const MultiSelectorInput = forwardRef<
       onFocus={() => setOpen(true)}
       onClick={() => setActiveIndex(-1)}
       className={cn(
-        "ml-2 flex-1 bg-transparent outline-none placeholder:text-muted-foreground",
+        "placeholder:text-muted-foreground ml-2 flex-1 bg-transparent outline-none",
         className,
         activeIndex !== -1 && "caret-transparent",
       )}
@@ -234,7 +234,7 @@ const MultiSelectorList = forwardRef<
     <CommandList
       ref={ref}
       className={cn(
-        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg absolute top-0 z-10 flex w-full flex-col gap-2 rounded-md border border-muted bg-background p-2 shadow-md transition-colors",
+        "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-muted-foreground dark:scrollbar-thumb-muted scrollbar-thumb-rounded-lg border-muted bg-background absolute top-0 z-10 flex w-full flex-col gap-2 rounded-md border p-2 shadow-md transition-colors",
         className,
       )}
     >

diff --git a/src/modules/lists/components/ListFormDetails.tsx b/src/modules/lists/components/ListFormDetails.tsx
@@ -284,11 +284,11 @@ export const ListFormDetails: React.FC = () => {
                   />
                   <div
                     className={cn(
-                      "h-4.5 w-4.5 peer shrink-0 rounded-sm border border-[var(--primary-600)] ring-offset-background",
-                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                      "h-4.5 w-4.5 ring-offset-background peer shrink-0 rounded-sm border border-[var(--primary-600)]",
+                      "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2",
                       "focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-                      "data-[state=checked]:bg-[var(--primary-600)] data-[state=checked]:text-primary-foreground",
-                      "peer-checked:bg-[var(--primary-600)] peer-checked:text-primary-foreground",
+                      "data-[state=checked]:text-primary-foreground data-[state=checked]:bg-[var(--primary-600)]",
+                      "peer-checked:text-primary-foreground peer-checked:bg-[var(--primary-600)]",
                     )}
                   >
                     <Check className="flex hidden h-4 w-4 items-center justify-center text-white peer-checked:block" />

diff --git a/src/modules/pot/components/PotHero.tsx b/src/modules/pot/components/PotHero.tsx
@@ -1,5 +1,6 @@
 import { useState } from "react";
 
+import Link from "next/link";
 import { MdArrowOutward } from "react-icons/md";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -45,6 +46,10 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
     accountId: asDao ? actAsDao.defaultAddress : (walletApi.accountId ?? accountId),
   });
 
+  const [description, embeddedLink] = pot?.description.split("More info ") ?? [null, null];
+
+  const linkedDocumentUrl = embeddedLink;
+
   return (
     <>
       {pot && (
@@ -72,15 +77,19 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
 
       <div
         className={cn(
-          "lg:p-2 flex flex-col items-center justify-start p-1",
+          "md:p-2 flex flex-col items-center justify-start p-1",
           "md:w-a md:bg-neutral-50 w-full rounded-2xl",
         )}
       >
-        {pot ? <PotTimeline {...{ potId }} /> : <Skeleton className="h-96 w-full" />}
+        {pot ? (
+          <PotTimeline classNames={{ root: "bg-neutral-50 md:transparent" }} {...{ potId }} />
+        ) : (
+          <Skeleton className="h-96 w-full" />
+        )}
 
         <div
           className={cn(
-            "min-h-122 md:p-14 flex flex-col items-start justify-start",
+            "min-h-122 md:p-14 md:pt-14 flex flex-col items-start justify-start pt-10",
             "lg:gap-8 bg-background gap-10 self-stretch rounded-lg",
           )}
         >
@@ -102,25 +111,27 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
               <div
                 className={cn("flex h-32 flex-col items-start justify-start gap-4 self-stretch")}
               >
-                {pot ? (
+                {description ? (
                   <div
                     className={cn(
                       "self-stretch text-[17px] font-normal leading-normal text-neutral-600",
                     )}
                   >
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{pot.description}</ReactMarkdown>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{description}</ReactMarkdown>
                   </div>
                 ) : (
                   <Skeleton className="h-9 w-full" />
                 )}
 
-                {pot ? (
-                  <Button variant="brand-outline">
-                    <MdArrowOutward />
+                {pot && linkedDocumentUrl ? (
+                  <Button asChild variant="brand-outline">
+                    <Link href={linkedDocumentUrl} target="_blank">
+                      <MdArrowOutward className="h-4.5 w-4.5" />
 
-                    <span className="text-center text-sm font-medium leading-tight text-[#292929]">
-                      {"More info"}
-                    </span>
+                      <span className="text-center text-sm font-medium leading-tight text-[#292929]">
+                        {"More info"}
+                      </span>
+                    </Link>
                   </Button>
                 ) : null}
               </div>
@@ -144,7 +155,7 @@ export const PotHero: React.FC<PotHeroProps> = ({ potId }) => {
 
           <div
             className={cn(
-              "md:flex-row flex flex-col items-center justify-between gap-8",
+              "md:flex-row md:items-center flex flex-col justify-between gap-8",
               "w-full self-stretch border-t border-neutral-200 pt-4",
             )}
           >

diff --git a/src/modules/pot/components/PotTimeline.tsx b/src/modules/pot/components/PotTimeline.tsx
@@ -97,7 +97,7 @@ export const PotTimeline: React.FC<PotTimelineProps> = ({ potId, classNames }) =
       onClick={toggleMobileMenu}
       className={cn(
         "xl:pointer-events-none h-a xl:h-14 cursor-pointer",
-        "flex w-full items-center justify-center gap-4 p-4",
+        "flex w-full items-center justify-center gap-4 px-4",
         classNames?.root,
       )}
     >