diff --git a/frontend/css/farm_designer/farm_designer_panels.scss b/frontend/css/farm_designer/farm_designer_panels.scss index f301550f5..858cf10d6 100644 --- a/frontend/css/farm_designer/farm_designer_panels.scss +++ b/frontend/css/farm_designer/farm_designer_panels.scss @@ -1310,6 +1310,7 @@ li { .go-button-axes-wrapper { margin-top: 1rem; button { + margin: 0; float: none; } .go-button-axes { @@ -1355,6 +1356,7 @@ li { display: grid; gap: 0.75rem; button { + margin: 0; padding: 0.5rem 1rem; float: none; &.x, @@ -2320,6 +2322,7 @@ li { margin-bottom: 1rem; .manual-group-member-count, .criteria-group-member-count { + margin-bottom: 0.5rem; div { display: inline; padding: 0.25rem; diff --git a/frontend/sequences/step_button_cluster.tsx b/frontend/sequences/step_button_cluster.tsx index 120fdafd3..16da4a4ed 100644 --- a/frontend/sequences/step_button_cluster.tsx +++ b/frontend/sequences/step_button_cluster.tsx @@ -2,7 +2,7 @@ import React from "react"; import { t } from "../i18next_wrapper"; import { StepButton, stepClick } from "./step_buttons"; import { equals, scrollToBottom } from "../util"; -import { Col, Row } from "../ui"; +import { Col } from "../ui"; import { Color, SequenceBodyItem, TaggedSequence } from "farmbot"; import { FarmwareData, MessageType } from "./interfaces"; import { FarmwareName } from "./step_tiles/tile_execute_script"; @@ -239,53 +239,54 @@ export class StepButtonCluster args: { sequence_id: sequences[0].body.id }, body: variableList(resources.sequenceMetas[sequences[0].uuid]) }); - const Cluster = () =>
- } - autoFocus={Path.inDesigner()} - onEnter={() => { - if (first) { - click(); - stepClick(dispatch, first, current, stepIndex)(); - } - }} - onChange={this.setSearchTerm} /> -
- {commands.map((stepButton, inx) => -
- -
)} - {!Path.inDesigner() && sequences.length > 0 && - } -
- {sequences.map((s, inx) => s.body.id && + return
+
+ } + autoFocus={Path.inDesigner()} + onEnter={() => { + if (first) { + click(); + stepClick(dispatch, first, current, stepIndex)(); + } + }} + onChange={this.setSearchTerm} /> +
+ {commands.map((stepButton, inx) =>
+ inx == 0 ? "highlight" : "", + ].join(" ")} key={inx} onClick={click}> + step={stepButton.step} + label={stepButton.title} + color={stepButton.color} />
)} + {!Path.inDesigner() && sequences.length > 0 && + } +
+ {sequences.map((s, inx) => s.body.id && +
+ +
)} +
; - return Path.inDesigner() ? : ; } }