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 {