fix box shadow

constantgillet · Jun 12, 2024 · 80b53e0 · 80b53e0
1 parent 7b7c720
commit 80b53e0
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 60 deletions.
diff --git a/app/components/RectElement.tsx b/app/components/RectElement.tsx
@@ -6,40 +6,40 @@ import type { RectElement as RectElementType } from "~/stores/elementTypes";
 type ReactElementProps = RectElementType;
 
 export const RectElement = (props: ReactElementProps) => {
-  return (
-    <div
-      className={cx(
-        "target",
-        css({
-          position: "absolute",
-          _hover: {
-            outline: "1px solid #4af",
-            outlineOffset: "-1px",
-          },
-        })
-      )}
-      {...{
-        [DATA_SCENA_ELEMENT_ID]: props.id,
-      }}
-      style={{
-        transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
-        width: props.width,
-        height: props.height,
-        backgroundColor: addAlphaToHex(
-          props.backgroundColor,
-          props.backgroundOpacity
-        ),
-        borderTopLeftRadius: props.borderTopLeftRadius,
-        borderTopRightRadius: props.borderTopRightRadius,
-        borderBottomLeftRadius: props.borderBottomLeftRadius,
-        borderBottomRightRadius: props.borderBottomRightRadius,
-        boxShadow:
-          props.borderColor && props.borderType && props.borderWidth
-            ? `${props.borderColor} 0px 0px 0px ${props.borderWidth}px ${
-                props.borderType === "inside" ? "inset" : ""
-              }`
-            : "none",
-      }}
-    />
-  );
+	return (
+		<div
+			className={cx(
+				"target",
+				css({
+					position: "absolute",
+					_hover: {
+						outline: "1px solid #4af",
+						outlineOffset: "-1px",
+					},
+				}),
+			)}
+			{...{
+				[DATA_SCENA_ELEMENT_ID]: props.id,
+			}}
+			style={{
+				transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
+				width: props.width,
+				height: props.height,
+				backgroundColor: addAlphaToHex(
+					props.backgroundColor,
+					props.backgroundOpacity,
+				),
+				borderTopLeftRadius: props.borderTopLeftRadius,
+				borderTopRightRadius: props.borderTopRightRadius,
+				borderBottomLeftRadius: props.borderBottomLeftRadius,
+				borderBottomRightRadius: props.borderBottomRightRadius,
+				boxShadow:
+					props.borderColor && props.borderType && props.borderWidth
+						? `0px 0px 0px ${props.borderWidth}px ${
+								props.borderType === "inside" ? "inset" : ""
+							} ${props.borderColor}`
+						: "none",
+			}}
+		/>
+	);
 };
diff --git a/app/render-components/RectElementRendered.tsx b/app/render-components/RectElementRendered.tsx
@@ -4,28 +4,28 @@ import { addAlphaToHex } from "~/utils/addAlphaToHex";
 type RectElementProps = RectElement;
 
 export const RectElementRendered = (props: RectElementProps) => {
-  return (
-    <div
-      style={{
-        position: "absolute",
-        transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
-        width: props.width,
-        height: props.height,
-        backgroundColor: addAlphaToHex(
-          props.backgroundColor,
-          props.backgroundOpacity
-        ),
-        borderTopLeftRadius: props.borderTopLeftRadius,
-        borderTopRightRadius: props.borderTopRightRadius,
-        borderBottomLeftRadius: props.borderBottomLeftRadius,
-        borderBottomRightRadius: props.borderBottomRightRadius,
-        boxShadow:
-          props.borderColor && props.borderType && props.borderWidth
-            ? `${props.borderColor} 0px 0px 0px ${props.borderWidth}px ${
-                props.borderType === "inside" ? "inset" : ""
-              }`
-            : "none",
-      }}
-    />
-  );
+	return (
+		<div
+			style={{
+				position: "absolute",
+				transform: `translate(${props.x}px, ${props.y}px) rotate(${props.rotate}deg)`,
+				width: props.width,
+				height: props.height,
+				backgroundColor: addAlphaToHex(
+					props.backgroundColor,
+					props.backgroundOpacity,
+				),
+				borderTopLeftRadius: props.borderTopLeftRadius,
+				borderTopRightRadius: props.borderTopRightRadius,
+				borderBottomLeftRadius: props.borderBottomLeftRadius,
+				borderBottomRightRadius: props.borderBottomRightRadius,
+				boxShadow:
+					props.borderColor && props.borderType && props.borderWidth
+						? `0px 0px 0px ${props.borderWidth}px ${
+								props.borderType === "inside" ? "inset" : ""
+							} ${props.borderColor}`
+						: "none",
+			}}
+		/>
+	);
 };