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 {