🪙 Add mobile styles for all bids page (#69)

efdevcon · Jun 10, 2024 · d95d689 · d95d689
1 parent 31892be
commit d95d689
Show file tree

Hide file tree

Showing 12 changed files with 77 additions and 8 deletions.
diff --git a/packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx b/packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx
@@ -36,7 +36,7 @@ export const TransactionSuccess = ({ txHash, action, setView, onBackHome }: Prop
       <TransactionIdWrapper>
         <TransactionIdLabel>Your transaction hash</TransactionIdLabel>
         <TransactionIdBox>
-          <TransactionIdText>{shortenHexString(txHash, 12)}</TransactionIdText>
+          <TransactionIdText>{shortenHexString(txHash, 6, 12)}</TransactionIdText>
           <CopyButton value={txHash} side="top" text="Copy transaction hash" />
           <RedirectButton link={transactionLink} side="top" tooltip="View on Arbiscan" />
         </TransactionIdBox>

diff --git a/packages/frontend/src/components/bids/BidsListContainer.tsx b/packages/frontend/src/components/bids/BidsListContainer.tsx
@@ -1,3 +1,4 @@
+import { MediaQueries } from '@/styles/mediaQueries'
 import styled from 'styled-components'
 
 export const BidsListContainer = styled.div`
@@ -7,4 +8,8 @@ export const BidsListContainer = styled.div`
   width: 100%;
   margin: 0;
   padding: 0;
+
+  ${MediaQueries.medium} {
+    row-gap: 24px;
+  }
 `
diff --git a/packages/frontend/src/components/bids/BidsListEntry.tsx b/packages/frontend/src/components/bids/BidsListEntry.tsx
@@ -23,7 +23,7 @@ export const BidsListEntry = ({ bid, isUser, view = 'full' }: Props) => {
       </BidColumn>
       <AddressColumn>
         <AddressLink href={explorerAddressLink} target="_blank" rel="noopener noreferrer">
-          {view === 'short' ? shortenHexString(bid.address) : bid.address}
+          {view === 'short' ? shortenHexString(bid.address, 4) : bid.address}
         </AddressLink>
       </AddressColumn>
     </BidsEntryRow>

diff --git a/packages/frontend/src/components/bids/allBids/AllBids.tsx b/packages/frontend/src/components/bids/allBids/AllBids.tsx
@@ -10,6 +10,7 @@ import { useContractState } from '@/blockchain/hooks/useAuctionState'
 import { isAuctionSettled } from '@/utils/isAuctionSettled'
 import { SettledBidsList } from '@/components/bids/allBids/SettledBidsList'
 import { Colors } from '@/styles/colors'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 export const AllBids = () => {
   const [search, setSearch] = useState('')
@@ -59,4 +60,9 @@ const PageContainer = styled.div`
   max-width: 780px;
   padding: 28px 0 56px;
   background-color: ${Colors.White};
+
+  ${MediaQueries.medium} {
+    padding: 24px 32px;
+    row-gap: 16px;
+  }
 `
diff --git a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx
@@ -4,6 +4,8 @@ import { Colors } from '@/styles/colors'
 import { BidsListContainer } from '@/components/bids/BidsListContainer'
 import { BidsListEntry } from '@/components/bids/BidsListEntry'
 import { useAccount } from 'wagmi'
+import { useResponsiveHelpers } from '@/hooks/useResponsiveHelper'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 interface Props {
   bids: Bid[]
@@ -12,6 +14,7 @@ interface Props {
 
 export const BidsSubList = ({ bids, title }: Props) => {
   const { address } = useAccount()
+  const { isMobileWidth } = useResponsiveHelpers()
 
   return (
     <>
@@ -20,7 +23,12 @@ export const BidsSubList = ({ bids, title }: Props) => {
       </TitleBanner>
       <BidsListContainer>
         {bids.map((bid) => (
-          <BidsListEntry key={bid.bidderId} bid={bid} isUser={address === bid.address} view="full" />
+          <BidsListEntry
+            key={bid.bidderId}
+            bid={bid}
+            isUser={address === bid.address}
+            view={isMobileWidth ? 'short' : 'full'}
+          />
         ))}
       </BidsListContainer>
     </>
@@ -39,4 +47,8 @@ const TitleBanner = styled.div`
 const SubListHeader = styled.h3`
   font-size: 20px;
   line-height: 150%;
+
+  ${MediaQueries.medium} {
+    font-size: 16px;
+  }
 `
diff --git a/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx b/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx
@@ -2,12 +2,16 @@ import styled from 'styled-components'
 import { Colors } from '@/styles/colors'
 import { useExplorerAddressLink } from '@/blockchain/hooks/useExplorerLinks'
 import { Hex } from 'viem'
+import { useResponsiveHelpers } from '@/hooks/useResponsiveHelper'
+import { shortenHexString } from '@/utils/formatters/shortenHexString'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 interface Props {
   bidderAddress: Hex
 }
 
 export const GoldenTicketWinner = ({ bidderAddress }: Props) => {
+  const { isMobileWidth } = useResponsiveHelpers()
   const explorerLink = useExplorerAddressLink(bidderAddress)
 
   return (
@@ -16,7 +20,7 @@ export const GoldenTicketWinner = ({ bidderAddress }: Props) => {
       <Section>
         <HeaderText>THE GOLDEN TICKET WINNER IS:</HeaderText>
         <AddressLink href={explorerLink} target="_blank" rel="noopener noreferrer">
-          {bidderAddress}
+          {isMobileWidth ? shortenHexString(bidderAddress) : bidderAddress}
         </AddressLink>
       </Section>
       <Doot>🎉</Doot>
@@ -31,6 +35,12 @@ const Container = styled.div`
   width: 100%;
   height: 90px;
   background-color: ${Colors.Pink};
+
+  ${MediaQueries.medium} {
+    padding: 8px;
+    height: auto;
+    text-align: center;
+  }
 `
 
 const Section = styled.div`
@@ -46,6 +56,10 @@ const Doot = styled.div`
   justify-content: center;
   align-items: center;
   font-size: 40px;
+
+  ${MediaQueries.medium} {
+    font-size: 24px;
+  }
 `
 
 const ReverseDoot = styled(Doot)`

diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx
@@ -3,6 +3,7 @@ import { Colors } from '@/styles/colors'
 import { useBids } from '@/providers/BidsProvider'
 import { HeaderBar } from '@/components/common/Header'
 import { BackButton } from '@/components/buttons/BackButton'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 export const Header = () => {
   const { bidList } = useBids()
@@ -26,6 +27,13 @@ const StyledHeader = styled(HeaderBar)`
   height: 160px;
   padding: 28px 68px;
   overflow: hidden;
+
+  ${MediaQueries.medium} {
+    flex-direction: column;
+    row-gap: 8px;
+    height: 128px;
+    padding: 12px 32px 8px;
+  }
 `
 
 const Wrapper = styled.div`
@@ -34,18 +42,32 @@ const Wrapper = styled.div`
   height: 100%;
   width: 100%;
   color: ${Colors.White};
+
+  ${MediaQueries.medium} {
+    justify-content: flex-start;
+  }
 `
 
 const TitleColumn = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   row-gap: 8px;
+
+  ${MediaQueries.medium} {
+    align-items: flex-start;
+    row-gap: 0;
+  }
 `
 
 const Title = styled.h2`
   background-color: ${Colors.White};
   padding: 4px 20px;
+
+  ${MediaQueries.medium} {
+    font-size: 20px;
+    padding: 0 10px;
+  }
 `
 
 const ButtonWrapper = styled.div`
@@ -54,4 +76,8 @@ const ButtonWrapper = styled.div`
   align-items: center;
   padding: 16px;
   background: ${Colors.White};
+
+  ${MediaQueries.medium} {
+    padding: 0;
+  }
 `
diff --git a/packages/frontend/src/components/bids/allBids/NothingFound.tsx b/packages/frontend/src/components/bids/allBids/NothingFound.tsx
@@ -16,4 +16,5 @@ const Wrapper = styled.div`
   justify-content: center;
   align-items: center;
   flex: 1;
+  text-align: center;
 `
diff --git a/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx
@@ -35,7 +35,7 @@ export const BidsShortListSection = () => {
         <>
           <ListHeader>
             <FormSubHeading>Number of participants:</FormSubHeading>
-            <HeaderText>{bidList.length}</HeaderText>
+            <FormSubHeading>{bidList.length}</FormSubHeading>
           </ListHeader>
           <ListContainer>
             <BidsListHeaders />

diff --git a/packages/frontend/src/components/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx
@@ -4,6 +4,7 @@ import { SearchIcon } from '@/components/icons'
 import { Colors } from '@/styles/colors'
 import { CloseButton } from '@/components/buttons/CloseButton'
 import { useDebounceValue } from '@/hooks/useDebounce'
+import { MediaQueries } from '@/styles/mediaQueries'
 
 interface Props {
   setSearch: (search: string) => void
@@ -37,6 +38,10 @@ const SearchInputWrapper = styled.div`
   border-color: ${Colors.GreyLight};
   background-color: ${Colors.White};
   transition: all 0.25s ease;
+
+  ${MediaQueries.medium} {
+    margin-bottom: 0;
+  }
 `
 
 const StyledInput = styled.input`

diff --git a/packages/frontend/src/components/topBar/AccountButton.tsx b/packages/frontend/src/components/topBar/AccountButton.tsx
@@ -14,7 +14,7 @@ export const AccountButton = () => {
       {address ? (
         <>
           <Button view="secondary" onClick={() => setIsModalOpen(!isModalOpen)}>
-            {shortenHexString(address)}
+            {shortenHexString(address, 4)}
           </Button>
           {isModalOpen && <AccountDetailModal isShown={isModalOpen} onRequestClose={() => setIsModalOpen(false)} />}
         </>

diff --git a/packages/frontend/src/utils/formatters/shortenHexString.ts b/packages/frontend/src/utils/formatters/shortenHexString.ts
@@ -1,4 +1,4 @@
 import { Hex } from 'viem'
 
-export const shortenHexString = (hexString: Hex, end = 4) =>
-  `${hexString.substring(0, 6)}......${hexString.substring(hexString.length - end)}`
+export const shortenHexString = (hexString: Hex, start = 6, end = 4) =>
+  `${hexString.substring(0, start)}....${hexString.substring(hexString.length - end)}`