Adjust selection colours/display (#4811)
* Adjust selection colours to match with mui * allow -> disable (simplify selections) * Only use top-border * Overlay selection line * Slightly more muted unselected * Restore address icon
This commit is contained in:
parent
f0f2d00924
commit
f16b53d92a
@ -110,12 +110,6 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
|
||||||
.address {
|
|
||||||
&:hover {
|
|
||||||
cursor: text;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.accountName {
|
.accountName {
|
||||||
|
@ -28,15 +28,15 @@ import styles from './accountCard.css';
|
|||||||
export default class AccountCard extends Component {
|
export default class AccountCard extends Component {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
account: PropTypes.object.isRequired,
|
account: PropTypes.object.isRequired,
|
||||||
allowAddressClick: PropTypes.bool,
|
|
||||||
balance: PropTypes.object,
|
balance: PropTypes.object,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
|
disableAddressClick: PropTypes.bool,
|
||||||
onClick: PropTypes.func,
|
onClick: PropTypes.func,
|
||||||
onFocus: PropTypes.func
|
onFocus: PropTypes.func
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
allowAddressClick: false
|
disableAddressClick: false
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
@ -138,14 +138,14 @@ export default class AccountCard extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleAddressClick = (event) => {
|
handleAddressClick = (event) => {
|
||||||
const { allowAddressClick } = this.props;
|
const { disableAddressClick } = this.props;
|
||||||
|
|
||||||
// Don't stop the event if address click is allowed
|
// Stop the event if address click is disallowed
|
||||||
if (allowAddressClick) {
|
if (disableAddressClick) {
|
||||||
return this.onClick(event);
|
return this.preventEvent(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
return this.preventEvent(event);
|
return this.onClick(event);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleKeyDown = (event) => {
|
handleKeyDown = (event) => {
|
||||||
|
@ -348,7 +348,6 @@ class AddressSelect extends Component {
|
|||||||
return (
|
return (
|
||||||
<AccountCard
|
<AccountCard
|
||||||
account={ account }
|
account={ account }
|
||||||
allowAddressClick
|
|
||||||
balance={ balance }
|
balance={ balance }
|
||||||
className={ styles.account }
|
className={ styles.account }
|
||||||
key={ `account_${index}` }
|
key={ `account_${index}` }
|
||||||
|
@ -16,7 +16,6 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
border: 2px solid transparent;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@ -25,7 +24,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: transparent;
|
|
||||||
filter: none;
|
filter: none;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@ -35,7 +33,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
background-color: rgba(255, 255, 255, 0.15);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -68,15 +66,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.selected {
|
.selected {
|
||||||
border-color: rgba(255, 255, 255, 0.25);
|
|
||||||
filter: none;
|
filter: none;
|
||||||
|
|
||||||
&.default {
|
&::after {
|
||||||
border-color: rgba(255, 255, 255, 0.75);
|
background: rgb(0, 151, 167);
|
||||||
|
content: '';
|
||||||
|
height: 4px;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.default::after {
|
||||||
|
background: rgb(167, 151, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.unselected {
|
.unselected {
|
||||||
filter: grayscale(10%);
|
filter: grayscale(50%);
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user