fix blocks

src/css/_index.scss

@@ -7,7 +7,6 @@
 // Global
 @import "global";
 // Components
-@import "blocks";
 @import "blueprint";
 @import "buttons";
 @import "devices";

src/css/blocks.scss

@@ -1,28 +0,0 @@
-// Styles for the sequence and regimen BLOCKS
-.block-wrapper {
-  height: 3.5rem;
-  margin-bottom: 1.5rem;
-  button {
-    transition: all 0.2s ease-out;
-    &:hover {
-      transition: all 0.2s ease-out;
-      .block-control {
-        transition: all 0.2s ease-out;
-        opacity: 1;
-      }
-    }
-  }
-}
-
-.block-control {
-  transition: all 0.2s ease-out;
-  opacity: 0;
-  float: right;
-  font-size: 1.4rem !important;
-  padding-left: 1rem;
-}
-
-.block-header {
-  height: 3.5rem;
-  font-size: 1.2rem !important;
-}

src/css/buttons.scss

@@ -123,6 +123,26 @@
   }
 }
 
+.block {
+  height: 3.5rem;
+  margin-bottom: 1.5rem;
+  font-size: 1.2rem;
+  &:hover {
+    .block-control {
+      transition: all 0.2s ease-out;
+      opacity: 1;
+    }
+  }
+}
+
+.block-control {
+  transition: all 0.2s ease-out;
+  opacity: 0;
+  float: right;
+  font-size: 1.4rem !important;
+  padding-left: 1rem;
+}
+
 .fb-toggle-button {
   height: 1.8rem !important;
   position: relative;
@@ -226,10 +246,4 @@
       background: darken($magenta, 5%) !important;
     }
   }
-}
-
-@media (max-width: 568px) {
-  .plus-button {
-    margin: 0 auto;
-  }
 }

src/regimens/editor/active_editor.tsx

@@ -6,8 +6,11 @@ import { RegimenItem, RegimenItemCalendarRow } from "../interfaces";
 import { TaggedRegimen } from "../../resources/tagged_resources";
 import { defensiveClone } from "../../util";
 import { overwrite } from "../../api/crud";
-/** The bottom half of the regimen editor panel (when there's something to
-    actually edit). */
+
+/**
+ * The bottom half of the regimen editor panel (when there's something to
+ * actually edit).
+ */
 export function ActiveEditor(props: ActiveEditorProps) {
   return <div>
     <RegimenNameInput regimen={props.regimen} dispatch={props.dispatch} />
@@ -18,7 +21,7 @@ export function ActiveEditor(props: ActiveEditorProps) {
         {group.items.map(function (row, index2) {
           let { item, regimen } = row;
           let click = () => props.dispatch(removeRegimenItem(item, regimen));
-          let klass = `${row.color} block-header regimen-event`
+          let klass = `${row.color} regimen-event`;
           return <div className={klass} key={`${index1}.${index2}`}>
             <span className="regimen-event-title">{row.name}</span>
             <span className="regimen-event-time">{row.hhmm}</span>

src/regimens/list/regimen_list_item.tsx

@@ -8,8 +8,7 @@ import { TaggedRegimen, isTaggedRegimen } from "../../resources/tagged_resources
 export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
   let name = regimen.body.name || "-";
   let color = (regimen.body.color) || "gray";
-  let style = `block block-wrapper full-width text-left ${color}
-        block-header fb-button`;
+  let style = `block full-width fb-button ${color}`;
   let link = name ? name.replace(/ /g, "_").toLowerCase() : "-";
   if (isMobile()) {
     return <Link to={`/app/regimens/${link}`}
@@ -23,7 +22,6 @@ export function RegimenListItem({ regimen, dispatch }: RegimenListItemProps) {
       className={style}
       onClick={select(dispatch, regimen)}>
       {name} {regimen.dirty && ("*")}
-      <i className="fa fa-pencil block-control" />
     </button>;
   }
 }

src/sequences/sequences_list.tsx

@@ -11,14 +11,7 @@ import { t } from "i18next";
 
 let buttonList = (dispatch: Function) =>
   (ts: TaggedSequence, index: number) => {
-    let css = [
-      "fb-button",
-      "block-wrapper",
-      "block",
-      "full-width",
-      "text-left",
-      `${ts.body.color || "purple"}`,
-      "block-header"].join(" ");
+    let css = `fb-button block full-width ${ts.body.color || "purple"}`;
     let click = () => { dispatch(selectSequence(ts.uuid)); };
     let name = ts.body.name + (ts.dirty ? "*" : "");
     let { uuid } = ts;
@@ -34,9 +27,9 @@ let buttonList = (dispatch: Function) =>
       return <button
         key={uuid}
         onClick={click}
-        className={css}>
+        className={css}
+      >
         {name}
-        <i className="fa fa-pencil block-control" />
       </button>;
     }
   };

src/sequences/step_buttons/index.tsx

@@ -19,16 +19,18 @@ let click = (dispatch: Function, step: Step, seq: TaggedSequence | undefined) =>
 export function StepButton({ children, step, color, dispatch, current }:
   StepButtonParams) {
   return <Col xs={6} sm={12}>
-    <div className="block-wrapper">
-      <StepDragger dispatch={dispatch}
+    <div className="block">
+      <StepDragger
+        dispatch={dispatch}
         step={step}
         ghostCss="step-drag-ghost-image"
         intent="step_splice"
-        draggerId={NULL_DRAGGER_ID}>
-        <button className={
-          `fb-button full-width text-left ${color} block-header block`
-        }
-          onClick={click(dispatch, step, current)}>
+        draggerId={NULL_DRAGGER_ID}
+      >
+        <button
+          className={`fb-button full-width block ${color}`}
+          onClick={click(dispatch, step, current)}
+        >
           {children}
           <i className="fa fa-arrows block-control" />
         </button>