Merge branch 'actions-modal-warnings' into 'develop'

DropdownMenu/ActionModal: Use warning color for delete actions

See merge request soapbox-pub/soapbox-fe!861

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 <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href, to, newTab, isLogout, icon } = option;
+    const { text, href, to, newTab, isLogout, icon, destructive } = option;
 
     return (
-      <li className='dropdown-menu__item' key={`${text}-${i}`}>
+      <li className={classNames('dropdown-menu__item', { destructive })} key={`${text}-${i}`}>
         <a
           href={href || to || '#'}
           role='button'

app/soapbox/components/status_action_bar.js

@@ -364,11 +364,13 @@ class StatusActionBar extends ImmutablePureComponent {
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
         icon: require('@tabler/icons/icons/trash.svg'),
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.redraft),
         action: this.handleRedraftClick,
         icon: require('@tabler/icons/icons/edit.svg'),
+        destructive: true,
       });
     } else {
       menu.push({
@@ -441,11 +443,13 @@ class StatusActionBar extends ImmutablePureComponent {
           text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
           action: this.handleDeleteUser,
           icon: require('@tabler/icons/icons/user-minus.svg'),
+          destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
           icon: require('@tabler/icons/icons/trash.svg'),
+          destructive: true,
         });
       }
     }
@@ -456,11 +460,13 @@ class StatusActionBar extends ImmutablePureComponent {
         text: intl.formatMessage(messages.group_remove_account),
         action: this.handleGroupRemoveAccount,
         icon: require('@tabler/icons/icons/user-x.svg'),
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.group_remove_post),
         action: this.handleGroupRemovePost,
         icon: require('@tabler/icons/icons/trash.svg'),
+        destructive: true,
       });
     }
 

app/soapbox/features/admin/components/report_status.js

@@ -37,6 +37,7 @@ class ReportStatus extends ImmutablePureComponent {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: this.handleDeleteStatus,
       icon: require('@tabler/icons/icons/trash.svg'),
+      destructive: true,
     }];
   }
 

app/soapbox/features/chats/components/chat_message_list.js

@@ -265,6 +265,7 @@ class ChatMessageList extends ImmutablePureComponent {
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteMessage(chatMessage.get('chat_id'), chatMessage.get('id')),
         icon: require('@tabler/icons/icons/trash.svg'),
+        destructive: true,
       },
       {
         text: intl.formatMessage(messages.report),

app/soapbox/features/groups/timeline/components/header.js

@@ -59,6 +59,7 @@ class Header extends ImmutablePureComponent {
         text: intl.formatMessage(messages.removed_accounts),
         to: `/groups/${group.get('id')}/removed_accounts`,
         icon: require('@tabler/icons/icons/trash.svg'),
+        destructive: true,
       },
     ];
 

app/soapbox/features/status/components/action_bar.js

@@ -367,11 +367,13 @@ class ActionBar extends React.PureComponent {
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
         icon: require('@tabler/icons/icons/trash.svg'),
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.redraft),
         action: this.handleRedraftClick,
         icon: require('@tabler/icons/icons/edit.svg'),
+        destructive: true,
       });
     } else {
       menu.push({
@@ -444,11 +446,13 @@ class ActionBar extends React.PureComponent {
           text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
           action: this.handleDeleteUser,
           icon: require('@tabler/icons/icons/user-minus.svg'),
+          destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
           icon: require('@tabler/icons/icons/trash.svg'),
+          destructive: true,
         });
       }
     }

app/soapbox/features/ui/components/actions_modal.js

@@ -28,7 +28,7 @@ class ActionsModal extends ImmutablePureComponent {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { icon = null, text, meta = null, active = false, href = '#', isLogout } = action;
+    const { icon = null, text, meta = null, active = false, href = '#', isLogout, destructive } = action;
 
     return (
       <li key={`${text}-${i}`}>
@@ -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 && <Icon title={text} src={icon} role='presentation' tabIndex='-1' inverted />}

app/styles/components/dropdown-menu.scss

@@ -55,7 +55,8 @@
     padding: 6px 0;
   }
 
-  &__item a {
+  &__item {
+    a {
       display: flex;
       align-items: center;
       box-sizing: border-box;
@@ -66,7 +67,13 @@
       text-overflow: ellipsis;
       white-space: nowrap;
       color: var(--primary-text-color);
+    }
 
+    &.destructive a {
+      color: var(--warning-color--hicontrast);
+    }
+
+    a {
       &:focus,
       &:hover,
       &:active {
@@ -82,6 +89,7 @@
       .svg-icon:first-child {
         height: 20px;
         width: 20px;
+        min-width: 20px;
         margin-right: 10px;
         transition: none;
 
@@ -91,6 +99,7 @@
         }
       }
     }
+  }
 
   &__separator {
     display: block;

app/styles/components/modal.scss

@@ -581,6 +581,11 @@
           transition: none;
         }
 
+        &.destructive {
+          color: var(--warning-color--hicontrast);
+          opacity: 1;
+        }
+
         &.active,
         &:hover,
         &:focus {

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%)
+  );
 }