Footer and Modal Scroll Enhancements

This commit introduces improvements to the Footer and Modal Scroll behavior.

Changes include:

Footer: Now, a div in the footer will not be rendered if it has no content. This optimizes the rendering process and improves the overall performance of the application.

Modal Scroll: The shadow styles are now applied immediately when the user starts to scroll. This provides a more responsive and visually appealing user experience.

Author: Hector Arce De Las Heras

src/components/footer/components/footerContent.tsx

@@ -8,14 +8,24 @@ interface IFooterContent {
   contentDirection?: ContentDirectionType;
   forceVertical?: boolean;
   children: React.ReactNode[];
+  margin?: boolean;
+  marginLeft?: boolean;
+  marginRight?: boolean;
 }
 
 export const FooterContent = (props: IFooterContent): JSX.Element | null => {
   // always returned something, cause we need to put container to flex direction
   const flexDirectionDesktopTablet = props.forceVertical ? 'column' : 'row';
 
+  if (!props.children.length) {
+    return null;
+  }
+
   return (
     <FooterContentStyled
+      $margin={props.margin}
+      $marginLeft={props.marginLeft}
+      $marginRight={props.marginRight}
       aria-hidden={!props.children.length}
       contentDirection={props.contentDirection}
       flexDirectionDesktopTablet={flexDirectionDesktopTablet}

src/components/footer/footer.styled.ts

@@ -10,6 +10,9 @@ type FooterStylesType = {
   contentDirection?: ContentDirectionType;
   flexDirectionDesktopTablet?: string;
   alignItems?: string;
+  $margin?: boolean;
+  $marginLeft?: boolean;
+  $marginRight?: boolean;
 };
 
 type RootContainerStyledType = FooterStylesType & {
@@ -36,4 +39,7 @@ export const FooterContentStyled = styled.div<FooterStylesType>`
   justify-content: ${props =>
     props.contentDirection === ContentDirectionType.HORIZONTAL ? 'flex-start' : 'center'};
   ${props => getStyles(props.styles?.contentContainer)}
+  margin: ${props => props.$margin && 'auto'};
+  margin-left: ${props => props.$marginLeft && 'auto'};
+  margin-right: ${props => props.$marginRight && 'auto'};
 `;

src/components/footer/footerStandAlone.tsx

@@ -80,20 +80,23 @@ const FooterStandAloneComponent = (
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            marginRight={true}
             styles={props.styles}
           >
             {firstContent}
           </FooterContent>
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            margin={true}
             styles={props.styles}
           >
             {secondContent}
           </FooterContent>
           <FooterContent
             contentDirection={props.contentDirection}
             forceVertical={props.forceVertical}
+            marginLeft={true}
             styles={props.styles}
           >
             {thridContent}

src/hooks/useScrollEffect/useScrollEffect.tsx

@@ -15,7 +15,7 @@ const defaultShadow = 'none';
 export const useScrollEffect = (
   conditional = true,
   shadowStyles = defaultShadow,
-  shadowVisible = 99
+  shadowVisible = 1
 ): CustomHookReturnValue => {
   // the scrollable element ref
   const innerScrollableRef = useRef<HTMLElement | null>(null);