From da073c2ecc12e5e6b34b46f32c84452f296063b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez=20Mu=C3=B1oz?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 27 Nov 2023 08:25:06 +0100
Subject: [PATCH] establishment legend

---
 .../legend/establishment/index.tsx            | 32 +++++++
 frontend/src/lib/json-converter/index.ts      |  2 +
 frontend/src/styles/icons/designated.svg      | 46 ++++++++++
 frontend/src/styles/icons/implemented.svg     | 79 ++++++++++++++++++
 frontend/src/styles/icons/managed.svg         | 46 ++++++++++
 frontend/src/styles/icons/proposed.svg        | 83 +++++++++++++++++++
 6 files changed, 288 insertions(+)
 create mode 100644 frontend/src/containers/data-tool/content/map/layers-toolbox/legend/establishment/index.tsx
 create mode 100644 frontend/src/styles/icons/designated.svg
 create mode 100644 frontend/src/styles/icons/implemented.svg
 create mode 100644 frontend/src/styles/icons/managed.svg
 create mode 100644 frontend/src/styles/icons/proposed.svg

diff --git a/frontend/src/containers/data-tool/content/map/layers-toolbox/legend/establishment/index.tsx b/frontend/src/containers/data-tool/content/map/layers-toolbox/legend/establishment/index.tsx
new file mode 100644
index 00000000..ea9d1819
--- /dev/null
+++ b/frontend/src/containers/data-tool/content/map/layers-toolbox/legend/establishment/index.tsx
@@ -0,0 +1,32 @@
+import Icon from '@/components/ui/icon';
+import DesignatedIcon from '@/styles/icons/designated.svg?sprite';
+import ImplementedIcon from '@/styles/icons/implemented.svg?sprite';
+import ManagedIcon from '@/styles/icons/managed.svg?sprite';
+import ProposedIcon from '@/styles/icons/proposed.svg?sprite';
+
+const ITEM_LIST_CLASSES = 'flex items-center space-x-2';
+const ICON_CLASSES = 'h-7 w-7 border border-black rounded-full';
+
+const PATTERNS = {
+  proposed: ProposedIcon,
+  managed: ManagedIcon,
+  designated: DesignatedIcon,
+  implemented: ImplementedIcon,
+};
+
+const EEZLayerLegend = (config: { items: { label: string; pattern: string }[] }) => {
+  const { items } = config;
+
+  return (
+    <ul className="space-y-3 font-mono text-xs">
+      {items.map(({ label, pattern }) => (
+        <li key={pattern} className={ITEM_LIST_CLASSES}>
+          <Icon icon={PATTERNS[pattern]} className={ICON_CLASSES} />
+          <span>{label}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default EEZLayerLegend;
diff --git a/frontend/src/lib/json-converter/index.ts b/frontend/src/lib/json-converter/index.ts
index af97ac18..3fffe4a4 100644
--- a/frontend/src/lib/json-converter/index.ts
+++ b/frontend/src/lib/json-converter/index.ts
@@ -9,6 +9,7 @@ import { JSONConfiguration, JSONConverter } from '@deck.gl/json/typed';
 //   LegendTypeGradient,
 // } from '@/components/map/legend/item-types';
 import EEZLayerLegend from '@/containers/data-tool/content/map/layers-toolbox/legend/eez';
+import EstablishmentLayerLegend from '@/containers/data-tool/content/map/layers-toolbox/legend/establishment';
 import EEZLayerPopup from '@/containers/data-tool/content/map/popup/eez';
 import GenericPopup from '@/containers/data-tool/content/map/popup/generic';
 import ProtectedAreaPopup from '@/containers/data-tool/content/map/popup/protected-area';
@@ -30,6 +31,7 @@ export const JSON_CONFIGURATION = new JSONConfiguration({
     EEZLayerLegend,
     GenericPopup,
     ProtectedAreaPopup,
+    EstablishmentLayerLegend,
     // LegendTypeBasic,
     // LegendTypeChoropleth,
     // LegendTypeGradient,
diff --git a/frontend/src/styles/icons/designated.svg b/frontend/src/styles/icons/designated.svg
new file mode 100644
index 00000000..04f0c7d4
--- /dev/null
+++ b/frontend/src/styles/icons/designated.svg
@@ -0,0 +1,46 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_448_1283)">
+<mask id="mask0_448_1283" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-8" y="-7" width="39" height="38">
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 -0.163971 -0.799988)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.4003 -0.164093)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.03629 -0.799988)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.6006 -0.164093)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.2366 -0.799988)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.8008 -0.164093)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.4368 -0.799988)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.0011 -0.164093)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 -0.163971 5.39999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.4003 6.03589)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.03629 5.39999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.6006 6.03589)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.2366 5.39999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.8008 6.03589)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.4368 5.39999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.0011 6.03589)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 -0.163971 11.6)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.4003 12.2359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.03629 11.6)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.6006 12.2359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.2366 11.6)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.8008 12.2359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.4368 11.6)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.0011 12.2359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 -0.163971 17.8)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.4003 18.4359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.03629 17.8)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.6006 18.4359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.2366 17.8)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.8008 18.4359)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.4368 17.8)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.0011 18.4359)" fill="#00BF36"/>
+</mask>
+<g mask="url(#mask0_448_1283)">
+<circle cx="12" cy="12" r="12" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_448_1283">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/styles/icons/implemented.svg b/frontend/src/styles/icons/implemented.svg
new file mode 100644
index 00000000..837b68de
--- /dev/null
+++ b/frontend/src/styles/icons/implemented.svg
@@ -0,0 +1,79 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_256_26864" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-20" y="-17" width="63" height="56">
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.16 -0.976074)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.6761 -0.340179)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 9.9599 -0.976074)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 8.47614 -0.340179)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.75983 -0.976074)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 2.27606 -0.340179)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.6357 1.70001)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.16 5.22394)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 18.2 2.33591)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.6761 5.85983)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.43567 1.70001)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 9.9599 5.22394)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.9999 2.33591)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 8.47614 5.85983)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 0.235657 1.70001)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.75983 5.22394)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.79987 2.33591)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 2.27606 5.85983)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.6357 7.89999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.16 11.4239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 18.2 8.53589)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.6761 12.0598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.43567 7.89999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 9.9599 11.4239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.9999 8.53589)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 8.47614 12.0598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 0.235657 7.89999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.75983 11.4239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.79987 8.53589)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 2.27606 12.0598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.6357 14.1)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.16 17.6239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 18.2 14.7359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.6761 18.2598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.43567 14.1)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 9.9599 17.6239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.9999 14.7359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 8.47614 18.2598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 0.235657 14.1)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.75983 17.6239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.79987 14.7359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 2.27606 18.2598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.6357 20.3)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 16.16 23.8239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 18.2 20.9359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.6761 24.4598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 6.43567 20.3)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 9.9599 23.8239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 11.9999 20.9359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 8.47614 24.4598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 0.235657 20.3)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.75983 23.8239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.79987 20.9359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 2.27606 24.4598)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 22.36 -0.976074)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8762 -0.340179)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.8358 1.70001)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 22.36 5.22394)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.4001 2.33591)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8762 5.85983)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.8358 7.89999)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 22.36 11.4239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.4001 8.53589)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8762 12.0598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.8358 14.1)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 22.36 17.6239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.4001 14.7359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8762 18.2598)" fill="#00BF36"/>
+<rect width="0.899294" height="4.38406" transform="matrix(-0.707107 0.707107 0.707107 0.707107 18.8358 20.3)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 0.707107 0.707107 0.707107 22.36 23.8239)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 24.4001 20.9359)" fill="#00BF36"/>
+<rect width="0.899294" height="2.88524" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8762 24.4598)" fill="#00BF36"/>
+</mask>
+<g mask="url(#mask0_256_26864)">
+<circle cx="12" cy="12" r="12" fill="black"/>
+</g>
+</svg>
diff --git a/frontend/src/styles/icons/managed.svg b/frontend/src/styles/icons/managed.svg
new file mode 100644
index 00000000..305e9390
--- /dev/null
+++ b/frontend/src/styles/icons/managed.svg
@@ -0,0 +1,46 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_288_2998)">
+<mask id="mask0_288_2998" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-25" y="-25" width="72" height="72">
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1.18182 1.85318)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1.18182 8.39862)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1.18182 14.9441)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1.18182 21.4895)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 4.00702 -0.972046)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 7.72717 1.85318)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 4.00702 5.57343)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 7.72717 8.39862)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 4.00702 12.1189)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 7.72717 14.9441)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 4.00702 18.6643)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 7.72717 21.4895)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.5526 -0.972015)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.2728 1.85318)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.5526 5.57343)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.2728 8.39862)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.5526 12.1189)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.2728 14.9441)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.5526 18.6643)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 14.2728 21.4895)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.0982 -0.972015)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8183 1.85318)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.0982 5.57343)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8183 8.39862)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.0982 12.1189)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8183 14.9441)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 17.0982 18.6643)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 20.8183 21.4895)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 23.6434 -0.972015)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 23.6434 5.57343)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 23.6434 12.1189)" fill="#00BF36"/>
+<rect width="0.949402" height="3.046" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 23.6434 18.6643)" fill="#00BF36"/>
+</mask>
+<g mask="url(#mask0_288_2998)">
+<circle cx="12" cy="12" r="12" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_288_2998">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/styles/icons/proposed.svg b/frontend/src/styles/icons/proposed.svg
new file mode 100644
index 00000000..3b44d92c
--- /dev/null
+++ b/frontend/src/styles/icons/proposed.svg
@@ -0,0 +1,83 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_448_461)">
+<mask id="mask0_448_461" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-31" y="-6" width="84" height="31">
+<mask id="mask1_448_461" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="-34" y="-6" width="91" height="31">
+<rect x="2" width="1" height="1" fill="black"/>
+<rect x="5" width="1" height="1" fill="black"/>
+<rect x="8" width="1" height="1" fill="black"/>
+<rect x="11" width="1" height="1" fill="black"/>
+<rect x="14" width="1" height="1" fill="black"/>
+<rect x="17" width="1" height="1" fill="black"/>
+<rect x="20" width="1" height="1" fill="black"/>
+<rect x="23" width="1" height="1" fill="black"/>
+<rect x="2" y="3" width="1" height="1" fill="black"/>
+<rect x="5" y="3" width="1" height="1" fill="black"/>
+<rect x="8" y="3" width="1" height="1" fill="black"/>
+<rect x="11" y="3" width="1" height="1" fill="black"/>
+<rect x="14" y="3" width="1" height="1" fill="black"/>
+<rect x="17" y="3" width="1" height="1" fill="black"/>
+<rect x="20" y="3" width="1" height="1" fill="black"/>
+<rect x="23" y="3" width="1" height="1" fill="black"/>
+<rect x="2" y="6" width="1" height="1" fill="black"/>
+<rect x="5" y="6" width="1" height="1" fill="black"/>
+<rect x="8" y="6" width="1" height="1" fill="black"/>
+<rect x="11" y="6" width="1" height="1" fill="black"/>
+<rect x="14" y="6" width="1" height="1" fill="black"/>
+<rect x="17" y="6" width="1" height="1" fill="black"/>
+<rect x="20" y="6" width="1" height="1" fill="black"/>
+<rect x="23" y="6" width="1" height="1" fill="black"/>
+<rect x="2" y="9" width="1" height="1" fill="black"/>
+<rect x="5" y="9" width="1" height="1" fill="black"/>
+<rect x="8" y="9" width="1" height="1" fill="black"/>
+<rect x="11" y="9" width="1" height="1" fill="black"/>
+<rect x="14" y="9" width="1" height="1" fill="black"/>
+<rect x="17" y="9" width="1" height="1" fill="black"/>
+<rect x="20" y="9" width="1" height="1" fill="black"/>
+<rect x="23" y="9" width="1" height="1" fill="black"/>
+<rect x="2" y="12" width="1" height="1" fill="black"/>
+<rect x="5" y="12" width="1" height="1" fill="black"/>
+<rect x="8" y="12" width="1" height="1" fill="black"/>
+<rect x="11" y="12" width="1" height="1" fill="black"/>
+<rect x="14" y="12" width="1" height="1" fill="black"/>
+<rect x="17" y="12" width="1" height="1" fill="black"/>
+<rect x="20" y="12" width="1" height="1" fill="black"/>
+<rect x="23" y="12" width="1" height="1" fill="black"/>
+<rect x="2" y="15" width="1" height="1" fill="black"/>
+<rect x="5" y="15" width="1" height="1" fill="black"/>
+<rect x="8" y="15" width="1" height="1" fill="black"/>
+<rect x="11" y="15" width="1" height="1" fill="black"/>
+<rect x="14" y="15" width="1" height="1" fill="black"/>
+<rect x="17" y="15" width="1" height="1" fill="black"/>
+<rect x="20" y="15" width="1" height="1" fill="black"/>
+<rect x="23" y="15" width="1" height="1" fill="black"/>
+<rect x="2" y="18" width="1" height="1" fill="black"/>
+<rect x="5" y="18" width="1" height="1" fill="black"/>
+<rect x="8" y="18" width="1" height="1" fill="black"/>
+<rect x="11" y="18" width="1" height="1" fill="black"/>
+<rect x="14" y="18" width="1" height="1" fill="black"/>
+<rect x="17" y="18" width="1" height="1" fill="black"/>
+<rect x="20" y="18" width="1" height="1" fill="black"/>
+<rect x="23" y="18" width="1" height="1" fill="black"/>
+<rect x="2" y="21" width="1" height="1" fill="black"/>
+<rect x="5" y="21" width="1" height="1" fill="black"/>
+<rect x="8" y="21" width="1" height="1" fill="black"/>
+<rect x="11" y="21" width="1" height="1" fill="black"/>
+<rect x="14" y="21" width="1" height="1" fill="black"/>
+<rect x="17" y="21" width="1" height="1" fill="black"/>
+<rect x="20" y="21" width="1" height="1" fill="black"/>
+<rect x="23" y="21" width="1" height="1" fill="black"/>
+</mask>
+<g mask="url(#mask1_448_461)">
+<rect x="-31" y="-6" width="84" height="31" fill="black"/>
+</g>
+</mask>
+<g mask="url(#mask0_448_461)">
+<circle cx="12" cy="12" r="12" fill="black"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_448_461">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>