fix full-width embeds and light theme embeds

Performs some baseline tweaks to the mastodon application scss that are
shared between all the cybrespace themes

CHANGELOG.md

@@ -3,6 +3,28 @@ Changelog
 
 All notable changes to this project will be documented in this file.
 
+## [2.8.3] - 2019-05-19
+### Added
+
+- Add `og:image:alt` OpenGraph tag ([BenLubar](https://github.com/tootsuite/mastodon/pull/10779))
+- Add clickable area below avatar in statuses in web UI ([Dar13](https://github.com/tootsuite/mastodon/pull/10766))
+- Add crossed-out eye icon on account gallery in web UI ([Kjwon15](https://github.com/tootsuite/mastodon/pull/10715))
+- Add media description tooltip to thumbnails in web UI ([ThibG](https://github.com/tootsuite/mastodon/pull/10713))
+
+### Changed
+
+- Change "mark as sensitive" button into a checkbox for clarity ([ThibG](https://github.com/tootsuite/mastodon/pull/10748))
+
+### Fixed
+
+- Fix bug allowing users to publicly boost their private statuses ([ThibG](https://github.com/tootsuite/mastodon/pull/10775), [ThibG](https://github.com/tootsuite/mastodon/pull/10783))
+- Fix performance in formatter by a little ([ThibG](https://github.com/tootsuite/mastodon/pull/10765))
+- Fix some colors in the light theme ([yuzulabo](https://github.com/tootsuite/mastodon/pull/10754))
+- Fix some colors of the high contrast theme ([yuzulabo](https://github.com/tootsuite/mastodon/pull/10711))
+- Fix ambivalent active state of poll refresh button in web UI ([MaciekBaron](https://github.com/tootsuite/mastodon/pull/10720))
+- Fix duplicate posting being possible from web UI ([hinaloe](https://github.com/tootsuite/mastodon/pull/10785))
+- Fix "invited by" not showing up in admin UI ([ThibG](https://github.com/tootsuite/mastodon/pull/10791))
+
 ## [2.8.2] - 2019-05-05
 ### Added
 

app/javascript/mastodon/components/status.js

@@ -356,6 +356,7 @@ class Status extends ImmutablePureComponent {
           {prepend}
 
           <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted, read: unread === false })} data-id={status.get('id')}>
+            <div className='status__expand' onClick={this.handleClick} role='presentation' />
             <div className='status__info'>
               <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
 

app/javascript/mastodon/features/account_gallery/components/media_item.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
+import Icon from 'mastodon/components/icon';
 import { autoPlayGif, displayMedia } from 'mastodon/initial_state';
 import classNames from 'classnames';
 import { decode } from 'blurhash';
@@ -88,8 +89,10 @@ export default class MediaItem extends ImmutablePureComponent {
     const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
     const height = width;
     const status = attachment.get('status');
+    const title = status.get('spoiler_text') || attachment.get('description');
 
     let thumbnail = '';
+    let icon;
 
     if (attachment.get('type') === 'unknown') {
       // Skip
@@ -131,11 +134,20 @@ export default class MediaItem extends ImmutablePureComponent {
       );
     }
 
+    if (!visible) {
+      icon = (
+        <span className='account-gallery__item__icons'>
+          <Icon id='eye-slash' />
+        </span>
+      );
+    }
+
     return (
       <div className='account-gallery__item' style={{ width, height }}>
-        <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={this.handleClick}>
+        <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={this.handleClick} title={title}>
           <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} />
           {visible && thumbnail}
+          {!visible && icon}
         </a>
       </div>
     );

app/javascript/mastodon/features/compose/containers/compose_form_container.js

@@ -20,7 +20,7 @@ const mapStateToProps = state => ({
   focusDate: state.getIn(['compose', 'focusDate']),
   caretPosition: state.getIn(['compose', 'caretPosition']),
   preselectDate: state.getIn(['compose', 'preselectDate']),
-  is_submitting: state.getIn(['compose', 'is_submitting']),
+  isSubmitting: state.getIn(['compose', 'is_submitting']),
   isChangingUpload: state.getIn(['compose', 'is_changing_upload']),
   isUploading: state.getIn(['compose', 'is_uploading']),
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),

app/javascript/mastodon/features/compose/containers/sensitive_button_container.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { changeComposeSensitivity } from 'mastodon/actions/compose';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-import Icon from 'mastodon/components/icon';
 
 const messages = defineMessages({
   marked: { id: 'compose_form.sensitive.marked', defaultMessage: 'Media is marked as sensitive' },
@@ -38,9 +37,19 @@ class SensitiveButton extends React.PureComponent {
 
     return (
       <div className='compose-form__sensitive-button'>
-        <button className={classNames('icon-button', { active })} onClick={onClick} disabled={disabled} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
-          <Icon id='eye-slash' /> <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
-        </button>
+        <label className={classNames('icon-button', { active })} title={intl.formatMessage(active ? messages.marked : messages.unmarked)}>
+          <input
+            name='mark-sensitive'
+            type='checkbox'
+            checked={active}
+            onChange={onClick}
+            disabled={disabled}
+          />
+
+          <span className={classNames('checkbox', { active })} />
+
+          <FormattedMessage id='compose_form.sensitive.hide' defaultMessage='Mark media as sensitive' />
+        </label>
       </div>
     );
   }

app/javascript/styles/contrast/diff.scss

@@ -67,3 +67,11 @@
     text-decoration: none;
   }
 }
+
+.nothing-here {
+  color: $darker-text-color;
+}
+
+.public-layout .public-account-header__tabs__tabs .counter.active::after {
+  border-bottom: 4px solid $ui-highlight-color;
+}

app/javascript/styles/cybre-base.scss

@@ -0,0 +1,81 @@
+
+@import 'application';
+
+/* Allow columns to grow wider as the screen gets 
+ * wider, but don't ever let them get more than
+ * 400px (some people have a bunch of columns!) */
+@media screen and (min-width: 1300px) {
+  .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+
+  .drawer {
+    width: 17%; /* Not part of the flex fun */
+    max-width: 400px;
+    min-width: 330px;
+  }
+}
+
+/* Cap the column height at 100vh (fixed an old
+ * bug someone encountered in safari, but which
+ * I've seen resurface from time to time) */
+.column {
+  max-height:100vh;
+}
+
+/* Don't show outline around statuses if we're in 
+ * mouse or touch mode (rather than keyboard) */
+[data-whatinput="mouse"], [data-whatinput="touch"] {
+  .status__content:focus, .status:focus,
+  .status__wrapper:focus, .status__content__text:focus {
+    outline: none;
+  }
+}
+
+/* Less emphatic show more */
+.status__content__read-more-button {
+  font-size: 14px;
+  color: $dark-text-color;
+
+  .status__prepend-icon {
+    padding-right: 4px;
+  }
+}
+
+/* Show a little arrowey thing after the time in a
+ * status to signal that you can click it to see
+ * a detailed view */
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+/* Don't display the elephant mascot (we have our
+ * own, thanks) */
+.drawer__inner__mastodon {
+  display: none;
+}
+
+/* Let the compose area/drawer be short, but
+ * expand if necessary */
+.drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
+  background-image: none;
+}
+.drawer__pager {
+  overflow-y:auto;
+}
+
+/* Use display: none instead of visibility:hidden 
+ * to hide the suggested follows list on non-mobile */
+@media screen and (min-width: 630px) {
+  .search-results .trends {
+     display:none;
+  }
+}
+
+@import 'fullwidth-media';
+

app/javascript/styles/cybre-light.scss

@@ -0,0 +1,952 @@
+$success-green: #B64579;    // Padua
+
+$ui-base-color: #f7e8ed; // "darkest"
+$ui-base-alt: #f9f2f5;
+$ui-base-lighter-color: darken($ui-base-color, 40%); // Lighter darkest
+$ui-secondary-color: #ead0d6; // "lightest"
+$ui-primary-color: #bf5677; // "lighter"
+$ui-highlight-color: #bf5677; // "vibrant"
+$primary-text-color: #382b32;
+$dark-text-color: #ca748f;
+$secondary-text-color: #382b32;
+
+$header-color: $ui-primary-color;
+$header-text-color: #fff;
+$icon-button-inactive-color: lighten(desaturate($ui-base-lighter-color, 20%), 20%);
+$action-button-color: $icon-button-inactive-color;
+
+$about-page-text: $primary-text-color;
+
+@import 'cybre-base';
+
+$gold-star: #dd9d08;
+
+/* cybre-specific additions */
+
+.column .static-content.getting-started {
+  background-image: url('../images/logo-cybre-light.png');
+  background-size:auto 50%;
+  background-position: 50% 75%;
+  background-repeat:no-repeat;
+}
+
+.ui, body {
+  background: $ui-base-color url('../images/background-cybre-light.png');
+}
+
+.drawer__inner__mastodon {
+  display: none;
+}
+
+.landing-page .header-wrapper {
+    background-image:url('../images/header-cybre-alt.jpg');
+    background-size:cover;
+    background-position:50% 50%;
+}
+
+.landing-page.alternative .header {
+    background-image:url('../images/header-cybre-colour.jpg');
+    background-repeat: repeat-x;
+    background-size:contain;
+    height:45vh;
+    width: 100%;
+    position:absolute;
+    z-index: 1;
+    text-align:center;
+
+    display: unset!important;
+}
+
+.landing-page.alternative .header img {
+    margin: auto;
+    max-height:45vh;
+}
+
+
+.landing-page.alternative .grid {
+    position: relative;
+    z-index:2;
+    margin-top:15vh;
+}
+
+.landing-page.alternative .landing-page__hero img {
+    visibility: hidden;
+    max-height:170px;
+}
+
+.landing-page.alternative .landing-page__forms {
+    height:auto;
+}
+
+.landing-page.alternative .column-1 {
+    display:flex;
+    align-items:flex-end;
+}
+
+.landing-page.alternative .column {
+    max-height:initial;
+}
+
+.landing-page.alternative .row__mascot {
+    .floats {
+        position:absolute;
+        img {
+            width:100%;
+            height:100%;
+        }
+        transition: all 0.1s linear;
+        animation-name: floating;
+        animation-iteration-count: infinite;
+        animation-direction: alternate;
+        animation-timing-function: ease-in-out;
+    }
+
+    .float-1 {
+        width:50px;
+        height:50px;
+        bottom:60px;
+        left:110px;
+        animation-duration: 3s;
+    }
+
+    .float-2 {
+        width:130px;
+        height:130px;
+        left:85px;
+        bottom: -60px;
+        animation-duration: 3.5s;
+        animation-delay: 0.2s;
+    }
+
+    .float-3 {
+        width:100px;
+        height:100px;
+        right: 50;
+        top: -10px;
+        animation-duration: 4s;
+        animation-delay: 0.5s;
+    }
+}
+
+/* about.scss */
+
+.landing-page {
+  h1 {
+    color: $about-page-text;
+    small {
+      color: lighten($about-page-text, 10%);
+    }
+  }
+  p, li {
+    color: $about-page-text;
+  }
+
+  .header-wrapper {
+    padding-top:0px;
+
+    background-size:cover;
+    background-position:50% 55%;
+  }
+
+  .header-wrapper {
+    .mascot {
+        width:500px;
+        bottom:-52px;
+        left:-120px;
+    }
+  }
+
+  .container.links {
+     background-color: $ui-base-color;
+     border-top: 5px solid $ui-primary-color;
+     width:100%;
+     max-width:100%;
+     padding:0px calc(50% - 400px);
+
+     a {
+        &:hover {
+          color: lighten($ui-primary-color, 10%);
+        }
+     }
+  }
+
+  .container.hero {
+      .floats {
+          display:none;
+      }
+
+      .closed-registrations-message, form {
+          border-top: 50px solid #5f4770;
+          -webkit-box-shadow: 0 0 6px rgba(0,0,0,.1);
+          box-shadow: 0 0 6px rgba(0,0,0,.1);
+
+          &:before {
+              font-size: 16px;
+              font-family:inherit;
+              line-height:inherit;
+              font-weight:normal;
+              color:white;
+              position:absolute;
+              top:-35px;
+          }
+      }
+
+      .closed-registrations-message:before {
+          content: "Registrations closed";
+      }
+
+      form:before {
+          content: "Register now";
+      }
+  }
+
+  #mastodon-timeline {
+    .column-header {
+      color:white;
+    }
+  }
+}
+
+.features-list__row {
+  .text {
+    color: $about-page-text;
+  }
+}
+
+.information-board {
+  .panel {
+    .panel-header {
+      color: $primary-text-color;
+      border-bottom: 1px solid lighten($ui-secondary-color, 4%);
+
+      a,
+      span {
+        font-weight: 400;
+        color: lighten($ui-primary-color, 4%);
+      }
+    }
+  }
+}
+
+/* components.scss */
+
+.onboarding-modal__page {
+  p {
+    color: $primary-text-color;
+  }
+}
+
+.column-header {
+  background: $header-color;
+  color: $header-text-color;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
+}
+
+.column-header__button {
+  background: $header-color;
+  color: $header-text-color;
+  border-top-right-radius: 3px;
+
+  &:hover {
+    color: darken($ui-base-color, 10%);
+  }
+
+  &.active {
+    color: $primary-text-color;
+    background: darken($ui-base-color, 5%);
+
+    &:hover {
+      background: darken($ui-base-color, 5%);
+    }
+  }
+}
+
+.status-card, .status-card.compact {
+  border-color: $ui-highlight-color;
+}
+
+// selectivity -- needs to override .column-header > button
+.column-header .column-header__back-button {
+  background: $header-color;
+  color:$header-text-color;
+}
+
+.column-back-button {
+  background: $header-color;
+  color:$header-text-color;
+}
+
+.column-header__collapsible-inner {
+  background: darken($ui-base-alt, 2%);
+}
+
+.empty-column-indicator,
+.error-column {
+  color: darken($ui-base-lighter-color, 15%);
+}
+
+
+.compose-form {
+  .autosuggest-textarea__textarea,
+  .spoiler-input__input {
+    color: $primary-text-color;
+    border: 1px solid $ui-primary-color;
+  }
+
+  .autosuggest-textarea__textarea {
+    border-bottom-width:0px;
+  }
+  .compose-form__modifiers {
+    border: 1px solid $ui-primary-color;
+    border-top-width:0px;
+  }
+
+  .compose-form__buttons button.active:last-child {
+    border-radius:3px;
+    background: $ui-base-color;
+    color: $ui-primary-color;
+  }
+  .compose-form__buttons-wrapper {
+    background-color:$ui-primary-color;
+  }
+
+  .icon-button.inverted {
+    color:white;
+
+    &:hover {
+      color:$ui-secondary-color;
+    }
+  }
+}
+
+button.icon-button {
+  &.disabled {
+  }
+}
+
+.icon-button {
+  &.inverted {
+    color: darken($ui-base-lighter-color, 10%);
+  }
+
+  &.overlayed {
+    background: rgba($base-overlay-background, 0.2);
+    color: rgba($white, 0.7);
+
+    &:hover {
+      background: rgba($base-overlay-background, 0.4);
+    }
+  }
+
+  &.disabled {
+    color: desaturate($icon-button-inactive-color, 5%);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: desaturate($icon-button-inactive-color, 5%);
+    }
+  }
+
+  color: $icon-button-inactive-color;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($icon-button-inactive-color, 5%);
+  }
+}
+
+.icon-button.star-icon,
+.icon-button.star-icon:active {
+  background:transparent;
+  border:none;
+}
+
+.icon-button.star-icon.active {
+  color: $gold-star;
+  &:active,  &:hover, &:focus {
+    color: $gold-star;
+  }
+}
+
+.text-icon-button {
+  color: $white;
+  &.active {
+    background: $ui-base-color;
+    color: $ui-primary-color;
+  }
+  &:focus, &:hover {
+    color: darken($ui-base-color, 3%);
+  }
+}
+.status.status-direct {
+  background: darken($ui-base-alt, 5%);
+  .icon-button.disabled {
+    color: lighten($ui-base-lighter-color, 10%);
+  }
+}
+
+.account__header, .account-card {
+  & > div {
+    background: rgba(lighten($ui-base-color, 4%), 0.6);
+  }
+
+  .account__header__content {
+    color: $primary-text-color;
+  }
+
+  .detailed-status__display-name .display-name strong {
+    color: $ui-highlight-color;
+  }
+
+  .icon-button {
+    &, &:hover {
+      color:desaturate($ui-base-lighter-color, 20%);
+    }
+    &.active {
+      &, &:hover {
+        color:$ui-base-lighter-color;
+      }
+    }
+  }
+}
+
+.account__section-headline a {
+  &.active {
+    color: $primary-text-color;
+
+    &::after {
+      border-bottom-color: $ui-base-alt;
+    }
+
+    &::after {
+      border-bottom-color: $ui-base-alt;
+    }
+  }
+}
+
+.privacy-dropdown.active .privacy-dropdown__value.active .icon-button {
+    color: $ui-primary-color;
+}
+
+.privacy-dropdown__option {
+  color: $primary-text-color;
+
+  strong {
+    color: $primary-text-color;
+  }
+
+  &:hover,
+  &.active {
+    color: $white;
+
+    .privacy-dropdown__option__content {
+      color: $white;
+
+      strong {
+        color: $white;
+      }
+    }
+  }
+}
+
+.emoji-picker-dropdown__menu {
+  .emoji-search-wrapper {
+    border-color: darken($ui-base-color, 10%);
+  }
+  .emoji-search {
+    background: darken($ui-base-color, 5%);
+    border-color: darken($ui-base-color, 10%);
+  }
+  .emoji-mart {
+    color: $ui-primary-color;
+  }
+}
+
+.search-popout {
+  background: $ui-base-color;
+  color: $ui-primary-color;
+
+  h4 {
+    color: $ui-primary-color;
+  }
+
+  em {
+    color: $ui-highlight-color;
+  }
+}
+.search__icon .fa.active {
+  opacity:1.0;
+}
+.search-results__hashtag {
+  color: darken($ui-primary-color, 10%);
+  &:hover {
+    color: lighten($ui-primary-color, 5%);
+  }
+}
+
+.static-content {
+    /*color: $primary-text-color;*/
+}
+
+#Getting-started {
+  background: $ui-primary-color;
+  border-bottom:0px;
+  color:white;
+}
+
+.getting-started {
+  p {
+    color: $primary-text-color;
+  }
+
+  a {
+    color: darken($ui-base-lighter-color, 10%);
+  }
+}
+.getting-started__wrapper {
+  flex: 0 0.5 auto;
+}
+
+.getting-started {
+  .column-link {
+    background: lighten($ui-primary-color, 5%);
+    color:$white;
+    &:hover {
+      background: lighten($ui-primary-color, 10%);
+    }
+  }
+}
+.column-link__badge {
+  background: saturate(darken($ui-primary-color, 5%), 5%);
+}
+.column-subheading {
+  background: darken($ui-primary-color, 5%);
+  color:$white;
+}
+
+.media-spoiler,
+.video-player__spoiler.active {
+  color: $white;
+  &:hover {
+    color: darken($white, 5%);
+  }
+}
+
+.status {
+  border-bottom: 1px solid $ui-secondary-color;
+}
+
+.status__relative-time, .status__display-name {
+  color: darken($ui-base-color, 40%);
+}
+
+.status__content {
+  .status__content__spoiler-link {
+    background: $ui-base-lighter-color;
+
+    &:hover {
+      background: lighten($ui-base-lighter-color, 5%);
+    }
+  }
+}
+
+.muted .status__content p {
+  color: $icon-button-inactive-color;
+}
+
+.dropdown-menu__item {
+  & > a {
+    color: $primary-text-color;
+    &:hover, &:active, &:focus {
+      color: $white;
+    }
+  }
+}
+
+.dropdown--active .dropdown__content {
+  & > ul {
+    background: $ui-base-color;
+    box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
+    & > li > a {
+      background: $ui-base-color;
+      color: $primary-text-color;
+
+      &:hover {
+        background: $ui-highlight-color;
+        color: $ui-base-color;
+      }
+    }
+  }
+}
+
+.boost-modal,
+.confirmation-modal,
+.report-modal,
+.actions-modal,
+.mute-modal
+{
+  color: $primary-text-color;
+}
+.boost-modal__action-bar,
+.confirmation-modal__action-bar,
+.mute-modal__action-bar,
+.report-modal__action-bar,
+.mute-modal__action-bar  {
+  & > div {
+    color: $ui-primary-color;
+  }
+}
+
+.actions-modal
+{
+  ul {
+    li:not(:empty) {
+      a {
+        color: $primary-text-color;
+        button {
+
+        }
+        &.active, &:hover, &:active, &:focus {
+          color: $white;
+          button {
+            color: $white;
+          }
+        }
+      }
+    }
+  }
+}
+
+.react-toggle-track {
+  background-color: $icon-button-inactive-color;
+}
+
+.report-modal__comment .setting-text {
+  color: $primary-text-color;
+  border-bottom-color: lighten($ui-primary-color, 10%);
+  &:focus, &:active {
+    color: $primary-text-color;
+  }
+}
+
+.status.light {
+  .status__content {
+    color: $primary-text-color;
+  }
+  .display-name strong {
+    color: $primary-text-color;
+  }
+}
+
+.reply-indicator__content a {
+  color: lighten($ui-highlight-color, 30%);
+}
+
+.status__content
+{
+  a {
+    color: $ui-highlight-color;
+
+    &:hover {
+      .fa {
+        color: darken($ui-base-color, 40%);
+      }
+    }
+  }
+}
+
+.detailed-status__display-name {
+  color: $ui-base-lighter-color;
+}
+
+.drawer .drawer__inner {
+  overflow: visible;
+  height:inherit;
+  background:$ui-base-alt;
+}
+
+.search__icon .fa {
+  color: $ui-highlight-color;
+}
+
+.drawer__pager {
+  overflow-y:auto;
+}
+
+.drawer .drawer__header {
+  background: $ui-base-color;
+  border-radius:3px;
+}
+
+.onboarding-modal__page h1 {
+  background-color: darken($ui-primary-color, 5%);
+}
+
+.poll__text input[type="text"],
+.compose-form__poll-wrapper select {
+  color: $primary-text-color;
+}
+
+.compose-form__poll-wrapper .button.button-secondary {
+  color: $ui-highlight-color;
+}
+
+/* forms.scss */
+.block-button, .button, button {
+  background-color: $ui-primary-color;
+  color: $white;
+
+  &.button-alternative {
+    color: $ui-base-color;
+  }
+
+  &.logo-button {
+    color: $white;
+    svg path:first-child {
+      fill: $white;
+    }
+  }
+}
+
+.simple_form {
+  p.hint {
+    color: $primary-text-color;
+  }
+
+  .block-button, .button, button {
+    background-color: $ui-primary-color;
+    color: $white;
+
+    &:hover {
+      background-color: lighten($ui-primary-color, 5%);
+    }
+
+    &:active,
+    &:focus {
+      background-color: darken($ui-primary-color, 5%);
+    }
+
+  }
+}
+
+/* admin.scss */
+
+.table > thead > tr > th {
+  border-bottom-color:  $ui-secondary-color;
+}
+
+.simple_form h4 {
+  border-bottom: 1px solid $ui-highlight-color;
+}
+
+.admin-wrapper {
+  .content {
+    h2, p.hint, h4, h6 {
+      color: $primary-text-color;
+    }
+
+    .muted-hint {
+      color: $primary-text-color;
+    }
+  }
+
+  .sidebar {
+    .logo {
+      -webkit-filter: invert(100%);
+      filter: invert(100%);
+    }
+
+    ul {
+      ul {
+        a {
+          &.selected {
+            background-color: $ui-primary-color;
+            color: $white;
+
+            &:hover {
+              background-color: lighten($ui-primary-color, 10%);
+            }
+          }
+        }
+      }
+      a {
+        &.selected {
+          background-color: $ui-primary-color;
+          color: $white;
+
+          &:hover {
+            background-color: lighten($ui-primary-color, 10%);
+          }
+        }
+      }
+    }
+  }
+}
+
+.pagination .current {
+  color: $ui-primary-color;
+}
+
+.report-accounts__item > strong {
+  color: $primary-text-color;
+}
+
+.admin-wrapper .content {
+  & > p {
+    color: $primary-text-color;
+  }
+  hr {
+    border-color: $ui-highlight-color;
+  }
+}
+
+/* accounts.scss */
+.card {
+  .name {
+    color: $white;
+  }
+
+  .counter {
+    .counter-number {
+      color: $white;
+    }
+  }
+}
+
+/* stream_entries.scss */
+.activity-stream {
+  .entry {
+  }
+  .status.light {
+    .display-name {
+      strong {
+        color: $primary-text-color;
+      }
+    }
+    .status__content {
+      color: $primary-text-color;
+    }
+  }
+  .detailed-status.light {
+    .detailed-status__display-name {
+      .display-name {
+        strong {
+          color: $primary-text-color;
+        }
+      }
+    }
+    .status__content {
+      color: $primary-text-color;
+    }
+    .status-card,
+    .status-card__title,
+    .status-card__description {
+      color: $primary-text-color;
+    }
+  }
+}
+
+/* accounts.scss */
+.card {
+  .name {
+    color: darken($ui-primary-color, 15%);
+  }
+  .counter {
+    .counter-number {
+      color: darken($ui-primary-color, 15%);
+    }
+    border-color: $ui-primary-color;
+  }
+}
+
+.activity-stream-tabs {
+  a {
+    color: lighten($ui-primary-color, 10%);
+    &.active {
+      color: darken($ui-primary-color, 10%);
+    }
+  }
+}
+
+/* uncategorized */
+
+@media screen and (min-width: 1300px) {
+  .column {
+    flex-grow: 1 !important;
+    max-width: 400px;
+  }
+
+  .drawer {
+    width: 17%;
+    max-width: 400px;
+    min-width: 330px;
+  }
+}
+
+.status time:after,
+.detailed-status__datetime span:after {
+  font: normal normal normal 14px/1 FontAwesome;
+  content: "\00a0\00a0\f08e";
+}
+
+
+.column {
+  max-height:100vh;
+  & > .scrollable {
+    background-color: $ui-base-alt;
+  }
+}
+
+.empty-column-indicator, .error-column {
+  background-color: $ui-base-alt;
+}
+
+.actions .button.button-alternative {
+    background: $ui-highlight-color;
+    color: $white;
+
+    &:active,
+    &:focus,
+    &:hover {
+      background-color: lighten($ui-highlight-color, 4%);
+    }
+}
+
+.public-layout .header {
+  background: $ui-highlight-color;
+  color: $white;
+}
+
+.public-layout .public-account-header__tabs__name h1 {
+  color: $white;
+  small {
+    color: $white;
+  }
+}
+.public-layout .header .brand:hover,
+.public-layout .header .brand:focus,
+.public-layout .header .brand:active {
+  background: lighten($ui-highlight-color, 5%);
+}
+
+.public-layout .container:last-child {
+  background:$ui-highlight-color;
+  padding-left: 100px;
+  padding-right: 100px;
+  border-radius: 4px;
+  h4 {
+    color: white;
+  }
+}
+
+.modal-layout, .modal-layout__mastodon > * {
+  background: none;
+}
+
+.dashboard__widgets a:not(.name-tag) {
+  color: $primary-text-color;
+}

app/javascript/styles/fullwidth-media.scss

@@ -0,0 +1,48 @@
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.status .video-player,
+.media-gallery,
+.status .status-card.interactive {
+  margin-top: 20px;
+  margin-left: -68px;
+  width: calc(100% + 80px);
+}
+
+.detailed-status > .media-spoiler,
+.status > .media-spoiler,
+.video-player {
+  max-width: none;
+}
+
+/* If there's no status text, add an extra margin on top */
+.status .status__info + .media-gallery,
+.status .status__info + .media-spoiler,
+.status .status__info + .video-player,
+.status .status__info + .status-card {
+  margin-top: 40px;
+}
+
+.status__video-player-video {
+  transform: unset;
+  top: unset;
+}
+
+.detailed-status .media-gallery {
+  margin-left: -10px;
+  width: calc(100% + 22px);
+}
+
+.public-layout .status {
+  .status__content {
+    min-height: 15px;
+  }
+  & > .media-spoiler,
+  .video-player,
+  .media-gallery,
+  .status-card {
+    margin-top: 20px;
+    width: calc(100% + 94px);
+    margin-left: -78px;
+  }
+}

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

@@ -162,7 +162,7 @@
 .actions-modal ul li:not(:empty) a:focus button,
 .actions-modal ul li:not(:empty) a:hover,
 .actions-modal ul li:not(:empty) a:hover button,
-.admin-wrapper .sidebar ul ul a.selected,
+.admin-wrapper .sidebar ul li a.selected,
 .simple_form .block-button,
 .simple_form .button,
 .simple_form button {
@@ -230,6 +230,7 @@
 .empty-column-indicator,
 .error-column {
   color: $primary-text-color;
+  background: $white;
 }
 
 // Change the default colors used on some parts of the profile pages

app/javascript/styles/mastodon/components.scss

@@ -268,9 +268,34 @@
     padding: 10px;
     padding-top: 0;
 
-    .icon-button {
-      font-size: 14px;
-      font-weight: 500;
+    font-size: 14px;
+    font-weight: 500;
+
+    &.active {
+      color: $highlight-text-color;
+    }
+
+    input[type=checkbox] {
+      display: none;
+    }
+
+    .checkbox {
+      display: inline-block;
+      position: relative;
+      border: 1px solid $ui-primary-color;
+      box-sizing: border-box;
+      width: 18px;
+      height: 18px;
+      flex: 0 0 auto;
+      margin-right: 10px;
+      top: -1px;
+      border-radius: 4px;
+      vertical-align: middle;
+
+      &.active {
+        border-color: $highlight-text-color;
+        background: $highlight-text-color;
+      }
     }
   }
 
@@ -1386,6 +1411,15 @@ a.account__display-name {
   width: 48px;
 }
 
+.status__expand {
+  width: 68px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  cursor: pointer;
+}
+
 .muted {
   .status__content p,
   .status__content a {
@@ -2533,10 +2567,6 @@ a.status-card {
     width: 100%;
   }
 
-  .status-card__image-image {
-    border-radius: 4px 4px 0 0;
-  }
-
   .status-card__title {
     white-space: inherit;
   }
@@ -2568,7 +2598,6 @@ a.status-card.compact:hover {
 }
 
 .status-card__image-image {
-  border-radius: 4px 0 0 4px;
   display: block;
   margin: 0;
   width: 100%;
@@ -4829,6 +4858,14 @@ a.status-card.compact:hover {
   border-radius: 4px;
   overflow: hidden;
   margin: 2px;
+
+  &__icons {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+  }
 }
 
 .notification__filter-bar,

app/javascript/styles/mastodon/polls.scss

@@ -114,11 +114,14 @@
     text-decoration: underline;
     font-size: inherit;
 
-    &:hover,
-    &:focus,
-    &:active {
+    &:hover {
       text-decoration: none;
     }
+
+    &:active,
+    &:focus {
+      background-color: rgba($dark-text-color, .1);
+    }
   }
 
   .button {

app/lib/formatter.rb

@@ -187,7 +187,7 @@ class Formatter
   end
 
   def rewrite(text, entities)
-    chars = text.to_s.to_char_a
+    text = text.to_s
 
     # Sort by start index
     entities = entities.sort_by do |entity|
@@ -199,12 +199,12 @@ class Formatter
 
     last_index = entities.reduce(0) do |index, entity|
       indices = entity.respond_to?(:indices) ? entity.indices : entity[:indices]
-      result << encode(chars[index...indices.first].join)
+      result << encode(text[index...indices.first])
       result << yield(entity)
       indices.last
     end
 
-    result << encode(chars[last_index..-1].join)
+    result << encode(text[last_index..-1])
 
     result.flatten.join
   end
@@ -231,23 +231,14 @@ class Formatter
     # Note: I couldn't obtain list_slug with @user/list-name format
     # for mention so this requires additional check
     special = Extractor.extract_urls_with_indices(escaped, options).map do |extract|
-      # exactly one of :url, :hashtag, :screen_name, :cashtag keys is present
-      key = (extract.keys & [:url, :hashtag, :screen_name, :cashtag]).first
-
       new_indices = [
         old_to_new_index.find_index(extract[:indices].first),
         old_to_new_index.find_index(extract[:indices].last),
       ]
 
-      has_prefix_char = [:hashtag, :screen_name, :cashtag].include?(key)
-      value_indices = [
-        new_indices.first + (has_prefix_char ? 1 : 0), # account for #, @ or $
-        new_indices.last - 1,
-      ]
-
       next extract.merge(
-        :indices => new_indices,
-        key => text[value_indices.first..value_indices.last]
+        indices: new_indices,
+        url: text[new_indices.first..new_indices.last - 1]
       )
     end
 

app/models/user.rb

@@ -114,6 +114,10 @@ class User < ApplicationRecord
   end
 
   def invited?
+    invite_id.present?
+  end
+
+  def valid_invitation?
     invite_id.present? && invite.valid_for_use?
   end
 
@@ -274,7 +278,7 @@ class User < ApplicationRecord
   private
 
   def set_approved
-    self.approved = open_registrations? || invited? || external?
+    self.approved = open_registrations? || valid_invitation? || external?
   end
 
   def open_registrations?

app/services/reblog_service.rb

@@ -18,7 +18,9 @@ class ReblogService < BaseService
 
     return reblog unless reblog.nil?
 
-    reblog = account.statuses.create!(reblog: reblogged_status, text: '', visibility: options[:visibility] || account.user&.setting_default_privacy)
+    visibility = options[:visibility] || account.user&.setting_default_privacy
+    visibility = reblogged_status.visibility if reblogged_status.hidden?
+    reblog = account.statuses.create!(reblog: reblogged_status, text: '', visibility: visibility)
 
     DistributionWorker.perform_async(reblog.id)
     Pubsubhubbub::DistributionWorker.perform_async(reblog.stream_entry.id)

app/validators/blacklisted_email_validator.rb

@@ -2,7 +2,7 @@
 
 class BlacklistedEmailValidator < ActiveModel::Validator
   def validate(user)
-    return if user.invited?
+    return if user.valid_invitation?
 
     @email = user.email
 

app/views/stream_entries/_og_image.html.haml

@@ -7,6 +7,8 @@
       - unless media.file.meta.nil?
         = opengraph 'og:image:width', media.file.meta.dig('original', 'width')
         = opengraph 'og:image:height', media.file.meta.dig('original', 'height')
+      - if media.description.present?
+        = opengraph 'og:image:alt', media.description
     - elsif media.video? || media.gifv?
       - player_card = true
       = opengraph 'og:image', full_asset_url(media.file.url(:small))

config/locales/en.yml

@@ -1005,9 +1005,10 @@ en:
       <p>Originally adapted from the <a href="https://github.com/discourse/discourse">Discourse privacy policy</a>.</p>
     title: "%{instance} Terms of Service and Privacy Policy"
   themes:
-    contrast: Mastodon (High contrast)
-    default: Mastodon (Dark)
-    mastodon-light: Mastodon (Light)
+    contrast: High contrast
+    default: Mastodon
+    mastodon-light: Mastodon (light)
+    light: Cybre Lite
   time:
     formats:
       default: "%b %d, %Y, %H:%M"

config/themes.yml

@@ -1,3 +1,4 @@
 default: styles/application.scss
 contrast: styles/contrast.scss
 mastodon-light: styles/mastodon-light.scss
+light: styles/cybre-light.scss

db/post_migrate/20190519130537_remove_boosts_widening_audience.rb

@@ -0,0 +1,23 @@
+class RemoveBoostsWideningAudience < ActiveRecord::Migration[5.2]
+  disable_ddl_transaction!
+
+  def up
+    public_boosts = Status.find_by_sql(<<-SQL)
+      SELECT boost.id
+      FROM statuses AS boost
+      LEFT JOIN statuses AS boosted ON boost.reblog_of_id = boosted.id
+      WHERE
+        boost.id > 101746055577600000
+        AND (boost.local = TRUE OR boost.uri IS NULL)
+        AND boost.visibility IN (0, 1)
+        AND boost.reblog_of_id IS NOT NULL
+        AND boosted.visibility = 2
+    SQL
+
+    RemovalWorker.push_bulk(public_boosts.pluck(:id))
+  end
+
+  def down
+    raise ActiveRecord::IrreversibleMigration
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2019_04_20_025523) do
+ActiveRecord::Schema.define(version: 2019_05_19_130537) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"

lib/mastodon/version.rb

@@ -13,7 +13,7 @@ module Mastodon
     end
 
     def patch
-      2
+      3
     end
 
     def pre

spec/services/reblog_service_spec.rb

@@ -4,10 +4,9 @@ RSpec.describe ReblogService, type: :service do
   let(:alice)  { Fabricate(:account, username: 'alice') }
 
   context 'creates a reblog with appropriate visibility' do
-    let(:bob)               { Fabricate(:account, username: 'bob') }
     let(:visibility)        { :public }
     let(:reblog_visibility) { :public }
-    let(:status)            { Fabricate(:status, account: bob, visibility: visibility) }
+    let(:status)            { Fabricate(:status, account: alice, visibility: visibility) }
 
     subject { ReblogService.new }
 
@@ -22,6 +21,15 @@ RSpec.describe ReblogService, type: :service do
         expect(status.reblogs.first.visibility).to eq 'private'
       end
     end
+
+    describe 'public reblogs of private toots should remain private' do
+      let(:visibility)        { :private }
+      let(:reblog_visibility) { :public }
+
+      it 'reblogs privately' do
+        expect(status.reblogs.first.visibility).to eq 'private'
+      end
+    end
   end
 
   context 'OStatus' do

spec/validators/blacklisted_email_validator_spec.rb

@@ -8,7 +8,7 @@ RSpec.describe BlacklistedEmailValidator, type: :validator do
     let(:errors) { double(add: nil) }
 
     before do
-      allow(user).to receive(:invited?) { false }
+      allow(user).to receive(:valid_invitation?) { false }
       allow_any_instance_of(described_class).to receive(:blocked_email?) { blocked_email }
       described_class.new.validate(user)
     end