Commit 49868d9f authored by Luke Schoen's avatar Luke Schoen
Browse files

fix: Fix header title push right button area right. Fix account header title left

* Remove useless .header-container

* Add width to .account_information to fit full title width

* Use `flex-grow` instead of abbreviation `flex`

* Use justify-content: left to align account info and avatar to left and remove flex: 0 from .header-tokens
parent eb39780c
Pipeline #28684 passed with stage
in 2 minutes
......@@ -6,11 +6,6 @@
align-items: center;
}
&.-header-container {
display: flex;
padding-left: 0.5rem;
}
.account_avatar {
display: flex;
flex-direction: column;
......@@ -30,9 +25,8 @@
}
.account_information {
padding-left: 0.325rem;
overflow: hidden;
flex-grow: 1;
width: 14rem; /* click to copy area stretched */
padding-left: 0.325rem; /* gap from avatar */
}
.account_change_blockies {
......@@ -46,9 +40,10 @@
font-weight: 500;
margin-bottom: 0.1rem;
/* Information component when used with components
/**
* Information component when used with components
* in the header requires more bottom margin than
* where it is used in the AccountList componet
* where it is used in the AccountList component
*/
&.-header {
margin-top: 0.2rem;
......
......@@ -20,14 +20,17 @@
}
.header-nav_title {
align-items: center;
flex: 1; // https://stackoverflow.com/a/35270047/3208553
align-items: center; /* vertical alignment of titles */
/**
* Push the the area for the right button to the right
* https://stackoverflow.com/a/35270047/3208553
*/
flex-grow: 1;
justify-content: center;
z-index: 2;
&.-header-tokens {
flex: 0;
padding-left: 0.5rem;
justify-content: left; /* account info horizontal alignment */
}
a,
......
......@@ -40,7 +40,7 @@ export const AccountHeader = ({
address &&
name &&
type && (
<Container address={address} className='account -header-container'>
<Container address={address} className='account'>
<Avatar address={address} scale={4} type={type} />
<Information>
<Name name={name} />
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment