Add styling to Upload and Link

Author: cursork

.gitignore

@@ -28,3 +28,6 @@ dist-ssr
 
 # Licenses / secrets
 kendo-ui-license.txt
+
+# Personal TODOs
+TODO.md

src/components/Link/index.jsx

@@ -1,17 +1,33 @@
-import { setStyle } from "../../utils";
+import { setStyle, getFontStyles, parseFlexStyles } from "../../utils";
+import { useAppData } from "../../hooks";
 
 const Link = ({data}) => {
-    const style = setStyle(data.Properties)
+    const { findCurrentData, inheritedProperties } = useAppData();
+
+    const styles = setStyle(data?.Properties);
+    const { CSS, Visible } = data?.Properties || {};
+    const { FontObj } = inheritedProperties(data, 'FontObj');
+
+    const customStyles = parseFlexStyles(CSS);
+    const font = findCurrentData(FontObj);
+    const fontStyles = getFontStyles(font, 12);
+
     return (
-        <div>
-            <a 
+        <div
+            id={data.ID + ".$CONTAINER"}
+            style={{
+                ...styles,
+                display: Visible === 0 ? "none" : "block",
+            }}
+        >
+            <a
                 id={data.ID}
                 href={data.Properties.Href}
-                target={data.Properties?.Target || '_blank'} // Default to new tab/window
+                target={data.Properties?.Target || '_blank'}
                 download={data.Properties?.Download === 1}
-
                 style={{
-                    ...style
+                    ...customStyles,
+                    ...fontStyles,
                 }}
             >
                 {data.Properties?.Label !== undefined ? data.Properties.Label : data.Properties.Href}

src/components/Upload/index.jsx

@@ -1,9 +1,36 @@
 import wgResponse from "../../utils/wgResponse";
+import { setStyle, getFontStyles, parseFlexStyles } from "../../utils";
+import { useAppData } from "../../hooks";
 
 const Upload = ({ data }) => {
+  const { findCurrentData, inheritedProperties } = useAppData();
+
+  const styles = setStyle(data?.Properties);
+  const { CSS, Visible } = data?.Properties || {};
+  const { FontObj } = inheritedProperties(data, 'FontObj');
+
+  const customStyles = parseFlexStyles(CSS);
+  const font = findCurrentData(FontObj);
+  const fontStyles = getFontStyles(font, 12);
+
   return (
-    <div>
-      <input id={data.ID} type="file" />
+    <div
+      id={data.ID + ".$CONTAINER"}
+      style={{
+        ...styles,
+        display: Visible === 0 ? "none" : "block",
+      }}
+    >
+      <input
+        id={data.ID}
+        type="file"
+        style={{
+          ...customStyles,
+          ...fontStyles,
+          width: "100%",
+          height: "100%",
+        }}
+      />
     </div>
   );
 };