chore: fixed dark mode and added short bio

Author: Crisgarner

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 }))}

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" />

packages/interface/src/features/applications/components/ApplicationButtons.tsx

@@ -41,6 +41,7 @@ export const ApplicationButtons = ({
 
   const [
     name,
+    shortBio,
     bio,
     payoutAddress,
     websiteUrl,
@@ -55,6 +56,7 @@ export const ApplicationButtons = ({
     () =>
       form.watch([
         "name",
+        "shortBio",
         "bio",
         "payoutAddress",
         "websiteUrl",
@@ -79,6 +81,7 @@ export const ApplicationButtons = ({
       return (
         bannerImageUrl !== undefined &&
         profileImageUrl !== undefined &&
+        shortBio.length > 0 &&
         bio.length > 0 &&
         name.length > 0 &&
         payoutAddress.length > 0 &&

packages/interface/src/features/applications/components/ApplicationForm.tsx

@@ -91,6 +91,10 @@ export const ApplicationForm = ({ pollId }: IApplicationFormProps): 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 ApplicationForm = ({ pollId }: IApplicationFormProps): 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" />

packages/interface/src/features/applications/components/ApplicationItem.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 { TApplicationsToApprove, Application } from "../types";
@@ -34,10 +33,11 @@ export const ApplicationItem = ({
   const form = useFormContext<TApplicationsToApprove>();
 
   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 ApplicationItem = ({
             </Skeleton>
 
             <div className="text-sm text-gray-400">
-              <div>{removeMarkdown(bio || "")}</div>
+              <div>{shortBio}</div>
             </div>
           </div>
         </div>

packages/interface/src/features/applications/components/ReviewApplicationDetails.tsx

@@ -70,6 +70,8 @@ export const ReviewApplicationDetails = (): JSX.Element => {
 
         <ValueField required body={address} title="Created By" />
 
+        <ValueField required body={application.shortBio} title="Project description" />
+
         <ValueField required body={<Markdown>{application.bio}</Markdown>} title="Project description" />
 
         <div className="grid grid-flow-row gap-4 sm:grid-cols-2">
@@ -178,6 +180,7 @@ export const ReviewApplicationDetails = (): JSX.Element => {
             profileImageUrl: application.profileImageUrl,
             name: application.name,
             bio: application.bio,
+            shortBio: application.shortBio,
             impactCategory: application.impactCategory,
           }}
         />

packages/interface/src/features/applications/types/index.ts

@@ -24,6 +24,7 @@ export const fundingSourceTypes = {
 
 export const ApplicationSchema = 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(),

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

packages/interface/src/features/projects/components/ProjectItem.tsx

@@ -6,7 +6,6 @@ import { Heading } from "~/components/ui/Heading";
 import { Skeleton } from "~/components/ui/Skeleton";
 import { config } from "~/config";
 import { formatNumber } from "~/utils/formatNumber";
-import { removeMarkdown } from "~/utils/removeMarkdown";
 import { useRoundState } from "~/utils/state";
 import { ERoundState } from "~/utils/types";
 
@@ -39,7 +38,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 (
@@ -61,7 +64,7 @@ export const ProjectItem = ({
 
           <div className="mb-2 line-clamp-2 h-10 text-sm text-gray-400">
             <Skeleton className="w-full" isLoading={isLoading}>
-              {removeMarkdown(bio || "")}
+              {shortBio}
             </Skeleton>
           </div>
 

packages/interface/src/utils/removeMarkdown.ts

@@ -263,6 +263,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
    */