spacecruft
/
Farmbot-Web-App
1
0
Fork 0
Code Issues Pull Requests Releases Activity

panel header icons

pull/1144/head
gabrielburnworth 2019-04-09 18:57:46 -07:00
parent b88f4fd7e8
commit 40defc57b8
18 changed files with 736 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/css/colors.scss
View File

@ -38,6 +38,20 @@ $light_red: #e99;
$red: #e66;
$dark_red: #f00;
$darkest_red: #900;
$panel_green: #35761b;
$panel_light_green: #f3f9f1;
$panel_yellow: #e99d18;
$panel_light_yellow: #fffaf0;
$panel_gray: #92a7b3;
$panel_light_gray: #f9fbfc;
$panel_blue: #026365;
$panel_light_blue: #f0f8f8;
$panel_brown: #9e630a;
$panel_light_brown: #fbf7f0;
$panel_teal: #1eb287;
$panel_light_teal: #f1fcf9;
$panel_red: #ff4f37;
$panel_light_red: #fff7f6;
.dark-gray {
background-color: $dark_gray !important;
}

43
frontend/css/farm_designer/farm_designer_panels.scss
View File

@ -36,19 +36,31 @@
.panel-container {
overflow: hidden;
&.green-panel {
background-color: $light_green;
background-color: $panel_light_green;
}
&.cyan-panel {
background-color: $light_cyan;
}
&.brown-panel {
background-color: $light_brown;
background-color: $panel_light_brown;
}
&.magenta-panel {
background-color: $light_magenta;
}
&.gray-panel {
background-color: $medium_light_gray;
background-color: $panel_light_gray;
}
&.yellow-panel {
background-color: $panel_light_yellow;
}
&.blue-panel {
background-color: $panel_light_blue;
}
&.teal-panel {
background-color: $panel_light_teal;
}
&.red-panel {
background-color: $panel_light_red;
}
}
@ -56,24 +68,40 @@
.panel-header {
color: $light_gray;
&.green-panel {
background-color: $dark_green;
background-color: $panel_green;
}
&.cyan-panel {
background-color: $cyan;
}
&.brown-panel {
background-color: $dark_brown;
background-color: $panel_brown;
}
&.magenta-panel {
background-color: $magenta;
}
&.gray-panel {
background-color: $dark_gray;
background-color: $panel_gray;
}
&.yellow-panel {
background-color: $panel_yellow;
}
&.blue-panel {
background-color: $panel_blue;
}
&.teal-panel {
background-color: $panel_teal;
}
&.red-panel {
background-color: $panel_red;
}
}
.panel-tabs {
display: flex;
img {
filter: brightness(0%) invert(100%);
opacity: 0.8;
}
a {
display: block;
flex: 1;
@ -87,6 +115,9 @@
border-bottom: 3px solid $white;
font-weight: bold;
color: $white;
img {
opacity: 1;
}
}
&:hover {
color: $off_white;

14
frontend/farm_designer/__tests__/move_to_test.tsx
View File

@ -9,13 +9,6 @@ jest.mock("../../history", () => ({
history: { push: jest.fn() }
}));
let mockDev = false;
jest.mock("../../account/dev/dev_support", () => ({
DevSettings: {
futureFeaturesEnabled: () => mockDev,
}
}));
import * as React from "react";
import { mount, shallow } from "enzyme";
import {
@ -61,13 +54,6 @@ describe("<MoveTo />", () => {
payload: { x: undefined, y: undefined, z: undefined }
});
});
it("shows alt display", () => {
mockDev = true;
const wrapper = mount(<MoveTo {...fakeProps()} />);
expect(wrapper.html()).toContain("-nav");
mockDev = false;
});
});
describe("<MoveToForm />", () => {

20
frontend/farm_designer/__tests__/panel_header_test.tsx
View File

@ -19,21 +19,21 @@ describe("<DesignerNavTabs />", () => {
mockPath = "/app/designer";
const wrapper = shallow(<DesignerNavTabs />);
expect(wrapper.hasClass("gray-panel")).toBeTruthy();
expect(wrapper.find("Link").at(0).hasClass("active")).toBeTruthy();
expect(wrapper.html()).toContain("active");
});
it("renders for plants", () => {
mockPath = "/app/designer/plants";
const wrapper = shallow(<DesignerNavTabs />);
expect(wrapper.hasClass("green-panel")).toBeTruthy();
expect(wrapper.find("Link").at(1).hasClass("active")).toBeTruthy();
expect(wrapper.html()).toContain("active");
});
it("renders for farm events", () => {
mockPath = "/app/designer/events";
const wrapper = shallow(<DesignerNavTabs />);
expect(wrapper.hasClass("magenta-panel")).toBeTruthy();
expect(wrapper.find("Link").at(2).hasClass("active")).toBeTruthy();
expect(wrapper.hasClass("yellow-panel")).toBeTruthy();
expect(wrapper.html()).toContain("active");
});
it("renders for saved gardens", () => {
@ -41,16 +41,6 @@ describe("<DesignerNavTabs />", () => {
mockDev = true;
const wrapper = shallow(<DesignerNavTabs />);
expect(wrapper.hasClass("green-panel")).toBeTruthy();
expect(wrapper.find("Link").at(3).hasClass("active")).toBeTruthy();
mockDev = false;
});
it("renders for move to form", () => {
mockPath = "/app/designer/move_to";
mockDev = true;
const wrapper = shallow(<DesignerNavTabs />);
expect(wrapper.hasClass("gray-panel")).toBeTruthy();
expect(wrapper.find("Link").at(4).hasClass("active")).toBeTruthy();
mockDev = false;
expect(wrapper.html()).toContain("active");
});
});

49
frontend/farm_designer/farm_events/__tests__/add_farm_event_test.tsx
View File

@ -1,23 +1,18 @@
jest.mock("react-redux", () => ({
connect: jest.fn()
}));
jest.mock("react-redux", () => ({ connect: jest.fn() }));
jest.mock("../../../history", () => ({
history: {
push: jest.fn()
}
}));
jest.mock("../../../history", () => ({ history: { push: jest.fn() } }));
import * as React from "react";
import { mount, shallow } from "enzyme";
import { mount } from "enzyme";
import { AddFarmEvent } from "../add_farm_event";
import { AddEditFarmEventProps } from "../../interfaces";
import {
fakeFarmEvent, fakeSequence
fakeFarmEvent, fakeSequence, fakeRegimen
} from "../../../__test_support__/fake_state/resources";
import {
buildResourceIndex
} from "../../../__test_support__/resource_index_builder";
import { Actions } from "../../../constants";
describe("<AddFarmEvent />", () => {
function fakeProps(): AddEditFarmEventProps {
@ -36,6 +31,7 @@ describe("<AddFarmEvent />", () => {
handleTime: jest.fn(),
farmEvents: [farmEvent],
getFarmEvent: () => farmEvent,
findFarmEventByUuid: () => farmEvent,
findExecutable: () => sequence,
timeOffset: 0,
autoSyncEnabled: false,
@ -55,18 +51,39 @@ describe("<AddFarmEvent />", () => {
});
it("redirects", () => {
const wrapper = mount(<AddFarmEvent {...fakeProps()} />);
const p = fakeProps();
p.findFarmEventByUuid = jest.fn();
const wrapper = mount(<AddFarmEvent {...p} />);
expect(wrapper.text()).toContain("Loading");
});
it("renders `none`", () => {
const props: Partial<AddEditFarmEventProps> = {};
const comp = new AddFarmEvent(props as AddEditFarmEventProps);
const results = shallow(<div>{comp.none()}</div>);
expect(results.text())
it("renders with no executables", () => {
const p = fakeProps();
p.findFarmEventByUuid = jest.fn();
p.sequencesById = {};
p.regimensById = {};
const wrapper = mount(<AddFarmEvent {...p} />);
expect(wrapper.text())
.toContain("You haven't made any regimens or sequences yet.");
});
it("renders with no sequences", () => {
const p = fakeProps();
p.sequencesById = {};
const regimen = fakeRegimen();
regimen.body.id = 1;
p.regimensById = { "1": regimen };
const wrapper = mount(<AddFarmEvent {...p} />);
wrapper.mount();
expect(p.dispatch).toHaveBeenCalledWith({
type: Actions.INIT_RESOURCE,
payload: expect.objectContaining({
kind: "FarmEvent",
body: expect.objectContaining({ executable_type: "Regimen" })
})
});
});
it("cleans up when unmounting", () => {
const props = fakeProps();
const wrapper = mount(<AddFarmEvent {...props} />);

6
frontend/farm_designer/farm_events/__tests__/edit_farm_event_test.tsx
View File

@ -23,17 +23,19 @@ describe("<EditFarmEvent />", () => {
function fakeProps(): AddEditFarmEventProps {
const sequence = fakeSequence();
sequence.body.id = 1;
const farmEvent = fakeFarmEvent("Sequence", sequence.body.id);
return {
deviceTimezone: "",
dispatch: jest.fn(),
regimensById: {},
sequencesById: { "1": sequence },
farmEventsById: { "1": fakeFarmEvent("Sequence", sequence.body.id) },
farmEventsById: { "1": farmEvent },
executableOptions: [],
repeatOptions: [],
handleTime: jest.fn(),
farmEvents: [],
getFarmEvent: () => fakeFarmEvent("Sequence", sequence.body.id || 0),
getFarmEvent: () => farmEvent,
findFarmEventByUuid: () => farmEvent,
findExecutable: () => sequence,
timeOffset: 0,
autoSyncEnabled: false,

27
frontend/farm_designer/farm_events/__tests__/map_state_to_props_add_edit_test.ts
View File

@ -107,4 +107,31 @@ describe("mapStateToPropsAddEdit()", () => {
}));
});
});
describe("findFarmEventByUuid()", () => {
it("finds farm event", () => {
const state = fakeState();
const farmEvent = fakeFarmEvent("Sequence", 1);
state.resources = buildResourceIndex([farmEvent, fakeDevice()]);
const { findFarmEventByUuid } = mapStateToPropsAddEdit(state);
const result = findFarmEventByUuid(farmEvent.uuid);
expect(result).toEqual(farmEvent);
});
it("doesn't find farm event: no farm events", () => {
const state = fakeState();
state.resources = buildResourceIndex([fakeDevice()]);
const { findFarmEventByUuid } = mapStateToPropsAddEdit(state);
const result = findFarmEventByUuid("uuid");
expect(result).toEqual(undefined);
});
it("doesn't find farm event: undefined uuid", () => {
const state = fakeState();
state.resources = buildResourceIndex([fakeDevice()]);
const { findFarmEventByUuid } = mapStateToPropsAddEdit(state);
const result = findFarmEventByUuid(undefined);
expect(result).toEqual(undefined);
});
});
});

20
frontend/farm_designer/farm_events/add_farm_event.tsx
View File

@ -1,5 +1,4 @@
import * as React from "react";
import moment from "moment";
import { connect } from "react-redux";
import { mapStateToPropsAddEdit, } from "./map_state_to_props_add_edit";
@ -67,7 +66,7 @@ export class AddFarmEvent
componentWillUnmount() {
const { uuid } = this.state;
const fe = uuid && this.props.farmEvents.filter(x => x.uuid === uuid)[0];
const fe = this.props.findFarmEventByUuid(uuid);
const unsaved = fe && !fe.body.id;
if (fe && unsaved) { this.props.dispatch(destroy(fe.uuid, true)); }
}
@ -75,9 +74,9 @@ export class AddFarmEvent
/** No executables. Can't load form. */
none() {
return <p>
{t("You haven't made any regimens or sequences yet. Please create a")}
<Link to="/app/sequences">{t(" sequence")}</Link> {t(" or")}
<Link to="/app/regimens">{t(" regimen")}</Link> {t("first.")}
{t("You haven't made any regimens or sequences yet. Please create a ")}
<Link to="/app/sequences">{t("sequence")}</Link> {t(" or ")}
<Link to="/app/regimens">{t("regimen")}</Link> {t(" first.")}
</p>;
}
@ -87,10 +86,10 @@ export class AddFarmEvent
}
placeholderTemplate(children: React.ReactChild | React.ReactChild[]) {
return <DesignerPanel panelName={"add-farm-event"} panelColor={"magenta"}>
return <DesignerPanel panelName={"add-farm-event"} panelColor={"yellow"}>
<DesignerPanelHeader
panelName={"add-farm-event"}
panelColor={"magenta"}
panelColor={"yellow"}
title={t("No Executables")} />
<DesignerPanelContent panelName={"add-farm-event"}>
<label>
@ -102,10 +101,7 @@ export class AddFarmEvent
render() {
const { uuid } = this.state;
// Legacy leftover from pre-TaggedResource era.
// TODO: Proper fix where we add a `findFarmEvent` selector
// to mapStateToProps instead of juggling arrays.
const fe = uuid && this.props.farmEvents.filter(x => x.uuid === uuid)[0];
const fe = this.props.findFarmEventByUuid(uuid);
if (fe) {
return <EditFEForm
farmEvent={fe}
@ -122,7 +118,7 @@ export class AddFarmEvent
/>;
} else {
return this
.placeholderTemplate(((this.executable) ? this.loading : this.none)());
.placeholderTemplate(this.executable ? this.loading() : this.none());
}
}
}

7
frontend/farm_designer/farm_events/edit_fe_form.tsx
View File

@ -1,6 +1,5 @@
import * as React from "react";
import moment from "moment";
import { success, error, warning } from "farmbot-toastr";
import {
TaggedFarmEvent, SpecialStatus, TaggedSequence, TaggedRegimen,
@ -472,10 +471,10 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
render() {
const { farmEvent } = this.props;
return <DesignerPanel panelName={"add-farm-event"} panelColor={"magenta"}>
return <DesignerPanel panelName={"add-farm-event"} panelColor={"yellow"}>
<DesignerPanelHeader
panelName={"add-farm-event"}
panelColor={"magenta"}
panelColor={"yellow"}
title={this.props.title}
onBack={!farmEvent.body.id ? () =>
// Throw out unsaved farmevents.
@ -494,7 +493,7 @@ export class EditFEForm extends React.Component<EditFEProps, State> {
<this.RepeatForm />
<SaveBtn
status={farmEvent.specialStatus || this.state.specialStatusLocal}
color="magenta"
color="yellow"
onClick={() => this.commitViewModel()} />
<this.FarmEventDeleteButton />
<TzWarning deviceTimezone={this.props.deviceTimezone} />

3
frontend/farm_designer/farm_events/farm_events.tsx
View File

@ -1,6 +1,5 @@
import * as React from "react";
import { connect } from "react-redux";
import { Row } from "../../ui/index";
import { mapStateToProps } from "./map_state_to_props";
import {
@ -151,7 +150,7 @@ export class PureFarmEvents
};
render() {
return <DesignerPanel panelName={"farm-event"} panelColor={"magenta"}>
return <DesignerPanel panelName={"farm-event"} panelColor={"yellow"}>
<DesignerNavTabs />
{this.props.timezoneIsSet ? this.normalContent() : this.tzwarning()}
</DesignerPanel>;

4
frontend/farm_designer/farm_events/map_state_to_props_add_edit.ts
View File

@ -116,6 +116,9 @@ export function mapStateToPropsAddEdit(props: Everything): AddEditFarmEventProps
const sequencesById = indexSequenceById(props.resources.index);
const farmEventsById = indexFarmEventById(props.resources.index);
const farmEvents = selectAllFarmEvents(props.resources.index);
const findFarmEventByUuid =
(uuid: string | undefined): TaggedFarmEvent | undefined =>
uuid ? farmEvents.filter(x => x.uuid === uuid)[0] : undefined;
const getFarmEvent = (): TaggedFarmEvent | undefined => {
const id = parseInt(getPathArray()[4]);
@ -160,6 +163,7 @@ export function mapStateToPropsAddEdit(props: Everything): AddEditFarmEventProps
handleTime,
farmEvents,
getFarmEvent,
findFarmEventByUuid,
findExecutable,
timeOffset: dev.body.tz_offset_hrs,
autoSyncEnabled,

1
frontend/farm_designer/interfaces.ts
View File

@ -118,6 +118,7 @@ export interface AddEditFarmEventProps {
sequencesById: CowardlyDictionary<TaggedSequence>;
farmEventsById: CowardlyDictionary<TaggedFarmEvent>;
getFarmEvent(): TaggedFarmEvent | undefined;
findFarmEventByUuid(uuid: string | undefined): TaggedFarmEvent | undefined;
handleTime(e: React.SyntheticEvent<HTMLInputElement>, currentISO: string): string;
dispatch: Function;
findExecutable: ExecutableQuery;

24
frontend/farm_designer/move_to.tsx
View File

@ -3,7 +3,6 @@ import { Row, Col } from "../ui";
import { Everything } from "../interfaces";
import { BotPosition } from "../devices/interfaces";
import { connect } from "react-redux";
import { moveAbs } from "../devices/actions";
import { history } from "../history";
import { AxisInputBox } from "../controls/axis_input_box";
@ -15,8 +14,6 @@ import { AxisNumberProperty } from "./map/interfaces";
import {
DesignerPanel, DesignerPanelContent, DesignerPanelHeader
} from "./plants/designer_panel";
import { DevSettings } from "../account/dev/dev_support";
import { DesignerNavTabs } from "./panel_header";
import { t } from "../i18next_wrapper";
import { isBotOnline } from "../devices/must_be_online";
import { getStatus } from "../connectivity/reducer_support";
@ -117,18 +114,14 @@ export class MoveTo extends React.Component<MoveToProps, {}> {
}
render() {
const alt = DevSettings.futureFeaturesEnabled();
return <DesignerPanel panelName={"move-to"} panelColor={"green"}>
{alt ? <DesignerNavTabs />
: <DesignerPanelHeader
panelName={"move-to"}
panelColor={"gray"}
title={t("Move to location")}
backTo={"/app/designer/plants"}
description={Content.MOVE_MODE_DESCRIPTION} />}
<DesignerPanelContent panelName={"move-to"}
className={`${alt ? "with-nav" : ""}`}>
{alt && <p>{Content.MOVE_MODE_DESCRIPTION}</p>}
return <DesignerPanel panelName={"move-to"} panelColor={"gray"}>
<DesignerPanelHeader
panelName={"move-to"}
panelColor={"gray"}
title={t("Move to location")}
backTo={"/app/designer/plants"}
description={Content.MOVE_MODE_DESCRIPTION} />
<DesignerPanelContent panelName={"move-to"}>
<MoveToForm
chosenLocation={this.props.chosenLocation}
currentBotLocation={this.props.currentBotLocation}
@ -142,7 +135,6 @@ export const MoveModeLink = () =>
<div className="move-to-mode">
<button
className="fb-button gray"
hidden={DevSettings.futureFeaturesEnabled()}
title={t("open move mode panel")}
onClick={() => history.push("/app/designer/move_to")}>
{t("move mode")}

62
frontend/farm_designer/panel_header.tsx
View File

@ -1,5 +1,4 @@
import * as React from "react";
import { getPathArray } from "../history";
import { Link } from "../link";
import { DevSettings } from "../account/dev/dev_support";
@ -10,7 +9,6 @@ export enum Panel {
Plants = "Plants",
FarmEvents = "FarmEvents",
SavedGardens = "SavedGardens",
Move = "Move",
}
type Tabs = keyof typeof Panel;
@ -18,9 +16,17 @@ type Tabs = keyof typeof Panel;
export const TAB_COLOR: { [key in Panel]: string } = {
[Panel.Map]: "gray",
[Panel.Plants]: "green",
[Panel.FarmEvents]: "magenta",
[Panel.FarmEvents]: "yellow",
[Panel.SavedGardens]: "green",
[Panel.Move]: "gray",
};
const iconFile = (icon: string) => `/app-resources/img/icons/${icon}.svg`;
export const TAB_ICON: { [key in Panel]: string } = {
[Panel.Map]: iconFile("map"),
[Panel.Plants]: iconFile("plant"),
[Panel.FarmEvents]: iconFile("calendar"),
[Panel.SavedGardens]: iconFile("gardens"),
};
const getCurrentTab = (): Tabs => {
@ -31,40 +37,42 @@ const getCurrentTab = (): Tabs => {
return Panel.FarmEvents;
} else if (pathArray.includes("saved_gardens")) {
return Panel.SavedGardens;
} else if (pathArray.includes("move_to")) {
return Panel.Move;
} else {
return Panel.Plants;
}
};
const common = { width: 30, height: 30 };
interface NavTabProps {
panel: Panel;
linkTo: string;
title: string;
}
const NavTab = (props: NavTabProps) =>
<Link to={props.linkTo}
className={getCurrentTab() === props.panel ? "active" : ""}>
{DevSettings.futureFeaturesEnabled()
? <img {...common}
src={TAB_ICON[props.panel]} title={props.title} />
: props.title}
</Link>;
export function DesignerNavTabs(props: { hidden?: boolean }) {
const tab = getCurrentTab();
const hidden = props.hidden ? "hidden" : "";
return <div className={`panel-nav ${TAB_COLOR[tab]}-panel ${hidden}`}>
<div className="panel-tabs">
<Link to="/app/designer"
className={tab === Panel.Map ? "active" : ""}>
{t("Map")}
</Link>
<Link to="/app/designer/plants"
className={tab === Panel.Plants ? "active" : ""}>
{t("Plants")}
</Link>
<Link to="/app/designer/events"
className={tab === Panel.FarmEvents ? "active" : ""}>
{t("Events")}
</Link>
<NavTab panel={Panel.Map}
linkTo={"/app/designer"} title={t("Map")} />
<NavTab panel={Panel.Plants}
linkTo={"/app/designer/plants"} title={t("Plants")} />
<NavTab panel={Panel.FarmEvents}
linkTo={"/app/designer/events"} title={t("Events")} />
{DevSettings.futureFeaturesEnabled() &&
<Link to="/app/designer/saved_gardens"
className={tab === Panel.SavedGardens ? "active" : ""}>
{t("Gardens")}
</Link>}
{DevSettings.futureFeaturesEnabled() &&
<Link to="/app/designer/move_to"
className={tab === Panel.Move ? "active" : ""}>
{t("Move")}
</Link>}
<NavTab panel={Panel.SavedGardens}
linkTo={"/app/designer/saved_gardens"} title={t("Gardens")} />}
</div>
</div>;
}

139
public/app-resources/img/icons/calendar.svg 100644
View File

@ -0,0 +1,139 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#C46F24;}
.st2{opacity:0.5;fill:#C46F24;}
.st3{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-miterlimit:10;}
.st4{fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st5{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st6{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st7{fill:#F15A24;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st8{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st9{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st10{fill:#FFFFFF;}
.st11{fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st12{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.088,10.22;}
.st13{fill:#FFFFFF;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st15{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st16{fill:none;stroke:#969696;stroke-width:5;stroke-miterlimit:10;}
.st17{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st19{fill:none;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st20{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st21{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st22{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.st23{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.2727,9.8182;}
.st24{fill:none;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st25{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st26{fill:none;stroke:#333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st27{fill:none;stroke:#E6E6E6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st28{fill:#1EB287;}
.st29{fill:#DEEDCB;}
.st30{fill:#505305;}
.st31{fill:#186435;}
.st32{fill:#A44F79;}
.st33{fill:#2AB188;}
.st34{fill:#A35915;}
.st35{fill:#4D4D4D;}
.st36{fill:#F6B330;}
.st37{fill:#324872;}
.st38{fill:#2BA270;}
.st39{fill:#53A4EA;}
.st40{fill:#3BA2A0;}
.st41{fill:#1792CD;}
.st42{fill:#0C2E3D;}
.st43{fill:#35761B;}
.st44{fill:#0C6364;}
.st45{fill:#F4A519;}
.st46{opacity:0.06;fill:#3B9910;}
.st47{opacity:0.06;fill:#E56200;}
.st48{opacity:0.06;fill:#2E5799;}
.st49{opacity:0.06;fill:#007F7C;}
.st50{opacity:0.06;fill:#00B7FF;}
.st51{opacity:0.06;fill:#FF9D00;}
.st52{opacity:0.06;fill:#00CC8D;}
.st53{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.st54{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st55{fill:#F15A24;}
.st56{fill:#F15A24;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st57{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st58{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st59{opacity:0.8;enable-background:new ;}
.st60{clip-path:url(#SVGID_2_);}
.st61{clip-path:url(#SVGID_4_);}
.st62{clip-path:url(#SVGID_6_);fill:#333333;}
.st63{clip-path:url(#SVGID_8_);}
.st64{clip-path:url(#SVGID_10_);fill:#333333;}
.st65{clip-path:url(#SVGID_12_);}
.st66{clip-path:url(#SVGID_14_);}
.st67{clip-path:url(#SVGID_16_);fill:#333333;}
.st68{clip-path:url(#SVGID_18_);}
.st69{clip-path:url(#SVGID_20_);fill:#333333;}
.st70{clip-path:url(#SVGID_22_);}
.st71{clip-path:url(#SVGID_24_);fill:#333333;}
.st72{clip-path:url(#SVGID_26_);}
.st73{clip-path:url(#SVGID_28_);fill:#333333;}
.st74{clip-path:url(#SVGID_30_);}
.st75{clip-path:url(#SVGID_32_);fill:#333333;}
.st76{clip-path:url(#SVGID_34_);}
.st77{clip-path:url(#SVGID_36_);fill:#333333;}
.st78{clip-path:url(#SVGID_38_);}
.st79{clip-path:url(#SVGID_40_);fill:#333333;}
.st80{clip-path:url(#SVGID_42_);}
.st81{clip-path:url(#SVGID_44_);fill:#333333;}
.st82{clip-path:url(#SVGID_46_);}
.st83{clip-path:url(#SVGID_48_);fill:#333333;}
.st84{clip-path:url(#SVGID_50_);}
.st85{clip-path:url(#SVGID_52_);fill:#333333;}
.st86{clip-path:url(#SVGID_54_);}
.st87{clip-path:url(#SVGID_56_);fill:#333333;}
.st88{clip-path:url(#SVGID_58_);}
.st89{clip-path:url(#SVGID_60_);fill:#333333;}
.st90{clip-path:url(#SVGID_62_);}
.st91{clip-path:url(#SVGID_64_);}
.st92{clip-path:url(#SVGID_66_);enable-background:new ;}
.st93{clip-path:url(#SVGID_68_);}
.st94{clip-path:url(#SVGID_70_);}
.st95{clip-path:url(#SVGID_72_);fill:#333333;}
.st96{clip-path:url(#SVGID_74_);}
.st97{clip-path:url(#SVGID_76_);}
.st98{clip-path:url(#SVGID_78_);fill:#333333;}
.st99{clip-path:url(#SVGID_80_);}
.st100{clip-path:url(#SVGID_82_);fill:#333333;}
.st101{clip-path:url(#SVGID_84_);}
.st102{clip-path:url(#SVGID_86_);}
.st103{clip-path:url(#SVGID_88_);fill:#333333;}
.st104{clip-path:url(#SVGID_90_);}
.st105{clip-path:url(#SVGID_92_);fill:#333333;}
.st106{clip-path:url(#SVGID_94_);}
.st107{clip-path:url(#SVGID_96_);fill:#333333;}
.st108{clip-path:url(#SVGID_98_);}
.st109{clip-path:url(#SVGID_100_);fill:#333333;}
.st110{opacity:0.8;clip-path:url(#SVGID_102_);fill:#333333;}
</style>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_1">
<g>
<path d="M43.9,5.87h-5.14c-0.75,0-1.36-0.61-1.36-1.36v0c0-1.31-0.94-2.5-2.24-2.63c-1.5-0.15-2.76,1.02-2.76,2.49v0.14
c0,0.75-0.61,1.36-1.36,1.36H18.76c-0.75,0-1.36-0.61-1.36-1.36v0c0-1.31-0.94-2.5-2.24-2.63c-1.5-0.15-2.76,1.02-2.76,2.49v0.14
c0,0.75-0.61,1.36-1.36,1.36H5.9c-1.38,0-2.5,1.12-2.5,2.5v38c0,1.38,1.12,2.5,2.5,2.5h38c1.38,0,2.5-1.12,2.5-2.5v-38
C46.4,6.99,45.28,5.87,43.9,5.87z M12.11,10.87c0.71,0,1.28,0.57,1.28,1.28v2.22c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5v-2.22
c0-0.71,0.57-1.28,1.28-1.28h14.43c0.71,0,1.28,0.57,1.28,1.28v2.22c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5v-2.22
c0-0.71,0.57-1.28,1.28-1.28h1.39c1.29,0,2.33,1.04,2.33,2.33v4.34c0,1.29-1.04,2.33-2.33,2.33H10.73c-1.29,0-2.33-1.04-2.33-2.33
V13.2c0-1.29,1.04-2.33,2.33-2.33H12.11z M8.4,41.54V25.2c0-1.29,1.04-2.33,2.33-2.33h28.34c1.29,0,2.33,1.04,2.33,2.33v16.34
c0,1.29-1.04,2.33-2.33,2.33H10.73C9.44,43.87,8.4,42.82,8.4,41.54z"/>
<path d="M23.39,31.33c-0.72,0.27-1.56-0.05-1.9-0.78c-0.33-0.71-0.01-1.56,0.67-1.95l2.55-1.46c0.6-0.34,1.38-0.24,1.87,0.31
c0.25,0.28,0.37,0.66,0.37,1.03v9.75c0,0.82-0.63,1.54-1.45,1.56c-0.85,0.03-1.55-0.66-1.55-1.5v-6.76c0-0.21-0.22-0.36-0.41-0.27
C23.5,31.29,23.45,31.31,23.39,31.33z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

164
public/app-resources/img/icons/gardens.svg 100644
View File

@ -0,0 +1,164 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#C46F24;}
.st2{opacity:0.5;fill:#C46F24;}
.st3{fill:#C1631E;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st5{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-miterlimit:10;}
.st6{fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st7{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st8{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st9{fill:#F15A24;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st10{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st12{fill:#FFFFFF;}
.st13{fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.088,10.22;}
.st15{fill:#FFFFFF;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st16{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st17{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:none;stroke:#969696;stroke-width:5;stroke-miterlimit:10;}
.st19{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st20{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st21{fill:none;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st22{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st23{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st24{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.st25{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.2727,9.8182;}
.st26{fill:none;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st27{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st28{fill:none;stroke:#333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st29{fill:none;stroke:#E6E6E6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st30{fill:#1EB287;}
.st31{fill:#DEEDCB;}
.st32{fill:#505305;}
.st33{fill:#186435;}
.st34{fill:#A44F79;}
.st35{fill:#2AB188;}
.st36{fill:#A35915;}
.st37{fill:#4D4D4D;}
.st38{fill:#F6B330;}
.st39{fill:#324872;}
.st40{fill:#2BA270;}
.st41{fill:#53A4EA;}
.st42{fill:#3BA2A0;}
.st43{fill:#1792CD;}
.st44{fill:#0C2E3D;}
.st45{fill:#35761B;}
.st46{fill:#0C6364;}
.st47{fill:#F4A519;}
.st48{opacity:0.06;fill:#3B9910;}
.st49{opacity:0.06;fill:#E56200;}
.st50{opacity:0.06;fill:#2E5799;}
.st51{opacity:0.06;fill:#007F7C;}
.st52{opacity:0.06;fill:#00B7FF;}
.st53{opacity:0.06;fill:#FF9D00;}
.st54{opacity:0.06;fill:#00CC8D;}
.st55{fill:#91A7B4;}
.st56{fill:#9F6300;}
.st57{fill:#07B386;}
.st58{fill:#FF4D2D;}
.st59{fill:#F9FBFC;}
.st60{fill:#FBF7F0;}
.st61{fill:#F0F8F8;}
.st62{fill:#F1FCF9;}
.st63{fill:#FFF7F6;}
.st64{fill:#AF8761;}
.st65{fill:#FFF8F3;}
.st66{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.st67{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st68{fill:#F15A24;}
.st69{fill:#F15A24;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st70{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st71{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st72{opacity:0.8;enable-background:new ;}
.st73{clip-path:url(#SVGID_2_);}
.st74{clip-path:url(#SVGID_4_);}
.st75{clip-path:url(#SVGID_6_);fill:#333333;}
.st76{clip-path:url(#SVGID_8_);}
.st77{clip-path:url(#SVGID_10_);fill:#333333;}
.st78{clip-path:url(#SVGID_12_);}
.st79{clip-path:url(#SVGID_14_);}
.st80{clip-path:url(#SVGID_16_);fill:#333333;}
.st81{clip-path:url(#SVGID_18_);}
.st82{clip-path:url(#SVGID_20_);fill:#333333;}
.st83{clip-path:url(#SVGID_22_);}
.st84{clip-path:url(#SVGID_24_);fill:#333333;}
.st85{clip-path:url(#SVGID_26_);}
.st86{clip-path:url(#SVGID_28_);fill:#333333;}
.st87{clip-path:url(#SVGID_30_);}
.st88{clip-path:url(#SVGID_32_);fill:#333333;}
.st89{clip-path:url(#SVGID_34_);}
.st90{clip-path:url(#SVGID_36_);fill:#333333;}
.st91{clip-path:url(#SVGID_38_);}
.st92{clip-path:url(#SVGID_40_);fill:#333333;}
.st93{clip-path:url(#SVGID_42_);}
.st94{clip-path:url(#SVGID_44_);fill:#333333;}
.st95{clip-path:url(#SVGID_46_);}
.st96{clip-path:url(#SVGID_48_);fill:#333333;}
.st97{clip-path:url(#SVGID_50_);}
.st98{clip-path:url(#SVGID_52_);fill:#333333;}
.st99{clip-path:url(#SVGID_54_);}
.st100{clip-path:url(#SVGID_56_);fill:#333333;}
.st101{clip-path:url(#SVGID_58_);}
.st102{clip-path:url(#SVGID_60_);fill:#333333;}
.st103{clip-path:url(#SVGID_62_);}
.st104{clip-path:url(#SVGID_64_);}
.st105{clip-path:url(#SVGID_66_);enable-background:new ;}
.st106{clip-path:url(#SVGID_68_);}
.st107{clip-path:url(#SVGID_70_);}
.st108{clip-path:url(#SVGID_72_);fill:#333333;}
.st109{clip-path:url(#SVGID_74_);}
.st110{clip-path:url(#SVGID_76_);}
.st111{clip-path:url(#SVGID_78_);fill:#333333;}
.st112{clip-path:url(#SVGID_80_);}
.st113{clip-path:url(#SVGID_82_);fill:#333333;}
.st114{clip-path:url(#SVGID_84_);}
.st115{clip-path:url(#SVGID_86_);}
.st116{clip-path:url(#SVGID_88_);fill:#333333;}
.st117{clip-path:url(#SVGID_90_);}
.st118{clip-path:url(#SVGID_92_);fill:#333333;}
.st119{clip-path:url(#SVGID_94_);}
.st120{clip-path:url(#SVGID_96_);fill:#333333;}
.st121{clip-path:url(#SVGID_98_);}
.st122{clip-path:url(#SVGID_100_);fill:#333333;}
.st123{opacity:0.8;clip-path:url(#SVGID_102_);fill:#333333;}
.st124{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st125{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st126{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st127{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st128{opacity:0.8;}
.st129{opacity:0.8;fill:#FFFFFF;}
.st130{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
.st131{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
.st132{opacity:0.2;fill:url(#SVGID_103_);}
.st133{fill:#D8EAD2;}
.st134{opacity:0.2;fill:url(#SVGID_104_);}
.st135{opacity:0.06;fill:#E07127;}
</style>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_1">
<path d="M39.5,10h-4c-1.1,0-2-0.9-2-2V6c0-1.66-1.34-3-3-3h-20c-1.66,0-3,1.34-3,3v29c0,1.66,1.34,3,3,3h2c1.1,0,2,0.9,2,2v4
c0,1.66,1.34,3,3,3h22c1.66,0,3-1.34,3-3V13C42.5,11.34,41.16,10,39.5,10z M14,17.33h1c0.83,0,1.5,0.67,1.5,1.5v3.33
c0,0.83-0.67,1.5-1.5,1.5h-1c-0.83,0-1.5-0.67-1.5-1.5v-3.33C12.5,18.01,13.17,17.33,14,17.33z M21,15h4.5c0.83,0,1.5,0.67,1.5,1.5
v4c0,0.83-0.67,1.5-1.5,1.5H21c-0.83,0-1.5-0.67-1.5-1.5v-4C19.5,15.67,20.17,15,21,15z M21,25h4.5c0.83,0,1.5,0.67,1.5,1.5v4
c0,0.83-0.67,1.5-1.5,1.5H21c-0.83,0-1.5-0.67-1.5-1.5v-4C19.5,25.67,20.17,25,21,25z M31.5,25H36c0.83,0,1.5,0.67,1.5,1.5v4
c0,0.83-0.67,1.5-1.5,1.5h-4.5c-0.83,0-1.5-0.67-1.5-1.5v-4C30,25.67,30.67,25,31.5,25z M37.5,16.5v4c0,0.83-0.67,1.5-1.5,1.5h-4.5
c-0.83,0-1.5-0.67-1.5-1.5v-4c0-0.83,0.67-1.5,1.5-1.5H36C36.83,15,37.5,15.67,37.5,16.5z M27,12h-3.5c-0.83,0-1.5-0.67-1.5-1.5v-1
C22,8.67,22.67,8,23.5,8H27c0.83,0,1.5,0.67,1.5,1.5v1C28.5,11.33,27.83,12,27,12z M19,9.5v1.67c0,0.46-0.37,0.83-0.83,0.83H18
c-0.83,0-1.5,0.67-1.5,1.5v0c0,0.46-0.37,0.83-0.83,0.83H14c-0.83,0-1.5-0.67-1.5-1.5V9.5C12.5,8.67,13.17,8,14,8h3.5
C18.33,8,19,8.67,19,9.5z M12.5,31.5v-3.33c0-0.83,0.67-1.5,1.5-1.5h1c0.83,0,1.5,0.67,1.5,1.5v3.33c0,0.83-0.67,1.5-1.5,1.5h-1
C13.17,33,12.5,32.33,12.5,31.5z M21,35h4.5c0.83,0,1.5,0.67,1.5,1.5v4c0,0.83-0.67,1.5-1.5,1.5H21c-0.83,0-1.5-0.67-1.5-1.5v-4
C19.5,35.67,20.17,35,21,35z M30,40.5v-4c0-0.83,0.67-1.5,1.5-1.5H36c0.83,0,1.5,0.67,1.5,1.5v4c0,0.83-0.67,1.5-1.5,1.5h-4.5
C30.67,42,30,41.33,30,40.5z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

166
public/app-resources/img/icons/map.svg 100644
View File

@ -0,0 +1,166 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#C46F24;}
.st2{opacity:0.5;fill:#C46F24;}
.st3{fill:#C1631E;}
.st4{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st5{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-miterlimit:10;}
.st6{fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st7{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st8{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st9{fill:#F15A24;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st10{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st12{fill:#FFFFFF;}
.st13{fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.088,10.22;}
.st15{fill:#FFFFFF;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st16{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st17{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{fill:none;stroke:#969696;stroke-width:5;stroke-miterlimit:10;}
.st19{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st20{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st21{fill:none;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st22{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st23{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st24{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.st25{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:3.2727,9.8182;}
.st26{fill:none;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st27{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st28{fill:none;stroke:#333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st29{fill:none;stroke:#E6E6E6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st30{fill:#1EB287;}
.st31{fill:#DEEDCB;}
.st32{fill:#505305;}
.st33{fill:#186435;}
.st34{fill:#A44F79;}
.st35{fill:#2AB188;}
.st36{fill:#A35915;}
.st37{fill:#4D4D4D;}
.st38{fill:#F6B330;}
.st39{fill:#324872;}
.st40{fill:#2BA270;}
.st41{fill:#53A4EA;}
.st42{fill:#3BA2A0;}
.st43{fill:#1792CD;}
.st44{fill:#0C2E3D;}
.st45{fill:#35761B;}
.st46{fill:#0C6364;}
.st47{fill:#F4A519;}
.st48{opacity:0.06;fill:#3B9910;}
.st49{opacity:0.06;fill:#E56200;}
.st50{opacity:0.06;fill:#2E5799;}
.st51{opacity:0.06;fill:#007F7C;}
.st52{opacity:0.06;fill:#00B7FF;}
.st53{opacity:0.06;fill:#FF9D00;}
.st54{opacity:0.06;fill:#00CC8D;}
.st55{fill:#91A7B4;}
.st56{fill:#9F6300;}
.st57{fill:#07B386;}
.st58{fill:#FF4D2D;}
.st59{fill:#F9FBFC;}
.st60{fill:#FBF7F0;}
.st61{fill:#F0F8F8;}
.st62{fill:#F1FCF9;}
.st63{fill:#FFF7F6;}
.st64{fill:#AF8761;}
.st65{fill:#FFF8F3;}
.st66{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.st67{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st68{fill:#F15A24;}
.st69{fill:#F15A24;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st70{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st71{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st72{opacity:0.8;enable-background:new ;}
.st73{clip-path:url(#SVGID_2_);}
.st74{clip-path:url(#SVGID_4_);}
.st75{clip-path:url(#SVGID_6_);fill:#333333;}
.st76{clip-path:url(#SVGID_8_);}
.st77{clip-path:url(#SVGID_10_);fill:#333333;}
.st78{clip-path:url(#SVGID_12_);}
.st79{clip-path:url(#SVGID_14_);}
.st80{clip-path:url(#SVGID_16_);fill:#333333;}
.st81{clip-path:url(#SVGID_18_);}
.st82{clip-path:url(#SVGID_20_);fill:#333333;}
.st83{clip-path:url(#SVGID_22_);}
.st84{clip-path:url(#SVGID_24_);fill:#333333;}
.st85{clip-path:url(#SVGID_26_);}
.st86{clip-path:url(#SVGID_28_);fill:#333333;}
.st87{clip-path:url(#SVGID_30_);}
.st88{clip-path:url(#SVGID_32_);fill:#333333;}
.st89{clip-path:url(#SVGID_34_);}
.st90{clip-path:url(#SVGID_36_);fill:#333333;}
.st91{clip-path:url(#SVGID_38_);}
.st92{clip-path:url(#SVGID_40_);fill:#333333;}
.st93{clip-path:url(#SVGID_42_);}
.st94{clip-path:url(#SVGID_44_);fill:#333333;}
.st95{clip-path:url(#SVGID_46_);}
.st96{clip-path:url(#SVGID_48_);fill:#333333;}
.st97{clip-path:url(#SVGID_50_);}
.st98{clip-path:url(#SVGID_52_);fill:#333333;}
.st99{clip-path:url(#SVGID_54_);}
.st100{clip-path:url(#SVGID_56_);fill:#333333;}
.st101{clip-path:url(#SVGID_58_);}
.st102{clip-path:url(#SVGID_60_);fill:#333333;}
.st103{clip-path:url(#SVGID_62_);}
.st104{clip-path:url(#SVGID_64_);}
.st105{clip-path:url(#SVGID_66_);enable-background:new ;}
.st106{clip-path:url(#SVGID_68_);}
.st107{clip-path:url(#SVGID_70_);}
.st108{clip-path:url(#SVGID_72_);fill:#333333;}
.st109{clip-path:url(#SVGID_74_);}
.st110{clip-path:url(#SVGID_76_);}
.st111{clip-path:url(#SVGID_78_);fill:#333333;}
.st112{clip-path:url(#SVGID_80_);}
.st113{clip-path:url(#SVGID_82_);fill:#333333;}
.st114{clip-path:url(#SVGID_84_);}
.st115{clip-path:url(#SVGID_86_);}
.st116{clip-path:url(#SVGID_88_);fill:#333333;}
.st117{clip-path:url(#SVGID_90_);}
.st118{clip-path:url(#SVGID_92_);fill:#333333;}
.st119{clip-path:url(#SVGID_94_);}
.st120{clip-path:url(#SVGID_96_);fill:#333333;}
.st121{clip-path:url(#SVGID_98_);}
.st122{clip-path:url(#SVGID_100_);fill:#333333;}
.st123{opacity:0.8;clip-path:url(#SVGID_102_);fill:#333333;}
.st124{fill:#FFFFFF;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-miterlimit:10;}
.st125{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st126{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st127{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st128{opacity:0.8;}
.st129{opacity:0.8;fill:#FFFFFF;}
.st130{fill:none;stroke:#FFFFFF;stroke-width:6;stroke-miterlimit:10;}
.st131{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-miterlimit:10;}
.st132{opacity:0.2;fill:url(#SVGID_103_);}
.st133{fill:#D8EAD2;}
.st134{opacity:0.2;fill:url(#SVGID_104_);}
.st135{opacity:0.06;fill:#E07127;}
</style>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4">
</g>
<g id="Layer_1">
<path d="M39.5,2.5h-29c-1.66,0-3,1.34-3,3v39c0,1.66,1.34,3,3,3h29c1.66,0,3-1.34,3-3v-39C42.5,3.84,41.16,2.5,39.5,2.5z
M21.83,31.5V28c0-0.83,0.67-1.5,1.5-1.5h3.33c0.83,0,1.5,0.67,1.5,1.5v3.5c0,0.83-0.67,1.5-1.5,1.5h-3.33
C22.5,33,21.83,32.33,21.83,31.5z M28.17,37.5V41c0,0.83-0.67,1.5-1.5,1.5h-3.33c-0.83,0-1.5-0.67-1.5-1.5v-3.5
c0-0.83,0.67-1.5,1.5-1.5h3.33C27.49,36,28.17,36.67,28.17,37.5z M28.17,18.5V22c0,0.83-0.67,1.5-1.5,1.5h-3.33
c-0.83,0-1.5-0.67-1.5-1.5v-3.5c0-0.83,0.67-1.5,1.5-1.5h3.33C27.49,17,28.17,17.67,28.17,18.5z M21.83,12.5V9
c0-0.83,0.67-1.5,1.5-1.5h3.33c0.83,0,1.5,0.67,1.5,1.5v3.5c0,0.83-0.67,1.5-1.5,1.5h-3.33C22.5,14,21.83,13.33,21.83,12.5z
M36,23.5h-3.33c-0.83,0-1.5-0.67-1.5-1.5v-3.5c0-0.83,0.67-1.5,1.5-1.5H36c0.83,0,1.5,0.67,1.5,1.5V22
C37.5,22.83,36.83,23.5,36,23.5z M17.33,23.5H14c-0.83,0-1.5-0.67-1.5-1.5v-3.5c0-0.83,0.67-1.5,1.5-1.5h3.33
c0.83,0,1.5,0.67,1.5,1.5V22C18.83,22.83,18.16,23.5,17.33,23.5z M14,26.5h3.33c0.83,0,1.5,0.67,1.5,1.5v3.5
c0,0.83-0.67,1.5-1.5,1.5H14c-0.83,0-1.5-0.67-1.5-1.5V28C12.5,27.17,13.17,26.5,14,26.5z M32.67,26.5H36c0.83,0,1.5,0.67,1.5,1.5
v3.5c0,0.83-0.67,1.5-1.5,1.5h-3.33c-0.83,0-1.5-0.67-1.5-1.5V28C31.17,27.17,31.84,26.5,32.67,26.5z M36,14h-3.33
c-0.83,0-1.5-0.67-1.5-1.5V9c0-0.83,0.67-1.5,1.5-1.5H36c0.83,0,1.5,0.67,1.5,1.5v3.5C37.5,13.33,36.83,14,36,14z M18.83,9v3.5
c0,0.83-0.67,1.5-1.5,1.5H14c-0.83,0-1.5-0.67-1.5-1.5V9c0-0.83,0.67-1.5,1.5-1.5h3.33C18.16,7.5,18.83,8.17,18.83,9z M14,36h3.33
c0.83,0,1.5,0.67,1.5,1.5V41c0,0.83-0.67,1.5-1.5,1.5H14c-0.83,0-1.5-0.67-1.5-1.5v-3.5C12.5,36.67,13.17,36,14,36z M31.17,41v-3.5
c0-0.83,0.67-1.5,1.5-1.5H36c0.83,0,1.5,0.67,1.5,1.5V41c0,0.83-0.67,1.5-1.5,1.5h-3.33C31.84,42.5,31.17,41.83,31.17,41z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

87
public/app-resources/img/icons/plant.svg 100644
View File

@ -0,0 +1,87 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#0C6364;}
.st2{display:none;}
.st3{display:inline;opacity:0.5;fill:#C46F24;}
.st4{fill:#F15A24;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st5{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st6{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st7{fill:#FFFFFF;}
.st8{fill:#FFFFFF;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st9{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:4.088,10.22;}
.st10{fill:#FFFFFF;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{fill:none;stroke:#969696;stroke-width:5;stroke-miterlimit:10;}
.st12{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st13{fill:#B3B3B3;stroke:#4D4D4D;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st14{fill:none;stroke:#4D4D4D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st15{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st16{fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;}
.st17{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;}
.st18{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2.4286,9.7143;}
.st19{fill:none;stroke:#333333;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st20{fill:none;stroke:#333333;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st21{fill:none;stroke:#333333;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st22{fill:none;stroke:#E6E6E6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st23{fill:#1EB287;}
.st24{fill:#DEEDCB;}
.st25{fill:#C46F24;}
.st26{fill:#505305;}
.st27{fill:#186435;}
.st28{fill:#A44F79;}
.st29{fill:#2AB188;}
.st30{fill:#A35915;}
.st31{fill:#4D4D4D;}
.st32{fill:#F6B330;}
.st33{fill:#324872;}
.st34{fill:#2BA270;}
.st35{fill:#53A4EA;}
.st36{fill:#3BA2A0;}
.st37{fill:#1792CD;}
.st38{fill:#0C2E3D;}
.st39{fill:#35761B;}
.st40{fill:#F4A519;}
.st41{opacity:0.06;fill:#3B9910;}
.st42{opacity:0.06;fill:#E56200;}
.st43{opacity:0.06;fill:#2E5799;}
.st44{opacity:0.06;fill:#007F7C;}
.st45{opacity:0.06;fill:#00B7FF;}
.st46{opacity:0.06;fill:#FF9D00;}
.st47{opacity:0.06;fill:#00CC8D;}
.st48{fill:none;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-miterlimit:10;}
.st49{fill:none;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;}
.st50{fill:#F15A24;}
.st51{fill:none;stroke:#000000;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st52{fill:#FFFFFF;stroke:#000000;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st53{fill:#FFFFFF;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st54{fill:none;stroke:#333333;stroke-width:3;stroke-miterlimit:10;}
.st55{fill:none;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st56{fill:none;stroke:#000000;stroke-width:5;stroke-linejoin:round;stroke-miterlimit:10;}
.st57{fill:none;stroke:#000000;stroke-linecap:round;stroke-miterlimit:10;}
.st58{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st59{clip-path:url(#SVGID_2_);}
.st60{fill:none;stroke:#FFFFFF;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st61{fill:none;stroke:#FFFFFF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st62{fill:#FF0000;}
</style>
<g id="Layer_2">
</g>
<g id="Layer_3">
</g>
<g id="Layer_4" class="st2">
</g>
<g id="Layer_1">
<path d="M28.25,1.76c-2.04-1.03-4.47-1.03-6.5,0C11.57,6.91,5.5,15.59,5.5,25s6.07,18.09,16.25,23.24
c1.02,0.51,2.13,0.77,3.25,0.77c1.12,0,2.23-0.26,3.25-0.77C38.43,43.09,44.5,34.41,44.5,25S38.43,6.91,28.25,1.76z M26.5,40.76
l0-7.35c0-0.94,0.37-1.84,1.04-2.5l3.82-3.82c0.59-0.59,0.59-1.54,0-2.12c-0.59-0.59-1.54-0.59-2.12,0l-1.51,1.51
c-0.45,0.45-1.22,0.13-1.22-0.51V15.26c0-0.83-0.67-1.5-1.5-1.5s-1.5,0.67-1.5,1.5v5.16c0,0.64-0.77,0.96-1.22,0.51l-2.01-2.01
c-0.59-0.59-1.54-0.59-2.12,0c-0.59,0.59-0.59,1.54,0,2.12l4.32,4.32c0.66,0.66,1.04,1.56,1.04,2.5v2.67
c0,0.64-0.77,0.96-1.22,0.51l-2.52-2.52c-0.59-0.59-1.54-0.59-2.12,0c-0.59,0.59-0.59,1.54,0,2.12l4.82,4.82
c0.66,0.66,1.04,1.56,1.04,2.5l0,2.8c0,1.26-1.39,1.99-2.45,1.3C14.39,37.76,10.5,31.56,10.5,25c0-7.48,5.05-14.5,13.51-18.78
c0.31-0.16,0.65-0.24,0.99-0.24c0.34,0,0.68,0.08,0.99,0.24C34.45,10.5,39.5,17.52,39.5,25c0,6.56-3.89,12.76-10.55,17.07
C27.9,42.76,26.5,42.02,26.5,40.76z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB