style: fix styles of comments section

Author: Spring3

render/actions/__tests__/issues.actions.spec.js

@@ -27,7 +27,6 @@ describe('Issue actions', () => {
     expect(issuesActions).toBeTruthy();
     expect(issuesActions.ISSUES_GET_PAGE).toBeTruthy();
     expect(issuesActions.ISSUES_GET).toBeTruthy();
-    expect(issuesActions.ISSUES_COMMENTS_SEND).toBeTruthy();
     expect(issuesActions.ISSUES_TIME_ENTRY_GET).toBeTruthy();
 
     expect(issuesActions.default.getPage).toBeTruthy();

render/components/Copyrights.tsx

@@ -18,4 +18,4 @@ const Copyrights = () => (
 
 export {
   Copyrights
-}
+};

render/components/Flex.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { css } from '@emotion/react';
 
-type FlexAlignment = 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between';
+type FlexAlignment = 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-between' | 'stretch';
 
 type FlexProps = {
   children?: ReactNode;

render/components/Iframe.tsx

@@ -31,7 +31,7 @@ const Iframe = ({
   const handleResize = useCallback(throttle(() => {
     if (iframe) {
       iframe.height = iframe.contentDocument.body.scrollHeight + 30;
-      iframe.width = width ? width : iframe.contentDocument.body.scrollWidth || 0;
+      iframe.width = width || iframe.contentDocument.body.scrollWidth || 0;
     }
 
     if (onResize) {

render/components/IssueDetailsPage/CommentsSection.tsx

@@ -10,6 +10,7 @@ import DateComponent from '../Date';
 import { useOvermindActions, useOvermindState } from '../../store';
 import { theme as Theme } from '../../theme';
 import type { Issue } from '../../../types';
+import { Flex } from '../Flex';
 
 const styles = {
   form: (theme: typeof Theme) => css`
@@ -38,29 +39,23 @@ const styles = {
   `,
   commentsList: (theme: typeof Theme) => css`
     width: 100%;
-    list-style-type: none;
     padding: 20px 0px;
     margin: 0px;
     border-radius: 3px;
     background: ${theme.bgDark};
   `,
-  commentFirst: css`
-    margin-top: 20px;
-  `,
   comment: css`
-    margin: 40px 20px 20px 20px;
-    display: flex;
-    justify-content: space-around;
+    flex-grow: 1;
+    margin: 1rem 1rem 1rem 1rem;
   `,
   commentHeader: css`
     flex-grow: 1;
-    display: flex;
-    flex-direction: column;
     min-width: 20%;
+    margin-right: 1rem;
   `,
   commentAuthorName: (theme: typeof Theme) => css`
-    margin-top: 20px;
-    margin-bottom: 20px;
+    margin-top: 0px;
+    margin-bottom: 10px;
     color: ${theme.main};
   `,
   commentDate: (theme: typeof Theme) => css`
@@ -109,18 +104,18 @@ const CommentsSection = ({ issueId }: CommentsSectionProps) => {
 
   return (
     <>
-      <h2>Comments</h2>
-      <ul css={styles.commentsList(theme)}>
-        {journalEntries.map((entry, index) => (
-          <li css={index === 0 ? [styles.comment, styles.commentFirst] : [styles.comment]} key={entry.id}>
-            <div css={styles.commentHeader}>
-              <h3 css={styles.commentAuthorName(theme)}>{entry.user.name}</h3>
+      <h3>Comments</h3>
+      <Flex alignItems="stretch" direction="column" css={styles.commentsList(theme)}>
+        {journalEntries.map((entry) => (
+          <Flex justifyContent="center" css={styles.comment} key={entry.id}>
+            <Flex direction="column" css={styles.commentHeader}>
+              <h4 css={styles.commentAuthorName(theme)}>{entry.user.name}</h4>
               <DateComponent className="date" date={entry.createdOn} />
-            </div>
+            </Flex>
             <MarkdownText css={styles.markdown(theme)} name={`comment-${entry.id}`} markdownText={entry.notes as string} />
-          </li>
+          </Flex>
         ))}
-      </ul>
+      </Flex>
       <div css={styles.form(theme)}>
         <MarkdownEditor id="comments-form" name="comments-form" onSubmit={sendComments} />
         <div>

render/components/__tests__/MarkdownEditor.spec.jsx

@@ -4,7 +4,7 @@ import {
 } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { ThemeProvider } from 'styled-components';
-import MarkdownEditor, { MarkdownText } from '../MarkdownEditor';
+import { MarkdownText, MarkdownEditor } from '../MarkdownEditor';
 import utils from '../../../main/utils';
 import { theme } from '../../theme';
 

render/reducers/__tests__/issue.selected.reducer.spec.js

@@ -2,7 +2,6 @@ import _cloneDeep from 'lodash/cloneDeep';
 
 import { notify } from '../../actions/helper';
 import {
-  ISSUES_COMMENTS_SEND,
   ISSUES_TIME_ENTRY_GET
 } from '../../actions/issues.actions';
 import {
@@ -17,105 +16,6 @@ describe('Selected issue reducer', () => {
     expect(reducer(undefined, { type: 'WEIRD' })).toEqual(initialState);
   });
 
-  describe('ISSUES_COMMENTS_SEND', () => {
-    it('status START', () => {
-      expect(
-        reducer(
-          _cloneDeep(initialState),
-          notify.start(ISSUES_COMMENTS_SEND, { subject: 'comments' })
-        )
-      ).toEqual({
-        ..._cloneDeep(initialState),
-        updates: {
-          comments: {
-            ok: false,
-            isUpdating: true,
-            error: undefined
-          }
-        }
-      });
-    });
-
-    it('status OK', () => {
-      const data = {
-        hello: 'world'
-      };
-      expect(
-        reducer(
-          {
-            ..._cloneDeep(initialState),
-            data: {
-              journals: ['hello', 'world']
-            },
-            updates: {
-              something: {
-                ok: true,
-                isUpdating: false,
-                error: undefined
-              },
-              comments: {
-                ok: false,
-                isUpdating: true,
-                error: undefined
-              }
-            }
-          },
-          notify.ok(ISSUES_COMMENTS_SEND, data, { subject: 'comments' })
-        )
-      ).toEqual({
-        ..._cloneDeep(initialState),
-        data: {
-          journals: ['hello', 'world', data]
-        },
-        updates: {
-          something: {
-            ok: true,
-            isUpdating: false,
-            error: undefined
-          },
-          comments: {
-            ok: true,
-            isUpdating: false,
-            error: undefined
-          }
-        }
-      });
-    });
-
-    it('status NOK', () => {
-      const error = new Error('Whoops');
-      expect(
-        reducer(
-          {
-            ..._cloneDeep(initialState),
-            updates: {
-              something: {
-                ok: true,
-                isUpdating: false,
-                error: undefined
-              }
-            }
-          },
-          notify.nok(ISSUES_COMMENTS_SEND, error, { subject: 'comments' })
-        )
-      ).toEqual({
-        ..._cloneDeep(initialState),
-        updates: {
-          something: {
-            ok: true,
-            isUpdating: false,
-            error: undefined
-          },
-          comments: {
-            ok: false,
-            isUpdating: false,
-            error
-          }
-        }
-      });
-    });
-  });
-
   describe('ISSUES_TIME_ENTRY_GET', () => {
     it('status START', () => {
       const state = _cloneDeep(initialState);