feat: added responsive hero

cleaned up some sass and changed to styled components

stylesheets/_session_signin.scss

@@ -1,57 +1,5 @@
 .session {
-  &-fullscreen {
-    width: 100%;
-    height: 100%;
-    background-color: var(--background-primary-color);
-    color: var(--text-primary-color);
-  }
-  &-content {
-    &-accent {
-      &-text {
-        font-family: var(--font-accent), var(--font-default);
-        text-align: center;
-        .title {
-          font-size: 90px;
-          font-weight: 700;
-          line-height: 100px;
-        }
-      }
-    }
-
-    &-registration {
-      padding-inline-end: 128px;
-    }
-
-    &-header {
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      justify-content: space-between;
-      padding: 17px 20px;
-    }
-
-    &-body {
-      display: flex;
-      flex-direction: row;
-      flex: 1;
-      align-items: center;
-      width: 100%;
-      padding-bottom: 20px;
-    }
-  }
-
   &-registration {
-    &-container {
-      display: flex;
-      flex-direction: column;
-      width: 289px;
-
-      .session-button {
-        width: 80%;
-        margin: auto;
-      }
-    }
-
     &__content {
       width: 100%;
       padding-top: 20px;

ts/components/registration/RegistrationStages.tsx

@@ -1,5 +1,6 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 import { Provider } from 'react-redux';
+import styled from 'styled-components';
 import { Data } from '../../data/data';
 import { SettingsKey } from '../../data/settings-key';
 import { getSwarmPollingInstance } from '../../session/apis/snode_api';
@@ -17,10 +18,20 @@ import {
   signInByLinkingDevice,
 } from '../../util/accountManager';
 import { Storage, setSignInByLinking, setSignWithRecoveryPhrase } from '../../util/storage';
+import { Flex } from '../basic/Flex';
 import { ModalContainer } from './ModalContainer';
 import { SignInMode, SignInTab } from './SignInTab';
 import { SignUpMode, SignUpTab } from './SignUpTab';
 
+const StyledRegistrationContainer = styled(Flex)`
+  width: 289px;
+
+  .session-button {
+    width: 80%;
+    margin: auto;
+  }
+`;
+
 export async function resetRegistration() {
   await Data.removeAll();
   Storage.reset();
@@ -240,14 +251,14 @@ export const RegistrationStages = () => {
   return (
     <Provider store={onboardingStore}>
       <ModalContainer />
-      <div className="session-registration-container">
+      <StyledRegistrationContainer container={true} flexDirection="column">
         <RegistrationContext.Provider value={memoizedValue}>
           {(registrationPhase === RegistrationPhase.Start ||
             registrationPhase === RegistrationPhase.SignUp) && <SignUpTab />}
           {(registrationPhase === RegistrationPhase.Start ||
             registrationPhase === RegistrationPhase.SignIn) && <SignInTab />}
         </RegistrationContext.Provider>
-      </div>
+      </StyledRegistrationContainer>
     </Provider>
   );
 };

ts/components/registration/SessionRegistrationView.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import styled from 'styled-components';
 import { AccentText } from './AccentText';
 
 import { SessionTheme } from '../../themes/SessionTheme';
@@ -7,32 +8,77 @@ import { SessionToastContainer } from '../SessionToastContainer';
 import { Flex } from '../basic/Flex';
 import { SessionIcon } from '../icon';
 import { RegistrationStages } from './RegistrationStages';
+import { Hero } from './components';
+
+const StyledFullscreenContainer = styled(Flex)`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-primary-color);
+  color: var(--text-primary-color);
+`;
+
+const StyledSessionContent = styled(Flex)`
+  z-index: 1;
+  &-accent {
+    &-text {
+      font-family: var(--font-accent), var(--font-default);
+      text-align: center;
+      .title {
+        font-size: 90px;
+        font-weight: 700;
+        line-height: 100px;
+      }
+    }
+  }
+
+  &-registration {
+    padding-inline-end: 128px;
+  }
+
+  &-header {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    padding: 17px 20px;
+  }
+
+  &-body {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    align-items: center;
+    width: 100%;
+    padding-bottom: 20px;
+  }
+`;
 
 export const SessionRegistrationView = () => {
   useEffect(() => {
     void setSignInByLinking(false);
   }, []);
+
   return (
     <SessionTheme>
-      <div className="session-fullscreen">
+      <StyledFullscreenContainer container={true} alignItems="center">
-        <div className="session-full-screen-flow session-fullscreen">
+        <Hero />
-          <Flex
+        <StyledSessionContent
-            className="session-content"
+          flexDirection="column"
-            alignItems="center"
+          alignItems="center"
-            flexDirection="column"
+          container={true}
-            container={true}
+          height="100%"
-            height="100%"
+          flexGrow={1}
-          >
+        >
-            <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
+          <Flex container={true} margin="auto" alignItems="center" flexDirection="column">
-              <SessionToastContainer />
+            <SessionToastContainer />
-              <SessionIcon iconSize={150} iconType="brand" />
+            <SessionIcon iconSize={150} iconType="brand" />
-
+
-              <AccentText />
+            <AccentText />
-              <RegistrationStages />
+            <RegistrationStages />
-            </Flex>
           </Flex>
-        </div>
+        </StyledSessionContent>
-      </div>
+      </StyledFullscreenContainer>
     </SessionTheme>
   );
 };

ts/components/registration/components/Hero.tsx

@@ -0,0 +1,75 @@
+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;
+  width: 40%;
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
+
+  // TODO[epic=ses-50] remove this when we have the new mockup with narrower shadows if needed
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: ${props => (props.positionWithinContainer === 'right' ? '0' : '290px')};
+    width: 20px;
+    height: 100%;
+    background-image: linear-gradient(to right, rgba(27, 27, 27, 0), rgba(27, 27, 27, 1));
+  }
+`;
+
+const StyledHero = styled.img<{
+  scaleFactor: number;
+  positionWithinContainer: PositionWithinContainer;
+}>`
+  width: auto;
+  ${props => props.scaleFactor && `height: calc(3701px / ${props.scaleFactor});`}
+  position: absolute;
+  top: 50%;
+  ${props => (props.positionWithinContainer === 'right' ? 'right: 0;' : 'left: 0;')}
+  transform: translateY(-50%);
+`;
+
+export const Hero = () => {
+  const [scaleFactor, setScaleFactor] = useState(2.1); // default width 1024px
+  const [positionWithinContainer, setPositionWithinContainer] = useState<PositionWithinContainer>(
+    'left'
+  );
+
+  const { width } = useWindowSize();
+
+  useEffect(() => {
+    if (width) {
+      if (width <= 1024) {
+        setPositionWithinContainer('right');
+        setScaleFactor(2.1);
+      } else if (width <= 1920) {
+        setPositionWithinContainer('right');
+        setScaleFactor(2.0);
+      } else if (width <= 2560) {
+        setPositionWithinContainer('right');
+        setScaleFactor(1.5);
+      } else if (width <= 3440) {
+        setPositionWithinContainer('left');
+        setScaleFactor(1.5);
+      } else {
+        setPositionWithinContainer('left');
+        setScaleFactor(1.5);
+      }
+    }
+  }, [width]);
+  return (
+    <StyledHeroContainer positionWithinContainer={positionWithinContainer}>
+      <StyledHero
+        src={'images/hero.png'}
+        scaleFactor={scaleFactor}
+        positionWithinContainer={positionWithinContainer}
+      />
+    </StyledHeroContainer>
+  );
+};

ts/components/registration/components/index.tsx

@@ -0,0 +1,3 @@
+import { Hero } from './Hero';
+
+export { Hero };