Fix media editing modal and profile directory in light theme (#12059)

Also:

- Fix embed modal in light theme
- Fix confirmation modal in light theme
This commit is contained in:
Eugen Rochko 2019-10-03 03:17:29 +02:00 committed by GitHub
parent ca22a22d7f
commit f51f99c3c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 109 additions and 14 deletions

View file

@ -1,8 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl } from 'react-intl';
import api from '../../../api';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import api from 'mastodon/api';
import IconButton from 'mastodon/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
export default @injectIntl
class EmbedModal extends ImmutablePureComponent {
@ -50,13 +55,17 @@ class EmbedModal extends ImmutablePureComponent {
}
render () {
const { intl, onClose } = this.props;
const { oembed } = this.state;
return (
<div className='modal-root__modal embed-modal'>
<h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4>
<div className='modal-root__modal report-modal embed-modal'>
<div className='report-modal__target'>
<IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
<FormattedMessage id='status.embed' defaultMessage='Embed' />
</div>
<div className='embed-modal__container'>
<div className='report-modal__container embed-modal__container' style={{ display: 'block' }}>
<p className='hint'>
<FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
</p>

View file

@ -14,15 +14,49 @@ html {
}
}
.status-card__actions button,
.status-card__actions a {
color: rgba($white, 0.8);
&:hover,
&:active,
&:focus {
color: $white;
}
}
// Change default background colors of columns
.column > .scrollable,
.getting-started,
.column-inline-form {
.column-inline-form,
.error-column,
.regeneration-indicator {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
border-top: 0;
}
.directory__card__img {
background: lighten($ui-base-color, 12%);
}
.filter-form,
.directory__card__bar {
background: $white;
border-bottom: 1px solid lighten($ui-base-color, 8%);
}
.scrollable .directory__list {
width: calc(100% + 2px);
margin-left: -1px;
margin-right: -1px;
}
.directory__card,
.table-of-contents {
border: 1px solid lighten($ui-base-color, 8%);
}
.column-back-button,
.column-header {
background: $white;
@ -33,16 +67,16 @@ html {
}
&--slim-button {
border: 0;
top: -49px;
right: 1px;
top: -50px;
right: 0;
}
}
.column-header__back-button,
.column-header__button,
.column-header__button.active,
.account__header__bar {
.account__header__bar,
.directory__card__extra {
background: $white;
}
@ -66,6 +100,19 @@ html {
text-decoration: underline;
}
.confirmation-modal__secondary-button,
.confirmation-modal__cancel-button,
.mute-modal__cancel-button,
.block-modal__cancel-button {
color: lighten($ui-base-color, 26%);
&:hover,
&:focus,
&:active {
color: $primary-text-color;
}
}
.column-subheading {
background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -314,8 +361,19 @@ html {
.report-modal,
.embed-modal,
.error-modal,
.onboarding-modal {
background: $ui-base-color;
.onboarding-modal,
.report-modal__comment .setting-text__wrapper,
.report-modal__comment .setting-text {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
}
.report-modal__comment {
border-right-color: lighten($ui-base-color, 8%);
}
.report-modal__container {
border-top-color: lighten($ui-base-color, 8%);
}
.column-header__collapsible-inner {
@ -324,6 +382,10 @@ html {
border-top: 0;
}
.focal-point__preview strong {
color: $white;
}
.boost-modal__action-bar,
.confirmation-modal__action-bar,
.mute-modal__action-bar,
@ -348,9 +410,11 @@ html {
.embed-modal .embed-modal__container .embed-modal__html {
background: $white;
border: 1px solid lighten($ui-base-color, 8%);
&:focus {
background: darken($ui-base-color, 6%);
border-color: lighten($ui-base-color, 12%);
background: $white;
}
}

View file

@ -8,7 +8,7 @@ $classic-secondary-color: #d9e1e8;
$classic-highlight-color: #2b90d9;
// Differences
$success-green: #3c754d;
$success-green: lighten(#3c754d, 8%);
$base-overlay-background: $white !default;
$valid-value-color: $success-green !default;

View file

@ -1486,6 +1486,10 @@ a.account__display-name {
color: inherit;
}
.detailed-status .button.logo-button {
margin-bottom: 15px;
}
.detailed-status__display-name {
color: $secondary-text-color;
display: block;
@ -4854,6 +4858,7 @@ a.status-card.compact:hover {
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: transparent;
}
}
@ -5850,6 +5855,7 @@ noscript {
}
.embed-modal {
width: auto;
max-width: 80vw;
max-height: 80vh;
@ -5880,6 +5886,7 @@ noscript {
font-size: 14px;
margin: 0;
margin-bottom: 15px;
border-radius: 4px;
&::-moz-focus-inner {
border: 0;
@ -5905,6 +5912,7 @@ noscript {
max-width: 100%;
overflow: hidden;
border: 0;
border-radius: 4px;
}
}
}

View file

@ -412,6 +412,20 @@
}
}
.directory__card {
border-radius: 4px;
@media screen and (max-width: $no-gap-breakpoint) {
border-radius: 0;
}
}
.page-header {
@media screen and (max-width: $no-gap-breakpoint) {
border-bottom: 0;
}
}
.public-account-header {
overflow: hidden;
margin-bottom: 10px;