Multiple minor improvements & fixes vol.2

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}}",

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

@@ -1,11 +1,13 @@
 :root {
-    --primary-color: #0B2540;
+    --primary-color: #EA6954;
-    --primary-color-highlighted: #061A30;
+    --primary-color-highlighted: #DB5844;
-    --secondary-color: #EA6954;
+    --secondary-color: #0B2540;
-    --secondary-color-highlighted: #DB5844;
+    --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;
+}

packages/concordia-app/src/assets/particles.js

@@ -16,7 +16,7 @@ const particlesOptions = {
       speed: 0.12,
     },
     size: {
-      value: 1,
+      value: 1.5,
     },
     opacity: {
       anim: {

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>

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}
                           >

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;
 }

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"

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"

packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css

@@ -1,8 +0,0 @@
-#cancel-button {
-    color: white;
-    background-color: var(--primary-color);
-}
-
-#cancel-button:hover {
-    background-color: var(--primary-color-highlighted);
-}

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"

packages/concordia-app/src/views/Profile/styles.css

@@ -1,3 +1,3 @@
-#profile-container > div {
+#profile-container {
-    margin-bottom: 4rem;
+    height: auto !important;
 }

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}
               />

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}

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}

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>
+              <Button
-                  <Form.Button
+                id="create-topic-button"
-                    animated
+                animated
-                    key="form-topic-create-button-submit"
+                key="form-topic-create-button-submit"
-                    type="button"
+                type="button"
-                    color="green"
+                className="primary-button"
-                    disabled={posting || subjectInput === '' || contentInput === ''}
+                disabled={posting || subjectInput === '' || contentInput === ''}
-                    onClick={validateAndPost}
+                onClick={validateAndPost}
-                  >
+              >
-                      <Button.Content visible>
+                  <Button.Content visible>
-                          {t('topic.create.form.post.button')}
+                      {t('topic.create.form.post.button')}
-                      </Button.Content>
+                  </Button.Content>
-                      <Button.Content hidden>
+                  <Button.Content hidden>
-                          <Icon name="send" />
+                      <Icon name="send" />
-                      </Button.Content>
+                  </Button.Content>
-                  </Form.Button>
+              </Button>
-              </Form.Group>
+
           </Form>
       </Container>
   );

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;
+}

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

@@ -1,5 +1,5 @@
 #topic-container {
-    height: 100%;
+    height: auto !important;
 }
 
 #topic-header {