From 1340dec7102b1bb3c3414659fc0a1c5dfa4ec999 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Fri, 7 Jun 2024 11:17:09 +0200 Subject: [PATCH 1/6] Add header mobile styles --- .../src/components/bids/allBids/Header.tsx | 26 +++++++++++++++++++ .../bidsShortList/BidsShortListSection.tsx | 2 +- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx index 44af3e47e..1814b73a0 100644 --- 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,6 +42,10 @@ const Wrapper = styled.div` height: 100%; width: 100%; color: ${Colors.White}; + + ${MediaQueries.medium} { + justify-content: flex-start; + } ` const TitleColumn = styled.div` @@ -41,11 +53,21 @@ const TitleColumn = styled.div` 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/bidsShortList/BidsShortListSection.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx index 18a29e5f3..cd493bdfe 100644 --- 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 = () => { <> Number of participants: - {bidList.length} + {bidList.length} From 693685232341379bb3dcf307566a273af07e94e7 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Fri, 7 Jun 2024 11:44:01 +0200 Subject: [PATCH 2/6] Add mobile styles to bids list --- .../src/components/bids/BidsListContainer.tsx | 5 +++++ .../src/components/bids/allBids/AllBids.tsx | 6 ++++++ .../src/components/bids/allBids/BidsSubList.tsx | 14 +++++++++++++- .../frontend/src/components/form/SearchInput.tsx | 5 +++++ 4 files changed, 29 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/bids/BidsListContainer.tsx b/packages/frontend/src/components/bids/BidsListContainer.tsx index 87f2716b3..e9c978e79 100644 --- 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/allBids/AllBids.tsx b/packages/frontend/src/components/bids/allBids/AllBids.tsx index f966bf019..afbd3ea7c 100644 --- 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 index 0f53954d6..cf20394cd 100644 --- 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) => { {bids.map((bid) => ( - + ))} @@ -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/form/SearchInput.tsx b/packages/frontend/src/components/form/SearchInput.tsx index 5924a7ff0..fd559fc30 100644 --- 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` From 270c3b894cd4b8e347ea5a247dbfcc82ac3e9184 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Fri, 7 Jun 2024 11:44:22 +0200 Subject: [PATCH 3/6] Make short address shorter --- packages/frontend/src/utils/formatters/shortenHexString.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/utils/formatters/shortenHexString.ts b/packages/frontend/src/utils/formatters/shortenHexString.ts index 52e7cfaac..68a762eea 100644 --- 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)}` + `${hexString.substring(0, 4)}....${hexString.substring(hexString.length - end)}` From cb747ede7abd70cabc1df744075b5fb1061f4ab8 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Fri, 7 Jun 2024 12:09:52 +0200 Subject: [PATCH 4/6] Add mobile styles for golden ticket banner --- .../bids/allBids/GoldenTicketWinner.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx b/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx index e8498f9db..a8d598aec 100644 --- 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) => {
THE GOLDEN TICKET WINNER IS: - {bidderAddress} + {isMobileWidth ? shortenHexString(bidderAddress) : bidderAddress}
🎉 @@ -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)` From 7e678cf3e4bbb58edc2c79952639d862841142e4 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Fri, 7 Jun 2024 12:10:06 +0200 Subject: [PATCH 5/6] Align nothing found text --- packages/frontend/src/components/bids/allBids/NothingFound.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/components/bids/allBids/NothingFound.tsx b/packages/frontend/src/components/bids/allBids/NothingFound.tsx index c5d78f9c1..068d8393e 100644 --- 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; ` From 60a0a2fb96d84356c298e290372bd2e5e7b1a5b7 Mon Sep 17 00:00:00 2001 From: Maria Rushkova Date: Mon, 10 Jun 2024 15:44:48 +0200 Subject: [PATCH 6/6] Add optional start argument to `shortenHexString` function --- .../auction/TransactionSuccess/TransactionSuccess.tsx | 2 +- packages/frontend/src/components/bids/BidsListEntry.tsx | 2 +- packages/frontend/src/components/topBar/AccountButton.tsx | 2 +- packages/frontend/src/utils/formatters/shortenHexString.ts | 4 ++-- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx b/packages/frontend/src/components/auction/TransactionSuccess/TransactionSuccess.tsx index 20865e024..9dcbdaab7 100644 --- 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 Your transaction hash - {shortenHexString(txHash, 12)} + {shortenHexString(txHash, 6, 12)} diff --git a/packages/frontend/src/components/bids/BidsListEntry.tsx b/packages/frontend/src/components/bids/BidsListEntry.tsx index ae8e3eb23..c21925ab9 100644 --- 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) => { - {view === 'short' ? shortenHexString(bid.address) : bid.address} + {view === 'short' ? shortenHexString(bid.address, 4) : bid.address} diff --git a/packages/frontend/src/components/topBar/AccountButton.tsx b/packages/frontend/src/components/topBar/AccountButton.tsx index 61b8945e4..b88998c92 100644 --- a/packages/frontend/src/components/topBar/AccountButton.tsx +++ b/packages/frontend/src/components/topBar/AccountButton.tsx @@ -14,7 +14,7 @@ export const AccountButton = () => { {address ? ( <> {isModalOpen && setIsModalOpen(false)} />} diff --git a/packages/frontend/src/utils/formatters/shortenHexString.ts b/packages/frontend/src/utils/formatters/shortenHexString.ts index 68a762eea..a17655723 100644 --- 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, 4)}....${hexString.substring(hexString.length - end)}` +export const shortenHexString = (hexString: Hex, start = 6, end = 4) => + `${hexString.substring(0, start)}....${hexString.substring(hexString.length - end)}`