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; padding: 0;
color: $brand-pink; color: $brand-pink;
font-size: $font-size-base; font-size: $font-size-base;
font-weight: $font-weight-base;
font-family: inherit; font-family: inherit;
box-shadow: none; box-shadow: none;
cursor: pointer; cursor: pointer;

View File

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

View File

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