panel color cleanup

frontend/css/buttons.scss

@@ -194,6 +194,15 @@
       background-color: darken($panel_gray, 5%) !important;
     }
   }
+  &.panel-light-gray {
+    background-color: $panel_medium_light_gray;
+    box-shadow: 0 2px 0px 0px darken($panel_medium_light_gray, 12%);
+    &:focus,
+    &:hover,
+    &.active {
+      background-color: darken($panel_medium_light_gray, 5%) !important;
+    }
+  }
   &.panel-blue {
     background-color: $panel_blue;
     box-shadow: 0 2px 0px 0px darken($panel_blue, 12%);
@@ -230,6 +239,24 @@
       background-color: darken($panel_red, 5%) !important;
     }
   }
+  &.panel-magenta {
+    background-color: $magenta;
+    box-shadow: 0 2px 0px 0px darken($magenta, 12%);
+    &:focus,
+    &:hover,
+    &.active {
+      background-color: darken($magenta, 5%) !important;
+    }
+  }
+  &.panel-cyan {
+    background-color: $cyan;
+    box-shadow: 0 2px 0px 0px darken($cyan, 12%);
+    &:focus,
+    &:hover,
+    &.active {
+      background-color: darken($cyan, 5%) !important;
+    }
+  }
   &.zoom {
     padding: 8px 12px;
     &.zoom-out {

frontend/css/farm_designer/farm_designer.scss

@@ -181,33 +181,18 @@
       transition: all 0.2s ease;
     }
   }
-  %search-item {
+
+  .plant-search-item,
+  .group-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
-    &:hover,
-    &.hovered {
-      background: darken($light_green, 10%);
-      transition: background 0.2s ease;
-    }
     img {
       margin: 0 1rem 0 0;
       height: 4rem;
       width: 4rem;
     }
   }
 
-  .plant-search-item {
-    @extend %search-item;
-  }
-
-  .group-search-item {
-    @extend %search-item;
-    &:hover,
-    &.hovered {
-      background: #d7eaea;
-    }
-  }
-
   %panel-item-base {
     text-align: right;
     font-size: 1rem;
@@ -244,11 +229,6 @@
   .point-search-item {
     cursor: pointer;
     padding: 0.5rem 1rem;
-    &:hover,
-    &.hovered {
-      background: darken($light_brown, 10%);
-      transition: background 0.2s ease;
-    }
     .saucer {
       display: inline-block;
       margin: 0 1rem 0 0;

frontend/css/farm_designer/farm_designer_panels.scss

@@ -44,32 +44,93 @@
 
 .panel-container {
   overflow: hidden;
+  div[class*="search-item"] {
+    &:hover,
+    &.hovered {
+      transition: background 0.2s ease;
+    }
+  }
   &.green-panel {
     background-color: $panel_light_green;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_green, 10%);
+      }
+    }
   }
   &.cyan-panel {
     background-color: $light_cyan;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($light_cyan, 10%);
+      }
+    }
   }
   &.brown-panel {
     background-color: $panel_light_brown;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_brown, 10%);
+      }
+    }
   }
   &.magenta-panel {
     background-color: $light_magenta;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($light_magenta, 10%);
+      }
+    }
   }
+  &.light-gray-panel,
   &.gray-panel {
     background-color: $panel_light_gray;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_gray, 10%);
+      }
+    }
   }
   &.yellow-panel {
     background-color: $panel_light_yellow;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_yellow, 10%);
+      }
+    }
   }
   &.blue-panel {
     background-color: $panel_light_blue;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_blue, 10%);
+      }
+    }
   }
   &.teal-panel {
     background-color: $panel_light_teal;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_teal, 10%);
+      }
+    }
   }
   &.red-panel {
     background-color: $panel_light_red;
+    div[class*="search-item"] {
+      &:hover,
+      &.hovered {
+        background: darken($panel_light_red, 10%);
+      }
+    }
   }
 }
 

frontend/farm_designer/farm_events/add_farm_event.tsx

@@ -17,6 +17,7 @@ import {
 } from "../plants/designer_panel";
 import { variableList } from "../../sequences/locals_list/variable_support";
 import { t } from "../../i18next_wrapper";
+import { Panel } from "../panel_header";
 
 interface State {
   uuid: string;
@@ -85,10 +86,10 @@ export class RawAddFarmEvent
   }
 
   placeholderTemplate(children: React.ReactChild | React.ReactChild[]) {
-    return <DesignerPanel panelName={"add-farm-event"} panelColor={"yellow"}>
+    return <DesignerPanel panelName={"add-farm-event"} panel={Panel.FarmEvents}>
       <DesignerPanelHeader
         panelName={"add-farm-event"}
-        panelColor={"yellow"}
+        panel={Panel.FarmEvents}
         title={t("No Executables")} />
       <DesignerPanelContent panelName={"add-farm-event"}>
         <label>

frontend/farm_designer/farm_events/edit_fe_form.tsx

@@ -45,6 +45,7 @@ import {
 } from "../../sequences/locals_list/locals_list_support";
 import { t } from "../../i18next_wrapper";
 import { TimeSettings } from "../../interfaces";
+import { Panel } from "../panel_header";
 
 type FormEvent = React.SyntheticEvent<HTMLInputElement>;
 export const NEVER: TimeUnit = "never";
@@ -467,10 +468,10 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
 
   render() {
     const { farmEvent } = this.props;
-    return <DesignerPanel panelName={"add-farm-event"} panelColor={"yellow"}>
+    return <DesignerPanel panelName={"add-farm-event"} panel={Panel.FarmEvents}>
       <DesignerPanelHeader
         panelName={"add-farm-event"}
-        panelColor={"yellow"}
+        panel={Panel.FarmEvents}
         title={this.props.title}
         onBack={!farmEvent.body.id ? () =>
           // Throw out unsaved farmevents.

frontend/farm_designer/farm_events/farm_events.tsx

@@ -150,7 +150,7 @@ export class PureFarmEvents
   };
 
   render() {
-    return <DesignerPanel panelName={"farm-event"} panelColor={"yellow"}>
+    return <DesignerPanel panelName={"farm-event"} panel={Panel.FarmEvents}>
       <DesignerNavTabs />
       {this.props.timezoneIsSet ? this.normalContent() : this.tzwarning()}
     </DesignerPanel>;

frontend/farm_designer/move_to.tsx

@@ -17,6 +17,7 @@ import {
 import { t } from "../i18next_wrapper";
 import { isBotOnline } from "../devices/must_be_online";
 import { getStatus } from "../connectivity/reducer_support";
+import { PanelColor } from "./panel_header";
 
 export function mapStateToProps(props: Everything): MoveToProps {
   const botToMqttStatus = getStatus(props.bot.connectivity.uptime["bot.mqtt"]);
@@ -113,10 +114,10 @@ export class RawMoveTo extends React.Component<MoveToProps, {}> {
   }
 
   render() {
-    return <DesignerPanel panelName={"move-to"} panelColor={"gray"}>
+    return <DesignerPanel panelName={"move-to"} panelColor={PanelColor.gray}>
       <DesignerPanelHeader
         panelName={"move-to"}
-        panelColor={"gray"}
+        panelColor={PanelColor.gray}
         title={t("Move to location")}
         backTo={"/app/designer/plants"}
         description={Content.MOVE_MODE_DESCRIPTION} />

frontend/farm_designer/panel_header.tsx

@@ -19,17 +19,30 @@ export enum Panel {
 
 type Tabs = keyof typeof Panel;
 
-export const TAB_COLOR: { [key in Panel]: string } = {
-  [Panel.Map]: "gray",
-  [Panel.Plants]: "green",
-  [Panel.FarmEvents]: "yellow",
-  [Panel.SavedGardens]: "green",
-  [Panel.Tools]: "gray",
-  [Panel.Settings]: "gray",
-  [Panel.Points]: "teal",
-  [Panel.Groups]: "blue",
-  [Panel.Weeds]: "red",
-  [Panel.Zones]: "brown",
+export enum PanelColor {
+  green = "green",
+  cyan = "cyan",
+  brown = "brown",
+  magenta = "magenta",
+  gray = "gray",
+  lightGray = "light-gray",
+  yellow = "yellow",
+  blue = "blue",
+  teal = "teal",
+  red = "red",
+}
+
+export const TAB_COLOR: { [key in Panel]: PanelColor } = {
+  [Panel.Map]: PanelColor.gray,
+  [Panel.Plants]: PanelColor.green,
+  [Panel.FarmEvents]: PanelColor.yellow,
+  [Panel.SavedGardens]: PanelColor.green,
+  [Panel.Tools]: PanelColor.gray,
+  [Panel.Settings]: PanelColor.gray,
+  [Panel.Points]: PanelColor.teal,
+  [Panel.Groups]: PanelColor.blue,
+  [Panel.Weeds]: PanelColor.red,
+  [Panel.Zones]: PanelColor.brown,
 };
 
 const iconFile = (icon: string) => `/app-resources/img/icons/${icon}.svg`;

frontend/farm_designer/plants/__tests__/designer_panel_test.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { mount } from "enzyme";
+import { DesignerPanel, DesignerPanelHeader } from "../designer_panel";
+
+describe("<DesignerPanel />", () => {
+  it("renders default panel", () => {
+    const wrapper = mount(<DesignerPanel panelName={"test-panel"} />);
+    expect(wrapper.find("div").hasClass("gray-panel")).toBeTruthy();
+  });
+});
+
+describe("<DesignerPanelHeader />", () => {
+  it("renders default panel header", () => {
+    const wrapper = mount(<DesignerPanelHeader panelName={"test-panel"} />);
+    expect(wrapper.find("div").hasClass("gray-panel")).toBeTruthy();
+  });
+});

frontend/farm_designer/plants/__tests__/weeds_inventory_test.tsx

@@ -4,9 +4,11 @@ import {
   RawWeeds as Weeds, WeedsProps, mapStateToProps
 } from "../weeds_inventory";
 import { fakeState } from "../../../__test_support__/fake_state";
+import { fakePoint } from "../../../__test_support__/fake_state/resources";
 
 describe("<Weeds> />", () => {
   const fakeProps = (): WeedsProps => ({
+    points: [],
     dispatch: jest.fn(),
   });
 
@@ -21,6 +23,17 @@ describe("<Weeds> />", () => {
       { currentTarget: { value: "0" } });
     expect(wrapper.state().searchTerm).toEqual("0");
   });
+
+  it("filters points", () => {
+    const p = fakeProps();
+    p.points = [fakePoint(), fakePoint()];
+    p.points[0].body.name = "weed 0";
+    p.points[1].body.name = "weed 1";
+    const wrapper = mount(<Weeds {...p} />);
+    wrapper.setState({ searchTerm: "0" });
+    expect(wrapper.text()).toContain("weed 0");
+    expect(wrapper.text()).not.toContain("weed 1");
+  });
 });
 
 describe("mapStateToProps()", () => {

frontend/farm_designer/plants/add_plant.tsx

@@ -9,6 +9,7 @@ import { getCropHeaderProps, searchForCurrentCrop } from "./crop_info";
 import { DesignerPanel, DesignerPanelHeader } from "./designer_panel";
 import { OFSearch } from "../util";
 import { t } from "../../i18next_wrapper";
+import { Panel } from "../panel_header";
 
 export const mapStateToProps = (props: Everything): AddPlantProps =>
   ({
@@ -52,12 +53,10 @@ export class RawAddPlant extends React.Component<AddPlantProps, {}> {
     const { crop, result, basePath, backgroundURL } =
       getCropHeaderProps({ cropSearchResults });
     const panelName = "add-plant";
-    return <DesignerPanel
-      panelName={panelName}
-      panelColor={"green"}>
+    return <DesignerPanel panelName={panelName} panel={Panel.Plants}>
       <DesignerPanelHeader
         panelName={panelName}
-        panelColor={"green"}
+        panel={Panel.Plants}
         title={result.crop.name}
         style={{ background: backgroundURL }}
         descriptionElement={

frontend/farm_designer/plants/create_points.tsx

@@ -22,6 +22,7 @@ import {
 } from "./designer_panel";
 import { parseIntInput } from "../../util";
 import { t } from "../../i18next_wrapper";
+import { Panel } from "../panel_header";
 
 export function mapStateToProps(props: Everything): CreatePointsProps {
   const { position } = props.bot.hardware.location_data;
@@ -233,10 +234,10 @@ export class RawCreatePoints
     </Row>
 
   render() {
-    return <DesignerPanel panelName={"point-creation"} panelColor={"teal"}>
+    return <DesignerPanel panelName={"point-creation"} panel={Panel.Points}>
       <DesignerPanelHeader
         panelName={"point-creation"}
-        panelColor={"teal"}
+        panel={Panel.Points}
         title={t("Create point")}
         backTo={"/app/designer/points"}
         description={Content.CREATE_POINTS_DESCRIPTION} />