cleanup

frontend/css/global.scss

@@ -146,6 +146,7 @@ fieldset {
       .connectivity-diagram svg {
         max-height: 200px !important;
       }
+      .network-info,
       .fbos-info {
         @media (max-width:767px) {
           display: none;
@@ -219,6 +220,7 @@ fieldset {
   }
 }
 
+.network-info,
 .fbos-info {
   margin: auto;
   margin-bottom: 2rem;
@@ -855,9 +857,6 @@ ul {
     a {
       color: $panel_yellow;
     }
-    .empty-state-graphic {
-      filter: sepia(1) contrast(1.2) saturate(1.2);
-    }
   }
   &.points {
     p,
@@ -882,9 +881,6 @@ ul {
     a {
       color: $panel_blue;
     }
-    // .empty-state-graphic {
-    //   filter: hue-rotate(60deg) saturate(0.6);
-    // }
   }
 }
 

frontend/css/steps.scss

@@ -88,6 +88,9 @@
   &.if-step {
     background: $purple;
   }
+  &.assertion-step {
+    background: $purple;
+  }
   &.execute-step {
     background: $gray;
   }
@@ -180,18 +183,21 @@
   }
   &.if-step {
     background: $light_purple;
-    h4 {
-      margin: 0 0 0.4rem;
-      font-style: italic;
-      &:not(.top) {
-        margin: 1.4rem 0 0.4rem;
-      }
-    }
     input {
       height: 3rem;
     }
-    .execute-row{
-      margin-top:1rem;
+    .execute-row {
+      margin-top: 1rem;
+    }
+  }
+  &.assertion-step {
+    background: $light_purple;
+    input {
+      height: 3rem;
+    }
+    .assertion-sequence,
+    .assertion-type {
+      margin-top: 10px;
     }
   }
   &.execute-step {

frontend/devices/connectivity/qos_panel.tsx

@@ -53,15 +53,15 @@ export class QosPanel extends React.Component<Props, {}> {
     const errorRateDecimal = ((r.complete) / r.total);
     const errorRate = Math.round(100 * errorRateDecimal).toFixed(0);
 
-    return <div className="fbos-info">
+    return <div className="network-info">
       <label>{t("Network Quality")}</label>
-      <div className="chip-temp-display">
-        <Row k="Percent OK" v={pct(errorRate, PCT)} />
-        <Row k="Pings sent" v={pct(r.total, NONE)} />
-        <Row k="Pings received" v={pct(r.complete, NONE)} />
-        <Row k="Best time" v={pct(r.best, MS)} />
-        <Row k="Worst time" v={pct(r.worst, MS)} />
-        <Row k="Average time" v={pct(r.average, MS)} />
+      <div className="qos-display">
+        <Row k={t("Percent OK")} v={pct(errorRate, PCT)} />
+        <Row k={t("Pings sent")} v={pct(r.total, NONE)} />
+        <Row k={t("Pings received")} v={pct(r.complete, NONE)} />
+        <Row k={t("Best time")} v={pct(r.best, MS)} />
+        <Row k={t("Worst time")} v={pct(r.worst, MS)} />
+        <Row k={t("Average time")} v={pct(r.average, MS)} />
       </div>
     </div>;
 

frontend/farm_designer/farm_events/farm_events.tsx

@@ -141,7 +141,7 @@ export class PureFarmEvents
             title={t("No events scheduled.")}
             text={t(Content.NOTHING_SCHEDULED)}
             colorScheme="events"
-            graphic={EmptyStateGraphic.no_farm_events}>
+            graphic={EmptyStateGraphic.farm_events}>
             {this.renderCalendarRows()}
           </EmptyStateWrapper>
         </div>

frontend/farm_designer/point_groups/__tests__/group_detail_active_test.tsx

@@ -1,6 +1,7 @@
 jest.mock("../../../api/crud", () => ({
   save: jest.fn(),
-  overwrite: jest.fn()
+  overwrite: jest.fn(),
+  edit: jest.fn(),
 }));
 
 jest.mock("../../actions", () => ({
@@ -13,7 +14,7 @@ import { mount, shallow } from "enzyme";
 import {
   fakePointGroup, fakePlant
 } from "../../../__test_support__/fake_state/resources";
-import { save, overwrite } from "../../../api/crud";
+import { save, overwrite, edit } from "../../../api/crud";
 import { toggleHoveredPlant } from "../../actions";
 
 describe("<GroupDetailActive/>", () => {
@@ -27,6 +28,7 @@ describe("<GroupDetailActive/>", () => {
     return { dispatch: jest.fn(), group, plants };
   }
   const icon = "doge.jpg";
+
   it("removes points onClick", () => {
     const { plants, dispatch, group } = fakeProps();
     const el = shallow(<LittleIcon
@@ -81,4 +83,13 @@ describe("<GroupDetailActive/>", () => {
     const el = mount(<GroupDetailActive {...props} />);
     expect(el.find("input").prop("defaultValue")).toContain("XYZ");
   });
+
+  it("changes group name", () => {
+    const NEW_NAME = "new group name";
+    const wrapper = shallow(<GroupDetailActive {...fakeProps()} />);
+    wrapper.find("input").first().simulate("change", {
+      currentTarget: { value: NEW_NAME }
+    });
+    expect(edit).toHaveBeenCalledWith(expect.any(Object), { name: NEW_NAME });
+  });
 });

frontend/farm_designer/point_groups/group_list_panel.tsx

@@ -56,7 +56,7 @@ export class GroupListPanel extends React.Component<GroupListPanelProps, State>
           title={t("No groups yet.")}
           text={t(Content.NO_GROUPS)}
           colorScheme="groups"
-          graphic={EmptyStateGraphic.no_groups}>
+          graphic={EmptyStateGraphic.groups}>
           {this.props.groups
             .filter(p => p.body.name.toLowerCase()
               .includes(this.state.searchTerm.toLowerCase()))

frontend/nav/additional_menu.tsx

@@ -40,7 +40,7 @@ export const AdditionalMenu = (props: AccountMenuProps) => {
     <div className="app-version">
       <label>{t("VERSION")}</label>:&nbsp;
       <a href="https://github.com/FarmBot/Farmbot-Web-App" target="_blank">
-        {shortRevision().slice(0, 7)}
+        {shortRevision().slice(0, 8)}
       </a>
     </div>
   </div>;

frontend/sequences/step_tiles/tile_assertion.tsx

@@ -12,8 +12,7 @@ export interface AssertionStepProps extends StepParams {
   currentStep: Assertion;
 }
 
-const CLASS_NAME = "if-step";
-const MOVE_THIS_CSS_PLZ = { marginTop: "10px" };
+const CLASS_NAME = "assertion-step";
 
 export function TileAssertion(props: StepParams) {
   const step = props.currentStep;
@@ -37,9 +36,13 @@ export function TileAssertion(props: StepParams) {
           <LuaPart {...p} />
         </Col>
       </Row>
-      <Row >
-        <Col xs={6}><div style={MOVE_THIS_CSS_PLZ}> <TypePart {...p} /></div> </Col>
-        <Col xs={6}><div style={MOVE_THIS_CSS_PLZ}> <SequencePart {...p} /></div> </Col>
+      <Row>
+        <Col xs={6}>
+          <TypePart {...p} />
+        </Col>
+        <Col xs={6}>
+          <SequencePart {...p} />
+        </Col>
       </Row>
     </StepContent>
   </StepWrapper>;

frontend/sequences/step_tiles/tile_assertion/sequence_part.tsx

@@ -4,6 +4,7 @@ import { Assertion } from "farmbot/dist/corpus";
 import React from "react";
 import { SequenceSelectBox } from "../../sequence_select_box";
 import { AssertionStepProps } from "../tile_assertion";
+import { t } from "../../../i18next_wrapper";
 
 export function SequencePart(props: AssertionStepProps) {
   const onChange = (ddi: DropDownItem) => props.dispatch(editStep({
@@ -23,8 +24,8 @@ export function SequencePart(props: AssertionStepProps) {
   if (_then.kind == "execute") {
     sequenceId = _then.args.sequence_id;
   }
-  return <span>
-    <label>Recovery Sequence</label>
+  return <span className="assertion-sequence">
+    <label>{t("Recovery Sequence")}</label>
     <SequenceSelectBox
       key={JSON.stringify(props.currentStep)}
       onChange={onChange}

frontend/sequences/step_tiles/tile_assertion/type_part.tsx

@@ -3,6 +3,7 @@ import { ALLOWED_ASSERTION_TYPES, Assertion } from "farmbot";
 import { DropDownItem, FBSelect } from "../../../ui";
 import { editStep } from "../../../api/crud";
 import { AssertionStepProps } from "../tile_assertion";
+import { t } from "../../../i18next_wrapper";
 
 const ASSERTION_TYPES: Record<ALLOWED_ASSERTION_TYPES, DropDownItem> = {
   "continue": { label: "Continue", value: "continue" },
@@ -13,8 +14,8 @@ const ASSERTION_TYPES: Record<ALLOWED_ASSERTION_TYPES, DropDownItem> = {
 
 export function TypePart(props: AssertionStepProps) {
   const { assertion_type } = props.currentStep.args;
-  return <span>
-    <label>If Test Fails</label>
+  return <span className="assertion-type">
+    <label>{t("If Test Fails")}</label>
     <FBSelect
       key={JSON.stringify(props.currentStep)}
       selectedItem={ASSERTION_TYPES[assertion_type]}

frontend/ui/empty_state_wrapper.tsx

@@ -7,8 +7,8 @@ export enum EmptyStateGraphic {
   no_crop_results = "no_crop_results",
   sequences = "sequences",
   regimens = "regimens",
-  no_farm_events = "no_farm_events",
-  no_groups = "no_groups"
+  farm_events = "farm_events",
+  groups = "groups"
 }
 
 interface EmptyStateWrapperProps {