diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js
index 43670621b..868e42066 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, destructive } = option;
return (
-
+
;
}
- const { icon = null, text, meta = null, active = false, href = '#', isLogout } = 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 })}
+ 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 39dd1772e..7f2dd870c 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;
+ &.destructive a {
+ color: var(--warning-color--hicontrast);
+ }
- 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..56e8194ca 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -581,6 +581,11 @@
transition: none;
}
+ &.destructive {
+ color: var(--warning-color--hicontrast);
+ opacity: 1;
+ }
+
&.active,
&:hover,
&:focus {
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%)
+ );
}