update design

zoomment · Mar 14, 2024 · 0b0a4ae · 0b0a4ae
1 parent b0fa3f5
commit 0b0a4ae
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 49 deletions.
diff --git a/docs/zoomment.min.js b/docs/zoomment.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "dependencies": {
-    "@ant-design/icons": "^4.2.2",
+    "@ant-design/icons": "^5.3.1",
     "@parcel/config-default": "^2.12.0",
     "@parcel/transformer-typescript-tsc": "^2.12.0",
     "axios": "^1.6.0",

diff --git a/src/components/Comment/index.tsx b/src/components/Comment/index.tsx
@@ -1,17 +1,19 @@
 import React, { ReactNode } from 'react';
 import { useCommentsState, useCommentsDispatch, IComment } from 'providers/Comments';
 import { useTranslation } from 'react-i18next';
-import { CheckCircleFilled } from '@ant-design/icons';
+import { CheckCircleFilled, DeleteOutlined, CommentOutlined } from '@ant-design/icons';
 import dayjs from 'dayjs';
 
 import {
   Item,
   Username,
   Body,
   Date,
-  Head,
+  Header,
+  HeaderActions,
   Avatar,
-  Action,
+  Reply,
+  Delete,
   Actions,
   Content
 } from './style';
@@ -36,15 +38,22 @@ export default function Comment({
         src={`https://www.gravatar.com/avatar/${gravatar}?d=monsterid`} /*TODO: make this configurable, I like robohash also wavatar */
       />
       <Content>
-        <Head>
+        <Header>
           <Username>
-            {author} {comment.isVerified && <CheckCircleFilled />}
+            {author} {comment.isVerified && <CheckCircleFilled />} •
+            <Date>{dayjs(comment.createdAt).format('DD MMM YYYY - HH:mm')}</Date>
           </Username>
-          •<Date>{dayjs(comment.createdAt).format('DD MMM YYYY - HH:mm')}</Date>
-        </Head>
+          <HeaderActions>
+            {comment.isOwn && (
+              <Delete onClick={() => actions.removeComment(comment)}>
+                <DeleteOutlined /> Delete
+              </Delete>
+            )}
+          </HeaderActions>
+        </Header>
         <Body>{comment.body}</Body>
         <Actions>
-          <Action
+          <Reply
             onClick={() => {
               if (state.replayTo?._id === comment._id) {
                 actions.replay(undefined);
@@ -53,11 +62,8 @@ export default function Comment({
               }
             }}
           >
-            {t('REPLY')}
-          </Action>
-          {(comment.isOwn || comment.secret) && (
-            <Action onClick={() => actions.removeComment(comment)}>{t('DELETE')}</Action>
-          )}
+            <CommentOutlined /> {t('REPLY')}
+          </Reply>
         </Actions>
         {children}
       </Content>

diff --git a/src/components/Comment/style.ts b/src/components/Comment/style.ts
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const Item = styled.div`
   display: flex;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   &:last-child {
     margin-bottom: 0;
   }
@@ -16,17 +16,20 @@ export const Avatar = styled.img`
   margin: 0 10px 0 0 !important;
 `;
 
-export const Head = styled.div`
+export const Header = styled.div`
   display: flex;
+  justify-content: space-between;
   font-size: 8px;
   line-height: 1;
   margin-bottom: 4px;
   align-items: center;
   flex-direction: row;
   color: ${props => props.theme.textColorSecondary};
-  svg {
-    color: green;
-  }
+`;
+
+export const User = styled.div`
+  display: flex;
+  align-items: center;
 `;
 
 export const Username = styled.div`
@@ -35,15 +38,9 @@ export const Username = styled.div`
   margin-right: 5px;
   letter-spacing: 0.5px;
   color: ${props => props.theme.textColorSecondary};
-`;
-
-export const Body = styled.div`
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 1.5;
-  letter-spacing: 0.3px;
-  white-space: break-spaces;
-  color: ${props => props.theme.textColor};
+  svg {
+    color: green;
+  }
 `;
 
 export const Date = styled.span`
@@ -55,15 +52,27 @@ export const Date = styled.span`
   color: ${props => props.theme.textColorSecondary};
 `;
 
+export const Body = styled.div`
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: 0.3px;
+  white-space: break-spaces;
+  color: ${props => props.theme.textColor};
+`;
+
 export const Action = styled.button`
   font-size: 13px;
-  margin-top: 4px;
+  padding: 4px 0px;
   cursor: pointer;
   border: none;
   background: none;
-  padding: 0;
   font-family: inherit;
-  text-decoration: underline;
+  text-decoration: none;
+  border-radius: 6px;
+`;
+
+export const Reply = styled(Action)`
   color: ${props => props.theme.buttonBackground};
   &:hover,
   &:visited,
@@ -72,10 +81,25 @@ export const Action = styled.button`
   }
 `;
 
+export const Delete = styled(Action)`
+  color: ${props => props.theme.textColorSecondary};
+  &:hover,
+  &:visited,
+  &:focus {
+    color: ${props => props.theme.textColor};
+  }
+`;
+
 export const Actions = styled.div`
   align-items: center;
   display: flex;
-  gap: 8px;
+  gap: 16px;
+`;
+
+export const HeaderActions = styled.div`
+  align-items: center;
+  display: flex;
+  gap: 12px;
 `;
 
 export const Content = styled.div`