Small tweaks

packages/concordia-app/src/assets/css/index.css

@@ -1,3 +1,9 @@
+:root {
+    --primary-color: #0B2540;
+    --secondary-color: #EA6954;
+    --secondary-color-highlighted: #DB5844;
+}
+
 body.app {
     overflow: auto;
     margin: 0;

packages/concordia-app/src/components/PostCreate/styles.css

@@ -10,9 +10,14 @@
 
 #post-button {
     float: right;
-    margin-top: 1rem;
+    margin: 1rem 0;
 }
 
 #post-button button {
     margin: 0;
+    background-color: var(--secondary-color);
+}
+
+#post-button button:hover {
+    background-color: var(--secondary-color-highlighted);
 }

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css

@@ -3,7 +3,7 @@
 }
 
 .ui.inverted.menu {
-    background: #0B2540 !important;
+    background: var(--primary-color) !important;
     border-radius: 0;
     margin-bottom: 2em;
 }

packages/concordia-app/src/views/Home/Board/index.jsx

@@ -16,9 +16,7 @@ const Board = (props) => {
   const history = useHistory();
   const { t } = useTranslation();
 
-  const boardContents = useMemo(() => {
-    if (numberOfTopics > 0) {
-      return (
+  const boardContents = useMemo(() => (
       <>
           {hasSignedUp
             ? (
@@ -32,11 +30,11 @@ const Board = (props) => {
                 />
             )
             : null}
-              <TopicList topicIds={_.rangeRight(0, numberOfTopics)} />
-          </>
-      );
-    } if (!hasSignedUp) {
-      return (
+          {/* eslint-disable-next-line no-nested-ternary */}
+          {numberOfTopics > 0
+            ? (<TopicList topicIds={_.rangeRight(0, numberOfTopics)} />)
+            : (!hasSignedUp
+              ? (
                   <div id="no-topic-message" className="vertical-center-in-parent">
                       <Header textAlign="center" as="h2">
                           {t('board.header.no.topics.message')}
@@ -45,19 +43,8 @@ const Board = (props) => {
                           {t('board.sub.header.no.topics.guest')}
                       </Header>
                   </div>
-      );
-    }
-
-    return (
-        <>
-            <Button
-              content="New Topic"
-              icon="plus"
-              labelPosition="left"
-              positive
-              id="new-topic-button"
-              onClick={() => history.push('/topics/new')}
-            />
+              )
+              : (
                   <div id="no-topic-message" className="vertical-center-in-parent">
                       <Header textAlign="center" as="h2">
                           {t('board.header.no.topics.message')}
@@ -66,10 +53,10 @@ const Board = (props) => {
                           {t('board.sub.header.no.topics.user')}
                       </Header>
                   </div>
-        </>
+              ))}
 
-    );
-  }, [numberOfTopics, hasSignedUp, t, history]);
+      </>
+  ), [numberOfTopics, hasSignedUp, t, history]);
 
   return (boardContents);
 };

packages/concordia-app/src/views/Home/Board/styles.css

@@ -6,4 +6,9 @@
 #new-topic-button{
     float:right;
     margin-bottom: 2em;
+    background-color: var(--secondary-color);
+}
+
+#new-topic-button:hover {
+    background-color: var(--secondary-color-highlighted);
 }

packages/concordia-app/src/views/Topic/TopicView/index.jsx

@@ -138,11 +138,11 @@ const TopicView = (props) => {
                           <Icon name="calendar alternate" fitted />
                     &nbsp;
                           {new Date(timestamp).toLocaleString('el-gr', { hour12: false })}
-                    &nbsp;&nbsp;
+                    &nbsp;&nbsp;&nbsp;
                           <Icon name="user" fitted />
                     &nbsp;
                           <Link to={`/users/${topicAuthorAddress}`} onClick={stopClickPropagation}>{ topicAuthor }</Link>
-                    &nbsp;&nbsp;
+                    &nbsp;&nbsp;&nbsp;
                           <Icon name="reply" fitted />
                     &nbsp;
                           { numberOfReplies }

packages/concordia-app/src/views/Topic/TopicView/styles.css

@@ -11,7 +11,8 @@
 }
 
 #topic-metadata {
-    font-size: 0.8em;
+    font-size: 1rem;
+    margin-top: 2rem;
     color: rgba(0,0,0,.6);
 }