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 React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { FormattedMessage, injectIntl } from 'react-intl'; import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import api from '../../../api'; import api from 'mastodon/api';
import IconButton from 'mastodon/components/icon_button';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
export default @injectIntl export default @injectIntl
class EmbedModal extends ImmutablePureComponent { class EmbedModal extends ImmutablePureComponent {
@ -50,13 +55,17 @@ class EmbedModal extends ImmutablePureComponent {
} }
render () { render () {
const { intl, onClose } = this.props;
const { oembed } = this.state; const { oembed } = this.state;
return ( return (
<div className='modal-root__modal embed-modal'> <div className='modal-root__modal report-modal embed-modal'>
<h4><FormattedMessage id='status.embed' defaultMessage='Embed' /></h4> <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'> <p className='hint'>
<FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' /> <FormattedMessage id='embed.instructions' defaultMessage='Embed this status on your website by copying the code below.' />
</p> </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 // Change default background colors of columns
.column > .scrollable, .column > .scrollable,
.getting-started, .getting-started,
.column-inline-form { .column-inline-form,
.error-column,
.regeneration-indicator {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%); border: 1px solid lighten($ui-base-color, 8%);
border-top: 0; 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-back-button,
.column-header { .column-header {
background: $white; background: $white;
@ -33,16 +67,16 @@ html {
} }
&--slim-button { &--slim-button {
border: 0; top: -50px;
top: -49px; right: 0;
right: 1px;
} }
} }
.column-header__back-button, .column-header__back-button,
.column-header__button, .column-header__button,
.column-header__button.active, .column-header__button.active,
.account__header__bar { .account__header__bar,
.directory__card__extra {
background: $white; background: $white;
} }
@ -66,6 +100,19 @@ html {
text-decoration: underline; 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 { .column-subheading {
background: darken($ui-base-color, 4%); background: darken($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 8%); border-bottom: 1px solid lighten($ui-base-color, 8%);
@ -314,8 +361,19 @@ html {
.report-modal, .report-modal,
.embed-modal, .embed-modal,
.error-modal, .error-modal,
.onboarding-modal { .onboarding-modal,
background: $ui-base-color; .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 { .column-header__collapsible-inner {
@ -324,6 +382,10 @@ html {
border-top: 0; border-top: 0;
} }
.focal-point__preview strong {
color: $white;
}
.boost-modal__action-bar, .boost-modal__action-bar,
.confirmation-modal__action-bar, .confirmation-modal__action-bar,
.mute-modal__action-bar, .mute-modal__action-bar,
@ -348,9 +410,11 @@ html {
.embed-modal .embed-modal__container .embed-modal__html { .embed-modal .embed-modal__container .embed-modal__html {
background: $white; background: $white;
border: 1px solid lighten($ui-base-color, 8%);
&:focus { &: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; $classic-highlight-color: #2b90d9;
// Differences // Differences
$success-green: #3c754d; $success-green: lighten(#3c754d, 8%);
$base-overlay-background: $white !default; $base-overlay-background: $white !default;
$valid-value-color: $success-green !default; $valid-value-color: $success-green !default;

View File

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