Multiple minor improvements & fixes vol.2

4 years ago · 2923f9de0b
17 changed files with 71 additions and 55 deletions
--- 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}}",
--- 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;
+}
--- 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: {
--- 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>
--- 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}
                          >
--- 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;
 }
--- 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"
--- 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"
--- a/packages/concordia-app/src/views/Profile/GeneralTab/EditInformationModal/styles.css
+++ b/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);
-}
--- 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"
--- 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;
 }
--- 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}
              />
--- 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}
--- 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}
--- a/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
+++ b/packages/concordia-app/src/views/Topic/TopicCreate/index.jsx
@ -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,12 +126,12 @@ const TopicCreate = (props) => {
                    onChange={handleSubjectInputChange}
                  />
              </Form.Field>
-              <Form.Group>
-                  <Form.Button
+              <Button
+                id="create-topic-button"
                animated
                key="form-topic-create-button-submit"
                type="button"
-                    color="green"
+                className="primary-button"
                disabled={posting || subjectInput === '' || contentInput === ''}
                onClick={validateAndPost}
              >
@ -141,8 +141,8 @@ const TopicCreate = (props) => {
                  <Button.Content hidden>
                      <Icon name="send" />
                  </Button.Content>
-                  </Form.Button>
-              </Form.Group>
+              </Button>
+
          </Form>
      </Container>
  );
--- 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;
+}
--- 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 {