More changes mostly to #1426, also resolved #1385

frontend/css/buttons.scss

@@ -63,12 +63,12 @@
     }
   }
   &.blue {
-    background-color: $blue;
-    box-shadow: 0 2px 0px 0px darken($blue, 12%);
+    background-color: $dark_blue !important;
+    box-shadow: 0 2px 0px 0px darken($dark_blue, 12%);
     &:focus,
     &:hover,
     &.active {
-      background-color: darken($blue, 5%) !important;
+      background-color: darken($dark_blue, 5%) !important;
     }
   }
   &.red {

frontend/css/farm_designer/farm_designer_panels.scss

@@ -89,7 +89,7 @@
     background-color: $magenta;
   }
   &.gray-panel {
-    background-color: $panel_gray;
+    background-color: $gray;
   }
   &.yellow-panel {
     background-color: $panel_yellow;
@@ -145,7 +145,6 @@
   height: 50px;
   .back-arrow {
     float: left;
-    color: $off_white;
     text-align: center;
     font-size: 1.8rem;
     width: 50px;
@@ -156,7 +155,6 @@
   }
   .title {
     float: left;
-    color: $off_white;
     font-size: 1.8rem;
     white-space: nowrap;
     width: 50%;
@@ -187,6 +185,13 @@
   }
 }
 
+.white-text{
+  color: $off_white;
+}
+.black-text{
+  color: $black;
+}
+
 .point-inventory-panel,
 .plant-inventory-panel {
   .panel-content {
@@ -215,14 +220,17 @@
     position: absolute;
     z-index: 9;
     width: 100%;
-    background: $dark_green;
+    background: $gray;
     padding: 0.5rem;
     button {
       margin: 0.5rem;
     }
+    .buttonrow{
+      float:left;
+    }
   }
   .panel-content {
-    padding-top: 5rem;
+    padding-top: 10rem;
     padding-right: 0;
     padding-left: 0;
     padding-bottom: 5rem;

frontend/css/global.scss

@@ -1055,6 +1055,7 @@ ul {
   td:nth-child(1),
   td:nth-child(4) {
     min-width: 116px;
+    white-space: nowrap;
   }
   td:nth-child(2),
   td:nth-child(3) {

frontend/css/sequences.scss

@@ -14,7 +14,6 @@
         display: none;
       }
     }
-  //  margin-bottom: 3rem;
   }
   padding: 3rem 1.5rem 8rem;
   overflow: hidden;

frontend/farm_designer/plants/__tests__/select_plants_test.tsx

@@ -84,7 +84,7 @@ describe("<SelectPlants />", () => {
     const p = fakeProps();
     p.dispatch = jest.fn();
     const wrapper = mount(<SelectPlants {...p} />);
-    clickButton(wrapper, 2, "select none");
+    clickButton(wrapper, 0, "select none");
     expect(p.dispatch).toHaveBeenCalledWith(
       { payload: undefined, type: Actions.SELECT_PLANT });
   });
@@ -95,7 +95,7 @@ describe("<SelectPlants />", () => {
     const wrapper = mount(<SelectPlants {...p} />);
     expect(wrapper.text()).toContain("Delete");
     window.confirm = jest.fn();
-    wrapper.find("button").first().simulate("click");
+    wrapper.find("button").at(2).simulate("click");
     expect(window.confirm).toHaveBeenCalledWith(
       "Are you sure you want to delete 2 plants?");
   });
@@ -107,7 +107,7 @@ describe("<SelectPlants />", () => {
     const wrapper = mount(<SelectPlants {...p} />);
     expect(wrapper.text()).toContain("Delete");
     window.confirm = () => true;
-    wrapper.find("button").first().simulate("click");
+    wrapper.find("button").at(2).simulate("click");
     expect(destroy).toHaveBeenCalledWith("plant.1", true);
     expect(destroy).toHaveBeenCalledWith("plant.2", true);
   });

frontend/farm_designer/plants/designer_panel.tsx

@@ -24,6 +24,7 @@ interface DesignerPanelHeaderProps {
   panelName: string;
   panelColor: string;
   title?: string;
+  blackText?: boolean;
   description?: string;
   descriptionElement?: JSX.Element;
   backTo?: string;
@@ -42,19 +43,21 @@ export const DesignerPanelHeader = (props: DesignerPanelHeaderProps) =>
   <div className={`panel-header ${props.panelColor}-panel`}
     style={props.style || {}}>
     <p className="panel-title">
-      <i className="fa fa-arrow-left back-arrow"
+      <i className={`fa fa-arrow-left back-arrow ${props.blackText ? "black" : "white"}-text`}
         title={t("go back") + backToText(props.backTo)}
         onClick={() => {
           props.backTo ? routeHistory.push(props.backTo) : history.back();
           props.onBack && props.onBack();
         }} />
-      {props.title && <span className="title">{t(props.title)}</span>}
+      {props.title &&
+        <span className={`title ${props.blackText ? "black" : "white"}-text`}
+        >{t(props.title)}</span>}
       {props.children}
     </p>
 
     {(props.description || props.descriptionElement) &&
       <div
-        className={`panel-header-description ${props.panelName}-description`}>
+        className={`panel-header-description ${props.panelName}-description ${props.blackText ? "black" : "white"}-text`}>
         {props.description && t(props.description)}
         {props.descriptionElement}
       </div>}

frontend/farm_designer/plants/select_plants.tsx

@@ -56,47 +56,52 @@ export class RawSelectPlants extends React.Component<SelectPlantsProps, {}> {
 
   ActionButtons = () =>
     <div className="panel-action-buttons">
-      <button className="fb-button red"
-        onClick={() => this.destroySelected(this.props.selected)}>
-        {t("Delete selected")}
-      </button>
-      <button className="fb-button gray"
-        onClick={() => this
-          .props
-          .dispatch(selectPlant(this.props.plants.map(p => p.uuid)))}>
-        {t("Select all")}
-      </button>
-      <button className="fb-button gray"
-        onClick={() => this.props.dispatch(selectPlant(undefined))}>
-        {t("Select none")}
-      </button>
-      <button className="fb-button blue"
-        onClick={() => this.props.dispatch(createGroup({
-          points: this.props.selected
-        }))}>
-        {t("Create group")}
-      </button>
-      {DevSettings.futureFeaturesEnabled() &&
-        <button className="fb-button green"
-          onClick={() => { throw new Error("WIP"); }}>
-          {t("Create garden")}
-        </button>}
+      <div className="buttonrow">
+        <button className="fb-button gray"
+          onClick={() => this.props.dispatch(selectPlant(undefined))}>
+          {t("Select none")}
+        </button>
+        <button className="fb-button gray"
+          onClick={() => this.props
+            .dispatch(selectPlant(this.props.plants.map(p => p.uuid)))}>
+          {t("Select all")}
+        </button>
+      </div>
+      <label>{t("SELECTION ACTIONS")}</label>
+      <div className="buttonrow">
+        <button className="fb-button red"
+          onClick={() => this.destroySelected(this.props.selected)}>
+          {t("Delete")}
+        </button>
+        {DevSettings.futureFeaturesEnabled() &&
+          <button className="fb-button green"
+            onClick={() => { throw new Error("WIP"); }}>
+            {t("Create garden")}
+          </button>}
+        <button className="fb-button blue"
+          onClick={() => this.props.dispatch(createGroup({
+            points: this.props.selected
+          }))}>
+          {t("Create group")}
+        </button>
+      </div>
     </div>;
 
   render() {
     const { selected, plants, dispatch } = this.props;
+    const selectedPlantNumber = selected ? this.props.selected.length : 0;
     const selectedPlantData = selected ? selected.map(uuid => {
       return plants.filter(p => { return p.uuid == uuid; })[0];
     }) : undefined;
 
-    return <DesignerPanel panelName={"plant-selection"} panelColor={"green"}>
+    return <DesignerPanel panelName={"plant-selection"} panelColor={"gray"}>
       <DesignerPanelHeader
         panelName={"plant-selection"}
-        panelColor={"green"}
-        title={t("Select plants")}
+        panelColor={"gray"}
+        blackText={true}
+        title={t("{{length}} plants selected", { length: selectedPlantNumber })}
         backTo={"/app/designer/plants"}
         description={Content.BOX_SELECT_DESCRIPTION} />
-
       <this.ActionButtons />
 
       <DesignerPanelContent panelName={"plant-selection"}>

frontend/regimens/editor/active_editor.tsx

@@ -54,7 +54,7 @@ export class ActiveEditor
 
   render() {
     return <div className="regimen-editor-content">
-      <div className="regimen-editor-tools">
+      <div id="regimen-editor-tools" className="regimen-editor-tools">
         <RegimenButtonGroup {...this.regimenProps} />
         <RegimenNameInput {...this.regimenProps} />
         <this.LocalsList />