feat: updates rectangle styling

src/assets/grid-tile-bg.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.38828 163.26061">
-  <g stroke="#cecece" stroke-width="1" stroke-alignment="center">
+  <g stroke="#000000" stroke-opacity="0.15" stroke-width="1" stroke-alignment="center">
     <polygon points="70.69436 122.44546 .00022 81.63018 70.69392 40.81515 141.38806 81.63043 70.69436 122.44546" fill="none"/>
     <line x1="70.69414" y1="40.81503" x2="141.38784" />
     <line y1="0" x2="70.69414" y2="40.81528" />

src/components/Rectangles/Rectangle/Rectangle.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import chroma from 'chroma-js';
 import { Coords } from 'src/types';
 import { IsoTileArea } from 'src/components/IsoTileArea/IsoTileArea';
 import { useUiStateStore } from 'src/stores/uiStateStore';
+import { getColorVariant } from 'src/utils';
 
 interface Props {
   from: Coords;
@@ -19,11 +19,11 @@ export const Rectangle = ({ from, to, color }: Props) => {
     <IsoTileArea
       from={from}
       to={to}
-      fill={chroma(color).alpha(0.6).css()}
+      fill={color}
       zoom={zoom}
       cornerRadius={22 * zoom}
       stroke={{
-        color,
+        color: getColorVariant(color, 'dark', { grade: 2 }),
         width: 1 * zoom
       }}
     />

src/components/Renderer/Renderer.tsx

@@ -50,6 +50,9 @@ export const Renderer = () => {
         height: '100%'
       }}
     >
+      <SceneLayer>
+        <Rectangles />
+      </SceneLayer>
       <SceneLayer>
         <Grid />
       </SceneLayer>
@@ -58,9 +61,6 @@ export const Renderer = () => {
           <Cursor />
         </SceneLayer>
       )}
-      <SceneLayer>
-        <Rectangles />
-      </SceneLayer>
       <SceneLayer>
         <Connectors />
       </SceneLayer>