From 6f814199b31c50e2f975bd1d929be62bf60e776f Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Mon, 29 Apr 2024 08:27:13 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=B0=20Update=20bid=20page=20&=20lists?= =?UTF-8?q?=20(#42)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Bartlomiej Tarczynski <51199571+b-tarczynski@users.noreply.github.com> --- .../src/components/bids/BidsColumns.tsx | 8 ++--- .../src/components/bids/BidsListEntry.tsx | 11 +++---- .../components/bids/allBids/BidsSubList.tsx | 2 +- .../bids/allBids/GoldenTicketWinner.tsx | 3 +- .../src/components/bids/allBids/Header.tsx | 12 +++++++- .../bids/bidsShortList/BidsShortList.tsx | 6 ---- .../bidsShortList/BidsShortListSection.tsx | 30 ++++++++++++------- .../frontend/src/components/common/Header.tsx | 1 + 8 files changed, 42 insertions(+), 31 deletions(-) diff --git a/packages/frontend/src/components/bids/BidsColumns.tsx b/packages/frontend/src/components/bids/BidsColumns.tsx index 6f9768fd9..d10fd8ae5 100644 --- a/packages/frontend/src/components/bids/BidsColumns.tsx +++ b/packages/frontend/src/components/bids/BidsColumns.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components' -import { Colors } from '@/styles/colors' export const BidsColumns = styled.div` display: grid; @@ -9,16 +8,17 @@ export const BidsColumns = styled.div` font-weight: 600; ` -export const PlaceColumn = styled.span` +export const PlaceColumn = styled.div` grid-area: place; + z-index: 2; ` export const BidColumn = styled.div` grid-area: bid; - color: ${Colors.Black}; + z-index: 2; ` -export const AddressColumn = styled.span` +export const AddressColumn = styled.div` grid-area: address; text-align: right; z-index: 2; diff --git a/packages/frontend/src/components/bids/BidsListEntry.tsx b/packages/frontend/src/components/bids/BidsListEntry.tsx index 449bf50cf..a1f39252c 100644 --- a/packages/frontend/src/components/bids/BidsListEntry.tsx +++ b/packages/frontend/src/components/bids/BidsListEntry.tsx @@ -41,14 +41,12 @@ const BidsEntryRow = styled.div<{ $isUser?: boolean }>` css` &::before { content: ''; - width: calc(100% + 48px); + width: calc(100% + 60px); height: calc(100% + 20px); - border-width: 2px; - border-style: solid; - border-image: linear-gradient(90deg, rgba(126, 193, 136, 1), rgba(101, 196, 232, 1), rgba(119, 121, 181, 1)) 1; + background: ${Colors.Pink}; position: absolute; top: -10px; - left: -24px; + left: -30px; z-index: 1; } `}; @@ -57,6 +55,5 @@ const BidsEntryRow = styled.div<{ $isUser?: boolean }>` const AddressLink = styled.a` font-family: 'Space Mono', 'Roboto Mono', monospace; font-style: normal; - color: ${Colors.Black}; - text-decoration: none; + text-decoration: underline; ` diff --git a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx index d76db23ba..0f53954d6 100644 --- a/packages/frontend/src/components/bids/allBids/BidsSubList.tsx +++ b/packages/frontend/src/components/bids/allBids/BidsSubList.tsx @@ -19,7 +19,7 @@ export const BidsSubList = ({ bids, title }: Props) => { {title} - {bids.map((bid, index) => ( + {bids.map((bid) => ( ))} diff --git a/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx b/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx index 7af9400e7..e8498f9db 100644 --- a/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx +++ b/packages/frontend/src/components/bids/allBids/GoldenTicketWinner.tsx @@ -60,6 +60,5 @@ const HeaderText = styled.h3` const AddressLink = styled.a` font-family: 'Space Mono', 'Roboto Mono', monospace; font-style: normal; - color: ${Colors.Black}; - text-decoration: none; + text-decoration: underline; ` diff --git a/packages/frontend/src/components/bids/allBids/Header.tsx b/packages/frontend/src/components/bids/allBids/Header.tsx index 4c5e52599..44af3e47e 100644 --- a/packages/frontend/src/components/bids/allBids/Header.tsx +++ b/packages/frontend/src/components/bids/allBids/Header.tsx @@ -9,7 +9,9 @@ export const Header = () => { return ( - + + + Number of participants: @@ -45,3 +47,11 @@ const Title = styled.h2` background-color: ${Colors.White}; padding: 4px 20px; ` + +const ButtonWrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 16px; + background: ${Colors.White}; +` diff --git a/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx index 480e7efb4..00881f60b 100644 --- a/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx +++ b/packages/frontend/src/components/bids/bidsShortList/BidsShortList.tsx @@ -91,10 +91,4 @@ const within = (...[lower, higher, value]: number[]) => value >= lower && value const BidListText = styled.div` width: 100%; text-align: center; - background: linear-gradient(90deg, #7ec188 0%, #65c4e8 45.31%, #7779b5 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - color: transparent; - margin-top: -16px; ` diff --git a/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx b/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx index e6ce8ed3c..72946cf7d 100644 --- a/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx +++ b/packages/frontend/src/components/bids/bidsShortList/BidsShortListSection.tsx @@ -16,7 +16,7 @@ export const BidsShortListSection = () => { if (areBidsLoading) { return ( - Loading... + Loading... ) } @@ -25,18 +25,20 @@ export const BidsShortListSection = () => { {bidList.length === 0 ? ( - + {state === 'AwaitingBidding' ? 'Bids will show up here' : `No bidders yet. Be the first one!`} - + ) : ( <>

Number of participants:

- {bidList.length} + {bidList.length} - - + + + + )} {bidList.length !== 0 && ( @@ -49,18 +51,25 @@ export const BidsShortListSection = () => { } const BidsListContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + row-gap: 44px; + width: 100%; + padding: 44px 0; +` + +const ListContainer = styled.div` display: flex; flex-direction: column; align-items: center; row-gap: 32px; width: 100%; - padding: 46px 0; ` const ListHeader = styled.div` display: flex; justify-content: space-between; - margin-bottom: 22px; width: 100%; ` @@ -68,9 +77,10 @@ const EmptyList = styled.div` display: flex; align-items: center; justify-content: center; - margin: 48px 0; + margin: 46px 0; ` -const ColoredText = styled.h3` + +const HeaderText = styled.h3` width: max-content; color: ${Colors.Black}; ` diff --git a/packages/frontend/src/components/common/Header.tsx b/packages/frontend/src/components/common/Header.tsx index f78b9a40d..361e348da 100644 --- a/packages/frontend/src/components/common/Header.tsx +++ b/packages/frontend/src/components/common/Header.tsx @@ -15,6 +15,7 @@ export const headerBackgroundStyles = css` export const HeaderBar = styled.header` display: flex; + align-items: flex-start; flex-shrink: 0; width: 100%; background: ${Colors.White};