success message styling

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

@@ -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;

client/src/components/atoms/Button.tsx

@@ -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 ? (
-            <a href={href} className={cx(classes, className)} {...props}>
-                {children}
-            </a>
-        ) : (
+        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>

client/src/routes/Publish/StepRegisterContent.module.scss

@@ -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;
+    }
+}

client/src/routes/Publish/StepRegisterContent.tsx

@@ -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 ? (