diff --git a/frontend/src/assets/text/general.ts b/frontend/src/assets/text/general.ts index a7ebda237..56ff5feaf 100644 --- a/frontend/src/assets/text/general.ts +++ b/frontend/src/assets/text/general.ts @@ -34,7 +34,7 @@ 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", @@ -42,7 +42,7 @@ export const general = { 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", diff --git a/frontend/src/components/atoms/image.ts b/frontend/src/components/atoms/image.ts index c9761e60d..bcd82d7c2 100644 --- a/frontend/src/components/atoms/image.ts +++ b/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` return "width: 742px; "; } }}; + } `; + +export interface CharacterImageMobileProps { + zIndex?: number; + src?: string; +} + +export const CharacterImgsMobile = styled.img` + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + object-fit: contain; +`; \ No newline at end of file diff --git a/frontend/src/components/atoms/text.ts b/frontend/src/components/atoms/text.ts index 3c7f42fb8..813258a76 100644 --- a/frontend/src/components/atoms/text.ts +++ b/frontend/src/components/atoms/text.ts @@ -86,6 +86,7 @@ export const TitleText = styled.h3` @media screen and (max-width: ${breakpoints.tablet}) { font-size: 16px; + line-height: 23px; } `; diff --git a/frontend/src/components/base-route-mobile/base-route-mobile.tsx b/frontend/src/components/base-route-mobile/base-route-mobile.tsx new file mode 100644 index 000000000..8e9cd6fb6 --- /dev/null +++ b/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 = ({ 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( + () => ( + + ), + [section, pathname], + ); + + return ( + <> + {interactionMode === MAIN_MODE && ( + + + + + + + + + + + {isShop && } + {!isLanding && <>{pageSelector}} + {sideNavigation} + + + )} + {children} + +