un-inline stuff

frontend/controls/pin_form_fields.tsx

@@ -58,20 +58,21 @@ export const ModeDropdown = (props: ModeDropdownProps) =>
     }))}
     selectedItem={{ label: MODES()[props.value], value: props.value }}
     list={PIN_MODES()} />;
+type ButtonProps =
+  React.ButtonHTMLAttributes<HTMLButtonElement>;
 
-interface DeleteButtonProps {
+interface DeleteButtonProps extends ButtonProps {
   dispatch: Function;
   uuid: UUID;
   children?: React.ReactChild
   onDestroy?: Function;
-  style?: React.CSSProperties;
 }
 
 export const DeleteButton = (props: DeleteButtonProps) =>
   <button
+    {...props}
     className="red fb-button del-button"
     title={t("Delete")}
-    style={props.style || {}}
     onClick={() =>
       props.dispatch(destroy(props.uuid))
         .then(props.onDestroy || (() => { }))}>

frontend/css/farm_designer/farm_designer.scss

@@ -205,13 +205,17 @@
   .group-item-count {
     @extend .plant-search-item-age;
     padding-top: 0.6rem;
-     // .groups-panel-content padding should be 0
-     // on the groups list panel, but stay the
-     // same on the group details panel.
   }
   .groups-panel-content {
     padding: 0px;
   }
+  .groups-list-wrapper {
+    padding: 0.5em 0em;
+  }
+  .groups-delete-btn {
+    float: left;
+    margin-top: 1em;
+  }
   .plant-search-item-name {
     display: inline-block;
     vertical-align: middle;

frontend/farm_designer/point_groups/group_detail_active.tsx

@@ -49,11 +49,7 @@ export const LittleIcon =
       onMouseEnter={() => dispatch(toggleHoveredPlant(plantUUID, icon))}
       onMouseLeave={() => dispatch(toggleHoveredPlant(undefined, icon))}
       onClick={() => dispatch(removePoint(group, body.id || 0))}>
-      <img
-        src={icon}
-        alt={p.body.name}
-        width={32}
-        height={32} />
+      <img src={icon} alt={p.body.name} width={32} height={32} />
     </span>;
   };
 
@@ -134,11 +130,11 @@ export class GroupDetailActive extends React.Component<GroupDetailActiveProps, S
         <p>
           {t("Click plants in map to add or remove.")}
         </p>
-        <div style={{ padding: "0.5em 0em" }}>
+        <div className="groups-list-wrapper">
           {this.icons}
         </div>
         <DeleteButton
-          style={{ float: "left", marginTop: "1em" }}
+          className="groups-delete-btn"
           dispatch={this.props.dispatch}
           uuid={group.uuid}
           onDestroy={history.back}>

frontend/farm_designer/point_groups/group_inventory_item.tsx

@@ -16,7 +16,7 @@ export function GroupInventoryItem(props: GroupInventoryItemProps) {
     <span className="plant-search-item-name">
       {props.group.body.name}
     </span>
-    <i className="group-search-item">
+    <i className="group-item-count">
       {t("{{count}} items", { count: props.group.body.point_ids.length })}
     </i>
   </div>;