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

Also:

- Fix embed modal in light theme
- Fix confirmation modal in light theme

app/javascript/mastodon/features/ui/components/embed_modal.js

@@ -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>

app/javascript/styles/mastodon-light/diff.scss

@@ -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;
   }
 }
 

app/javascript/styles/mastodon-light/variables.scss

@@ -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;

app/javascript/styles/mastodon/components.scss

@@ -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;
     }
   }
 }

app/javascript/styles/mastodon/containers.scss

@@ -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;