1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

basic wallet modal styling

This commit is contained in:
Matthias Kretschmann 2019-07-10 15:41:58 +02:00
parent 7b334b9104
commit 8bb8111aca
Signed by: m
GPG Key ID: 606EEEF3C479A91F
4 changed files with 56 additions and 31 deletions

View File

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

View File

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

View File

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

View File

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