more clean up

Kryha · Dec 8, 2023 · 23531c6 · 23531c6
1 parent be40066
commit 23531c6
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 130 deletions.
diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 
 import { DiscordIcon, KeplerIcon, text, TwitterIcon } from "../../assets";
-import { breakpoints, color } from "../../design";
+import { color } from "../../design";
 import {
   AnimatedLogo,
   ButtonText,
@@ -14,15 +14,12 @@ import {
   OnboardingCharacter,
   Overlay,
   PrimaryButton,
-  TitleText,
 } from "../../components";
 import {
   ArrowUp,
   ButtonContainer,
   ButtonRow,
   EndContent,
-  FooterContainer,
-  GeneralSectionContainer,
   InfoText,
   KreadContainer,
   KreadLogo,
@@ -37,7 +34,7 @@ import {
   SocialsContainer,
   TextContainer,
 } from "./styles";
-import { useIsMobile, useOnScreen, useTimer, useViewport } from "../../hooks";
+import { useOnScreen, useTimer, useViewport } from "../../hooks";
 import { routes } from "../../navigation";
 import { AGORIC_LINK, DISCORD_LINK, FIRST_TIME, KRYHA_LINK, SLIDER_TIME, TWITTER_LINK } from "../../constants";
 
@@ -98,7 +95,6 @@ export const OnboardingMobile: FC = () => {
             </ButtonRow>
           </ButtonContainer>
         </InfoText>
-
         <MiddleContent height={height} ref={ref}>
           <SectionContainer>
             <MenuText>{text.general.whoWeAre}</MenuText>

diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts
@@ -1,9 +1,9 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { ArrowDownIcon, ArrowUpRightIcon } from "../../assets";
-import { bounce, changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
+import { ArrowUpRightIcon } from "../../assets";
+import {  changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components";
 import { KreadIcon } from "../../components/logo/styles";
-import { breakpoints, color, fontWeight, zIndex } from "../../design";
+import { color, fontWeight } from "../../design";
 
 interface HeightProps {
   height: number;
@@ -14,7 +14,14 @@ export const OnboardingWrapper = styled.div`
   flex-direction: column;
   width: 100vw;
   height: 100vh;
+`;
 
+export const OnboardingContainer = styled.div`
+  height: 100%;
+  scroll-behavior: smooth;
+  overflow: auto;
+  scroll-snap-type: y mandatory;
+  padding: 10px 10px 10px 10px;
 `;
 
 export const OnboardingCharacterWrapper = styled.div`
@@ -25,89 +32,39 @@ export const OnboardingCharacterWrapper = styled.div`
 `;
 
 export const InfoText = styled.div`
-  margin-top: 8px;
   ${TitleText} {
     margin-top: 8px;
   }
-  margin-bottom: 200px;
   width: 100%;
   height: 100%;
-  max-height: 100vh - 24px;
+  margin-bottom: 200px;
   background-size: cover;
   scroll-snap-align: start;
   transition: all 0.4s;
 `;
 
-export const ArrowUp = styled(ArrowUpRightIcon)`
-  margin: 0 0 0 13px !important;
-  path {
-    stroke: ${color.white};
-  }
-`;
-
-export const ButtonRow = styled.div`
-  position: relative;
-  display: flex;
-  gap: 16px;
-`;
-interface ButtonProps {
-  isVisible: boolean;
-}
-
-export const ButtonContainer = styled.div<ButtonProps>`
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  justify-content: center;
-  z-index: 100;
-  ${PrimaryButton} {
-    max-height: 45px;
-    gap: 8px;
-    &:hover {
-      ${ArrowUp} {
-        path {
-          stroke: ${color.black};
-        }
-      }
-    }
-  }
-  
-`;
-
-export const ArrowUpRight = styled(ArrowUpRightIcon)`
-  margin: 0 0 0 13px !important;
-`;
-
-export const EndContent = styled.div<HeightProps>`
+export const MiddleContent = styled.div<HeightProps>`
   ${TitleText} {
     margin-top: 16px;
   }
-  display: flex;
-  flex-direction: column;
+  margin-bottom: 200px;
   width: 100%;
   height: 100%;
   background-size: cover;
   scroll-snap-align: start;
-  gap: 40px;
 `;
 
-export const MiddleContent = styled.div<HeightProps>`
+export const EndContent = styled.div<HeightProps>`
   ${TitleText} {
     margin-top: 16px;
   }
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
-  max-height: 100vh - 24px;
   background-size: cover;
   scroll-snap-align: start;
-`;
-
-export const FooterContainer = styled.div`
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  z-index: ${zIndex.overCharacter};
+  gap: 40px;
 `;
 
 interface ViewProps {
@@ -116,13 +73,6 @@ interface ViewProps {
   showSlider?: boolean;
   showAnimation?: boolean;
 }
-export const OnboardingContainer = styled.div<HeightProps>`
-  ${({ height }): string => `height: ${height - 64}px;`};
-  scroll-behavior: smooth;
-  overflow: auto;
-  scroll-snap-type: y mandatory;
-  padding: 10px 10px 10px 10px;
-`;
 
 export const DefaultImage = styled(CharacterImgs)<ViewProps>`
   position: absolute;
@@ -218,73 +168,49 @@ export const KreadContainer = styled.div<ViewProps>`
     `};
 `;
 
-export const ArrowDown = styled(ArrowDownIcon)`
-  position: absolute;
-  left: 40px;
-  bottom: -2px;
-  -webkit-animation: ${bounce} 2s;
-  animation: ${bounce} 2s;
-  -webkit-animation-iteration-count: 2;
-  animation-iteration-count: 2;
-  animation-fill-mode: backwords;
-  -webkit-animation-fill-mode: backwords;
-  animation-delay: 6s;
-  -webkit-animation-delay: 6s;
-  path {
-    stroke: ${color.black};
-  }
-  width: 24px;
-  height: 24px;
-`;
-
 export const SectionContainer = styled.div`
   padding-left: 20px;
   padding-top: 4%;
 `;
 
-export const ScrollContainer = styled.div`
-  position: absolute;
-  left: 40px;
-  bottom: 73px;
-`;
-
-export const GeneralSectionContainer = styled.div`
-  padding-left: 30px;
-  width: 100%;
-`;
-
-export const ConnectContainer = styled.div<ButtonProps>`
-  ${({ isVisible }): string => {
-    return isVisible
-      ? `
-        background: rgba(255, 255, 255, 0.46);
-        backdrop-filter: blur(4px);
-        z-index: 100;
-        width: 460px;
-        padding-top: 40px;
-        padding-bottom: 40px;
-        position: relative;
-      `
-      : "";
-  }};
-  ${({ isVisible }) =>
-    isVisible === true
-      ? css``
-      : css`
-          animation: ${disappear}, ${fadeIn};
-          animation-duration: 0.5s, 0.5s;
-          animation-delay: 0s, 0.5s;
-        `};
-`;
-
 export const SocialsContainer = styled.div`
   display: flex;
   flex-direction: column;
   margin: 8px 0px;
 `;
 
-export const SocialLink = styled.div`
+export const ButtonRow = styled.div`
+  position: relative;
   display: flex;
-  align-items: center;
-  gap: 8px;
+  gap: 16px;
+`;
+
+export const ArrowUp = styled(ArrowUpRightIcon)`
+  margin: 0 0 0 13px !important;
+  path {
+    stroke: ${color.white};
+  }
 `;
+
+interface ButtonProps {
+  isVisible: boolean;
+}
+
+export const ButtonContainer = styled.div<ButtonProps>`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: center;
+  z-index: 100;
+  ${PrimaryButton} {
+    max-height: 45px;
+    gap: 8px;
+    &:hover {
+      ${ArrowUp} {
+        path {
+          stroke: ${color.black};
+        }
+      }
+    }
+  }
+`;
diff --git a/frontend/src/pages/onboarding/onboarding.tsx b/frontend/src/pages/onboarding/onboarding.tsx
@@ -144,6 +144,15 @@ export const Onboarding: FC = () => {
           <Footer />
         </FooterContainer>
       </OnboardingContainer>
+      {showAnimation ? (
+        <KreadContainer height={height} width={width} showSlider={showSlider}>
+          <AnimatedLogo iteration={1} />
+        </KreadContainer>
+      ) : (
+        <LogoContainer>
+          <KreadLogo />
+        </LogoContainer>
+      )}
       <FadeInOut show={showWidget}>
         <Kado show={showWidget} toggleWidget={toggleWidget} />
         <Overlay />

diff --git a/frontend/src/reset.css b/frontend/src/reset.css
@@ -20,11 +20,19 @@ html {
   margin: 0;
   height: 100%;
   overflow: hidden;
+  @media (max-width: 768px) {
+    max-width: 100vw;
+    min-width: auto !important;
+  }
 }
 
 body {
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
+  @media (max-width: 768px) {
+    max-width: 100vw;
+    min-width: auto;
+  }
 }
 
 img, picture, video, canvas, svg {