new Web3message styling

client/src/components/atoms/Account.module.scss

@@ -20,6 +20,8 @@
     width: 100%;
     margin-left: calc(1.5rem + #{$spacer / 3});
     font-size: $font-size-mini;
+    font-weight: $font-weight-bold;
+    opacity: .7;
 }
 
 .blockies {

client/src/components/organisms/WalletSelector.module.scss

@@ -2,8 +2,9 @@
 
 .openLink {
     margin: 0;
-    margin-top: $spacer / 2;
-    margin-left: $spacer;
+    margin-left: $spacer * 1.5;
+    font-size: $font-size-small !important; // stylelint-disable-line
+    text-transform: uppercase;
 }
 
 .info {

client/src/components/organisms/Web3message.module.scss

@@ -9,20 +9,24 @@
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
     text-align: left;
+    font-size: $font-size-small;
 
     > div:first-child {
         margin-bottom: $spacer / 2;
+        background: $brand-white;
+        border-radius: $border-radius;
+        border: 1px solid $brand-grey-lighter;
+        padding: $spacer / 2;
     }
 }
 
 .text {
-    margin-left: $spacer;
+    padding-left: $spacer * 1.5;
     display: inline-block;
 }
 
 .status {
-    position: absolute;
-    left: 0;
-    top: $spacer / 1.5;
+    margin-left: -($spacer / 1.2);
+    margin-right: $spacer / 2.5;
     padding: 0;
 }

client/src/components/organisms/Web3message.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import Web3message from './Web3message'
 import { User } from '../../context'
 import { userMock, userMockConnected } from '../../../__mocks__/user-mock'
@@ -16,7 +16,9 @@ describe('Web3message', () => {
 
     it('renders with wrongNetwork message', () => {
         const { container } = render(
-            <User.Provider value={{ ...userMockConnected, isOceanNetwork: false }}>
+            <User.Provider
+                value={{ ...userMockConnected, isOceanNetwork: false }}
+            >
                 <Web3message />
             </User.Provider>
         )
@@ -27,9 +29,7 @@ describe('Web3message', () => {
 
     it('renders with noAccount message', () => {
         const { container } = render(
-            <User.Provider
-                value={{ ...userMock, isOceanNetwork: true }}
-            >
+            <User.Provider value={{ ...userMock, isOceanNetwork: true }}>
                 <Web3message />
             </User.Provider>
         )

client/src/components/organisms/Web3message.tsx

@@ -13,7 +13,7 @@ export default class Web3message extends PureComponent {
         const { isOceanNetwork, isLogged, isBurner } = this.context
 
         return !isOceanNetwork && !isBurner
-            ? content.wrongNetwork
+            ? content.wrongNetworkPacific
             : !isLogged
             ? content.noAccount
             : isBurner
@@ -26,18 +26,16 @@ export default class Web3message extends PureComponent {
     public render() {
         return (
             <div className={styles.message}>
-                {this.context.account ? (
+                {this.context.account && (
                     <Account
                         account={this.context.account}
                         isBurner={this.context.isBurner}
                     />
-                ) : (
-                    <AccountStatus className={styles.status} />
                 )}
-                <em
-                    className={styles.text}
-                    dangerouslySetInnerHTML={{ __html: this.message() }}
-                />{' '}
+                <p className={styles.text}>
+                    <AccountStatus className={styles.status} />
+                    <em dangerouslySetInnerHTML={{ __html: this.message() }} />
+                </p>
                 <WalletSelector />
             </div>
         )

client/src/data/web3message.json

@@ -1,6 +1,8 @@
 {
   "noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.",
-  "hasBurnerWallet": "<p>We created a temporary burner wallet for you, allowing you to use all Commons functionality without any setup on your side. This wallet will persist in your browser across sessions, but not across different browsers or devices.</p>To personalize your experience and improve your security, <a href='https://docs.oceanprotocol.com/tutorials/metamask-setup/'>migrate to MetaMask</a>.",
+  "hasBurnerWallet": "We created a temporary burner wallet for you, allowing you to use all Commons functionality without any setup on your side. This wallet will persist in your browser across sessions, but not across different browsers or devices. To personalize your experience and improve your security, <a href='https://docs.oceanprotocol.com/tutorials/metamask-setup/'>learn how to migrate to MetaMask</a>.",
   "hasMetaMaskWallet": "Connected with MetaMask.",
-  "wrongNetwork": "Not connected to Pacific network.<br />Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>"
+  "wrongNetworkPacific": "Not connected to Pacific network.<br />Please connect in MetaMask with Custom RPC <code>https://pacific.oceanprotocol.com</code>",
+  "wrongNetworkNile": "Not connected to Nile network.<br />Please connect in MetaMask with Custom RPC <code>https://nile.dev-ocean.com</code>",
+  "wrongNetworkDuero": "Not connected to Duero network.<br />Please connect in MetaMask with Custom RPC <code>https://duero.dev-ocean.com</code>"
 }

client/src/routes/About.tsx

@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { Market } from '../context'
 import Route from '../components/templates/Route'
 import Content from '../components/atoms/Content'
 import VersionNumbers from '../components/molecules/VersionNumbers'
@@ -6,17 +7,19 @@ import Web3message from '../components/organisms/Web3message'
 import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
 
 class About extends Component {
+    public static contextType = Market
+
     public render() {
         return (
             <Route
                 title="About"
-                description="A marketplace to find and publish open data sets in the Ocean Pacific Network."
+                description={`A marketplace to find and publish open data sets in the Ocean ${this.context.network} Network.`}
             >
                 <Content>
                     <p>
                         Commons is built on top of the Ocean{' '}
                         <a href="https://docs.oceanprotocol.com/concepts/pacific-network/">
-                            Pacific network
+                            {this.context.network} network
                         </a>{' '}
                         and is targeted at enthusiastic data scientists with
                         some crypto experience. It can be used with any

client/src/routes/History.test.tsx

@@ -16,7 +16,6 @@ describe('History', () => {
     })
 
     it('outputs no wallet selected', () => {
-
         const { container } = render(
             <User.Provider value={{ ...userMock, isOceanNetwork: true }}>
                 <MemoryRouter>