From 287bd6c7f503924bd5f44fe26ff494f93ab33649 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 7 Nov 2021 10:22:08 +0100 Subject: [PATCH 1/3] Use warning color for delete actions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/dropdown_menu.js | 5 +- app/soapbox/components/status_action_bar.js | 6 ++ .../admin/components/report_status.js | 1 + .../chats/components/chat_message_list.js | 1 + .../groups/timeline/components/header.js | 1 + .../features/status/components/action_bar.js | 4 ++ .../features/ui/components/actions_modal.js | 4 +- app/styles/components/dropdown-menu.scss | 67 +++++++++++-------- app/styles/components/modal.scss | 5 ++ 9 files changed, 61 insertions(+), 33 deletions(-) diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js index 43670621b..456ce8858 100644 --- a/app/soapbox/components/dropdown_menu.js +++ b/app/soapbox/components/dropdown_menu.js @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; import IconButton from './icon_button'; @@ -147,10 +148,10 @@ class DropdownMenu extends React.PureComponent { return
  • ; } - const { text, href, to, newTab, isLogout, icon } = option; + const { text, href, to, newTab, isLogout, icon, type } = option; return ( -
  • +
  • ; } - const { icon = null, text, meta = null, active = false, href = '#', isLogout } = action; + const { icon = null, text, meta = null, active = false, href = '#', isLogout, type } = action; return (
  • @@ -37,7 +37,7 @@ class ActionsModal extends ImmutablePureComponent { rel='noopener' onClick={this.props.onClick} data-index={i} - className={classNames({ active })} + className={classNames({ active, warning: type === 'warning' })} data-method={isLogout ? 'delete' : null} > {icon && } diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index 39dd1772e..fb07186cf 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -55,39 +55,48 @@ padding: 6px 0; } - &__item a { - display: flex; - align-items: center; - box-sizing: border-box; - overflow: hidden; - padding: 4px 10px; - font-size: 15px; - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - color: var(--primary-text-color); - - &:focus, - &:hover, - &:active { - outline: 0; - color: #fff; - background: var(--brand-color) !important; - - * { - color: #fff; - } + &__item { + a { + display: flex; + align-items: center; + box-sizing: border-box; + overflow: hidden; + padding: 4px 10px; + font-size: 15px; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + color: var(--primary-text-color); } - .svg-icon:first-child { - height: 20px; - width: 20px; - margin-right: 10px; - transition: none; + &.warning a { + color: var(--warning-color); + } - svg { - stroke-width: 1.5; + a { + &:focus, + &:hover, + &:active { + outline: 0; + color: #fff; + background: var(--brand-color) !important; + + * { + color: #fff; + } + } + + .svg-icon:first-child { + height: 20px; + width: 20px; + min-width: 20px; + margin-right: 10px; transition: none; + + svg { + stroke-width: 1.5; + transition: none; + } } } } diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index cf77960c5..c1019701f 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -581,6 +581,11 @@ transition: none; } + &.warning { + color: var(--warning-color); + opacity: 1; + } + &.active, &:hover, &:focus { From 0549c365e5a8a63c1ead03ae19e1cbefad222a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Sun, 7 Nov 2021 10:34:02 +0100 Subject: [PATCH 2/3] Use high contrast color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/components/dropdown-menu.scss | 2 +- app/styles/components/modal.scss | 2 +- app/styles/themes.scss | 10 ++++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index fb07186cf..c36cdef12 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -70,7 +70,7 @@ } &.warning a { - color: var(--warning-color); + color: var(--warning-color--hicontrast); } a { diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index c1019701f..e0a11c71b 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -582,7 +582,7 @@ } &.warning { - color: var(--warning-color); + color: var(--warning-color--hicontrast); opacity: 1; } diff --git a/app/styles/themes.scss b/app/styles/themes.scss index e1d328b4f..032f8ce4d 100644 --- a/app/styles/themes.scss +++ b/app/styles/themes.scss @@ -88,6 +88,11 @@ body, var(--brand-color_s), calc(var(--brand-color_l) - 12%) ); + --warning-color--hicontrast: hsl( + var(--warning-color_h), + var(--warning-color_s), + calc(var(--warning-color_l) - 12%) + ); } .theme-mode-dark { @@ -119,4 +124,9 @@ body, var(--brand-color_s), calc(var(--brand-color_l) + 12%) ); + --warning-color--hicontrast: hsl( + var(--warning-color_h), + var(--warning-color_s), + calc(var(--warning-color_l) + 12%) + ); } From d25354013a7160cc4baefb3ea47c27162cd3d1d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 8 Nov 2021 17:21:33 +0100 Subject: [PATCH 3/3] Use .destructive MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/dropdown_menu.js | 4 ++-- app/soapbox/components/status_action_bar.js | 12 ++++++------ .../features/admin/components/report_status.js | 2 +- .../features/chats/components/chat_message_list.js | 2 +- .../features/groups/timeline/components/header.js | 2 +- app/soapbox/features/status/components/action_bar.js | 8 ++++---- app/soapbox/features/ui/components/actions_modal.js | 4 ++-- app/styles/components/dropdown-menu.scss | 2 +- app/styles/components/modal.scss | 2 +- 9 files changed, 19 insertions(+), 19 deletions(-) diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js index 456ce8858..868e42066 100644 --- a/app/soapbox/components/dropdown_menu.js +++ b/app/soapbox/components/dropdown_menu.js @@ -148,10 +148,10 @@ class DropdownMenu extends React.PureComponent { return
  • ; } - const { text, href, to, newTab, isLogout, icon, type } = option; + const { text, href, to, newTab, isLogout, icon, destructive } = option; return ( -
  • +
  • ; } - const { icon = null, text, meta = null, active = false, href = '#', isLogout, type } = action; + const { icon = null, text, meta = null, active = false, href = '#', isLogout, destructive } = action; return (
  • @@ -37,7 +37,7 @@ class ActionsModal extends ImmutablePureComponent { rel='noopener' onClick={this.props.onClick} data-index={i} - className={classNames({ active, warning: type === 'warning' })} + className={classNames({ active, destructive })} data-method={isLogout ? 'delete' : null} > {icon && } diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss index c36cdef12..7f2dd870c 100644 --- a/app/styles/components/dropdown-menu.scss +++ b/app/styles/components/dropdown-menu.scss @@ -69,7 +69,7 @@ color: var(--primary-text-color); } - &.warning a { + &.destructive a { color: var(--warning-color--hicontrast); } diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index e0a11c71b..56e8194ca 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -581,7 +581,7 @@ transition: none; } - &.warning { + &.destructive { color: var(--warning-color--hicontrast); opacity: 1; }