From 064b281f3500043b4af9bdb422322e4d35b53a0e Mon Sep 17 00:00:00 2001 From: carlos-kryha <97608823+carlos-kryha@users.noreply.github.com> Date: Fri, 15 Dec 2023 09:22:35 +0100 Subject: [PATCH] Character page + mint flow mobile UI (#109) ## Description Adjusts routes based on `useIsMobile()` hook, if mobile is detected all paths except `onboarding, connectWallet, character, createCharacter` will redirect to ``. This pr includes UI components for the `character` and `createCharacter` routes. ## Related Issues #108 ## Screenshots (if applicable) https://github.com/Kryha/KREAd/assets/97608823/ad674348-7cf8-4a1c-b191-44ffba25cfe3 ## 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.; ## Additional Comments Currently having issues connecting the Keplr app to Emerynet, so this PR is purely UI and routing changes --- frontend/package.json | 2 +- frontend/src/components/atoms/button.ts | 2 + .../base-route-mobile/base-route-mobile.tsx | 51 +----- .../components/base-route-mobile/styles.ts | 11 +- .../content-loader/content-loader.tsx | 12 +- .../src/components/content-loader/styles.ts | 27 +++ frontend/src/index.css | 2 + frontend/src/pages/content-mobile/styles.ts | 4 +- .../create-character-mobile/confirmation.tsx | 8 +- .../create-character-mobile.tsx | 11 +- .../create-character-mobile/information.tsx | 9 +- .../pages/create-character-mobile/payment.tsx | 12 +- .../pages/create-character-mobile/styles.ts | 8 +- .../pages/landing-mobile/landing-mobile.tsx | 157 +++--------------- frontend/src/pages/landing-mobile/styles.ts | 8 +- .../onboarding-mobile/onboarding-mobile.tsx | 2 +- .../src/pages/onboarding-mobile/styles.ts | 5 +- frontend/src/pages/shop/styles.ts | 7 + frontend/src/reset.css | 11 +- 19 files changed, 134 insertions(+), 215 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index 03d9bf632..eb189ecab 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -47,7 +47,7 @@ "workbox-streams": "^6.5.3" }, "scripts": { - "dev": "NODE_ENV=development vite", + "dev": "NODE_ENV=development vite --host", "build": "tsc && vite build", "preview": "vite preview", "lint": "eslint src", diff --git a/frontend/src/components/atoms/button.ts b/frontend/src/components/atoms/button.ts index c008548b4..4f07d5845 100644 --- a/frontend/src/components/atoms/button.ts +++ b/frontend/src/components/atoms/button.ts @@ -9,6 +9,7 @@ interface ButtonProps { borderColor?: string; visible?: boolean; disabled?: boolean; + mobileWidth?: string; } export const KeplerIconWrapper = styled.div``; @@ -88,6 +89,7 @@ export const PrimaryButton = styled.button` @media (max-width: ${breakpoints.mobile}) { font-size: 12px; + max-width: ${(props): string => props.mobileWidth || "none"}; } `; diff --git a/frontend/src/components/base-route-mobile/base-route-mobile.tsx b/frontend/src/components/base-route-mobile/base-route-mobile.tsx index 8e9cd6fb6..d0cdb67ac 100644 --- a/frontend/src/components/base-route-mobile/base-route-mobile.tsx +++ b/frontend/src/components/base-route-mobile/base-route-mobile.tsx @@ -1,21 +1,12 @@ -import React, { FC, useMemo } from "react"; - -import { text } from "../../assets"; +import React, { FC } from "react"; import { routes } from "../../navigation"; import { Footer } from "../footer"; -import { NavigationSection, NavigationTab } from "../navigation-tab"; -import { Box, ChildrenContainer, FooterContainer, RightBox, TopbarContainer } from "./styles"; +import { ChildrenContainer, FooterContainer, 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 { MAIN_MODE } from "../../constants"; +import { useNavigate } from "react-router-dom"; +import { KreadContainerMobile } 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; @@ -25,46 +16,20 @@ interface BaseRouteProps { isShop?: boolean; } -export const BaseRouteMobile: FC = ({ children, sideNavigation, onboarding = false, isLanding = false, isShop = false }) => { - const isOnboarding = onboarding ? routes.onboarding : routes.character; +export const BaseRouteMobile: FC = ({ children, isLanding = false}) => { 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} diff --git a/frontend/src/components/base-route-mobile/styles.ts b/frontend/src/components/base-route-mobile/styles.ts index 2068af28e..92ef682e8 100644 --- a/frontend/src/components/base-route-mobile/styles.ts +++ b/frontend/src/components/base-route-mobile/styles.ts @@ -13,20 +13,19 @@ export const NavBarDivider = styled.div` `; export const TopbarContainer = styled.header` + width: 100vw; display: flex; flex-direction: row; - justify-content: space-between; + justify-content: flex-start; + margin-top: 12px; 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}; + padding: ${margins.medium}; background: transparent; @media screen and (max-width: ${breakpoints.tablet}) { - padding: ${margins.mini}; + padding: ${margins.medium}; } `; diff --git a/frontend/src/components/content-loader/content-loader.tsx b/frontend/src/components/content-loader/content-loader.tsx index 5a2dfcb96..014244569 100644 --- a/frontend/src/components/content-loader/content-loader.tsx +++ b/frontend/src/components/content-loader/content-loader.tsx @@ -1,6 +1,8 @@ import React, { FC } from "react"; import { AnimatedLoading } from "./animated-loading"; -import { LoadingPageContainer, Spinner } from "./styles"; +import { LoadingPageContainer, LoadingPageContainerMobile, Spinner } from "./styles"; +import { useIsMobile } from "../../hooks"; +import { breakpoints } from "../../design"; interface ContentLoaderProps { loading: boolean; @@ -12,6 +14,14 @@ interface LoadingPageProps { } export const LoadingPage: FC = ({ spinner = true }) => { + const isMobile = useIsMobile(breakpoints.tablet); + if(isMobile) { + return ( + <> + {spinner ? : } + + ); + } return ( <> {spinner ? : } diff --git a/frontend/src/components/content-loader/styles.ts b/frontend/src/components/content-loader/styles.ts index 5cbd05bbf..fd5d2fbf6 100644 --- a/frontend/src/components/content-loader/styles.ts +++ b/frontend/src/components/content-loader/styles.ts @@ -65,6 +65,33 @@ export const LoadingPageContainer = styled.div` `; }}; `; + +export const LoadingPageContainerMobile = styled.div` + width: fit-content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 0 30vw; + ${({ isSpinner }): string => { + return isSpinner + ? ` + width: fit-content; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 46vh 46vw; + ` + : ` + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + `; + }}; +`; + interface AnimationProps { iteration?: number; } diff --git a/frontend/src/index.css b/frontend/src/index.css index c3120655e..c2aa4ca7c 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,5 +2,7 @@ body { font-family: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, sans-serif; + max-width: 100vw; + overflow-x: hidden; } diff --git a/frontend/src/pages/content-mobile/styles.ts b/frontend/src/pages/content-mobile/styles.ts index c226c2d87..2e1abf890 100644 --- a/frontend/src/pages/content-mobile/styles.ts +++ b/frontend/src/pages/content-mobile/styles.ts @@ -12,6 +12,7 @@ export const Title = styled(FormText)``; export const InfoContainer = styled.div` padding-left: 20px; + padding-right: 20px; padding-top: 4%; ${TitleText} { margin-top: ${margins.mini}; @@ -34,7 +35,8 @@ export const GeneralInfo = styled.div` export const KreadContainer = styled.div` display: flex; flex: 1; -justify-content: center; +justify-content: start; +padding-left: 30px; margin-top: 30px; ${KreadIcon} { width: 100px; diff --git a/frontend/src/pages/create-character-mobile/confirmation.tsx b/frontend/src/pages/create-character-mobile/confirmation.tsx index a84e37c72..cc6c00011 100644 --- a/frontend/src/pages/create-character-mobile/confirmation.tsx +++ b/frontend/src/pages/create-character-mobile/confirmation.tsx @@ -1,10 +1,10 @@ import { FC } from "react"; import { text } from "../../assets"; -import { ButtonText, ErrorView, MenuItemName, PrimaryButton, TitleText } from "../../components"; +import { ButtonText, ErrorView, MenuItemName, TitleText } from "../../components"; import { color } from "../../design"; import { Character } from "../../interfaces"; import { getDatefromEpoch } from "../../util"; -import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, Tick, TickContainer } from "./styles"; +import { ArrowUp, ButtonContainer, ContentWrapper, InfoContainer, PrimaryButtonMobile, Tick, TickContainer } from "./styles"; import { useUserStateDispatch } from "../../context/user"; import { useNavigate } from "react-router-dom"; import { routes } from "../../navigation"; @@ -42,10 +42,10 @@ export const Confirmation: FC = ({ character }) => { {getDatefromEpoch(Date.now())} - + {text.mint.goToCharacter} - + ); diff --git a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx index 10eaf10b6..21586f369 100644 --- a/frontend/src/pages/create-character-mobile/create-character-mobile.tsx +++ b/frontend/src/pages/create-character-mobile/create-character-mobile.tsx @@ -1,24 +1,21 @@ import React, { FC, useEffect, useMemo, useState } from "react"; -import { ElephiaCitizen, text } from "../../assets"; +import { text } from "../../assets"; import { ErrorView, FadeInOut, FormHeader, LoadingPage, NotificationDetail, Overlay } from "../../components"; import { PageContainer } from "../../components/page-container"; import { MINTING_COST, MINT_CHARACTER_FLOW_STEPS, WALLET_INTERACTION_STEP } from "../../constants"; -import { useIsMobile, useViewport } from "../../hooks"; import { Character, CharacterCreation, MakeOfferCallback } from "../../interfaces"; import { routes } from "../../navigation"; import { useCreateCharacter } from "../../service"; import { Confirmation } from "./confirmation"; import { Information } from "./information"; import { Payment } from "./payment"; -import { DefaultImage, FormCard } from "./styles"; -import { breakpoints } from "../../design"; +import { FormCard } from "./styles"; import { useUserState } from "../../context/user"; import { useWalletState } from "../../context/wallet"; import { NotificationWrapper } from "../../components/notification-detail/styles"; export const CreateCharacterMobile: FC = () => { const createCharacter = useCreateCharacter(); - const { width, height } = useViewport(); const [currentStep, setCurrentStep] = useState(0); const [mintedCharacter, setMintedCharacter] = useState(); const [error, setError] = useState(); @@ -30,7 +27,6 @@ export const CreateCharacterMobile: FC = () => { const isLoadingCharacters = !fetched; const [isLoading, setIsLoading] = useState(false); const [isOfferAccepted, setIsOfferAccepted] = useState(false); - const mobile = useIsMobile(breakpoints.desktop); const { ist } = useWalletState(); const notEnoughIST = useMemo(() => { @@ -47,6 +43,8 @@ export const CreateCharacterMobile: FC = () => { setMintedCharacter(newCharacter.nft); setIsLoading(false); } + if(error) console.error(`Error in create-character-mobile: ${error}`); + }, [characters, characterData, notEnoughIST]); const changeStep = async (step: number): Promise => { @@ -119,7 +117,6 @@ export const CreateCharacterMobile: FC = () => { /> - {!mobile && } ); }; diff --git a/frontend/src/pages/create-character-mobile/information.tsx b/frontend/src/pages/create-character-mobile/information.tsx index ba6181290..62ad0d929 100644 --- a/frontend/src/pages/create-character-mobile/information.tsx +++ b/frontend/src/pages/create-character-mobile/information.tsx @@ -1,5 +1,5 @@ import { CharacterCreation } from "../../interfaces"; -import { FC, useEffect, useMemo } from "react"; +import { FC, useMemo } from "react"; import { SubmitHandler, useForm } from "react-hook-form"; import { ArrowUp, @@ -10,10 +10,11 @@ import { FormContainer, FormFields, InputWrapper, + PrimaryButtonMobile, Tick, Warning, } from "./styles"; -import { ButtonText, FormText, Input, Label, PrimaryButton } from "../../components"; +import { ButtonText, FormText, Input, Label } from "../../components"; import { text } from "../../assets"; import { MAX_CHARACTER_LENGTH, MINTING_COST } from "../../constants"; import { ButtonInfo } from "../../components/button-info"; @@ -103,10 +104,10 @@ export const Information: FC = ({ setData, disabled }) => { {text.mint.theCostsOfMinting} - + {text.mint.next} - + diff --git a/frontend/src/pages/create-character-mobile/payment.tsx b/frontend/src/pages/create-character-mobile/payment.tsx index 2b8a2686c..72934a50b 100644 --- a/frontend/src/pages/create-character-mobile/payment.tsx +++ b/frontend/src/pages/create-character-mobile/payment.tsx @@ -8,13 +8,14 @@ import { NumberContainer, PreviousButtonContainer, PricingContainer, + PrimaryButtonMobile, Step, StepContainer, StepText, StepWrapper, Tick, } from "./styles"; -import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, PrimaryButton, SecondaryButton } from "../../components"; +import { Badge, ButtonText, FormText, LoadingPage, PriceInIst, SecondaryButton } from "../../components"; import { text } from "../../assets"; import { CONFIRMATION_STEP, INFORMATION_STEP, MINTING_COST } from "../../constants"; import { color } from "../../design"; @@ -31,7 +32,6 @@ export const Payment: FC = ({ submit, sendOfferHandler, isOfferAcc const [disable, setDisable] = useState(false); const sendOfferToWallet = async () => { setDisable(true); - console.info("SENDING OFFER TO WALLET"); await sendOfferHandler(); setSendOffer(true); }; @@ -49,9 +49,9 @@ export const Payment: FC = ({ submit, sendOfferHandler, isOfferAcc {!sendOffer && ( <> - + {text.mint.sendOffer} - + )} @@ -80,10 +80,10 @@ export const Payment: FC = ({ submit, sendOfferHandler, isOfferAcc )} - submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}> + submit(CONFIRMATION_STEP)} disabled={!isOfferAccepted}> {text.mint.confirm} {isLoading ? : } - + diff --git a/frontend/src/pages/create-character-mobile/styles.ts b/frontend/src/pages/create-character-mobile/styles.ts index 6eaf68135..a50095ef0 100644 --- a/frontend/src/pages/create-character-mobile/styles.ts +++ b/frontend/src/pages/create-character-mobile/styles.ts @@ -43,6 +43,7 @@ export const FormCard = styled.div` margin: auto; height: 100%; border-radius: 0; + max-width: 100vw; } animation: ${fadeUp} 1.2s ease-out 0s forwards; @@ -290,6 +291,7 @@ export const ButtonWrapper = styled.div` flex-direction: row; justify-content: space-between; height: 100%; + max-width: 100vw; align-items: flex-end; align-content: flex-end; `; @@ -302,4 +304,8 @@ export const Step = styled.div` export const RedButtonText = styled(ButtonText)` color: red; -` \ No newline at end of file +`; + +export const PrimaryButtonMobile = styled(PrimaryButton)` + max-width: 100px; +`; diff --git a/frontend/src/pages/landing-mobile/landing-mobile.tsx b/frontend/src/pages/landing-mobile/landing-mobile.tsx index 1ac3dc015..111543093 100644 --- a/frontend/src/pages/landing-mobile/landing-mobile.tsx +++ b/frontend/src/pages/landing-mobile/landing-mobile.tsx @@ -1,12 +1,10 @@ import React, { FC, useState } from "react"; -import { useLocation, useNavigate } from "react-router-dom"; import { text } from "../../assets"; import { CharacterTitle } from './styles' import { BaseRouteMobile, BoldLabel, ButtonText, - ErrorView, FadeInOut, LevelBoldLabel, LoadingPage, @@ -16,9 +14,8 @@ import { PageSubTitle, SecondaryButton, } from "../../components"; -import { ButtonContainer, CharacterCardWrapper, DetailContainer, ItemCardWrapper } from "./styles"; -import { CharacterDetailSection, ItemDetailSection } from "../../containers/detail-section"; -import { useEquipItem, useGetItemInInventoryByNameAndCategory, useSelectedCharacter, useUnequipItem } from "../../service"; +import { ButtonContainer, DetailContainer, MarginTop } from "./styles"; +import { useSelectedCharacter } from "../../service"; import { routes } from "../../navigation"; import { NotificationWrapper } from "../../components/notification-detail/styles"; import { Layout } from "../../containers/canvas/character-canvas/styles"; @@ -33,71 +30,15 @@ import { MainMode } from "../../containers/canvas/main-mode/main-mode"; import { calculateCharacterLevels } from "../../util"; import { AssetTag } from "../../components/asset-card/styles"; import { color } from "../../design"; -import { ButtonInfoWrap } from "../../components/button-info/styles"; export const LandingMobile: FC = () => { - const navigate = useNavigate(); - const location = useLocation(); const [selectedCharacter, isLoading] = useSelectedCharacter(); - const [closeDetail, setCloseDetail] = useState(false); const [showToast, setShowToast] = useState(false); const { width, height } = useViewport(); const { - selectedAsset, - selectedAssetCategory, - showDetails, - setShowDetails, - characterName, - showItemDetails, - setShowItemDetails, interactionMode, setInteractionMode, - } = useCharacterBuilder(); - - const [item] = useGetItemInInventoryByNameAndCategory(selectedAsset, selectedAssetCategory, characterName); - - const equipItem = useEquipItem(); - const unequipItem = useUnequipItem(); - - if (equipItem.isError || unequipItem.isError) return ; - const equipAsset = () => { - setShowToast(!showToast); - if (item) { - equipItem.mutate({ item, callback: {} }); - } - }; - - const unequipAsset = () => { - setShowToast(!showToast); - if (item) { - unequipItem.mutate({ item, callback: {} }); - } - }; - - const sell = (characterId: number) => { - navigate(`${routes.sellCharacter}/${characterId}`, { state: location }); - }; - - const sellAsset = () => { - navigate(`${routes.sellItem}/${item?.category}/${item?.name}`, { - state: location, - }); - }; - - const assetDetailActions = () => { - if (item?.equippedTo !== "") { - return { primary: { text: text.item.unequip, onClick: unequipAsset } }; - } else { - return { - primary: { text: text.item.equip, onClick: equipAsset }, - secondary: { text: text.item.sell, onClick: sellAsset }, - }; - } - }; - - const displayToast = () => { - setShowToast(true); - }; + } = useCharacterBuilder(); let level = 0; if (selectedCharacter) { @@ -123,80 +64,27 @@ export const LandingMobile: FC = () => { {isLoading ? ( ) : !selectedCharacter ? ( - + + + ) : ( <> {/* character info */} - {interactionMode === MAIN_MODE ? ( - - {selectedCharacter?.nft.name} - {selectedCharacter?.nft.title} - - setShowDetails(true)}> - {text.general.info} - - - lvl. - {level} - - - - ) : ( - - {selectedCharacter?.nft.name} - {selectedCharacter?.nft.title} - - - lvl. - {level} - - - - )} - - - {showItemDetails && ( - { - setShowItemDetails(false); - }, - primary: assetDetailActions()?.primary, - secondary: assetDetailActions()?.secondary, - }} - /> - )} - - - {interactionMode !== ITEM_MODE && ( - - sell(Number(selectedCharacter.nft.id)), - }, - onClose: () => { - setShowDetails(false); - setCloseDetail(true); - }, - }} - showToast={displayToast} - /> - - )} - - - - - + + {selectedCharacter?.nft.name} + {selectedCharacter?.nft.title} + + + lvl. + {level} + + + {showToast && } @@ -208,8 +96,9 @@ export const LandingMobile: FC = () => { /> + {/* canvas */} - + {interactionMode === CATEGORY_MODE && } {interactionMode === ITEM_MODE && } {interactionMode === CHARACTER_SELECT_MODE && } diff --git a/frontend/src/pages/landing-mobile/styles.ts b/frontend/src/pages/landing-mobile/styles.ts index 7accb2bc6..75f5790b9 100644 --- a/frontend/src/pages/landing-mobile/styles.ts +++ b/frontend/src/pages/landing-mobile/styles.ts @@ -41,8 +41,10 @@ export const DetailContainer = styled.div` animation-duration: 0.8s, 1s; animation-delay: 0s, 0.8s; height: fit-content; - background: transparent; + max-width: 380px; + overflow: hidden; + text-overflow: ellipsis; ${SecondaryButton} { background: ${color.white}; @@ -102,3 +104,7 @@ export const CharacterTitle = styled.h1` font-size: 32px; line-height: 52px; `; + +export const MarginTop = styled.div` + margin-top: 100px; +`; diff --git a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx index 6b2f83a6b..b1a1051c6 100644 --- a/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx +++ b/frontend/src/pages/onboarding-mobile/onboarding-mobile.tsx @@ -64,7 +64,7 @@ export const OnboardingMobile: FC = () => { localStorage.setItem(FIRST_TIME, "false"); setShowAnimation(false); }; - console.log(showSlider) + return ( {showAnimation ? ( diff --git a/frontend/src/pages/onboarding-mobile/styles.ts b/frontend/src/pages/onboarding-mobile/styles.ts index 0d36a95da..3878c2acc 100644 --- a/frontend/src/pages/onboarding-mobile/styles.ts +++ b/frontend/src/pages/onboarding-mobile/styles.ts @@ -3,7 +3,7 @@ import styled from "@emotion/styled"; import { ArrowUpRightIcon } from "../../assets"; import { changeSize, CharacterImgs, disappear, fadeIn, PrimaryButton, slideUp, TitleText } from "../../components"; import { KreadIcon } from "../../components/logo/styles"; -import { color, fontWeight } from "../../design"; +import { color, fontWeight, margins } from "../../design"; interface HeightProps { height: number; @@ -141,7 +141,8 @@ export const KreadLogo = styled(KreadIcon)` export const LogoContainer = styled.div` display: flex; flex: 1; - justify-content: center; + justify-content: start; + padding-left: 30px; margin-top: 30px; ${KreadLogo} { width: 100px; diff --git a/frontend/src/pages/shop/styles.ts b/frontend/src/pages/shop/styles.ts index e0312e440..f9a962f5e 100644 --- a/frontend/src/pages/shop/styles.ts +++ b/frontend/src/pages/shop/styles.ts @@ -90,6 +90,13 @@ export const KreadContainer = styled.div` } `; +export const KreadContainerMobile = styled.div` + ${KreadIcon} { + width: 100px; + height: 24px; + } +`; + export const OverviewContainer = styled.div` position: relative; z-index: 0; diff --git a/frontend/src/reset.css b/frontend/src/reset.css index 04035288b..fb49627c5 100644 --- a/frontend/src/reset.css +++ b/frontend/src/reset.css @@ -15,23 +15,24 @@ a { body, html { - min-width: 800px !important; + min-width: 800px; padding: 0; margin: 0; height: 100%; overflow: hidden; @media (max-width: 768px) { max-width: 100vw; - min-width: auto !important; + min-width: auto; } } + body { line-height: 1.5; -webkit-font-smoothing: antialiased; @media (max-width: 768px) { max-width: 100vw; - min-width: auto; + min-width: none; } } @@ -49,6 +50,10 @@ p, h1, h2, h3, h4, h5, h6 { #root, #__next { isolation: isolate; + @media (max-width: 768px) { + max-width: 100vw; + min-width: none; + } } /* Styles for the scrollbar */