Actually fix cycle steps

lexicongovernance · Aug 1, 2024 · 9b0ccae · 9b0ccae
1 parent 5e1798e
commit 9b0ccae
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 72 deletions.
diff --git a/packages/berlin/src/components/onboarding/Steps.tsx b/packages/berlin/src/components/onboarding/Steps.tsx
@@ -1,13 +1,13 @@
 import { Body } from '../typography/Body.styled';
-import { FlexColumn } from '../containers/FlexColumn.styled';
 import { FlexRow } from '../containers/FlexRow.styled';
-import { Heart, Radical } from 'lucide-react';
+import { ChevronDown, Heart, Minus, Plus, Radical } from 'lucide-react';
 import { OnboardingCard } from './Onboarding';
 import { ReactNode } from 'react';
 import { Subtitle } from '../typography/Subtitle.styled';
 import Icon from '../icon';
 import IconButton from '../icon-button';
 import { useAppStore } from '@/store';
+import Button from '../button';
 
 export const eventSteps = [
   createStep({
@@ -45,87 +45,61 @@ export const cycleSteps = [
     title: 'Vote',
 
     children: (
-      <FlexRow>
-        <FlexColumn $gap="-4px" style={{ width: 16 }}>
-          <IconButton
-            $padding={0}
-            $color="secondary"
-            icon={{ src: `/icons/upvote-${useAppStore.getState().theme}.svg`, alt: 'Upvote arrow' }}
-            $width={16}
-            $height={16}
-          />
-          <IconButton
-            $padding={0}
-            $color="secondary"
-            icon={{
-              src: `/icons/downvote-${useAppStore.getState().theme}.svg`,
-              alt: 'Downvote arrow',
-            }}
-            $width={16}
-            $height={16}
-          />
-        </FlexColumn>
+      <>
+        <FlexRow>
+          <Button style={{ padding: '4px 4px', borderRadius: 0 }}>
+            <Minus height={16} width={16} strokeWidth={3} />
+          </Button>
+          <Body>0</Body>
+          <Button style={{ padding: '4px 4px', borderRadius: 0 }}>
+            <Plus height={16} width={16} strokeWidth={3} />
+          </Button>
+        </FlexRow>
         <Body>Upvote or downvote a vote item.</Body>
-      </FlexRow>
+      </>
     ),
   }),
-  createStep({
-    target: 'save',
-    title: 'Save Your Votes',
-    children: <Body>You must click this button or your votes will not be recorded.</Body>,
-  }),
   createStep({
     target: 'hearts',
     title: 'Information',
     children: (
-      <>
-        <Body>View vote item.</Body>
-        <FlexRow>
-          <Icon>
-            <Heart fill="#ff0000" />
-          </Icon>
-          <Body>Current number of hearts allocated to this vote item.</Body>
-        </FlexRow>
-      </>
+      <Body>
+        <Heart className="inline align-top" fill="#ff0000" /> Current number of hearts allocated to
+        this vote item.
+      </Body>
     ),
   }),
+  createStep({
+    target: 'save',
+    title: 'Save Your Votes',
+    children: <Body>You must click this button or your votes will not be recorded.</Body>,
+  }),
   createStep({
     target: 'plurality',
     title: 'Voting Mechanisms',
     placement: 'center',
     children: (
-      <FlexRow>
+      <Body>
         <IconButton
           $padding={0}
           $color="secondary"
           icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality score icon' }}
           $width={24}
           $height={24}
-        />
-        <Body>
-          Plurality score, unlike quadratic score, considers pre-existing participant relationships
-        </Body>
-      </FlexRow>
+        />{' '}
+        Plurality score, unlike quadratic score, considers pre-existing participant relationships
+      </Body>
     ),
   }),
   createStep({
     target: 'expand',
     title: 'Expand a vote item',
 
     children: (
-      <FlexRow>
-        <IconButton
-          $padding={0}
-          $color="secondary"
-          icon={{
-            src: `/icons/arrow-down-${useAppStore.getState().theme}.svg`,
-            alt: 'Arrow down icon',
-          }}
-          $width={24}
-          $height={24}
-        />
-        <Body>Click to view the vote item description and other useful information.</Body>
-      </FlexRow>
+      <Body>
+        Click <ChevronDown className="inline align-middle" /> to view the vote item description and
+        other useful information.
+      </Body>
     ),
   }),
 ];

diff --git a/packages/berlin/src/components/option/Option.tsx b/packages/berlin/src/components/option/Option.tsx
@@ -90,7 +90,7 @@ export default function Option({
   }, [option.fundingRequest, showFundingRequest]);
 
   return (
-    <article className="border-secondary grid w-full grid-cols-[1fr_auto] gap-4 border p-4">
+    <article className="border-secondary grid w-full grid-cols-[1fr_auto] gap-x-4 border p-4">
       <section className="col-span-1 flex flex-col gap-4">
         <Body>{option.title}</Body>
         {author && (
@@ -112,16 +112,16 @@ export default function Option({
           </span>
         )}
       </section>
-      <section className="col-start-1 col-end-3 flex flex-col justify-between md:col-start-2">
-        <section className="flex gap-1">
+      <section className="col-start-1 col-end-3 flex flex-col justify-between gap-10 md:col-start-2">
+        <section className="votes flex gap-1">
           <Button
             style={{ padding: '4px 4px', borderRadius: 0 }}
             onClick={onUnVote}
             disabled={numOfVotes === 0}
           >
             <Minus height={16} width={16} strokeWidth={3} />
           </Button>
-          <Body className="min-w-8 text-center">{numOfVotes}</Body>
+          <Body className="hearts min-w-8 text-center">{numOfVotes}</Body>
           <Button style={{ padding: '4px 4px', borderRadius: 0 }} onClick={onVote}>
             <Plus height={16} width={16} strokeWidth={3} />
           </Button>

diff --git a/packages/berlin/src/pages/Cycle.tsx b/packages/berlin/src/pages/Cycle.tsx
@@ -306,7 +306,7 @@ function Cycle() {
   return (
     <>
       <Onboarding steps={cycleSteps} type="cycle" />
-      <FlexColumn $gap="2rem" className="welcome hearts plurality">
+      <FlexColumn $gap="2rem" className="welcome plurality">
         <FlexColumn>
           <BackButton fallbackRoute={`/events/${eventId}/cycles`} />
           <Title>{currentCycle?.title}</Title>
@@ -356,17 +356,15 @@ function Cycle() {
               const userVote = localUserVotes.find((vote) => vote.optionId === option.id);
               const numOfVotes = userVote ? userVote.numOfVotes : 0;
               return (
-                <>
-                  <Option
-                    key={option.id}
-                    option={option}
-                    numOfVotes={numOfVotes}
-                    showFundingRequest={currentCycle.title === FINAL_QUESTION_TITLE}
-                    showScore={currentCycle.showScore}
-                    onVote={() => handleVoteWrapper(option.id)}
-                    onUnVote={() => handleUnVoteWrapper(option.id)}
-                  />
-                </>
+                <Option
+                  key={option.id}
+                  option={option}
+                  numOfVotes={numOfVotes}
+                  showFundingRequest={currentCycle.title === FINAL_QUESTION_TITLE}
+                  showScore={currentCycle.showScore}
+                  onVote={() => handleVoteWrapper(option.id)}
+                  onUnVote={() => handleUnVoteWrapper(option.id)}
+                />
               );
             })}
           </FlexColumn>