From 88830d41f266e1e9700b3fc3f263e75a1647422c Mon Sep 17 00:00:00 2001
From: camilovegag <camilovegag@unisabana.edu.co>
Date: Thu, 2 May 2024 14:04:14 -0500
Subject: [PATCH 1/4] Rename Option to Comments

---
 packages/berlin/src/App.tsx                            | 4 ++--
 packages/berlin/src/pages/{Option.tsx => Comments.tsx} | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/berlin/src/pages/{Option.tsx => Comments.tsx} (99%)

diff --git a/packages/berlin/src/App.tsx b/packages/berlin/src/App.tsx
index f337c8c1..26f718a8 100644
--- 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/pages/Option.tsx b/packages/berlin/src/pages/Comments.tsx
similarity index 99%
rename from packages/berlin/src/pages/Option.tsx
rename to packages/berlin/src/pages/Comments.tsx
index dc084c69..2b99a906 100644
--- a/packages/berlin/src/pages/Option.tsx
+++ b/packages/berlin/src/pages/Comments.tsx
@@ -31,7 +31,7 @@ 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();
@@ -205,4 +205,4 @@ function Option() {
   );
 }
 
-export default Option;
+export default Comments;

From 776fa8e0859ccb6cc0b3e25534e338e1c7390cac Mon Sep 17 00:00:00 2001
From: camilovegag <camilovegag@unisabana.edu.co>
Date: Fri, 3 May 2024 11:46:40 -0500
Subject: [PATCH 2/4] Create Commens Columns

---
 .../CommentsColumns.styled.tsx                | 53 +++++++++++++++++++
 .../comments-columns/CommentsColumns.tsx      | 32 +++++++++++
 .../src/components/comments-columns/index.ts  |  1 +
 3 files changed, 86 insertions(+)
 create mode 100644 packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
 create mode 100644 packages/berlin/src/components/comments-columns/CommentsColumns.tsx
 create mode 100644 packages/berlin/src/components/comments-columns/index.ts

diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
new file mode 100644
index 00000000..fa254ed2
--- /dev/null
+++ b/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
@@ -0,0 +1,53 @@
+import styled from 'styled-components';
+import { FlexRow } from '../containers/FlexRow.styled';
+
+export const Card = styled(FlexRow)`
+  border-bottom: 2px solid var(--color-black);
+  gap: 0;
+  width: 100%;
+`;
+
+export const Comment = styled(FlexRow)`
+  flex: 1;
+  font-weight: bold;
+  min-width: 11rem;
+  padding: 1.5rem;
+  p {
+    cursor: pointer;
+  }
+`;
+
+export const Author = styled(FlexRow)`
+  display: none;
+  @media (min-width: 600px) {
+    display: flex;
+    font-weight: bold;
+    max-width: 10rem;
+    min-width: 8rem;
+    padding: 1.5rem;
+
+    p {
+      cursor: pointer;
+    }
+  }
+`;
+export const Date = styled(FlexRow)`
+  display: none;
+  @media (min-width: 600px) {
+    display: flex;
+    font-weight: bold;
+    max-width: 10rem;
+    min-width: 8rem;
+    padding: 1.5rem;
+
+    p {
+      cursor: pointer;
+    }
+  }
+`;
+
+export const Likes = styled(FlexRow)`
+  gap: 0.5rem;
+  max-width: 5rem;
+  padding: 1.5rem;
+`;
diff --git a/packages/berlin/src/components/comments-columns/CommentsColumns.tsx b/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
new file mode 100644
index 00000000..fb2ef8f8
--- /dev/null
+++ b/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
@@ -0,0 +1,32 @@
+import IconButton from '../icon-button';
+import { Body } from '../typography/Body.styled';
+import { Author, Card, Comment, Date, Likes } from './CommentsColumns.styled';
+
+type CycleColumnsProps = {
+  onColumnClick: (column: string) => void;
+};
+
+function CycleColumns({ onColumnClick }: CycleColumnsProps) {
+  return (
+    <Card>
+      <Comment>
+        <Body>Comment</Body>
+      </Comment>
+      <Author onClick={() => onColumnClick('author')}>
+        <Body>Author</Body>
+      </Author>
+      <Date>
+        <Body>Date</Body>
+      </Date>
+      <Likes onClick={() => onColumnClick('likes')}>
+        <IconButton
+          $padding={0}
+          $color="secondary"
+          icon={{ src: `/icons/thumb-up-active.svg`, alt: 'Thumbs up icon' }}
+        />
+      </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
new file mode 100644
index 00000000..26d6091a
--- /dev/null
+++ b/packages/berlin/src/components/comments-columns/index.ts
@@ -0,0 +1 @@
+export { default } from './CommentsColumns';

From 10fb36fb066178f4b9c76b2c79e1a176a5237081 Mon Sep 17 00:00:00 2001
From: camilovegag <camilovegag@unisabana.edu.co>
Date: Mon, 6 May 2024 19:40:01 -0500
Subject: [PATCH 3/4] Update layout and components

---
 .../comment-card/CommentCard.styled.tsx       | 24 +++++--
 .../components/comment-card/CommentCard.tsx   | 54 +++++++++-------
 .../CommentsColumns.styled.tsx                | 53 +++++----------
 .../comments-columns/CommentsColumns.tsx      | 30 ++-------
 .../icon-button/IconButton.styled.tsx         | 10 ++-
 .../src/components/icon-button/IconButton.tsx |  2 +-
 .../option-card/OptionCard.styled.tsx         |  2 +-
 .../src/components/option-card/OptionCard.tsx |  6 +-
 packages/berlin/src/pages/Comments.tsx        | 64 ++++++++++---------
 9 files changed, 116 insertions(+), 129 deletions(-)

diff --git a/packages/berlin/src/components/comment-card/CommentCard.styled.tsx b/packages/berlin/src/components/comment-card/CommentCard.styled.tsx
index 94e994a6..e5f389c3 100644
--- 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
index 56c03fb7..f8caaa61 100644
--- a/packages/berlin/src/components/comment-card/CommentCard.tsx
+++ b/packages/berlin/src/components/comment-card/CommentCard.tsx
@@ -13,14 +13,13 @@ import useUser from '../../hooks/useUser';
 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];
@@ -102,30 +101,20 @@ function CommentCard({ comment }: CommentCardProps) {
   };
 
   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 @@ function CommentCard({ comment }: CommentCardProps) {
           $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
index fa254ed2..bc12e7d7 100644
--- a/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
+++ b/packages/berlin/src/components/comments-columns/CommentsColumns.styled.tsx
@@ -1,53 +1,30 @@
 import styled from 'styled-components';
-import { FlexRow } from '../containers/FlexRow.styled';
+import { Grid } from '../containers/Grid.styled';
+import { Body } from '../typography/Body.styled';
 
-export const Card = styled(FlexRow)`
+export const Card = styled(Grid)`
   border-bottom: 2px solid var(--color-black);
-  gap: 0;
-  width: 100%;
-`;
-
-export const Comment = styled(FlexRow)`
-  flex: 1;
-  font-weight: bold;
-  min-width: 11rem;
   padding: 1.5rem;
-  p {
-    cursor: pointer;
+  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 Author = styled(FlexRow)`
-  display: none;
-  @media (min-width: 600px) {
-    display: flex;
-    font-weight: bold;
-    max-width: 10rem;
-    min-width: 8rem;
-    padding: 1.5rem;
+export const Comment = styled(Body)`
+  font-weight: bold;
+`;
 
-    p {
-      cursor: pointer;
-    }
-  }
+export const Author = styled(Body)`
+  font-weight: bold;
 `;
-export const Date = styled(FlexRow)`
+export const Date = styled(Body)`
+  font-weight: bold;
   display: none;
   @media (min-width: 600px) {
     display: flex;
-    font-weight: bold;
-    max-width: 10rem;
-    min-width: 8rem;
-    padding: 1.5rem;
-
-    p {
-      cursor: pointer;
-    }
   }
 `;
 
-export const Likes = styled(FlexRow)`
-  gap: 0.5rem;
-  max-width: 5rem;
-  padding: 1.5rem;
-`;
+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
index fb2ef8f8..27a451c4 100644
--- a/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
+++ b/packages/berlin/src/components/comments-columns/CommentsColumns.tsx
@@ -1,30 +1,12 @@
-import IconButton from '../icon-button';
-import { Body } from '../typography/Body.styled';
 import { Author, Card, Comment, Date, Likes } from './CommentsColumns.styled';
 
-type CycleColumnsProps = {
-  onColumnClick: (column: string) => void;
-};
-
-function CycleColumns({ onColumnClick }: CycleColumnsProps) {
+function CycleColumns() {
   return (
-    <Card>
-      <Comment>
-        <Body>Comment</Body>
-      </Comment>
-      <Author onClick={() => onColumnClick('author')}>
-        <Body>Author</Body>
-      </Author>
-      <Date>
-        <Body>Date</Body>
-      </Date>
-      <Likes onClick={() => onColumnClick('likes')}>
-        <IconButton
-          $padding={0}
-          $color="secondary"
-          icon={{ src: `/icons/thumb-up-active.svg`, alt: 'Thumbs up icon' }}
-        />
-      </Likes>
+    <Card $columns={4}>
+      <Comment>Comment</Comment>
+      <Author>Author</Author>
+      <Date>Date</Date>
+      <Likes>Likes</Likes>
     </Card>
   );
 }
diff --git a/packages/berlin/src/components/icon-button/IconButton.styled.tsx b/packages/berlin/src/components/icon-button/IconButton.styled.tsx
index 15c040cd..c9b5eae1 100644
--- 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
index c70555a7..bb495e6a 100644
--- 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
index 9f914cb0..87ef6664 100644
--- 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
index d75471fa..071f8b65 100644
--- 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/Comments.tsx b/packages/berlin/src/pages/Comments.tsx
index 2b99a906..8e0fe535 100644
--- a/packages/berlin/src/pages/Comments.tsx
+++ b/packages/berlin/src/pages/Comments.tsx
@@ -20,16 +20,18 @@ 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 { Subtitle } from '../components/typography/Subtitle.styled';
 import { Title } from '../components/typography/Title.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 Comments() {
   const theme = useAppStore((state) => state.theme);
@@ -140,32 +142,33 @@ function Comments() {
   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>
@@ -196,9 +199,12 @@ function Comments() {
               />
             </div>
           </FlexRow>
-          {sortedComments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} />
-          ))}
+          <FlexColumn>
+            <CommentsColumns />
+            {sortedComments.map((comment) => (
+              <CommentCard key={comment.id} comment={comment} />
+            ))}
+          </FlexColumn>
         </>
       )}
     </FlexColumn>

From fc5cd992482d110e9f0c4436f064d7ebc55b9661 Mon Sep 17 00:00:00 2001
From: camilovegag <camilovegag@unisabana.edu.co>
Date: Mon, 6 May 2024 19:42:34 -0500
Subject: [PATCH 4/4] Replace title with subtitle

---
 packages/berlin/src/pages/Comments.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/berlin/src/pages/Comments.tsx b/packages/berlin/src/pages/Comments.tsx
index 8e0fe535..2a1cba26 100644
--- a/packages/berlin/src/pages/Comments.tsx
+++ b/packages/berlin/src/pages/Comments.tsx
@@ -25,7 +25,6 @@ import { FlexColumn } from '../components/containers/FlexColum.styled';
 import { FlexRow } from '../components/containers/FlexRow.styled';
 import { Form } from '../components/containers/Form.styled';
 import { Subtitle } from '../components/typography/Subtitle.styled';
-import { Title } from '../components/typography/Title.styled';
 import BackButton from '../components/back-button';
 import Button from '../components/button';
 import CommentCard from '../components/comment-card';
@@ -183,7 +182,7 @@ function Comments() {
       {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