UI improvements

app/allocation/[category]/attestation/AttestationError.tsx

@@ -1,14 +1,10 @@
 import Image from 'next/image';
 import React from 'react';
-import { ExternalLinkIcon } from '@/public/assets/icon-components/ExternalLink';
 
 interface Props {
   onClick: () => void
 }
 
-const AttestationReportUrl
-  = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=bug&projects=&template=error-submit-vote.md&title=%5BError+submit+vote%5D+';
-
 const AttestationError: React.FC<Props> = ({ onClick }) => {
   return (
     <div className="mx-auto w-[300px] overflow-hidden rounded-lg bg-white bg-ballot bg-no-repeat shadow-lg md:w-[500px]">
@@ -33,14 +29,6 @@ const AttestationError: React.FC<Props> = ({ onClick }) => {
         >
           Try again
         </button>
-        <button
-          onClick={() => window.open(AttestationReportUrl, '_blank')}
-          className="mt-4 flex w-full items-center justify-center space-x-2 rounded-lg border border-slate-400 px-4
-          py-3 font-semibold text-slate-900"
-        >
-          <span> Report an issue </span>
-          <ExternalLinkIcon />
-        </button>
       </div>
     </div>
   );

app/allocation/[category]/attestation/AttestationSuccessModal.tsx

@@ -41,6 +41,12 @@ const AttestationSuccessModal: React.FC<Props> = ({ link, onClose }) => {
           <UpdateBallotButton closeAttestationModal={() => onClose()} />
         </div>
       </div>
+      <button
+        className="bg-primary text-white"
+        onClick={onClose}
+      >
+        Ok
+      </button>
       <a href={link} className="w-full" target="_blank">
         <button
           className="text-primary underline"
@@ -49,12 +55,6 @@ const AttestationSuccessModal: React.FC<Props> = ({ link, onClose }) => {
         </button>
       </a>
 
-      <button
-        className="text-gray-600"
-        onClick={onClose}
-      >
-        Close
-      </button>
     </div>
   );
 };

app/allocation/[category]/components/UpdateBallotButton.tsx

@@ -99,7 +99,7 @@ export const UpdateBallotButton: FC<IProps> = ({ isBadgeHolderAndNotVoted = fals
         )}
       </Modal>
       <button
-        className={`flex w-fit flex-row items-center justify-center gap-2.5 self-end rounded-lg px-4 py-3 ${
+        className={`flex h-full w-fit flex-row items-center justify-center gap-2.5 self-end rounded-lg px-4 py-3 ${
           ballotState === BallotState.Loading
           || (isBadgeHolderAndNotVoted)
             ? 'bg-gray-300 text-gray-500'
@@ -111,7 +111,7 @@ export const UpdateBallotButton: FC<IProps> = ({ isBadgeHolderAndNotVoted = fals
           || (isBadgeHolderAndNotVoted)
         }
       >
-        <p>Update Ballot on Optimism</p>
+        <p className="whitespace-nowrap">Update Ballot on Optimism</p>
         <span className="m-auto"><ExternalLinkIcon size={24} /></span>
       </button>
     </>

app/allocation/components/ConnectBox.tsx

@@ -15,6 +15,7 @@ import ActiveBadges, {
   IActiveBadge,
 } from '@/app/comparison/card/ActiveBadges';
 import { useGetPublicBadges } from '@/app/utils/getBadges';
+import { ThinExternalLinkIcon } from '@/public/assets/icon-components/ThinExternalLink';
 
 interface ConnectBoxProps {
   onConnectWorldID: (isError?: boolean) => void
@@ -31,6 +32,10 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
   const [isFarcasterRefreshing, setIsFarcasterRefreshing] = useState(false);
 
   const [isTwitterRefreshing, setIsTwitterRefreshing] = useState(false);
+  const AttestationReportUrl
+  = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=bug&projects=&template=error-submit-vote.md&title=%5BError+submit+vote%5D+';
+  const PAIRWISE_REPORT_URL
+  = 'https://github.com/GeneralMagicio/pairwise-rf6/issues/new?assignees=MoeNick&labels=&projects=&template=report-an-issue.md&title=%5BFeedback%5D+';
 
   const activeBadges = useMemo(() => {
     if (!badges) return [];
@@ -92,7 +97,7 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
   return (
     <div className="max-w-md rounded-xl border bg-white p-6">
       <h2 className="mb-4 w-full border-b pb-2 text-2xl font-semibold text-gray-700">
-        Your voting power
+        My voting power
       </h2>
 
       <div className="mb-2">
@@ -271,7 +276,26 @@ const ConnectBox: React.FC<ConnectBoxProps> = ({
             )}
 
       </div>
-
+      <div>
+        <button
+          onClick={() => window.open(AttestationReportUrl, '_blank')}
+          className="mt-6 flex w-full items-center justify-center space-x-1.5 rounded-lg border border-op-neutral-300 px-4
+          py-2.5 font-semibold text-dark-400 shadow-box-shadow"
+        >
+          <span> Report an issue </span>
+          <ThinExternalLinkIcon />
+        </button>
+      </div>
+      <div>
+        <button
+          onClick={() => window.open(PAIRWISE_REPORT_URL, '_blank')}
+          className="mt-6 flex w-full items-center justify-center space-x-1.5 rounded-lg border border-op-neutral-300 px-4
+          py-2.5 font-semibold text-dark-400 shadow-box-shadow"
+        >
+          <span> Send Feedback </span>
+          <ThinExternalLinkIcon />
+        </button>
+      </div>
     </div>
   );
 };

app/allocation/components/Slider.tsx

@@ -11,8 +11,8 @@ const StyledSlider = styled(Slider)({
   '& .MuiSlider-thumb': {
     'height': 24,
     'width': 24,
-    'backgroundColor': '#fff',
-    'border': '2px solid #323232',
+    'backgroundColor': '#FF0420',
+    'border': '2px solid #FBFCFE',
     '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
       boxShadow: 'inherit',
     },

app/allocation/page.tsx

@@ -489,16 +489,16 @@ const AllocationPage = () => {
       <div className="flex flex-col gap-6 p-16">
         {!allocatingBudget && (
           <div className="flex max-w-[72%] flex-col gap-3">
-            <h2 className="text-3xl font-bold"> Round 6: Governance</h2>
+            <h2 className="text-3xl font-bold"> Round 7: Governance</h2>
             <p className="text-gray-400">
-              Retro Funding 6 will reward contributions to Optimism Governance,
+              Retro Funding 7 will reward contributions to Optimism Governance,
               including governance infrastructure & tooling, governance
               analytics, and governance leadership.
             </p>
-            <p className="mt-4 rounded-xl bg-[#FFFAEB] p-4 text-dark-500">
+            <p className="mt-4 rounded-xl bg-[#FEF0C7] p-4 text-dark-500">
               Decide on the budget for this round, and score projects in each
               category using the Pairwise ranking. You can also choose to
-              delegate your decision to someone on Farcaster.
+              delegate your decision to someone on X (Twitter) or Farcaster.
             </p>
           </div>
         )}
@@ -651,7 +651,16 @@ const AllocationPage = () => {
                   </div>
                 )
               : (
-                  <UpdateBallotButton isBadgeHolderAndNotVoted={(isBadgeholder && !isBGCategoryVoted())} />
+                  <div className="flex flex-row gap-4">
+                    <div className="border-blue-light bg-blue-light px-4 py-3 text-sm text-blue-dark">
+                      Your budget and ballot were submitted on Oct 31 at 6:16 PM.
+                      You can make changes and resubmit until Nov 11 at 12:00 AM UTC.
+                      To do so, simply edit and submit again.
+                    </div>
+                    <div className="h-full grow">
+                      <UpdateBallotButton isBadgeHolderAndNotVoted={(isBadgeholder && !isBGCategoryVoted())} />
+                    </div>
+                  </div>
                 )}
           </div>
           {!allocatingBudget && (

app/comparison/[category]/page.tsx

@@ -32,13 +32,14 @@ import IntroView from './IntroView';
 import Spinner from '../../components/Spinner';
 import LowRateModal from '../card/modals/LowRateModal';
 import PostRatingModal from '../card/modals/PostRatingModal';
-import GoodRatingModal from '../card/modals/GoodRatingModal';
+// import GoodRatingModal from '../card/modals/GoodRatingModal';
 import RevertLoadingModal from '../card/modals/RevertLoadingModal';
 import StorageLabel from '@/app/lib/localStorage';
 import { ProjectCardAI } from '../card/ProjectCardAI';
 import EmailLoginModal from '@/app/allocation/components/EOA/EmailLoginModal';
 import PostVotingModal from '../ballot/modals/PostVotingModal';
 import NotFoundComponent from '@/app/components/404';
+import SkipButton from '../card/SkipButton';
 
 export default function Home() {
   const { category } = useParams() ?? {};
@@ -59,7 +60,6 @@ export default function Home() {
   const [revertingBack, setRevertingBack] = useState(false);
   const [showLowRateModal, setShowLowRateModal] = useState(false);
   const [showPostRatingModal, setShowPostRatingModal] = useState(false);
-  const [showGoodRatingModal, setShowGoodRatingModal] = useState(false);
   const [selectedProjectId, setSelectedProjectId] = useState<number | null>(
     null
   );
@@ -158,20 +158,6 @@ export default function Home() {
     if (rating1 !== initialRating1 && rating2 !== initialRating2) {
       setShowPostRatingModal(!getGetStarted().postRating);
     }
-
-    // observe if first rated project is rated good >= 4
-    if (
-      (rating1
-      && rating1 >= 4
-      && rating2 === initialRating2
-      && rating1 !== initialRating1)
-      || (rating2
-      && rating2 >= 4
-      && rating1 === initialRating1
-      && rating2 !== initialRating2)
-    ) {
-      setShowGoodRatingModal(!getGetStarted().goodRating);
-    }
   }, [rating1, rating2]);
 
   useEffect(() => {
@@ -201,10 +187,6 @@ export default function Home() {
       if (getGetStarted().postRating) {
         setShowPostRatingModal(false);
       }
-      // show the good rating modal if the user has already rated the projects
-      if (getGetStarted().goodRating) {
-        setShowGoodRatingModal(false);
-      }
     }
   }, [address, chainId, data?.votedPairs]);
 
@@ -223,8 +205,7 @@ export default function Home() {
   const isAnyModalOpen = () =>
     showLowRateModal
     || revertingBack
-    || showPostRatingModal
-    || showGoodRatingModal;
+    || showPostRatingModal;
 
   const dispatchAction
     = (initiator: AutoScrollAction['initiator']) =>
@@ -349,6 +330,31 @@ export default function Home() {
     }
   };
 
+  const handleSkip = async () => {
+    if (!wallet) {
+      setShowLoginModal(true);
+      return;
+    }
+
+    setCoiLoading1(true);
+    setCoiLoading2(true);
+    try {
+      await vote({
+        data: {
+          project1Id: project1!.id,
+          project2Id: project2!.id,
+          project1Stars: null,
+          project2Stars: null,
+          pickedId: null,
+        },
+      });
+    }
+    catch (e) {
+      setCoiLoading1(false);
+      setCoiLoading2(false);
+    }
+  };
+
   const handleUndo = async () => {
     if (!wallet) {
       setShowLoginModal(true);
@@ -433,7 +439,6 @@ export default function Home() {
           showLowRateModal
           || revertingBack
           || showPostRatingModal
-          || showGoodRatingModal
           || showFinishModal
         }
         onClose={() => {}}
@@ -456,14 +461,6 @@ export default function Home() {
             }}
           />
         )}
-        {showGoodRatingModal && (
-          <GoodRatingModal
-            confirm={() => {
-              updateGetStarted({ goodRating: true });
-              setShowGoodRatingModal(false);
-            }}
-          />
-        )}
         {showFinishModal && (
           <PostVotingModal
             categorySlug={category}
@@ -579,7 +576,11 @@ export default function Home() {
 
       {!isInitialVisit && (
         <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">
+          <div className="flex flex-col items-center justify-center gap-4 px-4 xl:flex-row xl:gap-8">
+            <ConflictButton
+              onClick={showCoI1}
+              disabled={coiLoading1 || isAnyModalOpen()}
+            />
             <Rating
               value={rating1 || 0}
               onChange={(value) => {
@@ -593,31 +594,30 @@ export default function Home() {
                 && handleVote(project1.id)}
               disabled={coiLoading1 || isAnyModalOpen()}
             />
-            <ConflictButton
-              onClick={showCoI1}
-              disabled={coiLoading1 || isAnyModalOpen()}
-            />
           </div>
-          <div className="absolute z-[1]">
+          <div className="flex flex-row gap-4">
             <UndoButton
               disabled={data?.votedPairs === 0 || isAnyModalOpen()}
               onClick={handleUndo}
             />
+            <SkipButton
+              onClick={handleSkip}
+            />
           </div>
-          <div className="flex flex-col items-center justify-center gap-4 lg:flex-row xl:gap-8">
+          <div className="flex flex-col-reverse items-center justify-around gap-4 px-14 xl:flex-row xl:gap-8 sl:px-6">
+            <VoteButton
+              onClick={() =>
+                !checkLowRatedProjectSelected(project2.id)
+                && handleVote(project2.id)}
+              disabled={coiLoading2 || isAnyModalOpen()}
+            />
             <Rating
               value={rating2 || 0}
               onChange={(value) => {
                 !wallet ? setShowLoginModal(true) : setRating2(value);
               }}
               disabled={coiLoading2 || isAnyModalOpen()}
             />
-            <VoteButton
-              onClick={() =>
-                !checkLowRatedProjectSelected(project2.id)
-                && handleVote(project2.id)}
-              disabled={coiLoading2 || isAnyModalOpen()}
-            />
             <ConflictButton
               onClick={showCoI2}
               disabled={coiLoading2 || isAnyModalOpen()}

app/comparison/card/SkipButton.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SkipIcon } from '@/public/assets/icon-components/Skip';
+
+interface SkipButtonProps {
+  onClick: () => void
+}
+
+const SkipButton: React.FC<SkipButtonProps> = ({ onClick }) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`gap flex flex-row items-center justify-center
+        gap-1.5 rounded-md border border-dark-300 px-4 py-2.5 shadow-custom-shadow`}
+    >
+      <span className="mt-1 text-lg font-semibold text-dark-400">Skip</span>
+      <SkipIcon />
+    </button>
+  );
+};
+
+export default SkipButton;

app/comparison/card/UndoButton.tsx

@@ -10,12 +10,12 @@ const UndoButton: React.FC<UndoButtonProps> = ({ disabled, onClick }) => {
   return (
     <button
       onClick={onClick}
-      className={`flex size-16 flex-col items-center justify-center rounded-full
-        border border-gray-200 md:size-20 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
+      className={`gap flex flex-row items-center justify-center
+        gap-1.5 rounded-md border border-dark-300 px-4 py-2.5 shadow-custom-shadow ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}
       disabled={disabled}
     >
-      <UndoIcon color="#636779" />
-      <span className="mt-1 text-xs text-gray-400">Undo</span>
+      <UndoIcon />
+      <span className="mt-1 text-lg font-semibold text-dark-400">Undo</span>
     </button>
   );
 };