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

success message styling

This commit is contained in:
Matthias Kretschmann 2019-04-03 16:39:13 +02:00
parent e29b5ff1b6
commit 0d4d955194
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 62 additions and 11 deletions

View File

@ -66,6 +66,7 @@
padding: 0;
color: $brand-pink;
font-size: $font-size-base;
font-weight: $font-weight-base;
font-family: inherit;
box-shadow: none;
cursor: pointer;

View File

@ -1,4 +1,5 @@
import React, { PureComponent } from 'react'
import { Link } from 'react-router-dom'
import cx from 'classnames'
import styles from './Button.module.scss'
@ -10,6 +11,7 @@ interface ButtonProps {
href?: string
onClick?: any
disabled?: boolean
to?: string
}
export default class Button extends PureComponent<ButtonProps, any> {
@ -21,6 +23,7 @@ export default class Button extends PureComponent<ButtonProps, any> {
href,
children,
className,
to,
...props
} = this.props
@ -32,11 +35,23 @@ export default class Button extends PureComponent<ButtonProps, any> {
classes = styles.button
}
return href ? (
if (to) {
return (
<Link to={to} className={cx(classes, className)} {...props}>
{children}
</Link>
)
}
if (href) {
return (
<a href={href} className={cx(classes, className)} {...props}>
{children}
</a>
) : (
)
}
return (
<button className={cx(classes, className)} {...props}>
{children}
</button>

View File

@ -3,3 +3,35 @@
.message {
margin-bottom: $spacer;
}
.success {
composes: message;
background: $green;
padding: $spacer / 1.5;
border-radius: $border-radius;
color: $brand-white;
font-weight: $font-weight-bold;
text-align: center;
&,
a,
button {
color: $brand-white;
}
a,
button {
transition: color .2s ease-out;
&:hover,
&:focus {
color: $brand-pink;
transform: none;
}
}
a {
display: inline-block;
margin-right: $spacer;
}
}

View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import Web3message from '../../components/organisms/Web3message'
import Spinner from '../../components/atoms/Spinner'
import Button from '../../components/atoms/Button'
import styles from './StepRegisterContent.module.scss'
interface StepRegisterContentProps {
@ -26,11 +27,14 @@ export default class StepRegisterContent extends PureComponent<
)
public publishedState = () => (
<div className={styles.message}>
Your asset is published! See it{' '}
<a href={'/asset/' + this.props.state.publishedDid}>here</a>, submit
another asset by clicking{' '}
<a onClick={() => this.props.toStart()}>here</a>
<div className={styles.success}>
<p>Your asset is published!</p>
<Button link to={'/asset/' + this.props.state.publishedDid}>
See published asset
</Button>
<Button link onClick={() => this.props.toStart()}>
Publish another asset
</Button>
</div>
)
@ -38,7 +42,6 @@ export default class StepRegisterContent extends PureComponent<
return (
<>
<Web3message />
{this.props.state.isPublishing ? (
this.publishingState()
) : this.props.state.publishingError ? (