basic wallet modal styling

client/src/components/molecules/VersionNumbers/VersionStatus.module.scss

@@ -10,8 +10,8 @@
 
 .element {
     display: inline-block;
-    margin-left: $spacer / 2;
+    margin-left: $spacer / 1.5;
-    margin-right: $spacer / 2;
+    margin-right: $spacer / 1.5;
     text-align: center;
 }
 

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 {
+    @media (min-width: $break-point--small) {
-        font-size: $font-size-base;
+        flex-basis: 48%;
-        margin-top: 0;
+        margin-bottom: 0;
-        margin-bottom: $spacer / 8;
     }
 
-    p {
+    &:hover,
-        border-bottom: 1px solid $brand-grey-lighter;
+    &:focus {
-        padding-bottom: $spacer / 2;
+        border-color: $brand-pink;
     }
 
-    code {
+    span {
-        padding: 0;
+        display: block;
-        color: $brand-grey-light;
+        width: 100%;
     }
 }
 
-.error {
+.buttonTitle {
-    background: $red;
+    font-size: $font-size-base;
-    padding: $spacer / 2;
+    margin-bottom: $spacer / 8;
-    text-align: center;
-    color: $brand-white;
-    border-radius: $border-radius;
     font-weight: $font-weight-bold;
+}
+
+.buttonDescription {
     font-size: $font-size-small;
 }
-
-.success {
-    composes: error;
-    background: $green;
-}

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}>
+                        <button
-                            login BurnerWallet
+                            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}>
+                        <button
-                            login Metamask
+                            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>

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 {