Multiple minor improvements & fixes

README.md

@@ -4,28 +4,28 @@
 ## Setup
 
 ```shell script
-cd apella
+cd concordia
 yarn
 ```
 
 ## Compile contracts
 
 ```shell script
-cd packages/apella-contracts
+cd packages/concordia-contracts
 yarn compile
 ```
 
 ## Run app
 
 ```shell script
-cd packages/apella-app
+cd packages/concordia-app
 yarn start
 ```
 
 ## Build app
 
 ```shell script
-cd packages/apella-app
+cd packages/concordia-app
 yarn build
 ```
 

packages/concordia-app/src/assets/About.md

@@ -23,13 +23,13 @@ authentication that makes trusted, direct voting possible.
 
 You can read more about the technological stack in Concordia's [whitepaper][concordia-whitepaper].
 
---- 
+---
 
 Developed by [apostolof][devs-apostolof-profile], [ezerous][devs-ezerous-profile]
 
-[concordia-repository]: https://gitlab.com/ecentrics/apella
-[concordia-docker-hub]: https://hub.docker.com/repository/docker/ecentrics/apella-app
-[concordia-license]: https://gitlab.com/ecentrics/apella/-/blob/master/LICENSE.md
+[concordia-repository]: https://gitlab.com/ecentrics/concordia
+[concordia-docker-hub]: https://hub.docker.com/repository/docker/ecentrics/concordia-app
+[concordia-license]: https://gitlab.com/ecentrics/concordia/-/blob/master/LICENSE.md
 [devs-apostolof-profile]: https://gitlab.com/Apostolof
 [devs-ezerous-profile]: https://gitlab.com/Ezerous
 [concordia-whitepaper]: https://whitepaper.concordia.ecentrics.net

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

@@ -1,5 +1,6 @@
 :root {
     --primary-color: #0B2540;
+    --primary-color-highlighted: #061A30;
     --secondary-color: #EA6954;
     --secondary-color-highlighted: #DB5844;
 }
@@ -26,3 +27,12 @@ div {
     color: gray;
     font-style: italic;
 }
+
+.main-button{
+    color: white !important;
+    background-color: var(--secondary-color) !important;
+}
+
+.main-button:hover {
+    background-color: var(--secondary-color-highlighted) !important;
+}

packages/concordia-app/src/components/PostCreate/index.jsx

@@ -131,12 +131,12 @@ const PostCreate = (props) => {
                           />
                       </Form>
                   </Feed.Summary>
-                  <Feed.Meta id="post-button">
+                  <Feed.Meta id="post-button-div">
                       <Feed.Like>
-                          <Form.Button
+                          <Button
                             animated
                             type="button"
-                            color="green"
+                            className="main-button"
                             disabled={posting || postContent === ''}
                             onClick={savePost}
                           >
@@ -146,7 +146,7 @@ const PostCreate = (props) => {
                               <Button.Content hidden>
                                   <Icon name="send" />
                               </Button.Content>
-                          </Form.Button>
+                          </Button>
                       </Feed.Like>
                   </Feed.Meta>
               </Feed.Content>

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

@@ -8,16 +8,11 @@
     color: #fff !important;
 }
 
-#post-button {
+#post-button-div {
     float: right;
-    margin: 1rem 0;
+    margin: 1rem 0 4rem 0;
 }
 
-#post-button button {
+#post-button-div button {
     margin: 0;
-    background-color: var(--secondary-color);
-}
-
-#post-button button:hover {
-    background-color: var(--secondary-color-highlighted);
 }

packages/concordia-app/src/components/PostList/PostListRow/index.jsx

@@ -2,7 +2,7 @@ import React, {
   memo, useEffect, useMemo, useState, useCallback,
 } from 'react';
 import {
-  Dimmer, Icon, Image, Feed, Placeholder, Ref,
+  Dimmer, Feed, Placeholder, Ref,
 } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +14,6 @@ import { breeze } from '../../../redux/store';
 import './styles.css';
 import { POSTS_DATABASE, USER_DATABASE } from '../../../constants/orbit/OrbitDatabases';
 import determineKVAddress from '../../../utils/orbitUtils';
-import { USER_PROFILE_PICTURE } from '../../../constants/orbit/UserDatabaseKeys';
 import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import { FORUM_CONTRACT } from '../../../constants/contracts/ContractNames';
 import ProfileImage from '../../ProfileImage';

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

@@ -5,5 +5,5 @@
 .ui.inverted.menu {
     background: var(--primary-color) !important;
     border-radius: 0;
-    margin-bottom: 2em;
+    margin-bottom: 4rem;
 }

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

@@ -21,11 +21,12 @@ const Board = (props) => {
           {hasSignedUp
             ? (
                 <Button
+                  id="new-topic-button"
+                  className="main-button"
                   content="New Topic"
                   icon="plus"
                   labelPosition="left"
                   positive
-                  id="new-topic-button"
                   onClick={() => history.push('/topics/new')}
                 />
             )

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

@@ -6,9 +6,4 @@
 #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/Profile/GeneralTab/EditInformationModal/index.jsx

@@ -12,6 +12,7 @@ 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;
@@ -197,10 +198,11 @@ const EditInformationModal = (props) => {
               </Modal.Description>
           </Modal.Content>
           <Modal.Actions>
-              <Button color="black" onClick={onCancel}>
+              <Button id="cancel-button" onClick={onCancel}>
                   {t('edit.information.modal.form.cancel.button')}
               </Button>
               <Button
+                className="main-button"
                 content={t('edit.information.modal.form.submit.button')}
                 labelPosition="right"
                 icon="checkmark"

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

@@ -0,0 +1,8 @@
+#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,6 +173,7 @@ const GeneralTab = (props) => {
                           <Table.HeaderCell colSpan="2">
                               <Button
                                 id="edit-info-button"
+                                className="main-button"
                                 floated="right"
                                 icon
                                 labelPosition="left"

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

@@ -4,9 +4,4 @@
 
 #edit-info-button {
     margin: 1rem;
-    background-color: var(--secondary-color);
-}
-
-#edit-info-button:hover {
-    background-color: var(--secondary-color-highlighted);
 }

packages/concordia-app/src/views/Profile/index.jsx

@@ -12,6 +12,7 @@ import TopicList from '../../components/TopicList';
 import PostList from '../../components/PostList';
 import GeneralTab from './GeneralTab';
 import { GENERAL_TAB, POSTS_TAB, TOPICS_TAB } from '../../constants/ProfileTabs';
+import './styles.css';
 
 const { contracts: { [FORUM_CONTRACT]: { methods: { getUser } } } } = drizzle;
 
@@ -105,7 +106,7 @@ const Profile = () => {
   }, [generalTab, loading, postsTab, t, topicsTab]);
 
   return useMemo(() => (
-      <Container id="home-container" textAlign="center">
+      <Container id="profile-container" textAlign="center">
           <Tab panes={panes} />
       </Container>
   ), [panes]);

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

@@ -0,0 +1,3 @@
+#profile-container > div {
+    margin-bottom: 4rem;
+}

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

@@ -2,19 +2,19 @@ import React, {
   useCallback, useEffect, useState,
 } from 'react';
 import {
-  Button, Container, Form, Icon, Input, TextArea,
+    Button, Container, Form, Header, Icon, Input, TextArea,
 } from 'semantic-ui-react';
 import { useTranslation } from 'react-i18next';
 import { useHistory } from 'react-router';
 import { useSelector } from 'react-redux';
 import { drizzle, breeze } from '../../../redux/store';
-import './styles.css';
 import { TRANSACTION_ERROR, TRANSACTION_SUCCESS } from '../../../constants/TransactionStatus';
 import { POSTS_DATABASE, TOPICS_DATABASE } from '../../../constants/orbit/OrbitDatabases';
 import { TOPIC_SUBJECT } from '../../../constants/orbit/TopicsDatabaseKeys';
 import { POST_CONTENT } from '../../../constants/orbit/PostsDatabaseKeys';
 import { FORUM_CONTRACT } from '../../../constants/contracts/ContractNames';
 import { TOPIC_CREATED_EVENT } from '../../../constants/contracts/events/ForumContractEvents';
+import './styles.css';
 
 const { contracts: { [FORUM_CONTRACT]: { methods: { createTopic } } } } = drizzle;
 const { orbit: { stores } } = breeze;
@@ -97,6 +97,7 @@ const TopicCreate = (props) => {
 
   return (
       <Container>
+          <Header id="new-topic-header">New Topic</Header>
           <Form loading={posting}>
               <Form.Field required>
                   <label htmlFor="form-topic-create-field-subject">

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

@@ -1,3 +1,8 @@
+#new-topic-header {
+    padding: 2rem;
+    text-align: center;
+}
+
 .form-textarea-required {
     color: rgb(159, 58, 56) !important;
     outline-color: rgb(159, 58, 56) !important;