From 8bb8111acaba65a23d836a8e3264c3638b6e4a18 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 10 Jul 2019 15:41:58 +0200
Subject: [PATCH] basic wallet modal styling

---
 .../VersionNumbers/VersionStatus.module.scss  |  4 +-
 .../organisms/WalletSelector.module.scss      | 52 +++++++++++--------
 .../components/organisms/WalletSelector.tsx   | 28 ++++++++--
 .../organisms/Web3message.module.scss         |  3 +-
 4 files changed, 56 insertions(+), 31 deletions(-)

diff --git a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss
index ed2f600..acf3f1b 100644
--- a/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss
+++ b/client/src/components/molecules/VersionNumbers/VersionStatus.module.scss
@@ -10,8 +10,8 @@
 
 .element {
     display: inline-block;
-    margin-left: $spacer / 2;
-    margin-right: $spacer / 2;
+    margin-left: $spacer / 1.5;
+    margin-right: $spacer / 1.5;
     text-align: center;
 }
 
diff --git a/client/src/components/organisms/WalletSelector.module.scss b/client/src/components/organisms/WalletSelector.module.scss
index 9e3be32..74e3851 100644
--- a/client/src/components/organisms/WalletSelector.module.scss
+++ b/client/src/components/organisms/WalletSelector.module.scss
@@ -8,39 +8,47 @@
 }
 
 .info {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.button {
+    flex: 0 0 100%;
     background: $brand-white;
-    padding: $spacer;
     border: 1px solid $brand-grey-lighter;
     border-radius: $border-radius;
+    padding: $spacer $spacer / 1.5;
+    font-family: $font-family-base;
+    display: inline-block;
+    display: flex;
+    flex-wrap: wrap;
+    cursor: pointer;
+    transition: border .2s ease-out;
+    margin-bottom: $spacer;
 
-    h3 {
-        font-size: $font-size-base;
-        margin-top: 0;
-        margin-bottom: $spacer / 8;
+    @media (min-width: $break-point--small) {
+        flex-basis: 48%;
+        margin-bottom: 0;
     }
 
-    p {
-        border-bottom: 1px solid $brand-grey-lighter;
-        padding-bottom: $spacer / 2;
+    &:hover,
+    &:focus {
+        border-color: $brand-pink;
     }
 
-    code {
-        padding: 0;
-        color: $brand-grey-light;
+    span {
+        display: block;
+        width: 100%;
     }
 }
 
-.error {
-    background: $red;
-    padding: $spacer / 2;
-    text-align: center;
-    color: $brand-white;
-    border-radius: $border-radius;
+.buttonTitle {
+    font-size: $font-size-base;
+    margin-bottom: $spacer / 8;
     font-weight: $font-weight-bold;
+}
+
+.buttonDescription {
     font-size: $font-size-small;
 }
-
-.success {
-    composes: error;
-    background: $green;
-}
diff --git a/client/src/components/organisms/WalletSelector.tsx b/client/src/components/organisms/WalletSelector.tsx
index 1fa251a..a3e9528 100644
--- a/client/src/components/organisms/WalletSelector.tsx
+++ b/client/src/components/organisms/WalletSelector.tsx
@@ -41,16 +41,34 @@ export default class WalletSelector extends PureComponent<
                 </Button>
                 <Modal
                     title="Select wallet"
-                    description="Select wallet."
+                    description="Select the wallet you want to use in the Commons Marketplace."
                     isOpen={this.state.isModalOpen}
                     toggleModal={this.toggleModal}
                 >
                     <div className={styles.info}>
-                        <button onClick={this.loginBurnerWallet}>
-                            login BurnerWallet
+                        <button
+                            className={styles.button}
+                            onClick={this.loginBurnerWallet}
+                        >
+                            <span className={styles.buttonTitle}>
+                                BurnerWallet
+                            </span>
+                            <span className={styles.buttonDescription}>
+                                Provides the easiest way to use Commons without
+                                further setup. But the wallet will be gone when
+                                you change browsers or clear your cache.
+                            </span>
                         </button>
-                        <button onClick={this.loginMetamask}>
-                            login Metamask
+                        <button
+                            className={styles.button}
+                            onClick={this.loginMetamask}
+                        >
+                            <span className={styles.buttonTitle}>MetaMask</span>
+                            <span className={styles.buttonDescription}>
+                                Provides the most secure experience attaching
+                                everything you do in Commons to an account you
+                                control. But you need to setup MetaMask first.
+                            </span>
                         </button>
                     </div>
                 </Modal>
diff --git a/client/src/components/organisms/Web3message.module.scss b/client/src/components/organisms/Web3message.module.scss
index b8f2bb5..8913012 100644
--- a/client/src/components/organisms/Web3message.module.scss
+++ b/client/src/components/organisms/Web3message.module.scss
@@ -4,8 +4,6 @@
     margin-bottom: $spacer;
     color: $brand-grey;
     position: relative;
-    border-bottom: .1rem solid $brand-grey-lighter;
-    border-top: .1rem solid $brand-grey-lighter;
     padding-top: $spacer / 2;
     padding-bottom: $spacer / 2;
     text-align: left;
@@ -23,6 +21,7 @@
 .text {
     padding-left: $spacer * 1.5;
     display: inline-block;
+    margin-bottom: 0;
 }
 
 .status {