Refactor list items

Author: noellabo

app/javascript/mastodon/features/circles/components/circle.js

@@ -6,6 +6,7 @@ import Icon from '../../../components/icon';
 import IconButton from '../../../components/icon_button';
 import { openModal } from '../../../actions/modal';
 import { deleteCircle } from '../../../actions/circles';
+import { defaultMediaVisibility } from '../../../components/status';
 
 const messages = defineMessages({
   deleteTitle: { id: 'confirmations.delete_circle.title', defaultMessage: 'Delete' },
@@ -45,13 +46,15 @@ class Circle extends React.PureComponent {
     const { text, intl } = this.props;
 
     return (
-      <button className='circle-link' onClick={this.handleEditClick}>
-        <div>
+      <div className='circle-link'>
+        <button className='circle-edit-button' onClick={this.handleEditClick}>
           <Icon id='circle-o' className='column-link__icon' fixedWidth />
           {text}
-        </div>
-        <IconButton icon='trash' size={16} title={intl.formatMessage(messages.deleteTitle)} onClick={this.handleDeleteClick} />
-      </button>
+        </button>
+        <button className='circle-delete-button' title={intl.formatMessage(messages.deleteTitle)} onClick={this.handleDeleteClick}>
+          <Icon id='trash' className='column-link__icon' fixedWidth />
+        </button>
+      </div>
     );
   }
 

app/javascript/styles/mastodon/components.scss

@@ -6327,34 +6327,37 @@ noscript {
   }
 }
 
-button.circle-link {
-  background: lighten($ui-base-color, 8%);
-  color: $primary-text-color;
+.circle-link {
   display: flex;
-  font-size: 16px;
-  padding: 15px;
-  border: 0;
-  width: 100%;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
 
-  &:hover,
-  &:focus,
-  &:active {
-    background: lighten($ui-base-color, 11%);
+  .circle-edit-button {
+    flex: 1 1 auto;
   }
 
-  &:focus {
-    outline: 0;
+  .circle-delete-button {
+    flex: 0 0 auto;
   }
 
-  div {
-    flex: 1 1 auto;
-  }
+  .circle-edit-button,
+  .circle-delete-button {
+    background: lighten($ui-base-color, 8%);
+    color: $primary-text-color;
+    padding: 15px;
+    font-size: 16px;
+    text-align: left;
+    text-decoration: none;
+    cursor: pointer;
+    border: 0;
 
-  .icon-button {
-    flex: 0 0 auto;
+    &:hover,
+    &:focus,
+    &:active {
+      background: lighten($ui-base-color, 11%);
+    }
+
+    &:focus {
+      outline: 0;
+    }
   }
 }