From a5cf52d9f206a475dd996871acc76a1c83667607 Mon Sep 17 00:00:00 2001
From: Federico De Marines <federicodemarines@MacBook-Pro-de-Federico.local>
Date: Wed, 7 Aug 2024 11:10:15 -0300
Subject: [PATCH 1/2] feat: change isUndefined for isEmpty in video and image

---
 .../src/components/custom/ImageViewer.tsx                     | 4 ++--
 .../src/components/custom/VideoView/VideoViewer.tsx           | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx b/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
index c556fdc..25a2ced 100644
--- a/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
+++ b/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
@@ -13,7 +13,7 @@
 
 
 import { Box, FormControl } from "@mui/material";
-import _isUndefined from "lodash/isUndefined";
+import _isEmpty from "lodash/isEmpty";
 export interface ImageViewerProps {
   id?: string;
   value?: string;
@@ -30,7 +30,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
   width,
   defaultUrl,
 }) => {
-  const url = _isUndefined(value) ? defaultUrl : value;
+  const url = _isEmpty(value) ? defaultUrl : value;
   return (
     <FormControl fullWidth>
       <Box
diff --git a/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx b/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
index 1eb42c5..d261cc8 100644
--- a/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
+++ b/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
@@ -15,7 +15,7 @@
 import { Box, Stack, FormControl } from "@mui/material";
 import React from "react";
 import ReactPlayer from "react-player";
-import _isUndefined from "lodash/isUndefined";
+import _isEmpty from "lodash/isEmpty";
 
 export interface VideoViewerProps {
   id?: string;
@@ -32,7 +32,7 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
   width,
   defaultUrl,
 }) => {
-  const url = _isUndefined(value) ? defaultUrl : value;
+  const url = _isEmpty(value) ? defaultUrl : value;
   return (
     <FormControl fullWidth>
       <Stack

From 821c8538bdc82efa7e2066d5a012f56163214808 Mon Sep 17 00:00:00 2001
From: Federico De Marines <federicodemarines@MacBook-Pro-de-Federico.local>
Date: Wed, 7 Aug 2024 11:19:21 -0300
Subject: [PATCH 2/2] Add marginBottom to some components

---
 .../src/components/custom/Boolean/Boolean.tsx                   | 1 +
 .../src/components/custom/DescriptionText.tsx                   | 1 +
 .../src/components/custom/ImageViewer.tsx                       | 2 +-
 .../src/components/custom/VideoView/VideoViewer.tsx             | 1 +
 4 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/react/human-task-material-renderers/src/components/custom/Boolean/Boolean.tsx b/react/human-task-material-renderers/src/components/custom/Boolean/Boolean.tsx
index 8b91ab6..651cd14 100644
--- a/react/human-task-material-renderers/src/components/custom/Boolean/Boolean.tsx
+++ b/react/human-task-material-renderers/src/components/custom/Boolean/Boolean.tsx
@@ -45,6 +45,7 @@ const Boolean: React.FC<BooleanProps> = ({
       checked={!_isUndefined(value) ? value : defaultValue}
       disabled={readonly}
       required={required}
+      sx={{ marginBottom: "4px" }}
     />
   );
 };
diff --git a/react/human-task-material-renderers/src/components/custom/DescriptionText.tsx b/react/human-task-material-renderers/src/components/custom/DescriptionText.tsx
index 2e85834..61bcb4e 100644
--- a/react/human-task-material-renderers/src/components/custom/DescriptionText.tsx
+++ b/react/human-task-material-renderers/src/components/custom/DescriptionText.tsx
@@ -61,6 +61,7 @@ export const DescriptionText: React.FC<DescriptionTextProps> = ({
         noWrap={noWrap}
         paragraph={paragraph}
         whiteSpace={preWrap ? "pre-wrap" : "normal"}
+        sx={{ marginBottom: "4px" }}
       >
         {_isUndefined(value) ? label : value}
       </Typography>
diff --git a/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx b/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
index 25a2ced..56fe0f3 100644
--- a/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
+++ b/react/human-task-material-renderers/src/components/custom/ImageViewer.tsx
@@ -45,7 +45,7 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
             height={height}
             width={width}
             alt=""
-            style={{ maxWidth: "100%" }}
+            style={{ maxWidth: "100%", marginBottom: "4px" }}
           />
         ) : (
           " No Image to preview"
diff --git a/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx b/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
index d261cc8..d9c2b95 100644
--- a/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
+++ b/react/human-task-material-renderers/src/components/custom/VideoView/VideoViewer.tsx
@@ -48,6 +48,7 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
             justifyContent: "center",
             width: "100%",
             maxWidth: "100%",
+            marginBottom: '4px',
             ">div": {
               maxWidth: "600px ",
               maxHeight: "500px",