lexicongovernance · camilovegag · May 7, 2024 · May 2, 2024 · May 3, 2024 · May 7, 2024
diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
@@ -18,7 +18,7 @@ import Events from './pages/Events.tsx';
 import Holding from './pages/Holding';
 import Landing from './pages/Landing';
 import Onboarding from './pages/Onboarding';
-import Option from './pages/Option.tsx';
+import Comments from './pages/Comments.tsx';
 import PassportPopupRedirect from './pages/Popup';
 import PublicGroupRegistration from './pages/PublicGroupRegistration.tsx';
 import Register from './pages/Register';
@@ -215,7 +215,7 @@ const router = (queryClient: QueryClient) =>
                     },
                     {
                       path: ':cycleId/options/:optionId',
-                      Component: Option,
+                      Component: Comments,
                     },
                   ],
                 },

diff --git a/packages/berlin/src/components/comment-card/CommentCard.styled.tsx b/packages/berlin/src/components/comment-card/CommentCard.styled.tsx
@@ -1,21 +1,31 @@
 import styled from 'styled-components';
-import { FlexColumn } from '../containers/FlexColum.styled';
 import { Body } from '../typography/Body.styled';
+import { Grid } from '../containers/Grid.styled';
 
-export const Card = styled(FlexColumn)`
-  border-radius: 1rem;
-  border: 1px solid var(--color-black);
+export const Card = styled(Grid)`
+  align-items: flex-start;
+  border-bottom: 1px solid var(--color-black);
   overflow: hidden;
-  padding: 2rem;
+  padding: 1.5rem;
   width: 100%;
-  gap: 0.5rem;
+  grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) 56px;
+
+  @media (min-width: 600px) {
+    grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) minmax(100px, 150px) 56px;
+  }
 `;
 
-export const Username = styled(Body)`
+export const Comment = styled(Body)``;
+
+export const Author = styled(Body)`
   font-weight: 600;
 `;
 
 export const FormattedDate = styled(Body)`
   color: #878787;
+  display: none;
   font-size: 14px;
+  @media (min-width: 600px) {
+    display: flex;
+  }
 `;
diff --git a/packages/berlin/src/components/comment-card/CommentCard.tsx b/packages/berlin/src/components/comment-card/CommentCard.tsx
@@ -13,14 +13,13 @@
 import { useAppStore } from '../../store';
 
 // Components
-import { Body } from '../typography/Body.styled';
 import { FlexRow } from '../containers/FlexRow.styled';
 import Button from '../button';
 import Dialog from '../dialog';
 import IconButton from '../icon-button';
 
 // Styled Components
-import { Card, FormattedDate, Username } from './CommentCard.styled';
+import { Author, Card, Comment, FormattedDate } from './CommentCard.styled';
 
 type CommentCardProps = {
   comment: GetCommentsResponse[number];
@@ -56,7 +55,7 @@
      const currentUserLiked = commentLikes.some((like) => like.userId === user?.id);
      setIsCommentLiked(currentUserLiked);
    }
  }, [commentLikes]);

  const { mutate: postLikeMutation } = useMutation({
    mutationFn: postLike,
@@ -102,30 +101,20 @@
   };
 
   return (
-    <Card key={comment.id}>
-      <FlexRow $justify="space-between">
-        <Username>{comment.user?.username}</Username>
-        <Dialog
-          trigger={
-            <IconButton
-              icon={{ src: `/icons/trash-${theme}.svg`, alt: 'Trash bin icon' }}
-              $color="secondary"
-              $height={20}
-              $padding={0}
-              $width={20}
-            />
-          }
-          title="Are you sure?"
-          description="This action cannot be undone. This will permanently delete your comment from our servers."
-          onActionClick={handleTrashClick}
-          actionButtonText="Delete comment"
-        />
+    <Card $columns={4}>
+      <FlexRow>
+        <Comment>{comment.value}</Comment>
       </FlexRow>
+      <Author>@{comment.user?.username}</Author>
       <FormattedDate>{formattedDate}</FormattedDate>
-      <Body>{comment.value}</Body>
-      <FlexRow $gap="0.5rem" $align="center" $justify="flex-end">
+      <FlexRow
+        $gap="0.5rem"
+        $align="center"
+        $justify="flex-end"
+        onClick={handleLikeClick}
+        style={{ userSelect: 'none' }}
+      >
         <IconButton
-          onClick={handleLikeClick}
           icon={{
             src: isCommentLiked ? `/icons/thumb-up-active.svg` : `/icons/thumb-up-${theme}.svg`,
             alt: 'Thumb up icon',
@@ -135,10 +124,27 @@
           $height={20}
           $width={20}
         />
-        <Button $variant="text" $color="secondary" disabled>
+        <Button $variant="text" $color="secondary">
           ({commentLikes?.length})
         </Button>
       </FlexRow>
+      {comment.user?.username === user?.username && (
+        <Dialog
+          trigger={
+            <IconButton
+              icon={{ src: `/icons/trash-${theme}.svg`, alt: 'Trash bin icon' }}
+              $color="secondary"
+              $height={20}
+              $padding={0}
+              $width={20}
+            />
+          }
+          title="Are you sure?"
+          description="This action cannot be undone. This will permanently delete your comment from our servers."
+          onActionClick={handleTrashClick}
+          actionButtonText="Delete comment"
+        />
+      )}
     </Card>
   );
 }

diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+import { Grid } from '../containers/Grid.styled';
+import { Body } from '../typography/Body.styled';
+
+export const Card = styled(Grid)`
+  border-bottom: 2px solid var(--color-black);
+  padding: 1.5rem;
+  grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) 56px;
+
+  @media (min-width: 600px) {
+    grid-template-columns: minmax(200px, 600px) minmax(100px, 150px) minmax(100px, 150px) 56px;
+  }
+`;
+
+export const Comment = styled(Body)`
+  font-weight: bold;
+`;
+
+export const Author = styled(Body)`
+  font-weight: bold;
+`;
+export const Date = styled(Body)`
+  font-weight: bold;
+  display: none;
+  @media (min-width: 600px) {
+    display: flex;
+  }
+`;
+
+export const Likes = styled(Body)``;
diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
@@ -0,0 +1,14 @@
+import { Author, Card, Comment, Date, Likes } from './CommentsColumns.styled';
+
+function CycleColumns() {
+  return (
+    <Card $columns={4}>
+      <Comment>Comment</Comment>
+      <Author>Author</Author>
+      <Date>Date</Date>
+      <Likes>Likes</Likes>
+    </Card>
+  );
+}
+
+export default CycleColumns;
diff --git a/packages/berlin/src/components/comments-columns/index.ts b/packages/berlin/src/components/comments-columns/index.ts
@@ -0,0 +1 @@
+export { default } from './CommentsColumns';
diff --git a/packages/berlin/src/components/icon-button/IconButton.styled.tsx b/packages/berlin/src/components/icon-button/IconButton.styled.tsx
@@ -1,8 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const IconContainer = styled.div<{ $height: number; $width: number }>`
+export const IconContainer = styled.div<{ $height: number; $width: number; $disabled: boolean }>`
   height: ${(props) => (props.$height && `${props.$height}px`) || '24px'};
   width: ${(props) => (props.$width && `${props.$width}px`) || '24px'};
+
+  ${(props) =>
+    props.$disabled &&
+    css`
+      background-color: var(--color-white);
+    `}
 `;
 
 export const Icon = styled.img<{ $flipVertical?: boolean }>`

diff --git a/packages/berlin/src/components/icon-button/IconButton.tsx b/packages/berlin/src/components/icon-button/IconButton.tsx
@@ -26,7 +26,7 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
         disabled={disabled}
         {...props}
       >
-        <IconContainer $height={$height || 24} $width={$height || 24}>
+        <IconContainer $height={$height || 24} $width={$height || 24} $disabled={!!disabled}>
           <Icon
             src={icon.src}
             alt={icon.alt}

diff --git a/packages/berlin/src/components/option-card/OptionCard.styled.tsx b/packages/berlin/src/components/option-card/OptionCard.styled.tsx
@@ -39,7 +39,7 @@ export const Affiliation = styled(FlexRow)`
   }
 `;
 
-export const Hearts = styled(FlexRow)`
+export const Votes = styled(FlexRow)`
   gap: 0.5rem;
   max-width: 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,6 +1,6 @@
 import { useMemo, useState } from 'react';
 import { Body } from '../typography/Body.styled';
-import { Affiliation, Author, Card, Hearts, Plurality, Proposal } from './OptionCard.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';
@@ -53,7 +53,7 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
           <Affiliation>
             <Body>{option.user?.group?.name}</Body>
           </Affiliation>
-          <Hearts>
+          <Votes>
             <FlexColumn $gap="-4px">
               <IconButton
                 $padding={0}
@@ -74,7 +74,7 @@ function OptionCard({ option, numOfVotes, onVote, onUnvote }: OptionCardProps) {
               />
             </FlexColumn>
             <Body>{numOfVotes}</Body>
-          </Hearts>
+          </Votes>
           <Plurality>
             <Body>{formattedPluralityScore}</Body>
           </Plurality>

diff --git a/packages/berlin/src/pages/Option.tsx → packages/berlin/src/pages/Comments.tsx b/packages/berlin/src/pages/Option.tsx → packages/berlin/src/pages/Comments.tsx
@@ -20,18 +20,19 @@ import { ResponseUserVotesType } from '../types/CycleType';
 import { useAppStore } from '../store';
 
 // Components
+import { Bold } from '../components/typography/Bold.styled';
 import { FlexColumn } from '../components/containers/FlexColum.styled';
 import { FlexRow } from '../components/containers/FlexRow.styled';
 import { Form } from '../components/containers/Form.styled';
-import { Title } from '../components/typography/Title.styled';
+import { Subtitle } from '../components/typography/Subtitle.styled';
 import BackButton from '../components/back-button';
 import Button from '../components/button';
 import CommentCard from '../components/comment-card';
+import CommentsColumns from '../components/comments-columns';
 import IconButton from '../components/icon-button';
 import Textarea from '../components/textarea';
-import { Bold } from '../components/typography/Bold.styled';
 
-function Option() {
+function Comments() {
   const theme = useAppStore((state) => state.theme);
   const queryClient = useQueryClient();
   const { cycleId, optionId } = useParams();
@@ -140,32 +141,33 @@ function Option() {
   return (
     <FlexColumn $gap="2rem">
       <BackButton />
-      <Title>{option?.optionTitle}</Title>
-      <FlexRow $gap="0.25rem" $wrap>
-        {localOptionHearts > 0 ? (
-          Array.from({ length: localOptionHearts }).map((_, id) => (
-            <img key={id} src="/icons/heart-full.svg" height={24} width={24} alt="Full Heart" />
-          ))
-        ) : (
-          <img src="/icons/heart-empty.svg" height={24} width={24} alt="Empty Heart" />
-        )}
-      </FlexRow>
-      <FlexRow>
-        <IconButton
-          onClick={() => handleUnvoteWrapper(option?.id ?? '')}
-          disabled={localOptionHearts === 0}
-          $padding={6}
-          $color="secondary"
-          icon={{ src: `/icons/unvote-${theme}.svg`, alt: 'Unvote icon' }}
-        />
-        <IconButton
-          onClick={() => handleVoteWrapper(option?.id ?? '')}
-          disabled={availableHearts === 0}
-          $padding={6}
-          $color="primary"
-          icon={{ src: `/icons/vote-${theme}.svg`, alt: 'Vote icon' }}
-        />
+      <FlexRow $align="center">
+        <FlexRow style={{ maxWidth: '4rem' }}>
+          <FlexColumn $gap="-4px" style={{ maxWidth: '1rem' }}>
+            <IconButton
+              $padding={0}
+              $color="secondary"
+              icon={{ src: `/icons/upvote-${theme}.svg`, alt: 'Upvote arrow' }}
+              onClick={() => handleVoteWrapper(option?.id ?? '')}
+              $width={16}
+              $height={16}
+              disabled={availableHearts === 0}
+            />
+            <IconButton
+              $padding={0}
+              $color="secondary"
+              icon={{ src: `/icons/downvote-${theme}.svg`, alt: 'Downvote arrow' }}
+              onClick={() => handleUnvoteWrapper(option?.id ?? '')}
+              $width={16}
+              $height={16}
+              disabled={localOptionHearts === 0}
+            />
+          </FlexColumn>
+          <Subtitle>{localOptionHearts}</Subtitle>
+        </FlexRow>
+        <Subtitle>{option?.optionTitle}</Subtitle>
       </FlexRow>
+
       <Button onClick={handleSaveVotesWrapper} disabled={!votesAreDifferent}>
         Save votes
       </Button>
@@ -180,7 +182,7 @@ function Option() {
       {sortedComments.length > 0 && (
         <>
           <FlexRow $justify="space-between">
-            <Title>Total comments ({sortedComments.length})</Title>
+            <Subtitle>Total comments ({sortedComments.length})</Subtitle>
             <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
               <Bold>Sort</Bold>
               <IconButton
@@ -196,13 +198,16 @@ function Option() {
               />
             </div>
           </FlexRow>
-          {sortedComments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} />
-          ))}
+          <FlexColumn>
+            <CommentsColumns />
+            {sortedComments.map((comment) => (
+              <CommentCard key={comment.id} comment={comment} />
+            ))}
+          </FlexColumn>
         </>
       )}
     </FlexColumn>
   );
 }
 
-export default Option;
+export default Comments;