Skip to content

Commit

Permalink
710 new results page (#712)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@camilovegag
camilovegag authored Aug 2, 2024
1 parent ef3ba48 commit 47ea73e
Show file tree
Hide file tree
Showing 5 changed files with 281 additions and 151 deletions.
6 changes: 3 additions & 3 deletions packages/api/src/types/Questions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
147 changes: 43 additions & 104 deletions packages/berlin/src/components/onboarding/Steps.tsx
View file
Original file line number Diff line number Diff line change
@@ -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({
Expand Down Expand Up @@ -45,87 +42,55 @@ 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>
<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>
<Body>
<img src="/icons/plurality-score.svg" className="inline align-bottom" /> 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>
),
}),
];
Expand All @@ -143,28 +108,15 @@ export const resultsSteps = [
title: 'Icons',
children: (
<>
<FlexRow>
<Icon>
<Radical />
</Icon>
<Body>Quadratic score</Body>
</FlexRow>
<FlexRow>
<Icon>
<Heart fill="#ff0000" />
</Icon>
<Body>Hearts received by a vote item</Body>
</FlexRow>
<FlexRow>
<IconButton
$padding={0}
$color="secondary"
icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality icon' }}
$width={24}
$height={24}
/>
<Body>Plurality score</Body>
</FlexRow>
<Body>
<img src="/icons/plurality-score.svg" className="inline align-bottom" /> Plurality score
</Body>
<Body>
<Radical className="inline" /> Quadratic score
</Body>
<Body>
<Heart className="inline" fill="#ff0000" /> Hearts received by a vote item
</Body>
</>
),
}),
Expand All @@ -173,23 +125,10 @@ export const resultsSteps = [
placement: 'center',
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>
Clicking this icon will display 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>
),
}),
];
Expand Down
10 changes: 5 additions & 5 deletions packages/berlin/src/components/option/Option.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand All @@ -112,23 +112,23 @@ 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>
</section>
<section className="flex w-full justify-end" onClick={handleChevronClick}>
<ChevronDown
className={`cursor-pointer transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
className={`expand cursor-pointer transition-transform duration-300 ${isExpanded ? 'rotate-180' : ''}`}
/>
</section>
</section>
Expand Down
20 changes: 9 additions & 11 deletions packages/berlin/src/pages/Cycle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit 47ea73e

Please sign in to comment.