Mobile optimization

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));

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 (
     <HeaderContainer py={1}>
-      <Grid container columnSpacing={{ md: 2 }} alignItems="center">
-        <Grid item xs={6} sx={{ display: 'flex', alignItems: 'center' }}>
+      <Grid container columnSpacing={{ xs: 2 }} alignItems="center">
+        <Grid item xs={4} md={6} sx={{ display: 'flex', alignItems: 'center' }}>
           <HeaderLogo to="/">
             <SvgIcon
               component={logo}
               viewBox="0 0 173 34"
-              style={{ width: 'unset', height: 'unset' }}
+              style={{ width: '115px', height: '23px' }}
             />
           </HeaderLogo>
         </Grid>
+        <Grid item xs={8} display={{ md: 'none' }}>
+          <Stack direction="row" alignItems="center" gap={2} justifyContent="end" display={{ xs: 'flex', md: 'none' }}>
+            {status === 'connected'
+              && (
+                <div style={{ display: 'flex' }}>
+                  <SvgIcon
+                    component={starknet}
+                    viewBox="0 0 16 16"
+                    style={{ width: 'unset', height: 'unset' }}
+                  />
+                  {isProductionChainId(chainId)
+                    ? (
+                      <NetworkCardMobile title="Starknet Mainnet">
+                        Mainnet
+                      </NetworkCardMobile>
+                    )
+                    : (
+                      <NetworkCardMobile title="Starknet Görli">
+                        Görli
+                      </NetworkCardMobile>
+                    )}
+                </div>
+              )}
+            <AccountElement>
+              <Web3Status />
+            </AccountElement>
+          </Stack>
+        </Grid>
         <Grid
           item
           xs={12}
@@ -68,13 +98,13 @@ const Header = () => {
             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 }}
           >
             {/* <LanguageSwitcher /> */}
             {/* <HeaderWallet> */}
-            <Stack direction="row" alignItems="flex-start" gap={5}>
+            <Stack direction="row" alignItems="center" gap={5}>
               {location.pathname === '/mission' ? (
                 <ActiveLink to="/mission">
                   <Typography variant="body1" color="white">
@@ -111,22 +141,34 @@ const Header = () => {
                       Profile
                     </Typography>
                   </Link>
+                  {/* {!closeProfilePopout && <Box sx={{ display: {xs: 'block', md: 'none'} }} style={{height: '100px'}}></Box>}
+                   */}
                   {!closeProfilePopout && <ProfilePopout />}
                 </>
               )}
               {status === 'connected'
-                && (isProductionChainId(chainId) ? (
-                  <NetworkCard title="Starknet Mainnet">
-                    Starknet Mainnet
-                  </NetworkCard>
-                ) : (
-                  <NetworkCard title="Starknet Görli">
-                    Starknet Görli
-                  </NetworkCard>
-                ))}
-              <AccountElement>
-                <Web3Status />
-              </AccountElement>
+                && (
+                  <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                    {
+                      isProductionChainId(chainId)
+                        ? (
+                          <NetworkCard title="Starknet Mainnet">
+                            Starknet Mainnet
+                          </NetworkCard>
+                        )
+                        : (
+                          <NetworkCard title="Starknet Görli">
+                            Starknet Görli
+                          </NetworkCard>
+                        )
+                    }
+                  </Box>
+                )}
+              <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
+                <AccountElement>
+                  <Web3Status />
+                </AccountElement>
+              </Box>
             </Stack>
             {/* </HeaderWallet> */}
           </Box>
@@ -201,6 +243,7 @@ const Web3StatusInner = ({ onWalletModalToggle = noop }) => {
           <AddressCard>
             {connector && <StatusIcon connector={connector} />}
             <Typography
+              display={{ xs: 'none', md: 'block' }}
               variant="body1"
               color="text.primary"
               style={{
@@ -213,6 +256,20 @@ const Web3StatusInner = ({ onWalletModalToggle = noop }) => {
             >
               {getShortenAddress(address)}
             </Typography>
+            <Typography
+              display={{ xs: 'block', md: 'none' }}
+              variant="body1"
+              color="text.primary"
+              style={{
+                fontSize: '16px',
+                fontFamily: '"Avenir LT Std", sans-serif',
+                fontWeight: '600',
+                marginLeft: '4px',
+                lineHeight: '1',
+              }}
+            >
+              {getShortenAddressForMobile(address)}
+            </Typography>
           </AddressCard>
         </Stack>
       </Web3StatusConnected>

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,
 };

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 = ({
       <QuestCardDescription style={{ maxWidth: '314px' }}>
         {description}
       </QuestCardDescription>
+      <Box sx={{ display: { xs: 'block', md: 'none' }, mb: '20px' }}>
+        <MintCardImg nftImg={nftImg} status={status} statuses={statuses} />
+      </Box>
       {status === statuses.beforeCheck && (
         <QuestCardBtn onClick={onCheck}>Check Eligibility</QuestCardBtn>
       )}
@@ -65,37 +69,9 @@ const MintCard = ({
         </MintCardClaimed>
       )}
     </div>
-
-    <div style={{ position: 'relative' }}>
-      {status === statuses.claimed && (
-        <SvgIcon
-          component={claimed}
-          inheritViewBox
-          style={{
-            width: 'unset',
-            height: 'unset',
-            position: 'absolute',
-            bottom: '30px',
-            left: '-40px',
-          }}
-        />
-      )}
-      {status === statuses.noneligible && (
-        <SvgIcon
-          component={noneligibleImg}
-          inheritViewBox
-          style={{ width: 'unset', height: '240px' }}
-        />
-      )}
-      {status !== statuses.noneligible
-        && status !== statuses.beforeCheck
-        && status !== statuses.checking && (
-        <img src={nftImg} style={{ width: '200px', borderRadius: '5px' }} />
-      )}
-      {(status === statuses.beforeCheck || status === statuses.checking) && (
-        <img src={nftImg} />
-      )}
-    </div>
+    <Box sx={{ display: { xs: 'none', md: 'block' } }}>
+      <MintCardImg nftImg={nftImg} status={status} statuses={statuses} />
+    </Box>
   </MintBox>
 );
 

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`

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
+}) => (
+  <div style={{ position: 'relative' }}>
+    {status === statuses.claimed && (
+      <SvgIcon
+        component={claimed}
+        inheritViewBox
+        style={{
+          width: 'unset',
+          height: 'unset',
+          position: 'absolute',
+          bottom: '30px',
+          left: '-40px',
+        }}
+      />
+    )}
+    {status === statuses.noneligible && (
+      <SvgIcon
+        component={noneligibleImg}
+        inheritViewBox
+        style={{ width: 'unset', height: '240px' }}
+      />
+    )}
+    {status !== statuses.noneligible
+      && status !== statuses.beforeCheck
+      && status !== statuses.checking && (
+        <img src={nftImg} style={{ width: '200px', borderRadius: '5px' }} />
+      )}
+    {(status === statuses.beforeCheck || status === statuses.checking) && (
+      <img src={nftImg} />
+    )}
+  </div>
+);
+
+export default MintCardImg;

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`

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 = ({
             </div>
           )}
         </div>
-
+        {campaignImg && matcheslessThanLg && (
+        <Box sx={{ display1: { xs: 'block', lg: 'none' } }}>
+          <SvgIcon
+            component={campaignImg}
+            // inheritViewBox
+            viewBox='-100 0 700 350'
+            preserveAspectRatio="xMidYMid slice"
+            style={{ width: "unset", height: "unset", maxWidth: '90%' }}
+          />
+        </Box>
+      )}
         <Link to={`/mission`}>
           {duration && <QuestCardBtn>Enter</QuestCardBtn>}
         </Link>
       </div>
-      {campaignImg && (
-        <div>
+      {campaignImg && matchesLg && (
+        <Box sx={{ display1: { xs: 'none', lg: 'block' } }}>
           <SvgIcon
             component={campaignImg}
             inheritViewBox
             style={{ width: "unset", height: "unset" }}
           />
-        </div>
+        </Box>
       )}
     </QuestBox>
   );