Minor UI fixes/ refactoring

packages/concordia-app/public/locales/en/translation.json

@@ -7,8 +7,9 @@
   "clear.databases.modal.clearing.progress.message": "This might take a minute...",
   "clear.databases.modal.clearing.progress.title": "Clearing all Concordia databases",
   "clear.databases.modal.description.body.user": "Although this action is generally recoverable some of your topics and posts may be permanently lost.",
-  "clear.databases.modal.description.pre": "You are about to clear the Concordia databases stored locally in your browser.",
-  "clear.databases.modal.form.username.label.guest": "Please type concordia to confirm.",
+  "clear.databases.modal.description.pre.guest": "You are about to clear the Concordia databases stored locally in your browser.",
+  "clear.databases.modal.description.pre.user": "Be careful, {{username}}! You are about to clear the Concordia databases stored locally in your browser.",
+  "clear.databases.modal.form.username.label.guest": "Please type Concordia to confirm.",
   "clear.databases.modal.form.username.label.user": "Please type your username to confirm.",
   "clear.databases.modal.title": "Clear all Concordia databases. Are you sure?",
   "custom.loading.tab.pane.default.generic.message": "Magic in the background",

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

@@ -23,7 +23,7 @@ const ClearDatabasesModal = (props) => {
   useEffect(() => {
     if (user.hasSignedUp && confirmationInput === user.username) {
       setUserConfirmed(true);
-    } else if (!user.hasSignedUp && confirmationInput === 'concordia') {
+    } else if (!user.hasSignedUp && confirmationInput === 'Concordia') {
       setUserConfirmed(true);
     } else {
       setUserConfirmed(false);
@@ -63,7 +63,7 @@ const ClearDatabasesModal = (props) => {
       return (
           <>
               <p>
-                  {t('clear.databases.modal.description.pre')}
+                  {t('clear.databases.modal.description.pre.user', { username: user.username })}
               </p>
               <p>
                   {t('clear.databases.modal.description.body.user')}
@@ -88,7 +88,7 @@ const ClearDatabasesModal = (props) => {
     return (
         <>
             <p>
-                {t('clear.databases.modal.description.pre')}
+                {t('clear.databases.modal.description.pre.guest')}
             </p>
             <Form>
                 <Form.Field>
@@ -105,7 +105,7 @@ const ClearDatabasesModal = (props) => {
             </Form>
         </>
     );
-  }, [confirmationInput, isClearing, t, user.hasSignedUp]);
+  }, [confirmationInput, isClearing, t, user.hasSignedUp, user.username]);
 
   return useMemo(() => (
       <Modal

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

@@ -1,6 +1,4 @@
 #topic-list{
-    height: 100%;
-    margin-bottom: 4em;
+    height: auto;
     clear: both;
 }
-

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

@@ -1,13 +0,0 @@
-.stat-key {
-    background: rgba(0,0,0,.1);
-    font-weight: 700;
-}
-
-.stat-value {
-    font-size: 0.95rem;
-    cursor: pointer;
-}
-
-.stat-value:hover {
-    color: grey;
-}

packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStats/index.jsx → packages/concordia-app/src/layouts/MainLayout/MainLayoutIPFSStatus/index.jsx

@@ -8,13 +8,13 @@ import {
 import ipfsLogo from '../../../assets/images/ipfs_logo.svg';
 import './styles.css';
 
-const MainLayoutIPFSStats = () => {
+const MainLayoutIPFSStatus = () => {
   const ipfsId = useSelector((state) => state.ipfs.id);
   const peerIds = useSelector((state) => state.ipfs.peers);
   const bootstrapPeerIds = useSelector((state) => state.ipfs.bootstrapPeers);
   const peers = useMemo(() => peerIds
     .map((peerId) => (
-        <Table.Row className="stat-value">
+        <Table.Row className="status-value">
             <Table.Cell>
                 <CopyToClipboard text={peerId}>
                     <span>{peerId}</span>
@@ -26,7 +26,7 @@ const MainLayoutIPFSStats = () => {
 
   const bootstrapPeers = useMemo(() => bootstrapPeerIds
     .map((bootstrapPeerId) => (
-        <Table.Row className="stat-value">
+        <Table.Row className="status-value">
             <Table.Cell>
                 <CopyToClipboard text={bootstrapPeerId}>
                     <span>{bootstrapPeerId}</span>
@@ -39,17 +39,17 @@ const MainLayoutIPFSStats = () => {
   return (
       <Segment padded>
           <Header textAlign="center">
-              <Image src={ipfsLogo} size="tiny" />
-              IPFS Stats
+              <Image src={ipfsLogo} size="small" />
+              IPFS Status
           </Header>
-          <Table compact textAlign="center" columns={1}>
+          <Table className="status-table" compact textAlign="center" columns={1}>
               <Table.Body>
                   <Table.Row>
-                      <Table.Cell className="stat-key">Peer ID</Table.Cell>
+                      <Table.Cell className="status-key">Peer ID</Table.Cell>
                   </Table.Row>
                   <Table.Row>
                       <Table.Cell
-                        className="stat-value"
+                        className="status-value"
                       >
                           <CopyToClipboard text={ipfsId}>
                               <span>{ipfsId}</span>
@@ -57,7 +57,7 @@ const MainLayoutIPFSStats = () => {
                       </Table.Cell>
                   </Table.Row>
                   <Table.Row>
-                      <Table.Cell className="stat-key">Peers</Table.Cell>
+                      <Table.Cell className="status-key">Peers</Table.Cell>
                   </Table.Row>
                   {peers.length === 0
                     ? (
@@ -67,7 +67,7 @@ const MainLayoutIPFSStats = () => {
                     ) : null}
                   {peers}
                   <Table.Row>
-                      <Table.Cell className="stat-key">Bootstrap Peers</Table.Cell>
+                      <Table.Cell className="status-key">Bootstrap Peers</Table.Cell>
                   </Table.Row>
                   {bootstrapPeers.length === 0
                     ? (
@@ -82,4 +82,4 @@ const MainLayoutIPFSStats = () => {
   );
 };
 
-export default MainLayoutIPFSStats;
+export default MainLayoutIPFSStatus;

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

@@ -0,0 +1,18 @@
+.status-table {
+    border: 1px solid var(--secondary-color) !important;
+}
+
+.status-key {
+    background-color: var(--secondary-color);
+    color: white;
+    font-weight: 700;
+}
+
+.status-value {
+    font-size: 0.95rem;
+    cursor: pointer;
+}
+
+.status-value:hover {
+    color: grey;
+}

packages/concordia-app/src/layouts/MainLayout/MainLayoutMenu/index.jsx

@@ -31,7 +31,7 @@ const MainLayoutMenu = () => {
   return (
       <AppContext.Consumer>
           {() => (
-              <Menu inverted>
+              <Menu inverted id="main-layout-menu">
                   <Menu.Item
                     id="home-button"
                     link

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

@@ -2,8 +2,9 @@
     padding: 1.2em;
 }
 
-.ui.inverted.menu {
+#main-layout-menu {
     background: var(--secondary-color) !important;
     border-radius: 0;
+    margin-top: 0;
     margin-bottom: 4rem;
 }

packages/concordia-app/src/layouts/MainLayout/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Grid } from 'semantic-ui-react';
 import MainLayoutMenu from './MainLayoutMenu';
-import MainLayoutIPFSStats from './MainLayoutIPFSStats';
+import MainLayoutIPFSStatus from './MainLayoutIPFSStatus';
 import './styles.css';
 
 const MainLayout = (props) => {
@@ -17,7 +17,7 @@ const MainLayout = (props) => {
                   {children}
               </Grid.Column>
               <Grid.Column width={4}>
-                  <MainLayoutIPFSStats />
+                  <MainLayoutIPFSStatus />
               </Grid.Column>
           </Grid>
 

packages/concordia-app/src/redux/sagas/peerDbReplicationSaga.js

@@ -104,9 +104,7 @@ function* updateReduxState({ database }) {
 function* peerDbReplicationSaga() {
   yield takeEvery(FETCH_USER_DATABASE, fetchUserDb);
 
-  yield takeEvery(ORBIT_DB_REPLICATED, updateReduxState);
-  yield takeEvery(ORBIT_DB_READY, updateReduxState);
-  yield takeEvery(ORBIT_DB_WRITE, updateReduxState);
+  yield takeEvery([ORBIT_DB_READY, ORBIT_DB_REPLICATED, ORBIT_DB_WRITE], updateReduxState);
 }
 
 export default peerDbReplicationSaga;