Reverse tab order of Mock menu items

I think maybe these were previously reversed so that you could shift-tab
into the collapse/save button? A bit weird and confusing though, better
to match visual order I think.

Author: pimterry

src/components/mock/mock-item-menu.tsx

@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { styled, css } from '../../styles';
+import { styled } from '../../styles';
 import { IconProp } from '../../icons';
 
 import { IconButton } from '../common/icon-button';
@@ -12,7 +12,6 @@ export const IconMenu = styled.div<{ topOffset: number }>`
     right: 10px;
 
     display: none; /* Made flex by container, on hover/expand */
-    flex-direction: row-reverse;
     align-items: center;
 `;
 

src/components/mock/mock-rule-group.tsx

@@ -68,19 +68,19 @@ const RuleGroupMenu = (p: {
     onDelete: (event: React.MouseEvent) => void,
 }) => <IconMenu topOffset={-2}>
     <IconMenuButton
-        title='Delete these rules'
-        icon={['far', 'trash-alt']}
-        onClick={p.onDelete}
+        title={p.toggleState ? 'Deactivate these rules' : 'Activate these rules'}
+        icon={['fas', p.toggleState ? 'toggle-on' : 'toggle-off']}
+        onClick={p.onToggleActivation}
     />
     <IconMenuButton
         title='Clone this rule'
         icon={['far', 'clone']}
         onClick={p.onClone}
     />
     <IconMenuButton
-        title={p.toggleState ? 'Deactivate these rules' : 'Activate these rules'}
-        icon={['fas', p.toggleState ? 'toggle-on' : 'toggle-off']}
-        onClick={p.onToggleActivation}
+        title='Delete these rules'
+        icon={['far', 'trash-alt']}
+        onClick={p.onDelete}
     />
 </IconMenu>;
 

src/components/mock/mock-rule-row.tsx

@@ -220,33 +220,6 @@ const RuleMenu = (p: {
     onToggleActivation: (event: React.UIEvent) => void,
     onDelete: (event: React.UIEvent) => void,
 }) => <RuleMenuContainer topOffset={7}>
-        <IconMenuButton
-            title='Delete this rule'
-            icon={['far', 'trash-alt']}
-            onClick={p.onDelete}
-        />
-        <IconMenuButton
-            title='Clone this rule'
-            icon={['far', 'clone']}
-            onClick={p.onClone}
-        />
-        <IconMenuButton
-            title={p.toggleState ? 'Deactivate this rule' : 'Activate this rule'}
-            icon={['fas', p.toggleState ? 'toggle-on' : 'toggle-off']}
-            onClick={p.onToggleActivation}
-        />
-        <IconMenuButton
-            title='Give this rule a custom name'
-            icon={['fas', 'edit']}
-            disabled={p.isEditingTitle}
-            onClick={p.onSetCustomTitle}
-        />
-        <IconMenuButton
-            title='Revert this rule to the last saved version'
-            icon={['fas', 'undo']}
-            disabled={!p.hasUnsavedChanges || p.isNewRule}
-            onClick={p.onReset}
-        />
         <IconMenuButton
             icon={['fas',
                 p.hasUnsavedChanges
@@ -262,6 +235,33 @@ const RuleMenu = (p: {
                 : 'Hide rule details'}
             onClick={p.hasUnsavedChanges ? p.onSave : p.onToggleCollapse}
         />
+        <IconMenuButton
+            title='Revert this rule to the last saved version'
+            icon={['fas', 'undo']}
+            disabled={!p.hasUnsavedChanges || p.isNewRule}
+            onClick={p.onReset}
+        />
+        <IconMenuButton
+            title='Give this rule a custom name'
+            icon={['fas', 'edit']}
+            disabled={p.isEditingTitle}
+            onClick={p.onSetCustomTitle}
+        />
+        <IconMenuButton
+            title={p.toggleState ? 'Deactivate this rule' : 'Activate this rule'}
+            icon={['fas', p.toggleState ? 'toggle-on' : 'toggle-off']}
+            onClick={p.onToggleActivation}
+        />
+        <IconMenuButton
+            title='Clone this rule'
+            icon={['far', 'clone']}
+            onClick={p.onClone}
+        />
+        <IconMenuButton
+            title='Delete this rule'
+            icon={['far', 'trash-alt']}
+            onClick={p.onDelete}
+        />
     </RuleMenuContainer>;
 
 const extendRowDraggableStyles = (