diff --git a/packages/concordia-app/package.json b/packages/concordia-app/package.json
index bbe624a..0cc2aeb 100644
--- a/packages/concordia-app/package.json
+++ b/packages/concordia-app/package.json
@@ -47,7 +47,7 @@
"react-timeago": "~5.2.0",
"redux-saga": "~1.1.3",
"semantic-ui-css": "~2.4.1",
- "semantic-ui-react": "~1.2.1",
+ "semantic-ui-react": "~2.0.3",
"web3": "~1.3.3"
},
"devDependencies": {
diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json
index 33a1c4d..e9c42a5 100644
--- a/packages/concordia-app/public/locales/en/translation.json
+++ b/packages/concordia-app/public/locales/en/translation.json
@@ -72,11 +72,10 @@
"topic.create.form.post.button": "Post",
"topic.create.form.subject.field.label": "Topic subject",
"topic.create.form.subject.field.placeholder": "Subject",
- "topic.list.row.author": "by {{author}}",
"topic.list.row.number.of.replies": "{{numberOfReplies}} replies",
"topic.list.row.topic.id": "#{{id}}",
"username.selector.error.username.empty.message": "Username is required",
"username.selector.error.username.taken.message": "The username {{username}} is already taken.",
"username.selector.username.field.label": "Username",
"username.selector.username.field.placeholder": "Username"
-}
\ No newline at end of file
+}
diff --git a/packages/concordia-app/src/components/LoadingScreen.jsx b/packages/concordia-app/src/components/LoadingScreen.jsx
index da719f1..a24d278 100644
--- a/packages/concordia-app/src/components/LoadingScreen.jsx
+++ b/packages/concordia-app/src/components/LoadingScreen.jsx
@@ -1,9 +1,8 @@
import React from 'react';
+import { Loader } from 'semantic-ui-react';
const LoadingScreen = () => (
-
- Loading
-
+
);
export default LoadingScreen;
diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
index fd96bf4..e70c0a4 100644
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/index.jsx
@@ -2,12 +2,11 @@ import React, {
memo, useEffect, useMemo, useState,
} from 'react';
import {
- Dimmer, Grid, Image, List, Placeholder,
+ Dimmer, Grid, Image, Item, List, Placeholder, Segment,
} from 'semantic-ui-react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import TimeAgo from 'react-timeago';
-import { useHistory } from 'react-router';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from 'react-router-dom';
import { FETCH_USER_DATABASE } from '../../../redux/actions/peerDbReplicationActions';
@@ -34,7 +33,6 @@ const TopicListRow = (props) => {
const topics = useSelector((state) => state.orbitData.topics);
const users = useSelector((state) => state.orbitData.users);
const dispatch = useDispatch();
- const history = useHistory();
const { t } = useTranslation();
useEffect(() => {
@@ -98,7 +96,6 @@ const TopicListRow = (props) => {
? (
)
@@ -124,57 +121,65 @@ const TopicListRow = (props) => {
return authorAvatar;
}, [authorAvatar, topicAuthorAddress]);
- return useMemo(() => {
- const handleTopicClick = () => {
- history.push(`/topics/${topicId}`);
- };
-
- return (
-
- {authorAvatarLink}
-
-
-
-
- {topicSubject !== null
- ? topicSubject
- : }
-
-
-
- {t('topic.list.row.topic.id', { id: topicId })}
-
-
-
-
-
-
-
- {topicAuthor !== null && timeAgo !== null
- ? (
-
- {t('topic.list.row.author', { author: topicAuthor })}
- ,
-
-
- )
- : }
-
-
- {numberOfReplies !== null
- ? (
-
- {t('topic.list.row.number.of.replies', { numberOfReplies })}
-
- )
- : }
-
-
-
-
-
- );
- }, [authorAvatarLink, history, loading, numberOfReplies, t, timeAgo, topicAuthor, topicId, topicSubject]);
+ return useMemo(() => (
+
+
+
+
+ -
+ {authorAvatarLink}
+
+
+
+
+
+
+
+ {topicSubject !== null
+ ? topicSubject
+ : }
+
+
+
+ {t('topic.list.row.topic.id', { id: topicId })}
+
+
+
+
+
+ {topicAuthor !== null && timeAgo !== null
+ ? (
+
+
+ •
+
+ {topicAuthor}
+
+
+ )
+ : }
+
+
+ {numberOfReplies !== null
+ ? (
+
+ {t('topic.list.row.number.of.replies', { numberOfReplies })}
+
+ )
+ : }
+
+
+
+
+
+
+
+
+
+
+
+
+ ), [authorAvatarLink, loading, numberOfReplies, t, timeAgo, topicAuthor, topicAuthorAddress, topicId, topicSubject]);
};
TopicListRow.defaultProps = {
diff --git a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css
index 6f92675..e520ff8 100644
--- a/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css
+++ b/packages/concordia-app/src/components/TopicList/TopicListRow/styles.css
@@ -1,21 +1,49 @@
-.topic-metadata {
- font-size: 12px !important;
- font-weight: initial;
-}
-
-.list-item {
+.topic-row {
display: flex !important;
text-align: start;
}
-.profile-picture {
- cursor: pointer;
- max-width: 36px;
- max-height: 36px;
- margin: 0;
- vertical-align: middle;
+.topic-row-segment {
+ flex-grow: 1;
}
-.list-content {
- flex-grow: 1;
+.topic-row-segment:hover {
+ background-color: rgba(0, 0, 0, 0.03);
+}
+
+.topic-row-segment div {
+ color: black;
+}
+
+.topic-row-avatar {
+ margin: auto;
+ padding-left: 0.75em !important;
+ padding-right: 0 !important;
+ font-size: 2em;
+}
+
+.topic-row-avatar i {
+ text-align: left !important;
+ margin:0;
+}
+
+.topic-row-content {
+ padding-left: 2em !important;
+}
+
+.topic-row-subject {
+ font-size: 1.25em;
+ font-weight: bold;
+}
+
+.topic-row-metadata {
+ font-size: 12px !important;
+ font-weight: initial;
+}
+
+.profile-picture {
+ border-radius: 50%;
+ max-width: none !important;
+ width: 2em;
+ height: 2em;
}
diff --git a/packages/concordia-app/src/components/TopicList/index.jsx b/packages/concordia-app/src/components/TopicList/index.jsx
index 8a85f4e..ee53b99 100644
--- a/packages/concordia-app/src/components/TopicList/index.jsx
+++ b/packages/concordia-app/src/components/TopicList/index.jsx
@@ -3,10 +3,12 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
-import { List } from 'semantic-ui-react';
+import { useHistory } from 'react-router';
+import { Button, List } from 'semantic-ui-react';
import TopicListRow from './TopicListRow';
import { drizzle } from '../../redux/store';
import { FORUM_CONTRACT } from '../../constants/contracts/ContractNames';
+import './styles.css';
const { contracts: { [FORUM_CONTRACT]: { methods: { getTopic: { cacheCall: getTopicChainData } } } } } = drizzle;
@@ -15,6 +17,8 @@ const TopicList = (props) => {
const [getTopicCallHashes, setGetTopicCallHashes] = useState([]);
const drizzleInitialized = useSelector((state) => state.drizzleStatus.initialized);
const drizzleInitializationFailed = useSelector((state) => state.drizzleStatus.failed);
+ const hasSignedUp = useSelector((state) => state.user.hasSignedUp);
+ const history = useHistory();
useEffect(() => {
if (drizzleInitialized && !drizzleInitializationFailed) {
@@ -51,9 +55,21 @@ const TopicList = (props) => {
}), [getTopicCallHashes, topicIds]);
return (
-
- {topics}
-
+
+ {hasSignedUp && history.location.pathname === '/home' && (
+
);
};
diff --git a/packages/concordia-app/src/components/TopicList/styles.css b/packages/concordia-app/src/components/TopicList/styles.css
index ac3c53c..3ffc2e8 100644
--- a/packages/concordia-app/src/components/TopicList/styles.css
+++ b/packages/concordia-app/src/components/TopicList/styles.css
@@ -1,3 +1,11 @@
#topic-list{
height: 100%;
+ margin-bottom: 4em;
+ clear: both;
+}
+
+#new-topic-button{
+ float:right;
+ margin-bottom: 2em;
+
}
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
index b2453f0..012fad6 100644
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx
@@ -42,17 +42,6 @@ const MainLayoutMenu = () => {
- {hasSignedUp && history.location.pathname === '/home' && (
- history.push('/topics/new')}
- position="right"
- >
- {t('topbar.button.create.topic')}
-
- )}
{hasSignedUp
? (