From 0d4d955194a07ed21a016273373f17b8da5cbbe5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 3 Apr 2019 16:39:13 +0200
Subject: [PATCH] success message styling

---
 .../src/components/atoms/Button.module.scss   |  1 +
 client/src/components/atoms/Button.tsx        | 25 ++++++++++++---
 .../Publish/StepRegisterContent.module.scss   | 32 +++++++++++++++++++
 .../routes/Publish/StepRegisterContent.tsx    | 15 +++++----
 4 files changed, 62 insertions(+), 11 deletions(-)

diff --git a/client/src/components/atoms/Button.module.scss b/client/src/components/atoms/Button.module.scss
index 1726a92..1fb2f81 100644
--- a/client/src/components/atoms/Button.module.scss
+++ b/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;
diff --git a/client/src/components/atoms/Button.tsx b/client/src/components/atoms/Button.tsx
index 473db50..4beb571 100644
--- a/client/src/components/atoms/Button.tsx
+++ b/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>
diff --git a/client/src/routes/Publish/StepRegisterContent.module.scss b/client/src/routes/Publish/StepRegisterContent.module.scss
index 60a5936..ce10169 100644
--- a/client/src/routes/Publish/StepRegisterContent.module.scss
+++ b/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;
+    }
+}
diff --git a/client/src/routes/Publish/StepRegisterContent.tsx b/client/src/routes/Publish/StepRegisterContent.tsx
index 566f36a..982141f 100644
--- a/client/src/routes/Publish/StepRegisterContent.tsx
+++ b/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 ? (