Fix light theme issues with the favourite modal and some background colors (#1902)

* Fix favourite modal styling in glitch-soc light theme

* Fix unnecessary difference between glitch-soc's light theme and upstream's
This commit is contained in:
Claire 2022-11-07 10:34:18 +01:00 committed by GitHub
parent 74b407fc3f
commit 55e949369e
4 changed files with 11 additions and 17 deletions

View file

@ -58,11 +58,11 @@ class FavouriteModal extends ImmutablePureComponent {
const { status, intl } = this.props; const { status, intl } = this.props;
return ( return (
<div className='modal-root__modal favourite-modal'> <div className='modal-root__modal boost-modal'>
<div className='favourite-modal__container'> <div className='boost-modal__container'>
<div className={classNames('status', `status-${status.get('visibility')}`, 'light')}> <div className={classNames('status', `status-${status.get('visibility')}`, 'light')}>
<div className='favourite-modal__status-header'> <div className='boost-modal__status-header'>
<div className='favourite-modal__status-time'> <div className='boost-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<VisibilityIcon visibility={status.get('visibility')} /> <VisibilityIcon visibility={status.get('visibility')} />
<RelativeTimestamp timestamp={status.get('created_at')} /> <RelativeTimestamp timestamp={status.get('created_at')} />
@ -90,7 +90,7 @@ class FavouriteModal extends ImmutablePureComponent {
</div> </div>
</div> </div>
<div className='favourite-modal__action-bar'> <div className='boost-modal__action-bar'>
<div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div> <div><FormattedMessage id='favourite_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='star' /></span> }} /></div>
<Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} /> <Button text={intl.formatMessage(messages.favourite)} onClick={this.handleFavourite} ref={this.setRef} />
</div> </div>

View file

@ -416,7 +416,6 @@
} }
.boost-modal, .boost-modal,
.favourite-modal,
.confirmation-modal, .confirmation-modal,
.report-modal, .report-modal,
.actions-modal, .actions-modal,
@ -461,7 +460,7 @@
} }
} }
.favourite-modal .status-direct { .boost-modal .status-direct {
background-color: inherit; background-color: inherit;
} }
@ -478,8 +477,7 @@
} }
} }
.boost-modal__container, .boost-modal__container {
.favourite-modal__container {
overflow-x: scroll; overflow-x: scroll;
padding: 10px; padding: 10px;
@ -490,7 +488,6 @@
} }
.boost-modal__action-bar, .boost-modal__action-bar,
.favourite-modal__action-bar,
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar, .mute-modal__action-bar,
.block-modal__action-bar { .block-modal__action-bar {
@ -512,13 +509,11 @@
} }
} }
.boost-modal__status-header, .boost-modal__status-header {
.favourite-modal__status-header {
font-size: 15px; font-size: 15px;
} }
.boost-modal__status-time, .boost-modal__status-time {
.favourite-modal__status-time {
float: right; float: right;
font-size: 14px; font-size: 14px;
} }

View file

@ -382,7 +382,7 @@ html {
.picture-in-picture__header, .picture-in-picture__header,
.picture-in-picture__footer, .picture-in-picture__footer,
.reactions-bar__item { .reactions-bar__item {
background: $ui-base-color; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
} }

View file

@ -41,8 +41,7 @@ body.rtl {
margin-left: 4px; margin-left: 4px;
} }
.boost-modal__status-time, .boost-modal__status-time {
.favourite-modal__status-time {
float: left; float: left;
} }