From 2923f9de0b12aadc5e32be3e1e43c446a30d089e Mon Sep 17 00:00:00 2001
From: Ezerous <ezerous@gmail.com>
Date: Tue, 2 Feb 2021 20:30:02 +0200
Subject: [PATCH] Multiple minor improvements & fixes vol.2

---
 .../public/locales/en/translation.json        |  2 +-
 .../concordia-app/src/assets/css/index.css    | 34 ++++++++++++++---
 .../concordia-app/src/assets/particles.js     |  2 +-
 .../components/ClearDatabasesModal/index.jsx  |  4 +-
 .../src/components/PostCreate/index.jsx       |  2 +-
 .../MainLayout/MainLayoutMenu/styles.css      |  2 +-
 .../src/views/Home/Board/index.jsx            |  2 +-
 .../GeneralTab/EditInformationModal/index.jsx |  5 +--
 .../EditInformationModal/styles.css           |  8 ----
 .../src/views/Profile/GeneralTab/index.jsx    |  2 +-
 .../src/views/Profile/styles.css              |  4 +-
 .../PersonalInformationStep/index.jsx         |  5 +--
 .../src/views/Register/SignUpStep/index.jsx   |  5 +--
 .../src/views/Register/index.jsx              |  4 +-
 .../src/views/Topic/TopicCreate/index.jsx     | 38 +++++++++----------
 .../src/views/Topic/TopicCreate/styles.css    |  5 +++
 .../src/views/Topic/TopicView/styles.css      |  2 +-
 17 files changed, 71 insertions(+), 55 deletions(-)
 delete mode 100644 packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css

diff --git a/packages/concordia-app/public/locales/en/translation.json b/packages/concordia-app/public/locales/en/translation.json
index e09a733..d37376c 100644
--- a/packages/concordia-app/public/locales/en/translation.json
+++ b/packages/concordia-app/public/locales/en/translation.json
@@ -69,7 +69,7 @@
   "topbar.button.register": "Sign Up",
   "topic.create.form.content.field.label": "First post content",
   "topic.create.form.content.field.placeholder": "Message",
-  "topic.create.form.post.button": "Post",
+  "topic.create.form.post.button": "Create Topic",
   "topic.create.form.subject.field.label": "Topic subject",
   "topic.create.form.subject.field.placeholder": "Subject",
   "topic.list.row.topic.id": "#{{id}}",
diff --git a/packages/concordia-app/src/assets/css/index.css b/packages/concordia-app/src/assets/css/index.css
index e7005f0..2ecb4f9 100644
--- a/packages/concordia-app/src/assets/css/index.css
+++ b/packages/concordia-app/src/assets/css/index.css
@@ -1,11 +1,13 @@
 :root {
-    --primary-color: #0B2540;
-    --primary-color-highlighted: #061A30;
-    --secondary-color: #EA6954;
-    --secondary-color-highlighted: #DB5844;
+    --primary-color: #EA6954;
+    --primary-color-highlighted: #DB5844;
+    --secondary-color: #0B2540;
+    --secondary-color-highlighted: #061A30;
 }
 
 body.app {
+    height: auto;
+    padding-bottom: 4rem;
     overflow: auto;
     margin: 0;
     background: #E6E6E6;
@@ -28,11 +30,31 @@ div {
     font-style: italic;
 }
 
-.main-button{
+.primary-button{
+    color: white !important;
+    background-color: var(--primary-color) !important;
+}
+
+.primary-button:hover {
+    background-color: var(--primary-color-highlighted) !important;
+}
+
+.secondary-button{
     color: white !important;
     background-color: var(--secondary-color) !important;
 }
 
-.main-button:hover {
+.secondary-button:hover {
     background-color: var(--secondary-color-highlighted) !important;
 }
+
+.skip-button {
+    color: var(--secondary-color) !important;
+    background-color: white !important;
+    box-shadow: 0 0 0 1px var(--secondary-color) inset !important;
+}
+
+.skip-button:hover {
+    color: var(--secondary-color-highlighted) !important;
+    box-shadow: 0 0 0 1px var(--secondary-color-highlighted) inset !important;
+}
diff --git a/packages/concordia-app/src/assets/particles.js b/packages/concordia-app/src/assets/particles.js
index d4ce239..68a19b7 100644
--- a/packages/concordia-app/src/assets/particles.js
+++ b/packages/concordia-app/src/assets/particles.js
@@ -16,7 +16,7 @@ const particlesOptions = {
       speed: 0.12,
     },
     size: {
-      value: 1,
+      value: 1.5,
     },
     opacity: {
       anim: {
diff --git a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx b/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx
index 26e47fe..db2aa72 100644
--- a/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx
+++ b/packages/concordia-app/src/components/ClearDatabasesModal/index.jsx
@@ -126,10 +126,10 @@ const ClearDatabasesModal = (props) => {
 
           {!isClearing && (
               <Modal.Actions>
-                  <Button color="black" basic onClick={onCancelTry} disabled={isClearing}>
+                  <Button className="secondary-button" onClick={onCancelTry} disabled={isClearing}>
                       {t('clear.databases.modal.cancel.button')}
                   </Button>
-                  <Button onClick={handleSubmit} negative disabled={!userConfirmed}>
+                  <Button onClick={handleSubmit} className="primary-button" disabled={!userConfirmed}>
                       {t('clear.databases.modal.clear.button')}
                   </Button>
               </Modal.Actions>
diff --git a/packages/concordia-app/src/components/PostCreate/index.jsx b/packages/concordia-app/src/components/PostCreate/index.jsx
index 17ea739..bf75927 100644
--- a/packages/concordia-app/src/components/PostCreate/index.jsx
+++ b/packages/concordia-app/src/components/PostCreate/index.jsx
@@ -136,7 +136,7 @@ const PostCreate = (props) => {
                           <Button
                             animated
                             type="button"
-                            className="main-button"
+                            className="primary-button"
                             disabled={posting || postContent === ''}
                             onClick={savePost}
                           >
diff --git a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
index 86cb6a1..6a3de17 100644
--- a/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
+++ b/packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/styles.css
@@ -3,7 +3,7 @@
 }
 
 .ui.inverted.menu {
-    background: var(--primary-color) !important;
+    background: var(--secondary-color) !important;
     border-radius: 0;
     margin-bottom: 4rem;
 }
diff --git a/packages/concordia-app/src/views/Home/Board/index.jsx b/packages/concordia-app/src/views/Home/Board/index.jsx
index 7b93ea6..8aa9498 100644
--- a/packages/concordia-app/src/views/Home/Board/index.jsx
+++ b/packages/concordia-app/src/views/Home/Board/index.jsx
@@ -22,7 +22,7 @@ const Board = (props) => {
             ? (
                 <Button
                   id="new-topic-button"
-                  className="main-button"
+                  className="primary-button"
                   content="New Topic"
                   icon="plus"
                   labelPosition="left"
diff --git a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
index 149f1fe..7a26a06 100644
--- a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
+++ b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/index.jsx
@@ -12,7 +12,6 @@ import { USER_DATABASE } from '../../../../constants/orbit/OrbitDatabases';
 import { breeze, drizzle } from '../../../../redux/store';
 import UsernameSelector from '../../../../components/UsernameSelector';
 import { FORUM_CONTRACT } from '../../../../constants/contracts/ContractNames';
-import './styles.css';
 
 const { orbit: { stores } } = breeze;
 const { contracts: { [FORUM_CONTRACT]: { methods: { updateUsername } } } } = drizzle;
@@ -198,11 +197,11 @@ const EditInformationModal = (props) => {
               </Modal.Description>
           </Modal.Content>
           <Modal.Actions>
-              <Button id="cancel-button" onClick={onCancel}>
+              <Button className="secondary-button" onClick={onCancel}>
                   {t('edit.information.modal.form.cancel.button')}
               </Button>
               <Button
-                className="main-button"
+                className="primary-button"
                 content={t('edit.information.modal.form.submit.button')}
                 labelPosition="right"
                 icon="checkmark"
diff --git a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css b/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css
deleted file mode 100644
index 8a9fc33..0000000
--- a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css
+++ /dev/null
@@ -1,8 +0,0 @@
-#cancel-button {
-    color: white;
-    background-color: var(--primary-color);
-}
-
-#cancel-button:hover {
-    background-color: var(--primary-color-highlighted);
-}
diff --git a/packages/concordia-app/src/views/Profile/GeneralTab/index.jsx b/packages/concordia-app/src/views/Profile/GeneralTab/index.jsx
index a9dc3aa..d6d4b1f 100644
--- a/packages/concordia-app/src/views/Profile/GeneralTab/index.jsx
+++ b/packages/concordia-app/src/views/Profile/GeneralTab/index.jsx
@@ -173,7 +173,7 @@ const GeneralTab = (props) => {
                           <Table.HeaderCell colSpan="2">
                               <Button
                                 id="edit-info-button"
-                                className="main-button"
+                                className="primary-button"
                                 floated="right"
                                 icon
                                 labelPosition="left"
diff --git a/packages/concordia-app/src/views/Profile/styles.css b/packages/concordia-app/src/views/Profile/styles.css
index 4ca6a6f..efabf36 100644
--- a/packages/concordia-app/src/views/Profile/styles.css
+++ b/packages/concordia-app/src/views/Profile/styles.css
@@ -1,3 +1,3 @@
-#profile-container > div {
-    margin-bottom: 4rem;
+#profile-container {
+    height: auto !important;
 }
diff --git a/packages/concordia-app/src/views/Register/PersonalInformationStep/index.jsx b/packages/concordia-app/src/views/Register/PersonalInformationStep/index.jsx
index 1ac1cdb..90595c9 100644
--- a/packages/concordia-app/src/views/Register/PersonalInformationStep/index.jsx
+++ b/packages/concordia-app/src/views/Register/PersonalInformationStep/index.jsx
@@ -150,16 +150,15 @@ const PersonalInformationStep = (props) => {
           )}
           <Card.Content extra>
               <Button
-                color="green"
+                className="primary-button"
                 floated="right"
                 content={t('register.form.personal.information.step.button.submit')}
                 onClick={handleSubmit}
                 disabled={!profilePictureUrlValid}
               />
               <Button
-                color="violet"
+                className="skip-button"
                 floated="right"
-                basic
                 content={t('register.form.personal.information.step.button.skip')}
                 onClick={goToHomePage}
               />
diff --git a/packages/concordia-app/src/views/Register/SignUpStep/index.jsx b/packages/concordia-app/src/views/Register/SignUpStep/index.jsx
index 7e8cb8b..d180ca9 100644
--- a/packages/concordia-app/src/views/Register/SignUpStep/index.jsx
+++ b/packages/concordia-app/src/views/Register/SignUpStep/index.jsx
@@ -94,7 +94,7 @@ const SignUpStep = (props) => {
           )}
           <Card.Content extra>
               <Button
-                color="green"
+                className="primary-button"
                 floated="right"
                 content={t('register.form.sign.up.step.button.submit')}
                 onClick={handleSubmit}
@@ -102,9 +102,8 @@ const SignUpStep = (props) => {
                 loading={!usernameIsChecked}
               />
               <Button
-                color="violet"
+                className="skip-button"
                 floated="right"
-                basic
                 content={t('register.form.sign.up.step.button.guest')}
                 onClick={goToHomePage}
                 disabled={signingUp}
diff --git a/packages/concordia-app/src/views/Register/index.jsx b/packages/concordia-app/src/views/Register/index.jsx
index e404fff..79881fc 100644
--- a/packages/concordia-app/src/views/Register/index.jsx
+++ b/packages/concordia-app/src/views/Register/index.jsx
@@ -5,10 +5,10 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
-import './styles.css';
 import SignUpStep from './SignUpStep';
 import PersonalInformationStep from './PersonalInformationStep';
 import { REGISTER_STEP_PROFILE_INFORMATION, REGISTER_STEP_SIGNUP } from '../../constants/RegisterSteps';
+import './styles.css';
 
 const Register = () => {
   const [currentStep, setCurrentStep] = useState('signup');
@@ -107,7 +107,7 @@ const Register = () => {
                         </Card.Content>
                         <Card.Content extra>
                             <Button
-                              color="black"
+                              className="secondary-button"
                               floated="right"
                               content={t('register.form.button.back')}
                               onClick={goToHomePage}
diff --git a/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx b/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
index 9ddad18..8f8ccc7 100644
--- a/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
+++ b/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
@@ -2,7 +2,7 @@ import React, {
   useCallback, useEffect, useState,
 } from 'react';
 import {
-    Button, Container, Form, Header, Icon, Input, TextArea,
+  Button, Container, Form, Header, Icon, Input, TextArea,
 } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
@@ -97,7 +97,7 @@ const TopicCreate = (props) => {
 
   return (
       <Container>
-          <Header id="new-topic-header">New Topic</Header>
+          <Header id="new-topic-header" as="h2">New Topic</Header>
           <Form loading={posting}>
               <Form.Field required>
                   <label htmlFor="form-topic-create-field-subject">
@@ -126,23 +126,23 @@ const TopicCreate = (props) => {
                     onChange={handleSubjectInputChange}
                   />
               </Form.Field>
-              <Form.Group>
-                  <Form.Button
-                    animated
-                    key="form-topic-create-button-submit"
-                    type="button"
-                    color="green"
-                    disabled={posting || subjectInput === '' || contentInput === ''}
-                    onClick={validateAndPost}
-                  >
-                      <Button.Content visible>
-                          {t('topic.create.form.post.button')}
-                      </Button.Content>
-                      <Button.Content hidden>
-                          <Icon name="send" />
-                      </Button.Content>
-                  </Form.Button>
-              </Form.Group>
+              <Button
+                id="create-topic-button"
+                animated
+                key="form-topic-create-button-submit"
+                type="button"
+                className="primary-button"
+                disabled={posting || subjectInput === '' || contentInput === ''}
+                onClick={validateAndPost}
+              >
+                  <Button.Content visible>
+                      {t('topic.create.form.post.button')}
+                  </Button.Content>
+                  <Button.Content hidden>
+                      <Icon name="send" />
+                  </Button.Content>
+              </Button>
+
           </Form>
       </Container>
   );
diff --git a/packages/concordia-app/src/views/Topic/TopicCreate/styles.css b/packages/concordia-app/src/views/Topic/TopicCreate/styles.css
index 229f696..5d078ac 100644
--- a/packages/concordia-app/src/views/Topic/TopicCreate/styles.css
+++ b/packages/concordia-app/src/views/Topic/TopicCreate/styles.css
@@ -9,3 +9,8 @@
     border-color: rgb(224, 180, 180) !important;
     background-color: rgb(255, 246, 246) !important;
 }
+
+#create-topic-button {
+    float: right;
+    margin: 1rem 0 4rem 0;
+}
diff --git a/packages/concordia-app/src/views/Topic/TopicView/styles.css b/packages/concordia-app/src/views/Topic/TopicView/styles.css
index b592494..75b87b7 100644
--- a/packages/concordia-app/src/views/Topic/TopicView/styles.css
+++ b/packages/concordia-app/src/views/Topic/TopicView/styles.css
@@ -1,5 +1,5 @@
 #topic-container {
-    height: 100%;
+    height: auto !important;
 }
 
 #topic-header {