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:
parent
7b334b9104
commit
8bb8111aca
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user