chore: fixed dark mode and added short bio

privacy-scaling-explorations · Feb 5, 2025 · 6284a1d · 6284a1d
1 parent c09a157
commit 6284a1d
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 31 deletions.
diff --git a/packages/interface/src/components/InfiniteLoading.tsx b/packages/interface/src/components/InfiniteLoading.tsx
@@ -43,7 +43,7 @@ export const InfiniteLoading = <T,>({
 
   return (
     <div>
-      {!isLoading && !items.length ? <EmptyState title="No results found" /> : null}
+      {!isLoading && !items.length ? <EmptyState title="No proposals yet! Be the first to create one." /> : null}
 
       <div className={`mb-16 grid ${columnMap[columns]} gap-4`}>
         {items.map((item) => renderItem(item, { isLoading }))}

diff --git a/packages/interface/src/components/VotingInfo.tsx b/packages/interface/src/components/VotingInfo.tsx
@@ -34,7 +34,7 @@ export const VotingInfo = ({ pollId }: IVotingInfoProps): JSX.Element => {
       {!isLoading && timeLeft[3] < 0 && <p>Voting has ended</p>}
 
       {!isLoading && timeLeft[3] > 0 && (
-        <div className="flex gap-2">
+        <div className="flex gap-2 dark:text-white">
           <TimeSlot num={timeLeft[0]} unit="Days" />
 
           <TimeSlot num={timeLeft[1]} unit="Hours" />

diff --git a/packages/interface/src/features/home/components/FaqList.tsx b/packages/interface/src/features/home/components/FaqList.tsx
@@ -3,7 +3,7 @@ import { Heading } from "~/components/ui/Heading";
 import { FAQItem } from "./FaqItem";
 
 export const FAQList = (): JSX.Element => (
-  <div className="mt-14 flex flex-col items-center justify-center sm:mt-28 dark:text-white" id="FAQ">
+  <div className="dark:bg-lightBlack flex flex-col items-center justify-center py-14 sm:pt-28 dark:text-white" id="FAQ">
     <Heading size="6xl">FAQ</Heading>
 
     <FAQItem

diff --git a/packages/interface/src/features/projects/components/ProjectItem.tsx b/packages/interface/src/features/projects/components/ProjectItem.tsx
@@ -7,7 +7,6 @@ import { Skeleton } from "~/components/ui/Skeleton";
 import { Spinner } from "~/components/ui/Spinner";
 import { config } from "~/config";
 import { formatNumber } from "~/utils/formatNumber";
-import { removeMarkdown } from "~/utils/removeMarkdown";
 import { useRoundState } from "~/utils/state";
 import { ERoundState } from "~/utils/types";
 
@@ -25,7 +24,7 @@ export interface IProjectItemContentProps {
   bannerImageUrl?: string;
   profileImageUrl?: string;
   name?: string;
-  bio?: string;
+  shortBio?: string;
   impactCategory?: string[];
   actionButton?: ReactNode;
 }
@@ -34,7 +33,7 @@ export const ProjectItemContent = ({
   bannerImageUrl = "",
   profileImageUrl = "",
   name = "",
-  bio = "",
+  shortBio = "",
   impactCategory = undefined,
   actionButton = undefined,
 }: IProjectItemContentProps): JSX.Element => (
@@ -51,7 +50,9 @@ export const ProjectItemContent = ({
       </Heading>
 
       <div className="mb-2 line-clamp-2 h-10 text-sm text-gray-400">
-        <Skeleton className="w-full">{removeMarkdown(bio || "")}</Skeleton>
+        <Skeleton className="w-full" isLoading={false}>
+          {shortBio}
+        </Skeleton>
       </div>
 
       <Skeleton className="w-[100px]" isLoading={false}>
@@ -83,7 +84,11 @@ export const ProjectItem = ({
   const bannerImageUrl = recipient.bannerImageUrl ? recipient.bannerImageUrl : metadata.data?.bannerImageUrl;
   const profileImageUrl = recipient.profileImageUrl ? recipient.profileImageUrl : metadata.data?.profileImageUrl;
   const name = recipient.name ? recipient.name : metadata.data?.name;
+  let shortBio = recipient.shortBio ? recipient.shortBio : metadata.data?.shortBio;
   const bio = recipient.bio ? recipient.bio : metadata.data?.bio;
+  if (!shortBio && bio) {
+    shortBio = bio.substring(0, 140);
+  }
   const impactCategory = recipient.impactCategory ? recipient.impactCategory : metadata.data?.impactCategory;
 
   return (
@@ -121,10 +126,10 @@ export const ProjectItem = ({
             )
           }
           bannerImageUrl={bannerImageUrl}
-          bio={bio}
           impactCategory={impactCategory}
           name={name}
           profileImageUrl={profileImageUrl}
+          shortBio={shortBio}
         />
       )}
     </Link>

diff --git a/packages/interface/src/features/proposals/components/MetadataButtons.tsx b/packages/interface/src/features/proposals/components/MetadataButtons.tsx
@@ -41,6 +41,7 @@ export const MetadataButtons = ({
 
   const [
     name,
+    shortBio,
     bio,
     payoutAddress,
     websiteUrl,
@@ -55,6 +56,7 @@ export const MetadataButtons = ({
     () =>
       form.watch([
         "name",
+        "shortBio",
         "bio",
         "payoutAddress",
         "websiteUrl",
@@ -79,6 +81,7 @@ export const MetadataButtons = ({
       return (
         bannerImageUrl !== undefined &&
         profileImageUrl !== undefined &&
+        shortBio.length > 0 &&
         bio.length > 0 &&
         name.length > 0 &&
         payoutAddress.length > 0 &&

diff --git a/packages/interface/src/features/proposals/components/MetadataForm.tsx b/packages/interface/src/features/proposals/components/MetadataForm.tsx
@@ -91,6 +91,10 @@ export const MetadataForm = ({ pollId }: IMetadataFormProps): JSX.Element => {
             <Input placeholder="Type your project name" />
           </FormControl>
 
+          <FormControl required label="Short Description" name="shortBio">
+            <Textarea placeholder="Short description. Maximum 140 characters." rows={4} />
+          </FormControl>
+
           <FormControl required label="Description" name="bio">
             <Textarea placeholder="Type project description" rows={4} />
           </FormControl>
@@ -194,7 +198,7 @@ export const MetadataForm = ({ pollId }: IMetadataFormProps): JSX.Element => {
           <FieldArray
             description="From what sources have you received funding?"
             name="fundingSources"
-            renderField={(field, i) => (
+            renderField={(_field, i) => (
               <div className="mb-4 flex flex-wrap gap-2">
                 <FormControl required className="min-w-96" name={`fundingSources.${i}.description`}>
                   <Input placeholder="Type the name of your funding source" />

diff --git a/packages/interface/src/features/proposals/components/ProposalItem.tsx b/packages/interface/src/features/proposals/components/ProposalItem.tsx
@@ -8,7 +8,6 @@ import { Checkbox } from "~/components/ui/Form";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { ProjectAvatar } from "~/features/projects/components/ProjectAvatar";
 import { useMetadata } from "~/hooks/useMetadata";
-import { removeMarkdown } from "~/utils/removeMarkdown";
 import { formatDate } from "~/utils/time";
 
 import type { TRequestToApprove, Metadata } from "../types";
@@ -34,10 +33,11 @@ export const ProposalItem = ({
   const form = useFormContext<TRequestToApprove>();
 
   const { profileImageUrl } = metadata.data ?? {};
-  const bio =
-    metadata.data?.bio && metadata.data.bio.length > 140
-      ? `${metadata.data.bio.substring(0, 140)}...`
-      : metadata.data?.bio;
+  let shortBio = metadata.data?.shortBio;
+  const bio = metadata.data?.bio;
+  if (!shortBio && bio) {
+    shortBio = bio.substring(0, 140);
+  }
 
   useEffect(() => {
     if (isApproved) {
@@ -67,7 +67,7 @@ export const ProposalItem = ({
             </Skeleton>
 
             <div className="text-sm text-gray-400">
-              <div>{removeMarkdown(bio || "")}</div>
+              <div>{shortBio}</div>
             </div>
           </div>
         </div>

diff --git a/packages/interface/src/features/proposals/components/ReviewProposalDetails.tsx b/packages/interface/src/features/proposals/components/ReviewProposalDetails.tsx
@@ -69,6 +69,8 @@ export const ReviewProposalDetails = (): JSX.Element => {
 
         <ValueField required body={address} title="Created By" />
 
+        <ValueField required body={metadata.shortBio} title="Short description" />
+
         <ValueField required body={<Markdown>{metadata.bio}</Markdown>} title="Project description" />
 
         <div className="grid grid-flow-row gap-4 sm:grid-cols-2">
@@ -165,10 +167,10 @@ export const ReviewProposalDetails = (): JSX.Element => {
         <div className="mb-2 grid grid-cols-1 sm:grid-cols-3">
           <ProjectItemContent
             bannerImageUrl={metadata.bannerImageUrl}
-            bio={metadata.bio}
             impactCategory={metadata.impactCategory}
             name={metadata.name}
             profileImageUrl={metadata.profileImageUrl}
+            shortBio={metadata.shortBio}
           />
         </div>
       </div>

diff --git a/packages/interface/src/features/proposals/types/index.ts b/packages/interface/src/features/proposals/types/index.ts
@@ -18,6 +18,7 @@ export const fundingSourceTypes = {
 
 export const MetadataSchema = z.object({
   name: z.string().min(3),
+  shortBio: z.string().max(140),
   bio: z.string().min(3),
   creator: z.string().optional(),
   profileImageUrl: z.string().optional(),

diff --git a/packages/interface/src/utils/removeMarkdown.ts b/packages/interface/src/utils/removeMarkdown.ts
diff --git a/packages/interface/src/utils/types.ts b/packages/interface/src/utils/types.ts
@@ -247,6 +247,10 @@ export interface IRecipient {
    * Bio of the recipient, used only for preview of card
    */
   bio?: string;
+  /**
+   * Short Bio of the recipient, used only for preview of card
+   */
+  shortBio?: string;
   /**
    * Impact categories of the recipient, used only for preview of card
    */