1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

new Web3message styling

This commit is contained in:
Matthias Kretschmann 2019-07-10 14:29:46 +02:00
parent ac2cd2eb70
commit 7b334b9104
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 33 additions and 24 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,6 +1,8 @@
{ {
"noAccount": "No wallet selected. For publishing and downloading an asset you need to use one.", "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.", "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>"
} }

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import { Market } from '../context'
import Route from '../components/templates/Route' import Route from '../components/templates/Route'
import Content from '../components/atoms/Content' import Content from '../components/atoms/Content'
import VersionNumbers from '../components/molecules/VersionNumbers' 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' import stylesVersionNumbers from '../components/molecules/VersionNumbers/index.module.scss'
class About extends Component { class About extends Component {
public static contextType = Market
public render() { public render() {
return ( return (
<Route <Route
title="About" 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> <Content>
<p> <p>
Commons is built on top of the Ocean{' '} Commons is built on top of the Ocean{' '}
<a href="https://docs.oceanprotocol.com/concepts/pacific-network/"> <a href="https://docs.oceanprotocol.com/concepts/pacific-network/">
Pacific network {this.context.network} network
</a>{' '} </a>{' '}
and is targeted at enthusiastic data scientists with and is targeted at enthusiastic data scientists with
some crypto experience. It can be used with any some crypto experience. It can be used with any

View File

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