teams list now renders

src/products/AgIcons/AddField.tsx

@@ -0,0 +1,24 @@
+import AddFieldWhite from "assets/products/Ag/addFieldWhite.png";
+import AddFieldBlack from "assets/products/Ag/addFieldBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function AddFieldIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AddFieldWhite : AddFieldBlack;
+    }
+
+    return themeType === "light" ? AddFieldBlack : AddFieldWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/AddMarker.tsx

@@ -0,0 +1,24 @@
+import AddMarkerWhite from "assets/products/Ag/addMarkerWhite.png";
+import AddMarkerBlack from "assets/products/Ag/addMarkerBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function AddMarkerIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AddMarkerWhite : AddMarkerBlack;
+    }
+
+    return themeType === "light" ? AddMarkerBlack : AddMarkerWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/AerationFanIcon.tsx

@@ -0,0 +1,29 @@
+import AerationFanDarkIcon from "assets/components/aerationFanDark.png";
+import AerationFanLightIcon from "assets/components/aerationFanLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function AerationFanIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? AerationFanLightIcon : AerationFanDarkIcon;
+    }
+
+    return themeType === "light" ? AerationFanDarkIcon : AerationFanLightIcon;
+  };
+
+  if (size) {
+    return <img width={size} height={size} alt="fan" src={src()} />;
+  }
+
+  return <ImgIcon alt="fan" src={src()} />;
+}

src/products/AgIcons/Delete.tsx

@@ -0,0 +1,24 @@
+import DeleteWhite from "assets/products/Ag/deleteWhite.png";
+import DeleteBlack from "assets/products/Ag/deleteBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function DeleteIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DeleteWhite : DeleteBlack;
+    }
+
+    return themeType === "light" ? DeleteBlack : DeleteWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/DiseaseIcon.tsx

@@ -0,0 +1,25 @@
+import DiseaseLight from "assets/products/Ag/diseaseLight.png";
+import DiseaseDark from "assets/products/Ag/diseaseDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function DiseaseIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? DiseaseLight : DiseaseDark;
+    }
+
+    return themeType === "light" ? DiseaseDark : DiseaseLight;
+  };
+
+  return <img width={width} height={height} alt="diseaseIcon" src={src()} />;
+}

src/products/AgIcons/Edit.tsx

@@ -0,0 +1,24 @@
+import EditWhite from "assets/products/Ag/editWhite.png";
+import EditBlack from "assets/products/Ag/editBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function EditIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? EditWhite : EditBlack;
+    }
+
+    return themeType === "light" ? EditBlack : EditWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldList.tsx

@@ -0,0 +1,24 @@
+import FieldListWhite from "assets/products/Ag/fieldListWhite.png";
+import FieldListBlack from "assets/products/Ag/fieldListBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldListIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldListWhite : FieldListBlack;
+    }
+
+    return themeType === "light" ? FieldListBlack : FieldListWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldMap.tsx

@@ -0,0 +1,24 @@
+import FieldMapWhite from "assets/products/Ag/fieldMapWhite.png";
+import FieldMapBlack from "assets/products/Ag/fieldMapBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldMapIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldMapWhite : FieldMapBlack;
+    }
+
+    return themeType === "light" ? FieldMapBlack : FieldMapWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldNames.tsx

@@ -0,0 +1,24 @@
+import FieldNamesWhite from "assets/products/Ag/fieldNamesWhite.png";
+import FieldNamesBlack from "assets/products/Ag/fieldNamesBlack.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function FieldNamesIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldNamesWhite : FieldNamesBlack;
+    }
+
+    return themeType === "light" ? FieldNamesBlack : FieldNamesWhite;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/FieldsIcon.tsx

@@ -0,0 +1,29 @@
+import FieldsIconLight from "assets/products/Ag/FieldsIconLight.png";
+import FieldsIconDark from "assets/products/Ag/FieldsIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  size?: number;
+}
+
+export default function FieldsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, size } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? FieldsIconLight : FieldsIconDark;
+    }
+
+    return themeType === "light" ? FieldsIconDark : FieldsIconLight;
+  };
+
+  return size ? (
+    <img alt="fields" height={size} width={size} src={src()} />
+  ) : (
+    <ImgIcon alt="fields" src={src()} />
+  );
+}

src/products/AgIcons/GearMarker.tsx

@@ -0,0 +1,24 @@
+import GearMarkerLight from "assets/products/Ag/gearMarkerLight.png";
+import GearMarkerDark from "assets/products/Ag/gearMarkerDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function GearMarkerIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? GearMarkerLight : GearMarkerDark;
+    }
+
+    return themeType === "light" ? GearMarkerDark : GearMarkerLight;
+  };
+
+  return <ImgIcon alt="markerSettings" src={src()} />;
+}

src/products/AgIcons/HomeIcon.tsx

@@ -0,0 +1,24 @@
+import HomeIconLight from "assets/products/Ag/HomeIconLight.png";
+import HomeIconDark from "assets/products/Ag/HomeIconDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function HomeIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? HomeIconLight : HomeIconDark;
+    }
+
+    return themeType === "light" ? HomeIconDark : HomeIconLight;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/MarkerMove.tsx

@@ -0,0 +1,24 @@
+import MarkerMoveLight from "assets/products/Ag/markerMoveLight.png";
+import MarkerMoveDark from "assets/products/Ag/markerMoveDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function MarkerMoveIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? MarkerMoveLight : MarkerMoveDark;
+    }
+
+    return themeType === "light" ? MarkerMoveDark : MarkerMoveLight;
+  };
+
+  return <ImgIcon alt="markerMoveToggle" src={src()} />;
+}

src/products/AgIcons/PestsIcon.tsx

@@ -0,0 +1,25 @@
+import PestsLight from "assets/products/Ag/pestsLight.png";
+import PestsDark from "assets/products/Ag/pestsDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function PestsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? PestsLight : PestsDark;
+    }
+
+    return themeType === "light" ? PestsDark : PestsLight;
+  };
+
+  return <img width={width} height={height} alt="pestsIcon" src={src()} />;
+}

src/products/AgIcons/PressureIcon.tsx

@@ -0,0 +1,37 @@
+import PressureDarkIcon from "assets/components/pressureDark.png";
+import PressureLightIcon from "assets/components/pressureLight.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+  heightWidth?: number;
+}
+
+export default function TemperatureIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type, heightWidth } = props;
+
+  const lightIcon = () => {
+    return PressureLightIcon;
+  };
+
+  const darkIcon = () => {
+    return PressureDarkIcon;
+  };
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? lightIcon() : darkIcon();
+    }
+
+    return themeType === "light" ? darkIcon() : lightIcon();
+  };
+
+  if (heightWidth) {
+    return <img alt="pressure" src={src()} height={heightWidth} width={heightWidth} />;
+  }
+
+  return <ImgIcon alt="pressure" src={src()} />;
+}

src/products/AgIcons/RocksIcon.tsx

@@ -0,0 +1,25 @@
+import RocksLight from "assets/products/Ag/rocksLight.png";
+import RocksDark from "assets/products/Ag/rocksDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function RocksIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? RocksLight : RocksDark;
+    }
+
+    return themeType === "light" ? RocksDark : RocksLight;
+  };
+
+  return <img width={width} height={height} alt="rocksIcon" src={src()} />;
+}

src/products/AgIcons/ScoutIcon.tsx

@@ -0,0 +1,24 @@
+import ScoutLight from "assets/products/Ag/scoutLight.png";
+import ScoutDark from "assets/products/Ag/scoutDark.png";
+import { ImgIcon } from "common/ImgIcon";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  type?: "light" | "dark";
+}
+
+export default function ScoutIcon(props: Props) {
+  const themeType = useThemeType();
+  const { type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? ScoutLight : ScoutDark;
+    }
+
+    return themeType === "light" ? ScoutDark : ScoutLight;
+  };
+
+  return <ImgIcon alt="fields" src={src()} />;
+}

src/products/AgIcons/WeedsIcon.tsx

@@ -0,0 +1,25 @@
+import WeedsLight from "assets/products/Ag/weedsLight.png";
+import WeedsDark from "assets/products/Ag/weedsDark.png";
+import { useThemeType } from "hooks";
+import React from "react";
+
+interface Props {
+  width: number;
+  height: number;
+  type?: "light" | "dark";
+}
+
+export default function WeedsIcon(props: Props) {
+  const themeType = useThemeType();
+  const { width, height, type } = props;
+
+  const src = () => {
+    if (type) {
+      return type === "light" ? WeedsLight : WeedsDark;
+    }
+
+    return themeType === "light" ? WeedsDark : WeedsLight;
+  };
+
+  return <img width={width} height={height} alt="weedsIcon" src={src()} />;
+}