Merge branch '445-update-secret-groups-page' into diego/support-multi…

…ple-groups-per-category

packages/api/src/types/ForumQuestionType.ts

@@ -13,6 +13,7 @@ export type GetForumQuestionStatisticsResponse = {
       optionSubTitle: string;
       distinctGroups: number;
       listOfGroupNames: string[];
+      quadraticScore: string;
     }
   >;
 };

packages/api/src/types/GroupType.ts

@@ -1,15 +1,18 @@
 export type GetGroupsResponse = {
   id: string;
   name: string;
-  description: string;
+  description: string | null;
+  secret: string | null;
   createdAt: string;
   updatedAt: string;
   groupCategoryId?: string;
   groupCategory?: {
-    createdAt: string;
-    eventId: string;
     id: string;
     name: string;
+    eventId: string;
+    userCanCreate: boolean;
+    userCanView: boolean;
+    createdAt: string;
     updatedAt: string;
   };
 };

packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx → packages/berlin/src/components/columns/comments-columns/CommentsColumns.styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
-import { Grid } from '../containers/Grid.styled';
-import { Body } from '../typography/Body.styled';
+import { Grid } from '../../containers/Grid.styled';
+import { Body } from '../../typography/Body.styled';
 
 export const Card = styled(Grid)`
   border-bottom: 2px solid var(--color-black);

packages/berlin/src/components/cycle-columns/CycleColumns.styled.tsx → packages/berlin/src/components/columns/cycle-columns/CycleColumns.styled.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { FlexRow } from '../containers/FlexRow.styled';
+import { FlexRow } from '../../containers/FlexRow.styled';
 
 export const Card = styled(FlexRow)`
   border-bottom: 2px solid var(--color-black);
@@ -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;
+// `;

packages/berlin/src/components/cycle-columns/CycleColumns.tsx → packages/berlin/src/components/columns/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 IconButton from '../../icon-button';
+import { Body } from '../../typography/Body.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>
   );
 }

packages/berlin/src/components/columns/groups-columns/GroupsColumns.styled.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import { Body } from '../../typography/Body.styled';
+import { Grid } from '../../containers/Grid.styled';
+
+export const Card = styled(Grid)`
+  border-bottom: 2px solid var(--color-black);
+  gap: 0;
+  grid-template-columns: repeat(2, 1fr) 82px;
+  width: 100%;
+  padding: 1.5rem;
+`;
+
+export const Group = styled(Body)`
+  font-weight: bold;
+`;
+
+export const Secret = styled(Body)`
+  font-weight: bold;
+`;
+
+export const Action = styled(Body)`
+  font-weight: bold;
+`;

packages/berlin/src/components/columns/groups-columns/GroupsColumns.tsx

@@ -0,0 +1,13 @@
+import { Action, Card, Group, Secret } from './GroupsColumns.styled';
+
+function GroupsColumns() {
+  return (
+    <Card>
+      <Group>Group</Group>
+      <Secret>Secret</Secret>
+      <Action>Action</Action>
+    </Card>
+  );
+}
+
+export default GroupsColumns;

packages/berlin/src/components/columns/groups-columns/index.ts

@@ -0,0 +1 @@
+export { default } from './GroupsColumns';

packages/berlin/src/components/columns/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;
+`;

packages/berlin/src/components/columns/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;

packages/berlin/src/components/columns/results-columns/index.ts

@@ -0,0 +1 @@
+export { default } from './ResultsColumns';

packages/berlin/src/components/columns/stats-columns/StatsColumns.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 240px;
+`;

packages/berlin/src/components/columns/stats-columns/StatsColumns.tsx

@@ -0,0 +1,13 @@
+import { Bold } from '../../typography/Bold.styled';
+import { Card } from './StatsColumns.styled';
+
+function StatsColumns() {
+  return (
+    <Card>
+      <Bold>Statistic</Bold>
+      <Bold>Value</Bold>
+    </Card>
+  );
+}
+
+export default StatsColumns;

packages/berlin/src/components/columns/stats-columns/index.ts

@@ -0,0 +1 @@
+export { default } from './StatsColumns';

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;
+// `;

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>}