Change styling and layout of account notes UI
This commit is contained in:
parent
a9b13804e2
commit
64b6c20676
|
@ -63,6 +63,14 @@ class Header extends ImmutablePureComponent {
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
} else {
|
||||||
|
action_buttons = (
|
||||||
|
<div className='account__header__account-note__buttons'>
|
||||||
|
<button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
|
||||||
|
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
let note_container = null;
|
let note_container = null;
|
||||||
|
@ -85,17 +93,10 @@ class Header extends ImmutablePureComponent {
|
||||||
return (
|
return (
|
||||||
<div className='account__header__account-note'>
|
<div className='account__header__account-note'>
|
||||||
<div className='account__header__account-note__header'>
|
<div className='account__header__account-note__header'>
|
||||||
<strong><FormattedMessage id='account.account_note_header' defaultMessage='Your note for @{name}' values={{ name: account.get('username') }} /></strong>
|
<strong><FormattedMessage id='account.account_note_header' defaultMessage='Note' /></strong>
|
||||||
{!isEditing && (
|
{action_buttons}
|
||||||
<div>
|
|
||||||
<button className='text-btn' tabIndex='0' onClick={this.props.onEditAccountNote} disabled={isSubmitting}>
|
|
||||||
<Icon id='pencil' size={15} /> <FormattedMessage id='account_note.edit' defaultMessage='Edit' />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{note_container}
|
{note_container}
|
||||||
{action_buttons}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -714,42 +714,44 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__account-note {
|
&__account-note {
|
||||||
margin: 5px;
|
margin: 0 -5px;
|
||||||
padding: 10px;
|
padding: 10px 15px;
|
||||||
background: $ui-highlight-color;
|
|
||||||
color: $primary-text-color;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
border-top: 1px solid lighten($ui-base-color, 12%);
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 12%);
|
||||||
|
|
||||||
&__header {
|
&__header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
color: $darker-text-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
margin-top: 5px;
|
padding: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__buttons {
|
&__buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: 5px;
|
flex: 1 0;
|
||||||
|
|
||||||
.flex-spacer {
|
.flex-spacer {
|
||||||
flex: 0 0 20px;
|
flex: 0 0 15px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
strong {
|
strong {
|
||||||
font-size: 15px;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover span {
|
button:hover span {
|
||||||
|
@ -759,18 +761,24 @@
|
||||||
textarea {
|
textarea {
|
||||||
display: block;
|
display: block;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: calc(100% + 20px);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
color: $inverted-text-color;
|
color: $secondary-text-color;
|
||||||
background: $simple-background-color;
|
background: $ui-base-color;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
margin: 0 -10px;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
resize: none;
|
resize: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
|
&::placeholder {
|
||||||
|
color: $dark-text-color;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue