diff options
author | Thibaut Girka <thib@sitedethib.com> | 2020-07-07 17:47:33 +0200 |
---|---|---|
committer | ThibG <thib@sitedethib.com> | 2020-07-07 19:25:42 +0200 |
commit | 64b6c20676f320686c58e321b674cba757e40905 (patch) | |
tree | e734b6c55e3b4b6903e1c98ccc7ebed5100357d2 /app/javascript/flavours/glitch | |
parent | a9b13804e25b1697fcbf2dcda5835a0dfdc5cd50 (diff) |
Change styling and layout of account notes UI
Diffstat (limited to 'app/javascript/flavours/glitch')
-rw-r--r-- | app/javascript/flavours/glitch/features/account/components/account_note.js | 19 | ||||
-rw-r--r-- | app/javascript/flavours/glitch/styles/components/accounts.scss | 32 |
2 files changed, 30 insertions, 21 deletions
diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.js b/app/javascript/flavours/glitch/features/account/components/account_note.js index 3163b8735..8a99bfcb8 100644 --- a/app/javascript/flavours/glitch/features/account/components/account_note.js +++ b/app/javascript/flavours/glitch/features/account/components/account_note.js @@ -63,6 +63,14 @@ class Header extends ImmutablePureComponent { </button> </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; @@ -85,17 +93,10 @@ class Header extends ImmutablePureComponent { return ( <div className='account__header__account-note'> <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> - {!isEditing && ( - <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> - )} + <strong><FormattedMessage id='account.account_note_header' defaultMessage='Note' /></strong> + {action_buttons} </div> {note_container} - {action_buttons} </div> ); } diff --git a/app/javascript/flavours/glitch/styles/components/accounts.scss b/app/javascript/flavours/glitch/styles/components/accounts.scss index 774254a4c..c1e3ae835 100644 --- a/app/javascript/flavours/glitch/styles/components/accounts.scss +++ b/app/javascript/flavours/glitch/styles/components/accounts.scss @@ -714,42 +714,44 @@ } &__account-note { - margin: 5px; - padding: 10px; - background: $ui-highlight-color; - color: $primary-text-color; + margin: 0 -5px; + padding: 10px 15px; display: flex; flex-direction: column; - border-radius: 4px; font-size: 14px; font-weight: 400; + border-top: 1px solid lighten($ui-base-color, 12%); + border-bottom: 1px solid lighten($ui-base-color, 12%); &__header { display: flex; flex-direction: row; justify-content: space-between; + margin-bottom: 5px; + color: $darker-text-color; } &__content { white-space: pre-wrap; - margin-top: 5px; + padding: 10px 0; } &__buttons { display: flex; flex-direction: row; justify-content: flex-end; - margin-top: 5px; + flex: 1 0; .flex-spacer { - flex: 0 0 20px; + flex: 0 0 15px; background: transparent; } } strong { - font-size: 15px; + font-size: 12px; font-weight: 500; + text-transform: uppercase; } button:hover span { @@ -759,18 +761,24 @@ textarea { display: block; box-sizing: border-box; - width: 100%; + width: calc(100% + 20px); margin: 0; margin-top: 5px; - color: $inverted-text-color; - background: $simple-background-color; + color: $secondary-text-color; + background: $ui-base-color; padding: 10px; + margin: 0 -10px; font-family: inherit; font-size: 14px; resize: none; border: 0; outline: 0; border-radius: 4px; + + &::placeholder { + color: $dark-text-color; + opacity: 1; + } } } } |