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