From c3bba744ef536a72e160905d88a632cbc308f3be Mon Sep 17 00:00:00 2001
From: luxumbra <me@luxumbra.dev>
Date: Tue, 30 Jan 2024 21:02:35 +0000
Subject: [PATCH] commit small changes and revert removal of {...props}

---
 .../design-system/src/icons/ChevronRight.tsx  |  8 +++----
 .../web/components/Background/Starfield.tsx   | 24 +++++++------------
 packages/web/components/Container.tsx         |  5 ++--
 3 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/icons/ChevronRight.tsx b/packages/design-system/src/icons/ChevronRight.tsx
index fa4276aa..237e851a 100644
--- a/packages/design-system/src/icons/ChevronRight.tsx
+++ b/packages/design-system/src/icons/ChevronRight.tsx
@@ -8,10 +8,10 @@ export const ChevronRight = createIcon({
       d="M33.333 20L53.333 40L33.333 60"
       stroke="white"
       fill="transparent"
-      stroke-opacity="0.8"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
+      strokeOpacity="0.8"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
     />
   ),
   viewBox: '0 0 80 80',
diff --git a/packages/web/components/Background/Starfield.tsx b/packages/web/components/Background/Starfield.tsx
index 426ace0e..51549aca 100644
--- a/packages/web/components/Background/Starfield.tsx
+++ b/packages/web/components/Background/Starfield.tsx
@@ -1,4 +1,3 @@
-import { useBreakpointValue, useMediaQuery } from '@metafam/ds';
 import {
   PerspectiveCamera,
   Sparkles,
@@ -63,28 +62,23 @@ function Starfield({ animateStars = true }: StarfieldProps) {
     : null;
   const pageContainer = scrollContainer ? scrollContainer.querySelector('.full-page-container') : null;
   const starCount = 600
-  const [prefersReducedMotion] = useMediaQuery(
-    '(prefers-reduced-motion: reduce)',
-  );
-
-  const isAnimating = !prefersReducedMotion && animateStars;
 
   const starfieldConfig = useMemo(
     () => ({
       objectsDistance: 4,
-      animate: isAnimating,
+      animate: animateStars,
       sparkles: {
         size: 10,
         opacity: 0.3,
         count: starCount,
         scale: new THREE.Vector3(30, 40, 40),
         positionY: 1,
-        speed: isAnimating ? 0.2 : 0,
+        speed: animateStars ? 0.2 : 0,
         material: StarMaterial,
         color: new THREE.Color(0xf1f1f1),
       },
     }),
-    [starCount, isAnimating],
+    [starCount, animateStars],
   );
   const { objectsDistance, sparkles, animate } = starfieldConfig;
 
@@ -100,8 +94,9 @@ function Starfield({ animateStars = true }: StarfieldProps) {
   }, [scrollContainer]);
 
   const handleScroll = useCallback(() => {
-    if (!pageContainer) return;
-    const { scrollTop } = pageContainer;
+    if (!pageContainer || !scrollContainer) return;
+
+    const { scrollTop } = scrollContainer;
     scrollY.current = scrollTop ?? window.scrollY;
 
     const newSection = Math.round(scrollY.current / sizes.current.height);
@@ -109,7 +104,7 @@ function Starfield({ animateStars = true }: StarfieldProps) {
       currentSection.current = newSection;
     }
 
-  }, [pageContainer]);
+  }, [pageContainer, scrollContainer]);
 
   const mousemoveHandler = useCallback((event: MouseEvent) => {
     cursor.current.x = event.clientX / sizes.current.width - 0.3;
@@ -121,7 +116,6 @@ function Starfield({ animateStars = true }: StarfieldProps) {
 
   useEffect(() => {
     if (typeof window !== 'undefined') {
-
       // Set initial sizes based on the display
       sizes.current = {
         width: window.innerWidth,
@@ -131,13 +125,13 @@ function Starfield({ animateStars = true }: StarfieldProps) {
       // Set initial scroll position
       scrollY.current = pageContainer ? pageContainer.scrollTop : window.scrollY;
 
-      pageContainer?.addEventListener('scroll', handleScroll);
+      scrollContainer?.addEventListener('scroll', handleScroll);
       window.addEventListener('resize', resizeHandler);
       window.addEventListener('mousemove', mousemoveHandler);
     }
 
     return () => {
-      pageContainer?.removeEventListener('scroll', handleScroll);
+      scrollContainer?.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', resizeHandler);
       window.removeEventListener('mousemove', mousemoveHandler);
     };
diff --git a/packages/web/components/Container.tsx b/packages/web/components/Container.tsx
index 12321fdf..540ae223 100644
--- a/packages/web/components/Container.tsx
+++ b/packages/web/components/Container.tsx
@@ -12,6 +12,7 @@ const PageContainer: React.FC<FlexProps> = ({ children, ...props }) => (
     align="center"
     pos="relative"
     bgImage={''}
+    {...props}
   >
     {children}
   </Flex>
@@ -20,7 +21,7 @@ const PageContainer: React.FC<FlexProps> = ({ children, ...props }) => (
 export default PageContainer;
 
 export const FlexContainer: React.FC<StackProps> = ({ children, ...props }) => (
-  <Stack className="flex-container" w="full" align="center" justify="center" spacing={[6, 8]}>
+  <Stack className="flex-container" w="full" align="center" justify="center" spacing={[6, 8]} {...props}>
     {children}
   </Stack>
 );
@@ -37,7 +38,7 @@ export const EmbedContainer: React.FC<EmbedProps> = ({
   url,
   ...props
 }) => (
-  <Flex w="100%" h="100%" direction="column">
+  <Flex w="100%" h="100%" direction="column" {...props} >
     <HeadComponent title={title} description={description} url={url} />
     <iframe
       title={title}