Modified square and star shapes

src/components/time/atoms/DatetimeSquare.js

@@ -14,11 +14,11 @@ const DatetimeSquare = ({
       onClick={onSelect}
       className="event"
       x={x}
-      y={y - r}
+      y={y}
       style={styleProps}
       width={r}
       height={r}
-      transform={`rotate(45, ${x}, ${y})`}
+      transform={transform}
     />
   );
 };

src/components/time/atoms/DatetimeStar.js

@@ -20,7 +20,7 @@ const DatetimeStar = ({
       points={`${x + s},${y - s} ${x - r},${y} ${x + r},${y} ${x - s},${
         y - s
       } ${x},${y + s}`}
-      transform={`rotate(180, ${x}, ${y})`}
+      transform={transform}
     />
   );
 };

src/components/time/atoms/Events.js

@@ -68,7 +68,20 @@ function renderDiamond(event, styles, props) {
     <DatetimeSquare
       onSelect={props.onSelect}
       x={props.x}
-      y={props.y}
+      y={props.y - 1.8 * props.eventRadius}
+      r={1.8 * props.eventRadius}
+      styleProps={styles}
+      transform={`rotate(45, ${props.x}, ${props.y})`}
+    />
+  );
+}
+
+function renderSquare(event, styles, props) {
+  return (
+    <DatetimeSquare
+      onSelect={props.onSelect}
+      x={props.x}
+      y={props.y - (1.8 * props.eventRadius) / 2}
       r={1.8 * props.eventRadius}
       styleProps={styles}
     />
@@ -107,7 +120,7 @@ function renderStar(event, styles, props) {
       y={props.y}
       r={1.8 * props.eventRadius}
       styleProps={{ ...styles, fillRule: "nonzero" }}
-      transform="rotate(90)"
+      transform={`rotate(180, ${props.x}, ${props.y})`}
     />
   );
 }
@@ -155,6 +168,8 @@ const TimelineEvents = ({
         renderShape = renderTriangle;
       } else if (event.shape === "pentagon") {
         renderShape = renderPentagon;
+      } else if (event.shape === "square") {
+        renderShape = renderSquare;
       } else {
         renderShape = renderDot;
       }