[Glitch] Fix media editing modal and profile directory in light theme

Port f51f99c3c2 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
Eugen Rochko 2019-10-03 03:17:29 +02:00 committed by Thibaut Girka
parent cd2fce0318
commit 7ca6153c0c
6 changed files with 50 additions and 6 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 { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import api from 'flavours/glitch/util/api';
import IconButton from 'flavours/glitch/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

@ -736,6 +736,7 @@
&:focus,
&:active {
color: darken($lighter-text-color, 4%);
background-color: transparent;
}
}
@ -804,6 +805,7 @@
}
.embed-modal {
width: auto;
max-width: 80vw;
max-height: 80vh;
@ -834,6 +836,7 @@
font-size: 14px;
margin: 0;
margin-bottom: 15px;
border-radius: 4px;
&::-moz-focus-inner {
border: 0;
@ -859,6 +862,7 @@
max-width: 100%;
overflow: hidden;
border: 0;
border-radius: 4px;
}
}
}

View file

@ -640,6 +640,10 @@ a.status__display-name,
color: inherit;
}
.detailed-status .button.logo-button {
margin-bottom: 15px;
}
.detailed-status__display-name {
color: $secondary-text-color;
display: block;

View file

@ -414,6 +414,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;

View file

@ -230,8 +230,19 @@
.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%);
}
.boost-modal__action-bar,

View file

@ -18,6 +18,8 @@ $darker-text-color: $classic-base-color !default;
$dark-text-color: #444b5d;
$action-button-color: #606984;
$success-green: lighten(#3c754d, 8%);
$base-overlay-background: $white !default;
$inverted-text-color: $black !default;