diff --git a/frontend/farm_designer/map/background/__tests__/grid_test.tsx b/frontend/farm_designer/map/background/__tests__/grid_test.tsx
index f6f74a46f..220a868a4 100644
--- a/frontend/farm_designer/map/background/__tests__/grid_test.tsx
+++ b/frontend/farm_designer/map/background/__tests__/grid_test.tsx
@@ -46,9 +46,9 @@ describe("", () => {
const minorGrid = wrapper.find("#minor_grid>path");
const majorGrid = wrapper.find("#major_grid>path");
const superiorGrid = wrapper.find("#superior_grid>path");
- expect(minorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.15)");
- expect(majorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.3)");
- expect(superiorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.4)");
+ expect(minorGrid.props()).toHaveProperty("strokeWidth", "1");
+ expect(majorGrid.props()).toHaveProperty("strokeWidth", "2");
+ expect(superiorGrid.props()).toHaveProperty("strokeWidth", "4");
});
it("change patterns strokes on 0.5 zoom and below", () => {
@@ -58,8 +58,8 @@ describe("", () => {
const minorGrid = wrapper.find("#minor_grid>path");
const majorGrid = wrapper.find("#major_grid>path");
const superiorGrid = wrapper.find("#superior_grid>path");
- expect(minorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0)");
- expect(majorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.6)");
- expect(superiorGrid.props()).toHaveProperty("stroke", "rgba(0, 0, 0, 0.8)");
+ expect(minorGrid.props()).toHaveProperty("strokeWidth", "0");
+ expect(majorGrid.props()).toHaveProperty("strokeWidth", "3");
+ expect(superiorGrid.props()).toHaveProperty("strokeWidth", "6");
});
});
diff --git a/frontend/farm_designer/map/background/grid.tsx b/frontend/farm_designer/map/background/grid.tsx
index 6ee7754fc..fad4e2677 100644
--- a/frontend/farm_designer/map/background/grid.tsx
+++ b/frontend/farm_designer/map/background/grid.tsx
@@ -13,27 +13,27 @@ export function Grid(props: GridProps) {
const arrowEnd = transformXY(25, 25, mapTransformProps);
const xLabel = transformXY(15, -10, mapTransformProps);
const yLabel = transformXY(-11, 18, mapTransformProps);
- const minorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0)" : "rgba(0, 0, 0, 0.15)";
- const majorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0.6)" : "rgba(0, 0, 0, 0.3)";
- const superiorGridStroke = zoomLvl <= 0.5 ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.4)";
+ const minorStrokeWidth = zoomLvl <= 0.5 ? "0" : "1";
+ const majorStrokeWidth = zoomLvl <= 0.5 ? "3" : "2";
+ const superiorStrokeWidth = zoomLvl <= 0.5 ? "6" : "4";
return
-
+
-
+
-
+