fix: minor ui fixes

packages/concordia-app/package.json

@@ -25,10 +25,9 @@
   },
   "dependencies": {
     "@ezerous/breeze": "~0.5.0",
-    "@ezerous/drizzle": "~0.4.2",
     "@ezerous/eth-identity-provider": "~0.1.2",
     "@reduxjs/toolkit": "~1.4.0",
-    "@welldone-software/why-did-you-render": "^6.0.0-rc.1",
+    "@welldone-software/why-did-you-render": "~6.0.5",
     "concordia-contracts": "~0.1.0",
     "concordia-shared": "~0.1.0",
     "i18next": "^19.8.3",

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

@@ -5,12 +5,10 @@
     --secondary-color-highlighted: #061A30;
 }
 
-body.app {
-    height: auto;
-    padding-bottom: 4rem;
+body {
     overflow: auto;
     margin: 0;
-    background: #E6E6E6;
+    background: white;
 }
 
 div {

packages/concordia-app/src/components/InitializationScreen/CustomLoader/index.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Container, Progress } from 'semantic-ui-react';
@@ -10,11 +10,9 @@ import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
 import orbitdbLogo from '../../../assets/images/orbitdb_logo.svg';
 import appLogo from '../../../assets/images/app_logo_circle.svg';
 
-const LoadingComponent = (props) => {
-  useEffect(() => function cleanup() {
-    document.body.classList.add('app');
-  }, []);
+import './style.css';
 
+const LoadingComponent = (props) => {
   const {
     imageType, messageList, progressType, title, message, progress,
   } = props;
@@ -48,14 +46,20 @@ const LoadingComponent = (props) => {
   const list = messageList ? <ul>{listItems}</ul> : '';
 
   return (
-      <main className="loading-screen">
-          <Container>
-              <img src={imageSrc} alt={imageAlt} className="loading-img" />
+      <main id="loading-screen">
+          <Container id="loading-screen-container">
+              <img src={imageSrc} alt={imageAlt} id="loading-img" />
               <p><strong>{title}</strong></p>
               <p>{message}</p>
               {list}
           </Container>
-          <Progress percent={progress} size="small" indicating={indicating} error={error} />
+          <Progress
+            id="loading-screen-progress"
+            percent={progress}
+            size="small"
+            indicating={indicating}
+            error={error}
+          />
       </main>
   );
 };

packages/concordia-app/src/assets/css/loading-component.css → packages/concordia-app/src/components/InitializationScreen/CustomLoader/style.css

@@ -1,27 +1,24 @@
-body {
-    overflow: hidden;
-}
-
-.loading-screen {
-    margin-top: 12em;
+#loading-screen {
+    padding-top: 12em;
     text-align: center;
     font-size: large;
+    height: 100%;
 }
 
-.loading-screen ul {
+#loading-screen ul {
     list-style-position: inside;
 }
 
-.loading-img {
+#loading-img {
     margin-bottom: 3em;
     height: 12em;
 }
 
-.ui.container {
+#loading-screen-container {
     height: 26em;
 }
 
-.ui.progress {
+#loading-screen-progress {
     width: 40vw;
     margin-left: auto !important;
     margin-right: auto !important;

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

@@ -4,9 +4,6 @@ import { useSelector } from 'react-redux';
 import { FORUM_CONTRACT } from 'concordia-shared/src/constants/contracts/ContractNames';
 import CustomLoader from './CustomLoader';
 
-// CSS
-import '../../assets/css/loading-component.css';
-
 const InitializationLoader = ({ children }) => {
   const initializing = useSelector((state) => state.drizzleStatus.initializing);
   const failed = useSelector((state) => state.drizzleStatus.failed);

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

@@ -1,3 +1,6 @@
 #main-layout {
-    height: 100%;
-}
+    height: auto;
+    min-height: 100%;
+    background-color: #E6E6E6;
+    padding-bottom: 4rem;
+}

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

@@ -6,4 +6,5 @@
 #new-topic-button{
     float:right;
     margin-bottom: 2em;
+    margin-right: 0;
 }

yarn.lock

@@ -1511,17 +1511,6 @@
     orbit-db-identity-provider "~0.3.1"
     redux-saga "~1.1.3"
 
-"@ezerous/drizzle@~0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@ezerous/drizzle/-/drizzle-0.4.2.tgz#2e575d0709cc29c77b984d96562b8749d8f477c9"
-  integrity sha512-oTJ77+yGdgg2KPIeIvRczFnPrBg8aXdNisHfM0ztjd7T/Ui8+Nw1HNhMVaw2xTuR53pio3SD8FBU1JrEUKOABQ==
-  dependencies:
-    deepmerge "~4.2.2"
-    is-plain-object "~5.0.0"
-    redux "~4.0.5"
-    redux-saga "~1.1.3"
-    web3 "~1.3.4"
-
 "@ezerous/eth-identity-provider@~0.1.2":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@ezerous/eth-identity-provider/-/eth-identity-provider-0.1.2.tgz#c1489a8d3ef5aec93ee53e7d96363a67409b3ada"
@@ -2757,7 +2746,7 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
-"@welldone-software/why-did-you-render@^6.0.0-rc.1":
+"@welldone-software/why-did-you-render@~6.0.5":
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/@welldone-software/why-did-you-render/-/why-did-you-render-6.0.5.tgz#a8df3509ed612770bb21b5fa0ad61634acc61f38"
   integrity sha512-8fWib+bKoAmnJHZPU8/qpEXKG8piB3oaoKj78fXNAdYd3x8ryde1pC7D5tKff5Mart2iOJUvYNxxcYlbtT9tow==
@@ -15484,7 +15473,7 @@ redux-thunk@^2.3.0:
   resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
   integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
 
-redux@^4.0.0, redux@^4.0.4, redux@~4.0.5:
+redux@^4.0.0, redux@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f"
   integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==
@@ -18356,7 +18345,7 @@ web3-utils@1.3.4:
     underscore "1.9.1"
     utf8 "3.0.0"
 
-web3@~1.3.0, web3@~1.3.3, web3@~1.3.4:
+web3@~1.3.0, web3@~1.3.3:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/web3/-/web3-1.3.4.tgz#31e014873360aa5840eb17f9f171190c967cffb7"
   integrity sha512-D6cMb2EtTMLHgdGbkTPGl/Qi7DAfczR+Lp7iFX3bcu/bsD9V8fZW69hA8v5cRPNGzXUwVQebk3bS17WKR4cD2w==