Use .destructive

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/dropdown_menu.js

@@ -148,10 +148,10 @@ class DropdownMenu extends React.PureComponent {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
 
-    const { text, href, to, newTab, isLogout, icon, type } = option;
+    const { text, href, to, newTab, isLogout, icon, destructive } = option;
 
     return (
-      <li className={classNames('dropdown-menu__item', { warning: type === 'warning' })} 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,13 +364,13 @@ class StatusActionBar extends ImmutablePureComponent {
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
         icon: require('@tabler/icons/icons/trash.svg'),
-        type: 'warning',
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.redraft),
         action: this.handleRedraftClick,
         icon: require('@tabler/icons/icons/edit.svg'),
-        type: 'warning',
+        destructive: true,
       });
     } else {
       menu.push({
@@ -443,13 +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'),
-          type: 'warning',
+          destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
           icon: require('@tabler/icons/icons/trash.svg'),
-          type: 'warning',
+          destructive: true,
         });
       }
     }
@@ -460,13 +460,13 @@ class StatusActionBar extends ImmutablePureComponent {
         text: intl.formatMessage(messages.group_remove_account),
         action: this.handleGroupRemoveAccount,
         icon: require('@tabler/icons/icons/user-x.svg'),
-        type: 'warning',
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.group_remove_post),
         action: this.handleGroupRemovePost,
         icon: require('@tabler/icons/icons/trash.svg'),
-        type: 'warning',
+        destructive: true,
       });
     }
 

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

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

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

@@ -265,7 +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'),
-        type: 'warning',
+        destructive: true,
       },
       {
         text: intl.formatMessage(messages.report),

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

@@ -59,7 +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'),
-        type: 'warning',
+        destructive: true,
       },
     ];
 

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

@@ -367,13 +367,13 @@ class ActionBar extends React.PureComponent {
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
         icon: require('@tabler/icons/icons/trash.svg'),
-        type: 'warning',
+        destructive: true,
       });
       menu.push({
         text: intl.formatMessage(messages.redraft),
         action: this.handleRedraftClick,
         icon: require('@tabler/icons/icons/edit.svg'),
-        type: 'warning',
+        destructive: true,
       });
     } else {
       menu.push({
@@ -446,13 +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'),
-          type: 'warning',
+          destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
           icon: require('@tabler/icons/icons/trash.svg'),
-          type: 'warning',
+          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, type } = 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, warning: type === 'warning' })}
+          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

@@ -69,7 +69,7 @@
       color: var(--primary-text-color);
     }
 
-    &.warning a {
+    &.destructive a {
       color: var(--warning-color--hicontrast);
     }
 

app/styles/components/modal.scss

@@ -581,7 +581,7 @@
           transition: none;
         }
 
-        &.warning {
+        &.destructive {
           color: var(--warning-color--hicontrast);
           opacity: 1;
         }