homogay skin redesign

Merge upstream changes

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [4.1.4] - 2023-07-07
+
+### Fixed
+
+- Fix branding:generate_app_icons failing because of disallowed ICO coder ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25794))
+- Fix crash in admin interface when viewing a remote user with verified links ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25796))
+- Fix processing of media files with unusual names ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25788))
+
 ## [4.1.3] - 2023-07-06
 
 ### Added
@@ -29,7 +37,7 @@ All notable changes to this project will be documented in this file.
 - Fix multiple inefficiencies in automatic post cleanup worker ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24607), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/24785), [ClearlyClaire](https://github.com/mastodon/mastodon/pull/24840))
 - Fix performance of streaming by parsing message JSON once ([ThisIsMissEm](https://github.com/mastodon/mastodon/pull/25278), [ThisIsMissEm](https://github.com/mastodon/mastodon/pull/25361))
 - Fix CSP headers when `S3_ALIAS_HOST` includes a path component ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25273))
-- Fix `tootctl accounts approve --number N` not aproving N earliest registrations ([danielmbrasil](https://github.com/mastodon/mastodon/pull/24605))
+- Fix `tootctl accounts approve --number N` not approving N earliest registrations ([danielmbrasil](https://github.com/mastodon/mastodon/pull/24605))
 - Fix reports not being closed when performing batch suspensions ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/24988))
 - Fix being able to vote on your own polls ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25015))
 - Fix race condition when reblogging a status ([ClearlyClaire](https://github.com/mastodon/mastodon/pull/25016))

Gemfile.lock

@@ -432,7 +432,7 @@ GEM
       net-protocol
     net-ssh (7.1.0)
     nio4r (2.5.9)
-    nokogiri (1.15.2)
+    nokogiri (1.15.3)
       mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     oj (3.15.0)
@@ -628,7 +628,7 @@ GEM
       fugit (~> 1.1, >= 1.1.6)
     safety_net_attestation (0.4.0)
       jwt (~> 2.0)
-    sanitize (6.0.1)
+    sanitize (6.0.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
     scenic (1.7.0)

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -80,11 +80,7 @@
   }
 
   &.button-secondary {
-    font-size: 16px;
-    line-height: 36px;
-    height: auto;
     color: $ui-button-secondary-color;
-    text-transform: none;
     background: transparent;
     padding: 6px 17px;
     border: 1px solid $ui-button-secondary-border-color;

app/javascript/flavours/glitch/styles/homogay.scss

@@ -1,4 +1,4 @@
 @import 'homogay/variables';
 @import 'index';
 @import 'homogay/diff';
-
+@import 'homogay/animations';

app/javascript/flavours/glitch/styles/homogay/diff.scss

@@ -1,5 +1,5 @@
 body {
-  background: darken($ui-base-color, 5%);
+  background: $ui-base-darker-color;
 }
 
 // hashtags in primary color
@@ -15,44 +15,134 @@ body {
 .spoiler-input input,
 .compose-form__modifiers,
 .reply-indicator {
-  background: lighten($ui-base-color, 4%);
+  background: $ui-base-semi-lighter-color;
   color: $primary-text-color;
 }
-.compose-form .autosuggest-textarea label .autosuggest-textarea__textarea {
-  border-top-left-radius: $border-radius;
-  border-top-right-radius: $border-radius;
+
+.compose-panel {
+  .compose-form__autosuggest-wrapper {
+    background-color: #fff0; // transparent background so it doesn't mess with border-radius
+    border-left: 1px solid $ui-base-lighter-color;
+    border-top: 1px solid $ui-base-lighter-color;
+    border-right: 1px solid $ui-base-lighter-color;
+    border-radius: $border-radius $border-radius 0 0;
+  }
+
+  .compose-form__buttons-wrapper {
+    border-left: 1px solid $ui-base-lighter-color;
+    border-right: 1px solid $ui-base-lighter-color;
+    border-bottom: 1px solid $ui-base-lighter-color;
+    border-radius: 0 0 $border-radius $border-radius;
+  }
+
+  .compose-form__poll-wrapper .icon-button {
+    color: $lighter-text-color;
+
+    &.disabled {
+      color: transparent;
+    }
+  }
 }
-.compose-form__buttons-wrapper {
-  border-bottom-left-radius: $border-radius;
-  border-bottom-right-radius: $border-radius;
+
+.compose-form__poll-wrapper {
+  .button.button-secondary {
+    // this is the "add poll option" button.  its styles have been overridden
+    // to kinda make it look like a tertiary one, except whoever did this seems
+    // to have forgotten a bunch of stuff.  do some damage control.
+    color: $ui-button-tertiary-color;
+    border-color: $ui-button-tertiary-border-color;
+
+    &:active,
+    &:focus,
+    &:hover {
+      color: $ui-button-tertiary-focus-color;
+      background-color: $ui-button-tertiary-focus-background-color;
+    }
+  }
+
+  select {
+    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($simple-background-color, 14%))}'/></svg>")
+      no-repeat right 8px center / auto 16px;
+  }
 }
-.compose-panel .compose-form__autosuggest-wrapper {
-  background-color: #fff0; // transparent background so it doesn't mess with border-radius
+
+.poll__option input[type='text']::placeholder {
+  color: $darker-text-color;
 }
-.poll__option input[type="text"],
+
+.poll__option input[type='text'],
 .compose-form__poll-wrapper select {
-  border-color: $ui-base-lighter-color;
+  border: 1px solid $ui-base-extra-light-color;
 }
+
 .autosuggest-textarea__suggestions {
   background: lighten($ui-base-color, 4%);
 }
+
 .autosuggest-textarea__suggestions__item.selected,
 .autosuggest-textarea__suggestions__item:hover {
   background: $ui-highlight-color;
 }
 
+.compose-form__publish .compose-form__publish-button-wrapper button {
+  box-shadow: rgba(0, 0, 0, 50%) 0 -2px 10px 2px inset,
+    rgba(0, 0, 0, 40%) 0 0 4px 0 inset;
+  padding: 7px 18px;
+  transition-duration: 50ms;
+  transition-timing-function: ease-in-out;
+  transition-property: background-color, color, transform;
+  transform-origin: center;
+
+  &:active {
+    transform: scale(96%);
+  }
+
+  &[disabled]:active {
+    transform: none;
+  }
+}
+
+.emoji-picker-dropdown__menu {
+  width: 286px;
+  box-shadow: 0 2px 8px 0 $base-shadow-color;
+}
+
+.emoji-mart-anchor {
+  padding: 12px 0;
+}
+
 .emoji-mart-bar:first-child {
-  background: lighten($ui-base-color, 7%);
+  background: $ui-base-extra-light-color;
   border-bottom-color: #fff0;
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
 }
+
 .emoji-mart-anchor:not(.emoji-mart-anchor-selected) {
-  color: $ui-base-lighter-color;
+  color: $ui-button-tertiary-color;
 }
 
 .search__input {
-  background: lighten($ui-base-color, 4%);
+  background: $ui-base-semi-lighter-color;
+  border: 1px solid $ui-base-lighter-color;
+
+  &::placeholder {
+    color: $dark-text-color;
+  }
+}
+
+.emoji-button img {
+  mix-blend-mode: luminosity;
+  opacity: 0.65;
+}
+
+.emoji-button:active,
+.emoji-button:focus,
+.emoji-button:hover {
+  img {
+    opacity: 1;
+    mix-blend-mode: normal;
+  }
 }
 
 // dropdowns
@@ -61,38 +151,54 @@ body {
 .dropdown-menu__item button {
   background: $ui-base-lighter-color;
 }
+
 .dropdown-menu__arrow.top {
   border-top-color: $ui-base-lighter-color;
 }
+
 .dropdown-menu__arrow.bottom {
   border-bottom-color: $ui-base-lighter-color;
 }
 
+.language-dropdown__dropdown__results__item {
+  &:focus,
+  &:active,
+  &:hover {
+    background: $ui-base-extra-light-color;
+  }
+}
+
 // general modals
 .modal-root__modal {
   background: $ui-base-color;
 }
+
 .report-modal__container {
   border-top-color: $ui-base-lighter-color;
 }
+
 .report-modal__comment {
   border-right-color: $ui-base-lighter-color;
 }
+
 .report-modal__comment .setting-text {
   background: $ui-base-color;
 }
+
 .boost-modal__action-bar,
 .doodle-modal__action-bar,
 .confirmation-modal__action-bar,
 .mute-modal__action-bar,
 .block-modal__action-bar {
-  background: lighten($ui-base-color, 5%);
+  background: $ui-base-semi-lighter-color;
 }
+
 .confirmation-modal__secondary-button,
 .confirmation-modal__cancel-button,
 .mute-modal__cancel-button,
 .block-modal__cancel-button {
   color: $primary-text-color;
+
   &:hover {
     color: $ui-highlight-color;
   }
@@ -102,12 +208,23 @@ body {
 .glitch.local-settings {
   background: $ui-base-color;
 }
+
 .glitch.local-settings__navigation,
 .glitch.local-settings__navigation__item {
-  background: lighten($ui-base-color, 4%);
+  background: $ui-base-semi-lighter-color;
 }
+
 .glitch.local-settings__navigation__item {
-  border-bottom-color: $ui-base-lighter-color;
+  border-bottom-color: $ui-base-extra-light-color;
+
+  &.active,
+  &.active:hover {
+    background: $ui-highlight-color;
+  }
+
+  &:hover {
+    background: $ui-base-extra-light-color;
+  }
 }
 
 // border radius
@@ -119,7 +236,7 @@ body {
 .status-card,
 .language-dropdown__dropdown,
 .privacy-dropdown__dropdown,
-.poll__option input[type="text"],
+.poll__option input[type='text'],
 .compose-form__poll-wrapper select,
 .account__header__tabs__buttons .icon-button,
 .emoji-picker-dropdown__menu,
@@ -133,29 +250,65 @@ body {
 .compare-history-modal {
   border-radius: $border-radius;
 }
+
 .dropdown-menu {
   padding-top: $border-radius;
   padding-bottom: $border-radius;
 }
+
 .emoji-mart-scroll {
   margin-bottom: $border-radius;
   padding-bottom: 0;
 }
+
 .column-header {
   border-top-left-radius: $border-radius;
   border-top-right-radius: $border-radius;
+  border-left: 1px solid $ui-base-lighter-color;
+  border-top: 1px solid $ui-base-lighter-color;
+  border-right: 1px solid $ui-base-lighter-color;
 }
+
+.column-header,
+.column-header__button,
+.search__input {
+  background: $ui-base-semi-lighter-color;
+}
+
 .column > .scrollable {
   border-bottom-left-radius: $border-radius;
   border-bottom-right-radius: $border-radius;
 }
 
+// button fixes
+.button.button-tertiary {
+  &:active,
+  &:focus,
+  &:hover {
+    padding: 6.5px 18px 7.5px;
+  }
+}
+
+.column-link--transparent.active {
+  border-left: 4px solid $highlight-text-color;
+  padding-left: 11px;
+}
+
 // timed line
 .status {
   border-bottom: 0; // no separators between posts
 }
+
+.columns-area {
+  border-left: 1px solid $ui-base-lighter-color;
+  border-right: 1px solid $ui-base-lighter-color;
+  width: calc(100% - 2px);
+}
+
 .media-gallery__item.letterbox {
   background: none; // remove the black background from letterbox images
 }
 
-@import 'animations';
+.tabs-bar__wrapper {
+  background: $ui-base-darker-color; // this hides posts scrolling above the column header
+}

app/javascript/flavours/glitch/styles/homogay/variables.scss

@@ -3,9 +3,9 @@ $black: #000000;
 $white: #ffffff;
 $red-600: #b7253d !default; // Deep Carmine
 $red-500: #df405a !default; // Cerise
-$blurple-600: #de18a3;
-$blurple-500: lighten($blurple-600, 7%);
-$blurple-300: lighten($blurple-600, 21%);
+$blurple-600: #a71494;
+$blurple-500: #d61ebe;
+$blurple-300: #ef6ede;
 $grey-600: #4e4c5a; // Trout
 $grey-100: #dadaf3; // Topaz
 
@@ -17,37 +17,40 @@ $gold-star: #e4ba3d !default;
 $red-bookmark: $success-green !default;
 
 // Values from the classic Mastodon UI
-$classic-base-color: #150f21;
+$classic-base-color: #190e25;
 $classic-primary-color: #d4b6cb;
-$classic-secondary-color: #eaddf4;
-$classic-highlight-color: #de18a3;
+$classic-secondary-color: #ffe8fc;
+$classic-highlight-color: $blurple-600;
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;
 $base-overlay-background: $black !default;
 $base-border-color: $white !default;
-$simple-background-color: lighten($classic-base-color, 7%) !default;
 $valid-value-color: $success-green !default;
 $error-value-color: $error-red !default;
 
 // Tell UI to use selected colors
+$ui-base-darker-color: darken($classic-base-color, 5%) !default;
 $ui-base-color: $classic-base-color !default;
-$ui-base-lighter-color: #5f4a6e !default;
+$ui-base-semi-lighter-color: lighten($ui-base-color, 3%) !default;
+$ui-base-lighter-color: lighten($ui-base-color, 10%) !default;
+$ui-base-extra-light-color: lighten($ui-base-color, 18%) !default;
+$simple-background-color: $ui-base-lighter-color !default;
 $ui-primary-color: $classic-primary-color !default;
 $ui-secondary-color: $classic-secondary-color !default;
 $ui-highlight-color: $classic-highlight-color !default;
-$ui-button-color: $white;
-$ui-button-background-color: $blurple-500;
-$ui-button-focus-background-color: $blurple-600;
+$ui-button-color: #ffe9fc;
+$ui-button-background-color: $blurple-600;
+$ui-button-focus-background-color: $blurple-500;
 
-$ui-button-secondary-color: $grey-100 !default;
-$ui-button-secondary-border-color: $grey-100 !default;
-$ui-button-secondary-focus-background-color: $grey-600 !default;
-$ui-button-secondary-focus-color: $white !default;
+$ui-button-secondary-color: $blurple-500 !default;
+$ui-button-secondary-border-color: $blurple-500 !default;
+$ui-button-secondary-focus-background-color: $blurple-600 !default;
+$ui-button-secondary-focus-color: $ui-button-color !default;
 
-$ui-button-tertiary-color: $blurple-300 !default;
-$ui-button-tertiary-border-color: $blurple-300 !default;
-$ui-button-tertiary-focus-background-color: $blurple-600 !default;
+$ui-button-tertiary-color: #d0adf6 !default;
+$ui-button-tertiary-border-color: #d0adf6 !default;
+$ui-button-tertiary-focus-background-color: #674e83 !default;
 $ui-button-tertiary-focus-color: $white !default;
 
 $ui-button-destructive-background-color: $red-500 !default;
@@ -55,8 +58,8 @@ $ui-button-destructive-focus-background-color: $red-600 !default;
 
 // Variables for texts
 $primary-text-color: $classic-secondary-color !default;
-$darker-text-color: $ui-primary-color !default;
-$dark-text-color: $ui-base-lighter-color !default;
+$darker-text-color: #907ca6 !default;
+$dark-text-color: darken($darker-text-color, 5%) !default;
 $secondary-text-color: $ui-secondary-color !default;
 $highlight-text-color: lighten($ui-highlight-color, 8%) !default;
 $action-button-color: $ui-base-lighter-color !default;
@@ -65,7 +68,7 @@ $active-passive-text-color: $success-green !default;
 
 // For texts on inverted backgrounds
 $inverted-text-color: $primary-text-color !default; // we don't do inverted backgrounds
-$lighter-text-color: $ui-base-lighter-color !default;
+$lighter-text-color: lighten($darker-text-color, 5%) !default;
 $light-text-color: $ui-primary-color !default;
 
 // Variables for components
@@ -75,3 +78,8 @@ $media-modal-media-max-width: 100%;
 $media-modal-media-max-height: 80%;
 
 $border-radius: 8px;
+$border-glow: 0 0 4px 1px $blurple-300, 0 0 4px 1px $blurple-300 inset;
+
+.glowing-border {
+  box-shadow: $border-glow;
+}

app/lib/text_formatter.rb

@@ -60,7 +60,7 @@ class TextFormatter
       suffix      = url[prefix.length + 30..-1]
       cutoff      = url[prefix.length..-1].length > 30
 
-      <<~HTML.squish
+      <<~HTML.squish.html_safe # rubocop:disable Rails/OutputSafety
         <a href="#{h(url)}" target="_blank" rel="#{rel.join(' ')}" translate="no"><span class="invisible">#{h(prefix)}</span><span class="#{cutoff ? 'ellipsis' : ''}">#{h(display_url)}</span><span class="invisible">#{h(suffix)}</span></a>
       HTML
     rescue Addressable::URI::InvalidURIError, IDN::Idna::IdnaError

app/models/concerns/attachmentable.rb

@@ -24,7 +24,7 @@ module Attachmentable
     def self.has_attached_file(name, options = {}) # rubocop:disable Naming/PredicateName
       super(name, options)
 
-      send(:"before_#{name}_validate") do
+      send(:"before_#{name}_validate", prepend: true) do
         attachment = send(name)
         check_image_dimension(attachment)
         set_file_content_type(attachment)

lib/mastodon/version.rb

@@ -13,7 +13,7 @@ module Mastodon
     end
 
     def patch
-      3
+      4
     end
 
     def flags

lib/tasks/branding.rake

@@ -40,7 +40,7 @@ namespace :branding do
     output_dest     = Rails.root.join('app', 'javascript', 'icons')
 
     rsvg_convert = Terrapin::CommandLine.new('rsvg-convert', '-w :size -h :size --keep-aspect-ratio :input -o :output')
-    convert = Terrapin::CommandLine.new('convert', ':input :output')
+    convert = Terrapin::CommandLine.new('convert', ':input :output', environment: { 'MAGICK_CONFIGURE_PATH' => nil })
 
     favicon_sizes      = [16, 32, 48]
     apple_icon_sizes   = [57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024]

spec/requests/api/v2/media_spec.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require 'rails_helper'
+
+RSpec.describe 'Media API', paperclip_processing: true do
+  let(:user)    { Fabricate(:user) }
+  let(:token)   { Fabricate(:accessible_access_token, resource_owner_id: user.id, scopes: scopes) }
+  let(:scopes)  { 'write' }
+  let(:headers) { { 'Authorization' => "Bearer #{token.token}" } }
+
+  describe 'POST /api/v2/media' do
+    it 'returns http success' do
+      post '/api/v2/media', headers: headers, params: { file: fixture_file_upload('attachment-jpg.123456_abcd', 'image/jpeg') }
+      expect(File.exist?(user.account.media_attachments.first.file.path(:small))).to be true
+      expect(response).to have_http_status(200)
+    end
+  end
+end