From 47ea73ea538a976eadcd007ba4ec9d437e3a61d3 Mon Sep 17 00:00:00 2001 From: Camilo Vega <59750365+camilovegag@users.noreply.github.com> Date: Fri, 2 Aug 2024 03:24:44 -0500 Subject: [PATCH] 710 new results page (#712) * Update types * First glance at new design * Fix onboarding * Fix step 2 of cycle onboarding * Real fix for onboarding * Actually fix cycle steps * Simplify steps a lot * Add expanded to results card * Change gap * Add statistics --- packages/api/src/types/Questions.ts | 6 +- .../src/components/onboarding/Steps.tsx | 147 +++-------- .../berlin/src/components/option/Option.tsx | 10 +- packages/berlin/src/pages/Cycle.tsx | 20 +- packages/berlin/src/pages/Results.tsx | 249 ++++++++++++++++-- 5 files changed, 281 insertions(+), 151 deletions(-) diff --git a/packages/api/src/types/Questions.ts b/packages/api/src/types/Questions.ts index 3e9b1805..37bf1a6e 100644 --- a/packages/api/src/types/Questions.ts +++ b/packages/api/src/types/Questions.ts @@ -8,9 +8,9 @@ export type GetQuestionStatisticsResponse = { { title: string; pluralityScore: string; - distinctUsers: string; - allocatedHearts: string; - optionSubTitle: string; + distinctUsers: number; + allocatedHearts: number; + subTitle: string; distinctGroups: number; listOfGroupNames: string[]; quadraticScore: string; diff --git a/packages/berlin/src/components/onboarding/Steps.tsx b/packages/berlin/src/components/onboarding/Steps.tsx index 1f524160..3a820945 100644 --- a/packages/berlin/src/components/onboarding/Steps.tsx +++ b/packages/berlin/src/components/onboarding/Steps.tsx @@ -1,13 +1,10 @@ import { Body } from '../typography/Body.styled'; -import { FlexColumn } from '../containers/FlexColumn.styled'; +import { ChevronDown, Heart, Minus, Plus, Radical } from 'lucide-react'; import { FlexRow } from '../containers/FlexRow.styled'; -import { Heart, 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,67 +42,44 @@ export const cycleSteps = [ title: 'Vote', children: ( - - - - - + <> + + + 0 + + Upvote or downvote a vote item. - + ), }), - createStep({ - target: 'save', - title: 'Save Your Votes', - children: You must click this button or your votes will not be recorded., - }), createStep({ target: 'hearts', title: 'Information', children: ( - <> - View vote item. - - - - - Current number of hearts allocated to this vote item. - - + + Current number of hearts allocated to + this vote item. + ), }), + createStep({ + target: 'save', + title: 'Save Your Votes', + children: You must click this button or your votes will not be recorded., + }), createStep({ target: 'plurality', title: 'Voting Mechanisms', placement: 'center', children: ( - - - - Plurality score, unlike quadratic score, considers pre-existing participant relationships - - + + Plurality score, + unlike quadratic score, considers pre-existing participant relationships. + ), }), createStep({ @@ -113,19 +87,10 @@ export const cycleSteps = [ title: 'Expand a vote item', children: ( - - - Click to view the vote item description and other useful information. - + + Click to view the vote item description and + other useful information. + ), }), ]; @@ -143,28 +108,15 @@ export const resultsSteps = [ title: 'Icons', children: ( <> - - - - - Quadratic score - - - - - - Hearts received by a vote item - - - - Plurality score - + + Plurality score + + + Quadratic score + + + Hearts received by a vote item + ), }), @@ -173,23 +125,10 @@ export const resultsSteps = [ placement: 'center', title: 'Expand a vote item', children: ( - <> - - - - Clicking this icon will display the vote item description and other useful information. - - - + + Click to view the vote item description and + other useful information. + ), }), ]; diff --git a/packages/berlin/src/components/option/Option.tsx b/packages/berlin/src/components/option/Option.tsx index cacd7ead..ca7485d6 100644 --- 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 ( -
+
{option.title} {author && ( @@ -112,8 +112,8 @@ export default function Option({ )}
-
-
+
+
- {numOfVotes} + {numOfVotes}
diff --git a/packages/berlin/src/pages/Cycle.tsx b/packages/berlin/src/pages/Cycle.tsx index 109aaea0..45b9b76f 100644 --- a/packages/berlin/src/pages/Cycle.tsx +++ b/packages/berlin/src/pages/Cycle.tsx @@ -356,17 +356,15 @@ function Cycle() { const userVote = localUserVotes.find((vote) => vote.optionId === option.id); const numOfVotes = userVote ? userVote.numOfVotes : 0; return ( - <> -