Mobile onboarding/connect-wallet screens (#107)

## Description

Adjusted the onboarding screen to be mobile friendly.
Adjusted the connect-wallet page to be mobile friendly including error
toasts and kado pop up.
Adjusted the privacy screen to be mobile friendly.

Closes #110 

## Screenshots (if applicable)


https://github.com/Kryha/KREAd/assets/54764628/f7f28943-f611-4eb1-b6c6-f33e0f33da1b

## Checklist

Make sure all items are checked before submitting the pull request.
Remove any items that are not applicable.

- [x] The PR title is clear and concise.
- [x] Are there changes in the /fronted folder? Make sure `cd frontend
&& yarn build` runs successfully.;

---------

Co-authored-by: CARLOS TRIGO <[email protected]>

frontend/src/assets/text/general.ts

@@ -34,15 +34,15 @@ export const general = {
   aCharcterBuilderApp:
     "KREAd is a character builder dApp, where all the characters and their items are dynamic NFTs. You have the freedom to build your character and the ownership of all the equipment attached to it. So feel free to sell them, trade them, or even burn them!",
   sagesBy: "SAGES by KREAd",
-  sagesIsTheFirst: "SAGES is the first collection\nlaunched on the KREAd dApp.\nStart collecting SAGES NFTs to\nshape your own saga.",
+  sagesIsTheFirst: "SAGES is the first collection launched on the KREAd dApp.\nStart collecting SAGES NFTs to\nshape your own saga.",
   explore: "explore",
   connectWallet: "connect Keplr Wallet",
   activateWallet: "activate Wallet",
   whoWeAre: "who we are",
   ourLeadership: "Our leadership includes some of\nthe most inventive and\nexperienced executives in the technology industry.",
   isPartOfAgoric: "KREAd is a decentralized application deployed on ",
   anOpenSource:
-    ", an open-source development company launching an interoperable Proof-\nof-Stake chain and economy. The dApp is imagined, built, and\ndesigned by ",
+    ", an open-source development company launching an interoperable Proof-of-Stake chain and economy. The dApp is imagined, built, and designed by ",
   agoric: "Agoric",
   theSagesArt: "The SAGES art and comic is\ncreated by Enmanuel Heredia.",
   kryha: "Kryha",

frontend/src/components/atoms/image.ts

@@ -1,5 +1,6 @@
 import styled from "@emotion/styled";
 import { EXTRA_LARGE_SCREEN_SIZE, LARGE_SCREEN_SIZE, MEDIUM_SCREEN_SIZE, SMALL_SCREEN_SIZE } from "../../constants";
+import { breakpoints } from "../../design";
 
 export interface ImageProps {
   src?: string;
@@ -46,4 +47,19 @@ export const CharacterImgs = styled.img<CharacterImageProps>`
       return "width: 742px; ";
     }
   }};
+  }
 `;
+
+export interface CharacterImageMobileProps {
+  zIndex?: number;
+  src?: string;
+}
+
+export const CharacterImgsMobile = styled.img<CharacterImageMobileProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: contain;  
+`;

frontend/src/components/atoms/text.ts

@@ -86,6 +86,7 @@ export const TitleText = styled.h3<TextProps>`
 
   @media screen and (max-width: ${breakpoints.tablet}) {
     font-size: 16px;
+    line-height: 23px;
   }
 `;
 

frontend/src/components/base-route-mobile/base-route-mobile.tsx

@@ -0,0 +1,76 @@
+import React, { FC, useMemo } from "react";
+
+import { text } from "../../assets";
+import { routes } from "../../navigation";
+import { Footer } from "../footer";
+import { NavigationSection, NavigationTab } from "../navigation-tab";
+import { Box, ChildrenContainer, FooterContainer, RightBox, TopbarContainer } from "./styles";
+import { useCharacterBuilder } from "../../context/character-builder-context";
+import { MAIN_MODE, Section } from "../../constants";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
+import { SwitchSelector } from "../switch-selector";
+import { KreadContainer } from "../../pages/shop/styles";
+import { KreadIcon } from "../logo/styles";
+import { ButtonText, PrimaryButton } from "../atoms";
+import { color } from "../../design";
+import { useKadoWidget } from "../../context/filter-context";
+import styled from "@emotion/styled";
+import { BuyCryptoButton } from "../base-route/base-route";
+
+interface BaseRouteProps {
+  sideNavigation: React.ReactNode;
+  children?: React.ReactNode;
+  onboarding?: boolean;
+  isLanding?: boolean;
+  isShop?: boolean;
+}
+
+export const BaseRouteMobile: FC<BaseRouteProps> = ({ children, sideNavigation, onboarding = false, isLanding = false, isShop = false }) => {
+  const isOnboarding = onboarding ? routes.onboarding : routes.character;
+  const { interactionMode } = useCharacterBuilder();
+
+  const { pathname } = useLocation();
+  const { section } = useParams<{ section: Section }>();
+  const navigate = useNavigate();
+  const home = () => {
+    navigate(routes.character);
+  };
+
+  const pageSelector = useMemo(
+    () => (
+      <SwitchSelector
+        buttonOneText={text.character.items}
+        buttonTwoText={text.character.characters}
+        selectedSection={section || "items"}
+        path={pathname}
+      />
+    ),
+    [section, pathname],
+  );
+
+  return (
+    <>
+      {interactionMode === MAIN_MODE && (
+        <TopbarContainer isLanding={isLanding}>
+          <Box>
+            <NavigationSection route={isOnboarding}>
+              <NavigationTab title={text.navigation.character} route={isOnboarding} />
+            </NavigationSection>
+          </Box>
+          <KreadContainer onClick={home}>
+            <KreadIcon />
+          </KreadContainer>
+          <RightBox>
+            {isShop && <BuyCryptoButton />}
+            {!isLanding && <>{pageSelector}</>}
+            {sideNavigation}
+          </RightBox>
+        </TopbarContainer>
+      )}
+      <ChildrenContainer isLanding={isLanding}>{children}</ChildrenContainer>
+      <FooterContainer isLanding={isLanding}>
+        <Footer />
+      </FooterContainer>
+    </>
+  );
+};

frontend/src/components/base-route-mobile/index.ts

@@ -0,0 +1 @@
+export * from "./base-route-mobile";

frontend/src/components/base-route-mobile/styles.ts

@@ -0,0 +1,78 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { breakpoints, color, margins, zIndex } from "../../design";
+
+interface AnimationProps {
+  isLanding: boolean;
+}
+
+export const NavBarDivider = styled.div`
+  border: 0.5px solid ${color.grey};
+  transform: rotate(90deg);
+  width: 41px;
+`;
+
+export const TopbarContainer = styled.header<AnimationProps>`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  z-index: 100;
+  top: 0;
+  margin-left: ${margins.medium};
+  margin-right: ${margins.medium};
+  padding-top: ${margins.medium};
+  padding-bottom: ${margins.medium};
+  background: transparent;
+
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    padding: ${margins.mini};
+  }
+`;
+
+export const Box = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  z-index: 1;
+  align-items: center;
+`;
+
+export const RightBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+  z-index: 1;
+  align-items: center;
+  gap: 12px;
+`;
+
+export const ChildrenContainer = styled.div<AnimationProps>`
+  display: flex;
+  flex: 1;
+  ${({ isLanding }) =>
+    isLanding === true
+      ? css`
+          margin-left: 0;
+          margin-right: 0;
+        `
+      : css`
+          margin-left: ${margins.medium};
+          margin-right: ${margins.medium};
+        `};
+  @media screen and (max-width: ${breakpoints.tablet}) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+`;
+
+export const FooterContainer = styled.div<AnimationProps>`
+  display: flex;
+  flex-direction: row;
+  bottom: 0;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  background: transparent;
+  z-index: ${zIndex.overCharacter};
+`;

frontend/src/components/footer/footer.tsx

@@ -1,13 +1,14 @@
 import React, { FC, useState } from "react";
 import { useLocation, useMatch, useResolvedPath } from "react-router-dom";
 import { text } from "../../assets";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { routes } from "../../navigation";
 import { AgoricText, FooterContainer, FooterWrapper, Link, PrivacyText } from "./styles";
 import { NetworkSelect } from "../network-selector/network-select";
 import { useNetworkConfig } from "../../hooks/useNetwork";
 import { getLabelForNetwork, NetworkSelector } from "../network-selector/network-selector";
 import { networkOptions } from "../../constants";
+import { useIsMobile } from "../../hooks";
 
 export const Footer: FC = () => {
   const resolvedShop = useResolvedPath(routes.shop);
@@ -25,9 +26,11 @@ export const Footer: FC = () => {
     setFilterId(id !== filterId ? id : "");
   };
 
+  const isMobile = useIsMobile(breakpoints.tablet);
+
   return (
     <FooterWrapper isShop={!!matchShop}>
-      { pathsWithNetworkSelector.includes(location.pathname as any) && 
+      { pathsWithNetworkSelector.includes(location.pathname as any) && !isMobile &&
         <NetworkSelector label={label} openNetworkSelector={openFilter} id={filterId} hasValue={!!network}>
           <NetworkSelect label={network} onChange={setNetworkValue} options={networkOptions} />
         </NetworkSelector>

frontend/src/components/footer/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { NavLink } from "react-router-dom";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 import { ButtonText } from "../atoms";
 
 interface FooterProps {
@@ -17,6 +17,11 @@ export const FooterWrapper = styled.div<FooterProps>`
   width: 100%;
   z-index: 1000;
   border-radius: 100px;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    margin-left: 0px;
+    justify-content: center;
+  }
 `;
 
 export const FooterContainer = styled.div`

frontend/src/components/index.ts

@@ -9,6 +9,7 @@ export * from "./switch-selector";
 export * from "./navigation-tab";
 export * from "./price-in-ist";
 export * from "./base-route";
+export * from "./base-route-mobile";
 export * from "./equipped-item-card";
 export * from "./content-loader";
 export * from "./base-character";
@@ -26,6 +27,7 @@ export * from "./notification-detail";
 export * from "./footer";
 export * from "./fade-in-out";
 export * from "./onboarding-character";
+export * from "./onboarding-character-mobile";
 export * from "./logo";
 export * from "./load-more";
 export * from "./kado-on-ramp";

frontend/src/components/kado-on-ramp/styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { color } from "../../design";
+import { breakpoints, color } from "../../design";
 
 export const KadoContainer = styled.div`
   display: flex;
@@ -12,6 +12,11 @@ export const KadoContainer = styled.div`
     border-radius: 24px;
     width: 500px;
     height: 700px;
+
+    @media (max-width: ${breakpoints.tablet}) {
+      width: 100vw;
+      height: 80vh;
+    }
   }
 `;
 

frontend/src/components/notification-detail/styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { CloseIcon, ExclamationIcon, TickIcon } from "../../assets";
-import { color, margins } from "../../design";
+import { breakpoints, color, margins } from "../../design";
 import { HeaderHorizontalDivider, NavigationTitle } from "../atoms";
 
 export const ToastContainer = styled.div`
@@ -18,6 +18,10 @@ export const ToastContainer = styled.div`
   position: absolute;
   left: 40px;
   height: fit-content;
+
+  @media (max-width: ${breakpoints.tablet}) {
+    width: 100vw;
+  }
 `;
 
 export const Tick = styled(TickIcon)`

frontend/src/components/onboarding-character-mobile/index.ts

@@ -0,0 +1 @@
+export * from "./onboarding-character-mobile";

frontend/src/components/onboarding-character-mobile/onboarding-character-mobile.tsx

@@ -0,0 +1,51 @@
+import { FC, useEffect, useState } from "react";
+
+import { CharacterContainer, CharacterSwitchIcon, FifthIcon, FirstIcon, FourthIcon, ThirdIcon } from "./styles";
+import { useViewport } from "../../hooks";
+import {
+  ArmaCitizen,
+  ArmaPerk_I6,
+  ArmaPerk_I7,
+  ElephiaCitizen,
+  Empty,
+  Headpiece_Arma_3,
+  Headpiece_Arma_5,
+  Headpiece_Farma_4,
+  Legendary_Garment_Arma_7,
+  Mask_Elephia_24,
+  Mask_Elephia_32,
+  Mask_Mount_3,
+  Rare_Garment_Arma_2,
+  text,
+  Uncommon_Garment_Arma_1,
+} from "../../assets";
+import { zIndex } from "../../design";
+
+const characterImages = [ArmaCitizen, ElephiaCitizen];
+const headPieceImages = [Headpiece_Arma_3, Headpiece_Farma_4, Headpiece_Arma_5, Empty];
+const perk1Images = [ArmaPerk_I6, ArmaPerk_I7, Empty];
+const maskImages = [Mask_Mount_3, Mask_Elephia_24, Mask_Elephia_32];
+const garmentImages = [Legendary_Garment_Arma_7, Rare_Garment_Arma_2, Uncommon_Garment_Arma_1];
+
+export const OnboardingCharacterMobile: FC = () => {
+  const { width, height } = useViewport();
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCurrentIndex(Math.floor(Math.random() * 3.5));
+    }, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <CharacterContainer>
+      <CharacterSwitchIcon src={characterImages[currentIndex] || ArmaCitizen} />
+      <FourthIcon src={perk1Images[currentIndex] || Empty} alt={text.character.perk1} width={width} height={height} zIndex={zIndex.perk1} />
+      <ThirdIcon src={headPieceImages[currentIndex] || Empty} alt={text.character.headPiece} zIndex={zIndex.headPiece} />
+      <FifthIcon src={maskImages[currentIndex] || Empty} alt={text.character.mask} width={width} height={height} zIndex={zIndex.mask} />
+      <FirstIcon src={garmentImages[currentIndex] || Empty} alt={text.character.garment} zIndex={zIndex.garment} />
+    </CharacterContainer>
+  );
+};