Fix: rating bugs & text modifs

app/comparison/[category]/page.tsx

@@ -57,8 +57,8 @@ export default function Home() {
   const { checkLoginFlow } = useAuth();
   const { address, chainId } = useAccount();
 
-  const [rating1, setRating1] = useState<number>(3);
-  const [rating2, setRating2] = useState<number>(3);
+  const [rating1, setRating1] = useState<number | null>(null);
+  const [rating2, setRating2] = useState<number | null>(null);
   const [project1, setProject1] = useState<IProject>();
   const [project2, setProject2] = useState<IProject>();
   const [coiLoading1, setCoiLoading1] = useState(false);
@@ -138,9 +138,8 @@ export default function Home() {
 
   useEffect(() => {
     if (!data || !data.pairs?.length) return;
-    console.log(data);
-    setRating1(data.pairs[0][0].rating || 3);
-    setRating2(data.pairs[0][1].rating || 3);
+    setRating1(data.pairs[0][0].rating ?? null);
+    setRating2(data.pairs[0][1].rating ?? null);
   }, [data]);
 
   useEffect(() => {
@@ -160,8 +159,10 @@ export default function Home() {
   }, [data, temp]);
 
   useEffect(() => {
-    const initialRating1 = data?.pairs[0][0].rating || 3;
-    const initialRating2 = data?.pairs[0][1].rating || 3;
+    const initialRating1 = data?.pairs[0][0].rating || 0;
+    const initialRating2 = data?.pairs[0][1].rating || 0;
+
+    if (rating1 === null || rating2 === null) return;
 
     // observe if user rated both projects
     if (rating1 !== initialRating1 && rating2 !== initialRating2) {
@@ -307,6 +308,8 @@ export default function Home() {
     ) =>
       chosenId === selectedId && (!ratingA || (ratingB && ratingA < ratingB));
 
+    if (!rating1 && !rating2) return false;
+
     if (
       isLowRatedProjectSelected(project1!.id, rating1, rating2) ||
       isLowRatedProjectSelected(project2!.id, rating2, rating1)
@@ -326,8 +329,8 @@ export default function Home() {
       data: {
         project1Id: project1!.id,
         project2Id: project2!.id,
-        project1Stars: rating1,
-        project2Stars: rating2,
+        project1Stars: rating1 ?? null,
+        project2Stars: rating2 ?? null,
         pickedId: chosenId,
       },
     });
@@ -542,7 +545,7 @@ export default function Home() {
         <footer className="sticky bottom-0 z-50 flex w-full items-center justify-around gap-4 bg-white py-8 shadow-inner">
           <div className="flex flex-col items-center justify-center gap-4 lg:flex-row xl:gap-8">
             <Rating
-              value={rating1}
+              value={rating1 || 0}
               onChange={setRating1}
               disabled={isInitialVisit || coiLoading1}
             />
@@ -566,7 +569,7 @@ export default function Home() {
           </div>
           <div className="flex flex-col items-center justify-center gap-4 lg:flex-row xl:gap-8">
             <Rating
-              value={rating2}
+              value={rating2 || 0}
               onChange={setRating2}
               disabled={isInitialVisit || coiLoading2}
             />

app/comparison/ballot/modals/BallotError.tsx

@@ -2,9 +2,12 @@ import Image from 'next/image';
 import React from 'react';
 
 interface UnlockBallotProps {
-  onClick: () => void
+  onClick: () => void;
 }
 
+const BALLOT_REPPORT_URL =
+  'https://github.com/GeneralMagicio/pairwise-rpgf5/issues/new?assignees=MoeNick&labels=P0&projects=&template=report-error-on-updating-ballot.md&title=%5BError+updating+ballot%5D+';
+
 const BallotError: React.FC<UnlockBallotProps> = ({ onClick }) => {
   return (
     <div className="mx-auto w-[96] overflow-hidden rounded-lg bg-white bg-ballot bg-no-repeat shadow-lg">
@@ -20,15 +23,20 @@ const BallotError: React.FC<UnlockBallotProps> = ({ onClick }) => {
           Error updating ballot!
         </h2>
         <p className="mb-6 text-gray-400">
-          We encountered a problem updating your ballot.
-          Please retry updating.
+          We encountered a problem updating your ballot. Please retry updating.
         </p>
         <button
           onClick={onClick}
           className="flex w-full items-center justify-center rounded-lg bg-primary px-4 py-3 text-white transition duration-300 ease-in-out hover:bg-red-600"
         >
           Retry ballot update
         </button>
+        <button
+          onClick={() => window.open(BALLOT_REPPORT_URL, '_blank')}
+          className="mt-4 flex w-full items-center justify-center rounded-lg bg-white px-4 py-3 font-semibold text-primary transition duration-300 ease-in-out"
+        >
+          Report an issue
+        </button>
       </div>
     </div>
   );

app/comparison/card/GithubBox.tsx

@@ -23,8 +23,12 @@ interface Props {
 const GithubBox: FC<Props> = ({ repo }) => {
   const { getCollapseProps, getToggleProps, isExpanded } = useCollapse();
 
+
   return (
-    <div className="max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2 py-[12px] font-inter">
+    <div
+      {...getToggleProps()}
+      className="max-w-full cursor-pointer rounded-lg border border-gray-200 bg-gray-50 p-2 py-[12px] font-inter"
+    >
       <div
         className={`flex items-center justify-between ${
           isExpanded ? 'mb-4' : ''
@@ -36,6 +40,7 @@ const GithubBox: FC<Props> = ({ repo }) => {
             href={repo.url}
             className="break-all text-gray-700 hover:underline"
             target="_blank"
+            onClick={(e) => e.stopPropagation()}
           >
             {repo.name || repo.url?.replace('https://' || 'http://', '')}
           </a>
@@ -44,7 +49,7 @@ const GithubBox: FC<Props> = ({ repo }) => {
             <span> Open source </span>
           </div>
         </div>
-        <button {...getToggleProps()} className="text-sm text-gray-600">
+        <button className="text-sm text-gray-600">
           {isExpanded ? (
             <div className="flex items-center gap-2">
               <span> Hide metrics </span>

app/comparison/card/ProjectCard.tsx

@@ -316,7 +316,7 @@ export const ProjectCard: React.FC<Props> = ({
                 onChange={setAi}
                 checked={aiMode}
               />
-              <p className="font-medium"> TLDR </p>
+              <p className="font-medium"> AI Summary </p>
               <StarsIcon />
             </div>
             <ProjectDescription description={project.description} />
@@ -446,7 +446,7 @@ export const ProjectCard: React.FC<Props> = ({
                     </p>
                   </div>
                   <div className="space-y-2">
-                    {project.impactStatement.statement.create.map(
+                    {project.impactStatement.statement?.create?.map(
                       ({ question, answer }) => (
                         <QABox
                           key={question}

app/comparison/card/SimpleInfoBox.tsx

@@ -36,31 +36,47 @@ const SimpleInfoBox: FC<Props> = ({
         target="_blank"
         className="break-all text-gray-700 hover:underline"
         rel="noopener noreferrer"
+        onClick={(e) => e.stopPropagation()}
       >
         {displayTitle}
       </a>
     );
   };
 
+  const shouldCollapse = description.length > 0;
+
   return (
-    <div className="max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2">
-      <div className={`flex items-center justify-between ${isExpanded ? 'mb-4' : ''}`}>
+    <div
+      className={`max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2 ${
+        shouldCollapse ? 'cursor-pointer' : ''
+      }`}
+      {...(shouldCollapse &&
+        getToggleProps())}
+    >
+      <div
+        className={`flex items-center justify-between ${
+          isExpanded && shouldCollapse ? 'mb-4' : ''
+        }`}
+      >
         <div className="flex items-center gap-2">
-          {ICONS_MAP[type] && showIcon && <span className="size-5">{ICONS_MAP[type]}</span>}
+          {ICONS_MAP[type] && showIcon && (
+            <span className="size-5">{ICONS_MAP[type]}</span>
+          )}
           {renderTitle()}
         </div>
-        {description.length > 0 && (
+        {shouldCollapse && (
           <button
-            {...getToggleProps()}
             className="text-sm text-gray-600 hover:underline"
           >
             {isExpanded ? <ArrowUpIcon /> : <ArrowDownIcon />}
           </button>
         )}
       </div>
-      <section {...getCollapseProps()}>
-        <p className="mb-2 text-gray-600">{description}</p>
-      </section>
+      {shouldCollapse && (
+        <section {...getCollapseProps()}>
+          <p className="mb-2 text-gray-600">{description}</p>
+        </section>
+      )}
     </div>
   );
 };

app/comparison/card/modals/ContractBox.tsx

@@ -35,6 +35,7 @@ export const ContractBox = ({
         target="_blank"
         rel="noopener noreferrer"
         className="break-all text-gray-700 hover:underline"
+        onClick={(e) => e.stopPropagation()}
       >
         {title}
       </a>
@@ -53,29 +54,35 @@ export const ContractBox = ({
     );
   };
 
+  const shouldCollapse = description.length > 0;
+
   return (
-    <div className="max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2">
+    <div
+      {...(shouldCollapse && getToggleProps())}
+      className={`max-w-full rounded-lg border border-gray-200 bg-gray-50 p-2 ${
+        shouldCollapse ? 'cursor-pointer' : ''
+      }`}
+    >
       <div
         className={`flex items-center justify-between ${
-          isExpanded ? 'mb-4' : ''
+          isExpanded && shouldCollapse ? 'mb-4' : ''
         }`}
       >
         <div className="flex items-center gap-2">
           {renderIcon()}
           {renderTitle()}
         </div>
-        {description && (
-          <button
-            {...getToggleProps()}
-            className="text-sm text-gray-600 hover:underline"
-          >
+        {shouldCollapse && (
+          <button className="text-sm text-gray-600 hover:underline">
             {isExpanded ? <ArrowUpIcon /> : <ArrowDownIcon />}
           </button>
         )}
       </div>
-      <section {...getCollapseProps()}>
-        <p className="mb-2 text-gray-600">{description}</p>
-      </section>
+      {shouldCollapse && (
+        <section {...getCollapseProps()}>
+          <p className="mb-2 text-gray-600">{description}</p>
+        </section>
+      )}
     </div>
   );
 };

app/components/TextBlock.tsx

@@ -14,7 +14,7 @@ const TextBlock: FC<{
     scale?: number;
   };
 }> = ({ mainText, highlightText, description, highlightImage }) => (
-  <p className="sm:w-[35%]] w-full text-start text-3xl font-bold text-dark-500 xl:text-4xl">
+  <p className="sm:w-[35%]] w-full text-start text-3xl font-bold text-dark-500 xl:text-4xl xl:leading-[3rem]">
     {mainText}{' '}
     <span className="relative inline-block">
       <Image

app/landing/part2.tsx

@@ -7,7 +7,7 @@ export const LandingPart2 = () => {
       <div className="relative h-[360px] w-full md:h-[540px]">
         <Image src="assets/images/landing-p2.svg" alt="landing part 2" width={700} height={540} />
       </div>
-      <div className="flex max-w-[700px] flex-col gap-2 font-inter text-4xl font-bold sl:text-2xl">
+      <div className="flex max-w-[400px] flex-col gap-2 font-inter text-4xl font-bold md:max-w-[700px] sl:text-2xl">
         <TextBlock
           mainText="Choose the project that you consider had a greater"
           highlightText="impact"

app/landing/part3.tsx

@@ -4,9 +4,9 @@ import TextBlock from '../components/TextBlock';
 export const LandingPart3 = () => {
   return (
     <div className="flex h-[calc(0.65*100vh)] min-h-[calc(0.85*760px)] w-full flex-col items-center justify-center gap-20 md:flex-row md:justify-between md:gap-0">
-      <div className="flex max-w-[560px] flex-col gap-2 font-inter text-4xl font-bold sl:text-2xl">
+      <div className="flex max-w-[400px] flex-col gap-2 font-inter text-4xl font-bold xl:max-w-[600px] sl:text-2xl">
         <TextBlock
-          mainText="After completion your results will be landed back outside of Pairwise to edit your"
+          mainText="After completion you will be redirected back to the Optimism website, and your Pairwise ranked projects will be updated on your"
           highlightText="Ballot"
           description=""
           highlightImage={{