Fix padding in the library loading buttons (#2331)

* Fix padding in the library loading buttons

* Update src/components/Stack.tsx

Co-authored-by: Dominic Lee <34794189+dominictwlee@users.noreply.github.com>

* extend CSSProperties TS definition

Co-authored-by: Dominic Lee <34794189+dominictwlee@users.noreply.github.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/ColorPicker.tsx

@@ -260,11 +260,7 @@ export const ColorPicker = ({
         <button
           className="color-picker-label-swatch"
           aria-label={label}
-          style={
+          style={color ? { "--swatch-color": color } : undefined}
-            color
-              ? ({ "--swatch-color": color } as React.CSSProperties)
-              : undefined
-          }
           onClick={() => setActive(!isActive)}
           ref={pickerButton}
         />

src/components/Island.tsx

@@ -14,7 +14,7 @@ export const Island = React.forwardRef<HTMLDivElement, IslandProps>(
   ({ children, padding, className, style }, ref) => (
     <div
       className={clsx("Island", className)}
-      style={{ "--padding": padding, ...style } as React.CSSProperties}
+      style={{ "--padding": padding, ...style }}
       ref={ref}
     >
       {children}

src/components/LayerUI.tsx

@@ -114,7 +114,12 @@ const LibraryMenuItems = ({
   let addedPendingElements = false;
 
   rows.push(
-    <Stack.Row align="center" gap={1} key={"actions"}>
+    <Stack.Row
+      align="center"
+      gap={1}
+      key={"actions"}
+      style={{ padding: "2px 0" }}
+    >
       <ToolButton
         key="import"
         type="button"

src/components/Modal.tsx

@@ -36,13 +36,11 @@ export const Modal = (props: {
       <div className="Modal__background" onClick={props.onCloseRequest}></div>
       <div
         className="Modal__content"
-        style={
+        style={{
-          {
+          "--max-width": `${props.maxWidth}px`,
-            "--max-width": `${props.maxWidth}px`,
+          maxHeight: "100%",
-            maxHeight: "100%",
+          overflowY: "scroll",
-            overflowY: "scroll",
+        }}
-          } as any
-        }
       >
         {props.children}
       </div>

src/components/Stack.tsx

@@ -9,6 +9,7 @@ type StackProps = {
   align?: "start" | "center" | "end" | "baseline";
   justifyContent?: "center" | "space-around" | "space-between";
   className?: string | boolean;
+  style?: React.CSSProperties;
 };
 
 const RowStack = ({
@@ -17,17 +18,17 @@ const RowStack = ({
   align,
   justifyContent,
   className,
+  style,
 }: StackProps) => {
   return (
     <div
       className={clsx("Stack Stack_horizontal", className)}
-      style={
+      style={{
-        {
+        "--gap": gap,
-          "--gap": gap,
+        alignItems: align,
-          alignItems: align,
+        justifyContent,
-          justifyContent,
+        ...style,
-        } as React.CSSProperties
+      }}
-      }
     >
       {children}
     </div>
@@ -44,13 +45,11 @@ const ColStack = ({
   return (
     <div
       className={clsx("Stack Stack_vertical", className)}
-      style={
+      style={{
-        {
+        "--gap": gap,
-          "--gap": gap,
+        justifyItems: align,
-          justifyItems: align,
+        justifyContent,
-          justifyContent,
+      }}
-        } as React.CSSProperties
-      }
     >
       {children}
     </div>

src/css.d.ts

@@ -0,0 +1,10 @@
+import "csstype";
+
+declare module "csstype" {
+  interface Properties {
+    "--max-width"?: number | string;
+    "--swatch-color"?: string;
+    "--gap"?: number | string;
+    "--padding"?: number | string;
+  }
+}