grouping fix

src/css/_index.scss

@@ -1,3 +1,5 @@
+// Temp stubs
+@import "temp";
 // Node Modules
 @import "../../node_modules/@blueprintjs/core/dist/blueprint.css";
 // Partials

src/css/_temp.scss

@@ -0,0 +1,8 @@
+.bulk-scheduler {
+  .row:last-child {
+    margin-top: 1rem;
+    button {
+      margin-left: 1rem;
+    }
+  }
+}

src/css/global.scss

@@ -226,6 +226,10 @@ h3 {
   white-space: nowrap;
 }
 
+.widget-body .row {
+  margin-top: 1rem;
+}
+
 a {
   text-decoration: none !important;
   outline: none !important;
@@ -330,6 +334,18 @@ ul {
   }
 }
 
+.add {
+  margin-top: -3rem;
+}
+
+.button-group {
+  float: right;
+  margin: -2rem 0 2rem;
+  button:not(:first-of-type) {
+    margin-right: 1rem;
+  }
+}
+
 .note {
   font-style: italic;
   font-size: 1.2rem;

src/regimens/bulk_scheduler/add_button.tsx

@@ -4,7 +4,7 @@ import { AddButtonProps } from "./interfaces";
 export function AddButton({ active, click }: AddButtonProps) {
   if (!active) { return <div />; }
   return <button
-    className="fb-button green"
+    className="fb-button green add"
     onClick={click}
   >
     <i className="fa fa-plus" />

src/regimens/bulk_scheduler/index.tsx

@@ -19,8 +19,10 @@ export function BulkSchedulerWidget(props: BulkEditorProps) {
       <i>{t("Scheduler")}</i>
     </h3>
     <ToolTip helpText={ToolTips.BULK_SCHEDULER} />
-    <AddButton active={active}
-      click={() => { dispatch(commitBulkEditor()); }} />
+    <AddButton
+      active={active}
+      click={() => { dispatch(commitBulkEditor()); }}
+    />
     <Row>
       <Col xs={6}>
         <SequenceList sequences={sequences}

src/regimens/editor/index.tsx

@@ -54,23 +54,25 @@ export function RegimenEditorWidget({ current, dispatch, auth, calendar }:
         <i>{t("Regimen Editor")}</i>
       </h3>
       <ToolTip helpText={ToolTips.REGIMEN_EDITOR} />
-      {regimen && (
-        <SaveBtn
-          isDirty={isDirty}
-          isSaving={isSaving}
-          isSaved={isSaved}
-          onClick={save({ dispatch, regimen })}
-        />
-      )}
+      <div className="button-group">
+        {regimen && (
+          <SaveBtn
+            isDirty={isDirty}
+            isSaving={isSaving}
+            isSaved={isSaved}
+            onClick={save({ dispatch, regimen })}
+          />
+        )}
 
-      <CopyButton regimen={regimen} dispatch={dispatch} />
+        <CopyButton regimen={regimen} dispatch={dispatch} />
 
-      {regimen && (
-        <button className="fb-button red"
-          onClick={remove({ dispatch, regimen, baseUrl })}>
-          {t("Delete")}
-        </button>
-      )}
+        {regimen && (
+          <button className="fb-button red"
+            onClick={remove({ dispatch, regimen, baseUrl })}>
+            {t("Delete")}
+          </button>
+        )}
+      </div>
       <MiddleSection
         regimen={regimen}
         dispatch={dispatch}

src/regimens/list/add_button.tsx

@@ -4,7 +4,7 @@ import { newRegimen } from "../actions";
 
 export function AddRegimen(props: AddRegimenProps) {
   props.className ? props.className : "";
-  let classes = "fb-button green " + props.className;
+  let classes = "fb-button green add " + props.className;
   let { dispatch } = props;
   return <button
     className={classes}

src/sequences/sequence_editor_middle_active.tsx

@@ -68,30 +68,32 @@ export class SequenceEditorMiddleActive
         <i>{t("Sequence Editor")}</i>
       </h3>
       <ToolTip helpText={ToolTips.SEQUENCE_EDITOR} />
-      <SaveBtn
-        isDirty={isDirty}
-        isSaving={isSaving}
-        isSaved={isSaved}
-        onClick={() => { dispatch(save(sequence.uuid)); }}
-      />
-      <button
-        className="fb-button orange"
-        onClick={performSeq(dispatch, sequence)}
-      >
-        {t("Save & Run")}
-      </button>
-      <button
-        className="fb-button red"
-        onClick={() => dispatch(destroy(sequence.uuid))}
-      >
-        {t("Delete")}
-      </button>
-      <button
-        className="fb-button yellow"
-        onClick={copy(dispatch, sequence)}
-      >
-        {t("Copy")}
-      </button>
+      <div className="button-group">
+        <SaveBtn
+          isDirty={isDirty}
+          isSaving={isSaving}
+          isSaved={isSaved}
+          onClick={() => { dispatch(save(sequence.uuid)); }}
+        />
+        <button
+          className="fb-button orange"
+          onClick={performSeq(dispatch, sequence)}
+        >
+          {t("Save & Run")}
+        </button>
+        <button
+          className="fb-button red"
+          onClick={() => dispatch(destroy(sequence.uuid))}
+        >
+          {t("Delete")}
+        </button>
+        <button
+          className="fb-button yellow"
+          onClick={copy(dispatch, sequence)}
+        >
+          {t("Copy")}
+        </button>
+      </div>
       <Row>
         <Col xs={11}>
           <BlurableInput value={sequence.body.name}

src/sequences/sequences_list.tsx

@@ -68,7 +68,7 @@ export class SequencesList extends
         <i>{t("Sequences")}</i>
       </h3>
       <ToolTip helpText={ToolTips.SEQUENCE_LIST} />
-      <button className="fb-button green"
+      <button className="fb-button green add"
         onClick={() => dispatch(init(this.emptySequence()))}>
         <i className="fa fa-plus" />
       </button>