From facde7ace04807dede6fd704c8663d6c5d6620d0 Mon Sep 17 00:00:00 2001
From: Lipis <lipiridis@gmail.com>
Date: Wed, 4 Nov 2020 12:05:12 +0200
Subject: [PATCH] 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 |  6 +-----
 src/components/Island.tsx      |  2 +-
 src/components/LayerUI.tsx     |  7 ++++++-
 src/components/Modal.tsx       | 12 +++++-------
 src/components/Stack.tsx       | 27 +++++++++++++--------------
 src/css.d.ts                   | 10 ++++++++++
 6 files changed, 36 insertions(+), 28 deletions(-)
 create mode 100644 src/css.d.ts

diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index b3f923fa64..1ed9bf1b0d 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -260,11 +260,7 @@ export const ColorPicker = ({
         <button
           className="color-picker-label-swatch"
           aria-label={label}
-          style={
-            color
-              ? ({ "--swatch-color": color } as React.CSSProperties)
-              : undefined
-          }
+          style={color ? { "--swatch-color": color } : undefined}
           onClick={() => setActive(!isActive)}
           ref={pickerButton}
         />
diff --git a/src/components/Island.tsx b/src/components/Island.tsx
index 787ebc6b89..7baf307a06 100644
--- a/src/components/Island.tsx
+++ b/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}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index e9afd2b17b..f8f8b41bb7 100644
--- a/src/components/LayerUI.tsx
+++ b/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"
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 0c518071fb..7fcfbf4df8 100644
--- a/src/components/Modal.tsx
+++ b/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={
-          {
-            "--max-width": `${props.maxWidth}px`,
-            maxHeight: "100%",
-            overflowY: "scroll",
-          } as any
-        }
+        style={{
+          "--max-width": `${props.maxWidth}px`,
+          maxHeight: "100%",
+          overflowY: "scroll",
+        }}
       >
         {props.children}
       </div>
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index 170ebf7f5e..cf937493f7 100644
--- a/src/components/Stack.tsx
+++ b/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={
-        {
-          "--gap": gap,
-          alignItems: align,
-          justifyContent,
-        } as React.CSSProperties
-      }
+      style={{
+        "--gap": gap,
+        alignItems: align,
+        justifyContent,
+        ...style,
+      }}
     >
       {children}
     </div>
@@ -44,13 +45,11 @@ const ColStack = ({
   return (
     <div
       className={clsx("Stack Stack_vertical", className)}
-      style={
-        {
-          "--gap": gap,
-          justifyItems: align,
-          justifyContent,
-        } as React.CSSProperties
-      }
+      style={{
+        "--gap": gap,
+        justifyItems: align,
+        justifyContent,
+      }}
     >
       {children}
     </div>
diff --git a/src/css.d.ts b/src/css.d.ts
new file mode 100644
index 0000000000..2246ba897b
--- /dev/null
+++ b/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;
+  }
+}