diff --git a/src/common/addressHelper.js b/src/common/addressHelper.js index febb57d..c8fbde7 100644 --- a/src/common/addressHelper.js +++ b/src/common/addressHelper.js @@ -18,6 +18,12 @@ export const getShortenAddress = (address = '', charsWithout0X = 4) => { return `${parsed.substring(0, charsWithout0X + 2)}...${parsed.substring(63 - charsWithout0X)}`; }; +export const getShortenAddressForMobile = (address = '') => { + const parsed = (address); + if (!parsed) { return address; } + return `${parsed.substring(0, 4)}..${parsed.substring(63 - 3)}`; +}; + export const areEqualAddresses = (a = '', b = '') => { if (!(isStarknetAddress(a) && isStarknetAddress(b))) { return false; } return (getChecksumAddress(a) === getChecksumAddress(b)); diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 4c81ef0..8dcaa99 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -16,14 +16,16 @@ import { HeaderContainer, ActiveLink, HeaderSelectionBar, NetworkCard, + NetworkCardMobile, AddressCard } from './Header.styles'; import { useAccountDetails, useWalletActionHandlers } from '../../hooks/index.ts'; import { eventsLookup } from '../../common/constants'; import { isProductionChainId } from '../../common/connectors/index.ts'; -import { getShortenAddress } from '../../common/addressHelper'; +import { getShortenAddress, getShortenAddressForMobile } from '../../common/addressHelper'; import { EventEmitter } from '../../common/eventEmitter'; import logo from '../../resources/icons/logo.svg'; +import starknet from '../../resources/icons/starknet.svg'; import argentXIcon from '../../resources/icons/argentx.svg'; import braavosIcon from '../../resources/icons/braavos.svg'; import GradientButton from '../GradientButton/GradientButton'; @@ -42,16 +44,44 @@ const Header = () => { return ( - - + + + + + {status === 'connected' + && ( +
+ + {isProductionChainId(chainId) + ? ( + + Mainnet + + ) + : ( + + Görli + + )} +
+ )} + + + + + { display="flex" width="100%" backgroundColor={{ xs: '#212429', md: 'transparent' }} - justifyContent={{ xs: 'flex-start', md: 'flex-end' }} + justifyContent={{ xs: 'center', md: 'flex-end' }} px={{ xs: 2, md: 0 }} py={{ xs: 2, md: 0 }} > {/* */} {/* */} - + {location.pathname === '/mission' ? ( @@ -111,22 +141,34 @@ const Header = () => { Profile + {/* {!closeProfilePopout && } + */} {!closeProfilePopout && } )} {status === 'connected' - && (isProductionChainId(chainId) ? ( - - Starknet Mainnet - - ) : ( - - Starknet Görli - - ))} - - - + && ( + + { + isProductionChainId(chainId) + ? ( + + Starknet Mainnet + + ) + : ( + + Starknet Görli + + ) + } + + )} + + + + + {/* */} @@ -201,6 +243,7 @@ const Web3StatusInner = ({ onWalletModalToggle = noop }) => { {connector && } { > {getShortenAddress(address)} + + {getShortenAddressForMobile(address)} + diff --git a/src/components/Header/Header.styles.jsx b/src/components/Header/Header.styles.jsx index 3bd2822..cca8e38 100644 --- a/src/components/Header/Header.styles.jsx +++ b/src/components/Header/Header.styles.jsx @@ -58,6 +58,16 @@ const NetworkCard = styled(Card)` margin-right: -30px; `; +const NetworkCardMobile = styled.div` + color: #fff; + font-family: Avenir LT Std; + font-size: 14px; + font-style: normal; + font-weight: 600; + line-height: 20px; + margin-left: 3px; +`; + const AddressCard = styled(Card)` border-radius: 8px; flex: 1; @@ -128,5 +138,6 @@ export { Web3StatusConnect, HeaderSelectionBar, NetworkCard, + NetworkCardMobile, AddressCard, }; diff --git a/src/components/MintCard/MintCard.jsx b/src/components/MintCard/MintCard.jsx index 8695e8a..396b321 100644 --- a/src/components/MintCard/MintCard.jsx +++ b/src/components/MintCard/MintCard.jsx @@ -1,15 +1,16 @@ import React from 'react'; -import { SvgIcon } from '@mui/material'; +import { SvgIcon, Box } from '@mui/material'; -import { QuestCardTitle, +import { + QuestCardTitle, QuestCardDescription, QuestCardAddress, - QuestCardBtn } from '../QuestCard/QuestCard.styles'; + QuestCardBtn +} from '../QuestCard/QuestCard.styles'; import { MintCardStatus, MintCardClaimed, MintBox } from './MintCard.styles'; import { getShortenAddress } from '../../common/addressHelper'; import claimedMark from '../../resources/icons/claimed_mark.svg'; -import claimed from '../../resources/icons/claimed.svg'; -import noneligibleImg from '../../resources/icons/noneligible.svg'; +import MintCardImg from './MintCardImg'; const statuses = { beforeCheck: 'isEligibiltyStatusBeforeCheck', @@ -37,6 +38,9 @@ const MintCard = ({ {description} + + + {status === statuses.beforeCheck && ( Check Eligibility )} @@ -65,37 +69,9 @@ const MintCard = ({ )} - -
- {status === statuses.claimed && ( - - )} - {status === statuses.noneligible && ( - - )} - {status !== statuses.noneligible - && status !== statuses.beforeCheck - && status !== statuses.checking && ( - - )} - {(status === statuses.beforeCheck || status === statuses.checking) && ( - - )} -
+ + + ); diff --git a/src/components/MintCard/MintCard.styles.jsx b/src/components/MintCard/MintCard.styles.jsx index e4a02b8..27214ee 100644 --- a/src/components/MintCard/MintCard.styles.jsx +++ b/src/components/MintCard/MintCard.styles.jsx @@ -9,6 +9,9 @@ const MintBox = styled.div` justify-content: space-between; padding: 30px; margin-top: 20px; + @media (max-width: 959px) { + width: unset; + } `; const MintCardStatus = styled.div` diff --git a/src/components/MintCard/MintCardImg.jsx b/src/components/MintCard/MintCardImg.jsx new file mode 100644 index 0000000..2ca1d1e --- /dev/null +++ b/src/components/MintCard/MintCardImg.jsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { SvgIcon } from '@mui/material'; + +import claimed from '../../resources/icons/claimed.svg'; +import noneligibleImg from '../../resources/icons/noneligible.svg'; + +const MintCardImg = ({ + nftImg, + status, + statuses +}) => ( +
+ {status === statuses.claimed && ( + + )} + {status === statuses.noneligible && ( + + )} + {status !== statuses.noneligible + && status !== statuses.beforeCheck + && status !== statuses.checking && ( + + )} + {(status === statuses.beforeCheck || status === statuses.checking) && ( + + )} +
+); + +export default MintCardImg; \ No newline at end of file diff --git a/src/components/ProfilePopout/ProfilePopout.styles.jsx b/src/components/ProfilePopout/ProfilePopout.styles.jsx index 86de0ca..9ff63ec 100644 --- a/src/components/ProfilePopout/ProfilePopout.styles.jsx +++ b/src/components/ProfilePopout/ProfilePopout.styles.jsx @@ -10,6 +10,9 @@ const ProfilePopoutContainer = styled.div` position: absolute; right: ${(props) => (props.status === 'connected' ? '172px' : '-8px')}; top: 44px; + @media (max-width: 1199px) { + display: none; + } `; const ProfilePopoutRect = styled.div` @@ -29,6 +32,9 @@ const ProfilePopoutRect = styled.div` font-style: normal; font-weight: 700; line-height: 24.5px; /* 153.125% */ + @media (max-width: 959px) { + height: 75px; + } `; const ProfilePopoutText = styled.div` diff --git a/src/components/QuestCard/QuestCard.jsx b/src/components/QuestCard/QuestCard.jsx index 5923d2b..f1b6ffd 100644 --- a/src/components/QuestCard/QuestCard.jsx +++ b/src/components/QuestCard/QuestCard.jsx @@ -1,6 +1,7 @@ import React from "react"; -import { SvgIcon } from "@mui/material"; +import { SvgIcon, Box } from "@mui/material"; import { Link } from "react-router-dom"; +import useMediaQuery from '@mui/material/useMediaQuery'; import { QuestBox, @@ -24,8 +25,11 @@ const QuestCard = ({ nftAmount, campaignImg, }) => { + const matchesSm = useMediaQuery('(max-width:768px)'); + const matchesLg = useMediaQuery('(min-width:1200px)'); + const matcheslessThanLg = useMediaQuery('(max-width:1200px)'); const styles = {}; - if (questType === "FEATURED CONTEST") { + if (questType === "FEATURED CONTEST" && !matchesSm) { styles.maxWidth = "430px"; } return ( @@ -66,19 +70,29 @@ const QuestCard = ({ )} - + {campaignImg && matcheslessThanLg && ( + + + + )} {duration && Enter} - {campaignImg && ( -
+ {campaignImg && matchesLg && ( + -
+ )} ); diff --git a/src/components/QuestCard/QuestCard.styles.jsx b/src/components/QuestCard/QuestCard.styles.jsx index c1954c9..eae9b16 100644 --- a/src/components/QuestCard/QuestCard.styles.jsx +++ b/src/components/QuestCard/QuestCard.styles.jsx @@ -14,6 +14,9 @@ const QuestBox = styled(Box)` padding-bottom: 60px; padding-right: 30px; padding-top: 30px; + @media (max-width: 600px) { + padding-left: 30px; + } `; const QuestCardCalend = styled.div` @@ -54,6 +57,9 @@ const QuestCardTitle = styled.p` font-style: normal; font-weight: 700; line-height: 20px; /* 62.5% */ + @media (max-width: 600px) { + font-size: 22px; + } `; const QuestCardDescription = styled.p` @@ -64,6 +70,9 @@ const QuestCardDescription = styled.p` font-weight: 400; line-height: 26px; /* 162.5% */ max-width: 480px; + @media (max-width: 768px) { + max-width: 280px; + } `; const QuestCardNftNum = styled.div` @@ -119,6 +128,9 @@ const QuestCardBtn = styled.button` cursor: not-allowed; color: #9B9B9B } + @media (max-width: 600px) { + width: 100%; + } `; const QuestCardAddress = styled.div` color: var(--jedi-white, #FFF); diff --git a/src/layouts/MainLayout/MainLayout.styles.jsx b/src/layouts/MainLayout/MainLayout.styles.jsx index e4f292c..a892573 100644 --- a/src/layouts/MainLayout/MainLayout.styles.jsx +++ b/src/layouts/MainLayout/MainLayout.styles.jsx @@ -17,6 +17,9 @@ const MainLayoutBodyContainer = styled(Box)` const MainLayoutFooterContainer = styled(Box)` color: #fff; height: 85px; + @media (max-width: 959px) { + height: 185px; + } `; const MainLayoutContainer = styled(Box)` diff --git a/src/pages/MainPage/MainPage.jsx b/src/pages/MainPage/MainPage.jsx index 0795cc5..c1d4673 100644 --- a/src/pages/MainPage/MainPage.jsx +++ b/src/pages/MainPage/MainPage.jsx @@ -17,7 +17,7 @@ const MainPage = () => { const bodyContent = ( - + { campaignImg={campaign} /> - + - + + + + + + + + \ No newline at end of file