diff options
-rw-r--r-- | app/helpers/stream_entries_helper.rb | 2 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/components.scss | 11 | ||||
-rw-r--r-- | app/javascript/styles/mastodon/stream_entries.scss | 12 |
3 files changed, 24 insertions, 1 deletions
diff --git a/app/helpers/stream_entries_helper.rb b/app/helpers/stream_entries_helper.rb index 121644263..9ded69436 100644 --- a/app/helpers/stream_entries_helper.rb +++ b/app/helpers/stream_entries_helper.rb @@ -19,7 +19,7 @@ module StreamEntriesHelper safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')]) end elsif current_account.following?(account) || current_account.requested?(account) - link_to account_unfollow_path(account), class: 'button logo-button', data: { method: :post } do + link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')]) end else diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index cfd8e5ad4..7c58828fd 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -35,6 +35,17 @@ transition: all 200ms ease-out; } + &--destructive { + transition: none; + + &:active, + &:focus, + &:hover { + background-color: $error-red; + transition: none; + } + } + &:disabled { background-color: $ui-primary-color; cursor: default; diff --git a/app/javascript/styles/mastodon/stream_entries.scss b/app/javascript/styles/mastodon/stream_entries.scss index 5aa809f76..14306c8bd 100644 --- a/app/javascript/styles/mastodon/stream_entries.scss +++ b/app/javascript/styles/mastodon/stream_entries.scss @@ -110,6 +110,18 @@ } } + &.button--destructive { + &:active, + &:focus, + &:hover { + background: $error-red; + + svg path:last-child { + fill: $error-red; + } + } + } + @media screen and (max-width: $no-gap-breakpoint) { svg { display: none; |