From 76390ceb9dadc41935706180a12759b4a0d09322 Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Tue, 2 Apr 2024 14:09:18 +1100
Subject: [PATCH] fix: hero image is now correctly responsive for both width
 and height

---
 .../registration/components/Hero.tsx          | 53 +++++--------------
 1 file changed, 12 insertions(+), 41 deletions(-)

diff --git a/ts/components/registration/components/Hero.tsx b/ts/components/registration/components/Hero.tsx
index 69cd8ad23..3abcf7fb6 100644
--- a/ts/components/registration/components/Hero.tsx
+++ b/ts/components/registration/components/Hero.tsx
@@ -1,58 +1,29 @@
-import { useEffect, useState } from 'react';
-import { useWindowSize } from 'react-use';
 import styled from 'styled-components';
 
-type PositionWithinContainer = 'left' | 'right';
-
-const StyledHeroContainer = styled.div<{ positionWithinContainer: PositionWithinContainer }>`
-  position: relative;
+const StyledHeroContainer = styled.div`
   width: 40%;
   height: 100%;
-  overflow: hidden;
-  z-index: 0;
 
-  &:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 20px;
+  div {
+    width: 100%;
     height: 100%;
-    background-image: linear-gradient(to right, rgba(27, 27, 27, 0), rgba(27, 27, 27, 1));
+    overflow: hidden;
   }
 `;
 
-const StyledHero = styled.img<{
-  positionWithinContainer: PositionWithinContainer;
-}>`
-  width: auto;
+const StyledHero = styled.img`
+  width: 100%;
   height: 100%;
-  position: absolute;
-  top: 50%;
-  ${props => (props.positionWithinContainer === 'right' ? 'right: -16px;' : 'left: -80px;')}
-  transform: translateY(-50%);
+  object-fit: cover;
+  object-position: right center;
 `;
 
 export const Hero = () => {
-  const [positionWithinContainer, setPositionWithinContainer] = useState<PositionWithinContainer>(
-    'left'
-  );
-
-  const { width } = useWindowSize();
-
-  useEffect(() => {
-    if (width) {
-      if (width <= 1920) {
-        setPositionWithinContainer('right');
-      } else {
-        setPositionWithinContainer('left');
-      }
-    }
-  }, [width]);
-
   return (
-    <StyledHeroContainer positionWithinContainer={positionWithinContainer}>
-      <StyledHero src={'images/hero.png'} positionWithinContainer={positionWithinContainer} />
+    <StyledHeroContainer>
+      <div>
+        <StyledHero src={'images/hero.png'} />
+      </div>
     </StyledHeroContainer>
   );
 };