424 adjust berlin results page UI to match other pages (#441)

* Create results columns * Add results columns to results page * Add icons * Create tables for results and stats * Fixes * Remove unused import * Update order * Comment code for plurality score at cycle * Remove unused code * Update columns and table dist
lexicongovernance · May 13, 2024 · 2e4e09e · 2e4e09e
1 parent ccad72a
commit 2e4e09e
Show file tree

Hide file tree

Showing 26 changed files with 198 additions and 187 deletions.
diff --git a/packages/api/src/types/ForumQuestionType.ts b/packages/api/src/types/ForumQuestionType.ts
@@ -13,6 +13,7 @@ export type GetForumQuestionStatisticsResponse = {
       optionSubTitle: string;
       distinctGroups: number;
       listOfGroupNames: string[];
+      quadraticScore: string;
     }
   >;
 };

diff --git a/packages/berlin/public/icons/money-dark.svg b/packages/berlin/public/icons/money-dark.svg
diff --git a/packages/berlin/public/icons/money-light.svg b/packages/berlin/public/icons/money-light.svg
diff --git a/packages/berlin/public/icons/sqrt-dark.svg b/packages/berlin/public/icons/sqrt-dark.svg
diff --git a/packages/berlin/public/icons/sqrt-light.svg b/packages/berlin/public/icons/sqrt-light.svg
diff --git a/packages/berlin/src/components/cycle-columns/CycleColumns.styled.tsx b/packages/berlin/src/components/cycle-columns/CycleColumns.styled.tsx
@@ -53,7 +53,7 @@ export const Hearts = styled(FlexRow)`
   padding: 1.5rem;
 `;
 
-export const Plurality = styled(FlexRow)`
-  max-width: 5.5rem;
-  padding: 1.5rem;
-`;
+// export const Plurality = styled(FlexRow)`
+//   max-width: 5.5rem;
+//   padding: 1.5rem;
+// `;
diff --git a/packages/berlin/src/components/cycle-columns/CycleColumns.tsx b/packages/berlin/src/components/cycle-columns/CycleColumns.tsx
@@ -1,6 +1,6 @@
 import IconButton from '../icon-button';
 import { Body } from '../typography/Body.styled';
-import { Affiliation, Author, Card, Hearts, Plurality, Proposal } from './CycleColumns.styled';
+import { Affiliation, Author, Card, Hearts, Proposal } from './CycleColumns.styled';
 
 type CycleColumnsProps = {
   onColumnClick: (column: string) => void;
@@ -25,13 +25,13 @@ function CycleColumns({ onColumnClick }: CycleColumnsProps) {
           icon={{ src: `/icons/heart-full.svg`, alt: 'Full heart' }}
         />
       </Hearts>
-      <Plurality onClick={() => onColumnClick('voteScore')}>
+      {/* <Plurality onClick={() => onColumnClick('voteScore')}>
         <IconButton
           $padding={0}
           $color="secondary"
           icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality score' }}
         />
-      </Plurality>
+      </Plurality> */}
     </Card>
   );
 }

diff --git a/packages/berlin/src/components/option-card/OptionCard.styled.tsx b/packages/berlin/src/components/option-card/OptionCard.styled.tsx
@@ -45,7 +45,7 @@ export const Votes = styled(FlexRow)`
   padding: 1.5rem;
 `;
 
-export const Plurality = styled(FlexRow)`
-  max-width: 5.5rem;
-  padding: 1.5rem;
-`;
+// export const Plurality = styled(FlexRow)`
+//   max-width: 5.5rem;
+//   padding: 1.5rem;
+// `;
diff --git a/packages/berlin/src/components/option-card/OptionCard.tsx b/packages/berlin/src/components/option-card/OptionCard.tsx
@@ -1,12 +1,12 @@
-import { useMemo, useState } from 'react';
-import { Body } from '../typography/Body.styled';
-import { Affiliation, Author, Card, Votes, Plurality, Proposal } from './OptionCard.styled';
-import { FlexColumn } from '../containers/FlexColum.styled';
-import IconButton from '../icon-button';
-import { useAppStore } from '../../store';
-import { FlexRow } from '../containers/FlexRow.styled';
 import { QuestionOption } from 'api';
+import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useAppStore } from '../../store';
+import { FlexColumn } from '../containers/FlexColum.styled';
+import { FlexRow } from '../containers/FlexRow.styled';
+import IconButton from '../icon-button';
+import { Body } from '../typography/Body.styled';
+import { Affiliation, Author, Card, Proposal, Votes } from './OptionCard.styled';
 
 type OptionCardProps = {
   option: QuestionOption;
@@ -18,10 +18,10 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
   const { eventId, cycleId } = useParams();
   const theme = useAppStore((state) => state.theme);
   const navigate = useNavigate();
-  const formattedPluralityScore = useMemo(() => {
-    const score = parseFloat(String(option.voteScore));
-    return score % 1 === 0 ? score.toFixed(0) : score.toFixed(1);
-  }, [option.voteScore]);
+  // const formattedPluralityScore = useMemo(() => {
+  //   const score = parseFloat(String(option.voteScore));
+  //   return score % 1 === 0 ? score.toFixed(0) : score.toFixed(1);
+  // }, [option.voteScore]);
 
   const [expanded, setExpanded] = useState(false);
 
@@ -75,9 +75,9 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
             </FlexColumn>
             <Body>{numOfVotes}</Body>
           </Votes>
-          <Plurality>
+          {/* <Plurality>
             <Body>{formattedPluralityScore}</Body>
-          </Plurality>
+          </Plurality> */}
         </FlexRow>
         <FlexColumn className="description" $gap="1.5rem">
           {option.optionSubTitle && <Body>{option.optionSubTitle}</Body>}

diff --git a/packages/berlin/src/components/result-card/ResultCard.styled.tsx b/packages/berlin/src/components/result-card/ResultCard.styled.tsx
@@ -1,37 +1,18 @@
 import styled from 'styled-components';
+import { Grid } from '../containers/Grid.styled';
 
-export const Card = styled.article<{ $expanded: boolean }>`
-  border-radius: 1rem;
-  border: 1px solid var(--color-black);
-  color: var(--color-white);
+export const Card = styled(Grid)<{ $expanded: boolean }>`
   cursor: pointer;
+  border-bottom: 1px solid var(--color-black);
+  grid-template-columns: auto repeat(3, 48px) 80px;
   overflow: hidden;
-  padding: 2rem;
+  padding: 1.5rem;
   position: relative;
   transition: height 0.3s ease-in-out;
   width: 100%;
 
-  .statistics {
+  .description {
     display: ${(props) => (props.$expanded ? 'flex' : 'none')};
-  }
-`;
-export const Badge = styled.div<{ $type: 'gold' | 'silver' | 'bronze' }>`
-  align-items: center;
-  background-image: ${(props) => props.$type && `url('/icons/badge-${props.$type}.svg')`};
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  display: flex;
-  height: 2rem;
-  width: 2rem;
-`;
-
-export const List = styled.ul`
-  list-style: none;
-`;
-export const ListItem = styled.li`
-  padding-left: 1rem;
-  &::before {
-    content: '•  ';
+    grid-column: 1/6;
   }
 `;
diff --git a/packages/berlin/src/components/result-card/ResultCard.tsx b/packages/berlin/src/components/result-card/ResultCard.tsx
@@ -1,5 +1,5 @@
 // React and third-party libraries
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 // Store
 import { useAppStore } from '../../store';
@@ -9,16 +9,13 @@ import { Body } from '../typography/Body.styled';
 import { Bold } from '../typography/Bold.styled';
 import { FlexColumn } from '../containers/FlexColum.styled';
 import { FlexRow } from '../containers/FlexRow.styled';
-import { Subtitle } from '../typography/Subtitle.styled';
 import IconButton from '../icon-button';
 
 // Styled Components
-import { Badge, Card, List, ListItem } from './ResultCard.styled';
-import { Separator } from '../separator';
+import { Card } from './ResultCard.styled';
 
 type ResultCardProps = {
   $expanded: boolean;
-  index: number;
   option: {
     optionTitle: string;
     pluralityScore: string;
@@ -27,92 +24,51 @@ type ResultCardProps = {
     optionSubTitle: string;
     distinctGroups: number;
     listOfGroupNames: string[];
+    quadraticScore: string;
     id: string;
   };
   onClick: () => void;
 };
 
-function ResultCard({ $expanded, option, index, onClick }: ResultCardProps) {
-  const [groupsExpanded, setGroupsExpanded] = useState(false);
+function ResultCard({ $expanded, option, onClick }: ResultCardProps) {
   const theme = useAppStore((state) => state.theme);
+
+  const formattedQuadraticScore = useMemo(() => {
+    const score = parseFloat(option.quadraticScore);
+    return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
+  }, [option.quadraticScore]);
+
   const formattedPluralityScore = useMemo(() => {
     const score = parseFloat(option.pluralityScore);
     return score % 1 === 0 ? score.toFixed(0) : score.toFixed(3);
   }, [option.pluralityScore]);
 
-  const handleGroupsClick = (
-    e:
-      | React.MouseEvent<HTMLButtonElement, MouseEvent>
-      | React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    e.stopPropagation();
-    setGroupsExpanded(!groupsExpanded);
-  };
-
   return (
-    <Card $expanded={$expanded} onClick={onClick}>
-      <FlexColumn $gap="1rem">
-        {index === 0 && <Badge $type="gold" />}
-        {index === 1 && <Badge $type="silver" />}
-        {index === 2 && <Badge $type="bronze" />}
-        <FlexRow $justify="space-between">
-          <FlexRow $gap="0.5rem">
-            <Subtitle>{option.optionTitle}</Subtitle>
-          </FlexRow>
-          <IconButton
-            $padding={0}
-            $color="secondary"
-            icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
-            $flipVertical={$expanded}
-          />
-        </FlexRow>
-        <FlexRow>
-          <Body>
-            <Bold>Plurality score:</Bold> {formattedPluralityScore}
-          </Body>
-        </FlexRow>
-        <FlexColumn className="statistics">
-          <FlexRow>
-            <Body>
-              <Bold>Distinct voters:</Bold> {option.distinctUsers}
-            </Body>
-          </FlexRow>
-          <FlexRow>
-            <Body>
-              <Bold>Allocated hearts:</Bold> {option.allocatedHearts}
-            </Body>
-          </FlexRow>
-          <FlexRow>
-            <Body>
-              <Bold>Distinct groups:</Bold> {option.distinctGroups}
-            </Body>
-          </FlexRow>
-          <FlexColumn onClick={(e) => handleGroupsClick(e)} $gap="0.5rem">
-            <FlexRow $gap="0.15rem">
-              <Body>
-                <Bold>Group names:</Bold>
-              </Body>
-              <IconButton
-                $padding={4}
-                $color="secondary"
-                onClick={(e) => handleGroupsClick(e)}
-                icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
-                $flipVertical={groupsExpanded}
-              />
-            </FlexRow>
-            {groupsExpanded && (
-              <Body>
-                <List>
-                  {option.listOfGroupNames.sort().map((name) => (
-                    <ListItem key={name}>{name}</ListItem>
-                  ))}
-                </List>
-              </Body>
-            )}
-          </FlexColumn>
-        </FlexColumn>
-        <Separator />
-        {option.optionSubTitle && <Body>{option.optionSubTitle}</Body>}
+    <Card $expanded={$expanded} onClick={onClick} $rowgap="2rem">
+      <FlexRow>
+        <IconButton
+          $padding={0}
+          $color="secondary"
+          icon={{ src: `/icons/arrow-down-${theme}.svg`, alt: '' }}
+          $flipVertical={$expanded}
+        />
+        <Body>{option.optionTitle}</Body>
+      </FlexRow>
+      <Body>{option.allocatedHearts}</Body>
+      <Body>{formattedQuadraticScore}</Body>
+      <Body>{formattedPluralityScore}</Body>
+      <Body>$ 10.000</Body>
+      <FlexColumn className="description">
+        <Body>{option.optionSubTitle}</Body>
+        <Body>
+          <Bold>Distinct voters:</Bold> {option.distinctUsers}
+        </Body>
+        <Body>
+          <Bold>Distinct groups:</Bold> {option.distinctGroups}
+        </Body>
+        <Body>
+          <Bold>Group names:</Bold> {option.listOfGroupNames.join(', ')}
+        </Body>
       </FlexColumn>
     </Card>
   );

diff --git a/packages/berlin/src/components/results-columns/ResultsColumns.styled.tsx b/packages/berlin/src/components/results-columns/ResultsColumns.styled.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import { Grid } from '../containers/Grid.styled';
+
+export const Card = styled(Grid)`
+  border-bottom: 2px solid var(--color-black);
+  padding: 1.5rem;
+  grid-template-columns: auto repeat(3, 48px) 80px;
+`;
diff --git a/packages/berlin/src/components/results-columns/ResultsColumns.tsx b/packages/berlin/src/components/results-columns/ResultsColumns.tsx
@@ -0,0 +1,35 @@
+import { useAppStore } from '../../store';
+import IconButton from '../icon-button';
+import { Bold } from '../typography/Bold.styled';
+import { Card } from './ResultsColumns.styled';
+
+function ResultsColumns() {
+  const theme = useAppStore((state) => state.theme);
+  return (
+    <Card>
+      <Bold>Title</Bold>
+      <IconButton
+        $padding={0}
+        $color="secondary"
+        icon={{ src: `/icons/heart-full.svg`, alt: 'Hearts' }}
+      />
+      <IconButton
+        $padding={0}
+        $color="secondary"
+        icon={{ src: `/icons/sqrt-${theme}.svg`, alt: 'Quadratic score' }}
+      />
+      <IconButton
+        $padding={0}
+        $color="secondary"
+        icon={{ src: `/icons/plurality-score.svg`, alt: 'Plurality score' }}
+      />
+      <IconButton
+        $padding={0}
+        $color="secondary"
+        icon={{ src: `/logos/arbitrum-${theme}.svg`, alt: 'Arbitrum' }}
+      />
+    </Card>
+  );
+}
+
+export default ResultsColumns;
diff --git a/packages/berlin/src/components/results-columns/index.ts b/packages/berlin/src/components/results-columns/index.ts
@@ -0,0 +1 @@
+export { default } from './ResultsColumns';
diff --git a/packages/berlin/src/components/stat-card/StatCard.styled.tsx b/packages/berlin/src/components/stat-card/StatCard.styled.tsx
diff --git a/packages/berlin/src/components/stat-card/StatCard.tsx b/packages/berlin/src/components/stat-card/StatCard.tsx
diff --git a/packages/berlin/src/components/stat-card/index.ts b/packages/berlin/src/components/stat-card/index.ts