🎰 Update bid page & lists (#42)

Co-authored-by: Bartlomiej Tarczynski <51199571+b-tarczynski@users.noreply.github.com>
efdevcon · Apr 29, 2024 · 6f81419 · 6f81419
1 parent 8a7cdd3
commit 6f81419
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 31 deletions.
diff --git 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
@@ -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
@@ -19,7 +19,7 @@ export const BidsSubList = ({ bids, title }: Props) => {
         <SubListHeader>{title}</SubListHeader>
       </TitleBanner>
       <BidsListContainer>
-        {bids.map((bid, index) => (
+        {bids.map((bid) => (
           <BidsListEntry key={bid.bidderId} bid={bid} isUser={address === bid.address} view="full" />
         ))}
       </BidsListContainer>

diff --git 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
@@ -9,7 +9,9 @@ export const Header = () => {
 
   return (
     <StyledHeader>
-      <BackButton url="/" />
+      <ButtonWrapper>
+        <BackButton url="/" />
+      </ButtonWrapper>
       <Wrapper>
         <TitleColumn>
           <Title>Number of participants:</Title>
@@ -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
@@ -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
@@ -16,7 +16,7 @@ export const BidsShortListSection = () => {
   if (areBidsLoading) {
     return (
       <EmptyList>
-        <ColoredText>Loading...</ColoredText>
+        <HeaderText>Loading...</HeaderText>
       </EmptyList>
     )
   }
@@ -25,18 +25,20 @@ export const BidsShortListSection = () => {
     <BidsListContainer>
       {bidList.length === 0 ? (
         <EmptyList>
-          <ColoredText>
+          <HeaderText>
             {state === 'AwaitingBidding' ? 'Bids will show up here' : `No bidders yet. Be the first one!`}
-          </ColoredText>
+          </HeaderText>
         </EmptyList>
       ) : (
         <>
           <ListHeader>
             <h3>Number of participants:</h3>
-            <ColoredText>{bidList.length}</ColoredText>
+            <HeaderText>{bidList.length}</HeaderText>
           </ListHeader>
-          <BidsListHeaders />
-          <BidsShortList />
+          <ListContainer>
+            <BidsListHeaders />
+            <BidsShortList />
+          </ListContainer>
         </>
       )}
       {bidList.length !== 0 && (
@@ -49,28 +51,36 @@ 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%;
 `
 
 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
@@ -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};