UI updates

tigran-hostaways · tigran-hostaways · commit 841c93b82714 · 2025-12-27T17:09:18.000+04:00
diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
@@ -68,13 +68,7 @@ export default function Comment({ comment, children, gravatar }: Props) {
             {author} {comment.isVerified && <CheckCircleFilled />} •
             <Date>{dayjs(comment.createdAt).format('DD MMM YYYY - HH:mm')}</Date>
           </Username>
-          <HeaderActions>
-            {comment.isOwn && (
-              <Delete onClick={() => dispatch(removeComment(comment))}>
-                <DeleteOutlined /> Delete
-              </Delete>
-            )}
-          </HeaderActions>
+          <HeaderActions></HeaderActions>
         </Header>
         <Body>{comment.body}</Body>
         <Actions>
@@ -112,6 +106,11 @@ export default function Comment({ comment, children, gravatar }: Props) {
           >
             <CommentOutlined /> {t('REPLY')}
           </Reply>
+          {comment.isOwn && (
+            <Delete onClick={() => dispatch(removeComment(comment))}>
+              <DeleteOutlined /> {t('DELETE')}
+            </Delete>
+          )}
         </Actions>
         {children}
       </Content>
diff --git a/src/components/Comments/index.tsx b/src/components/Comments/index.tsx
@@ -105,15 +105,15 @@ export default function Comments(props: Props) {
         <Title>
           {total} {total > 1 ? t('COMMENTS') : t('COMMENT')}
         </Title>
-        <SortContainer>
-          <SortButton $active={sort === 'desc'} onClick={() => handleSortChange('desc')}>
-            {t('NEWEST')}
-          </SortButton>
-          <SortButton $active={sort === 'asc'} onClick={() => handleSortChange('asc')}>
-            {t('OLDEST')}
-          </SortButton>
-        </SortContainer>
       </Header>
+      <SortContainer>
+        <SortButton $active={sort === 'desc'} onClick={() => handleSortChange('desc')}>
+          {t('NEWEST')}
+        </SortButton>
+        <SortButton $active={sort === 'asc'} onClick={() => handleSortChange('asc')}>
+          {t('OLDEST')}
+        </SortButton>
+      </SortContainer>
       {loading ? (
         <NoResult>{t('LOADING')}</NoResult>
       ) : (
diff --git a/src/components/Comments/style.ts b/src/components/Comments/style.ts
@@ -20,6 +20,9 @@ export const SortContainer = styled.div`
   display: flex;
   align-items: center;
   gap: 12px;
+  padding: 10px 4px 0 4px;
+  display: flex;
+  justify-content: flex-end;
 `;
 
 export const SortButton = styled.button<{ $active?: boolean }>`
@@ -51,7 +54,7 @@ export const Container = styled.div`
 `;
 
 export const List = styled.div`
-  padding: 20px 10px;
+  padding: 20px 4px;
 `;
 
 export const NoResult = styled.div`
