Update resulting forms

TrueFiEng · Apr 29, 2024 · fa22b5f · fa22b5f
1 parent 881c7ae
commit fa22b5f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 13 deletions.
diff --git a/packages/frontend/src/components/form/Form.tsx b/packages/frontend/src/components/form/Form.tsx
@@ -22,7 +22,7 @@ export const FormWrapper = styled.div`
   flex-direction: column;
   row-gap: 16px;
   padding: 82px 0 82px;
-  width: 431px;
+  width: 440px;
 `
 
 export const FormSectionWrapper = styled(FormWrapper)`

diff --git a/packages/frontend/src/components/userActious/BidAwaiting.tsx b/packages/frontend/src/components/userActious/BidAwaiting.tsx
@@ -1,17 +1,12 @@
-import styled from 'styled-components'
 import { FormWideWrapper } from '@/components/form'
 import { useReadAuctionParams } from '@/blockchain/hooks/useReadAuctionParams'
 import { formatDate } from '@/utils/formatters/formatDate'
 
 export const BidAwaiting = () => {
   const { biddingStartTime } = useReadAuctionParams()
   return (
-    <BidAwaitingWrapper>
+    <FormWideWrapper>
       <h2>Bidding starts on {formatDate(biddingStartTime)}</h2>
-    </BidAwaitingWrapper>
+    </FormWideWrapper>
   )
 }
-
-const BidAwaitingWrapper = styled(FormWideWrapper)`
-  padding: 0 54px;
-`
diff --git a/packages/frontend/src/components/userActious/claim/AwaitingResults.tsx b/packages/frontend/src/components/userActious/claim/AwaitingResults.tsx
@@ -1,8 +1,13 @@
 import { FormHeading, FormText, FormWideWrapper } from '@/components/form'
+import { styled } from 'styled-components'
 
 export const AwaitingResults = () => (
-  <FormWideWrapper>
+  <BidAwaitingWrapper>
     <FormHeading>Wait for results ⏳</FormHeading>
     <FormText>The bidding window has closed. Waiting for the organizers to settle the contest.</FormText>
-  </FormWideWrapper>
+  </BidAwaitingWrapper>
 )
+
+const BidAwaitingWrapper = styled(FormWideWrapper)`
+  width: 460px;
+`
diff --git a/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx b/packages/frontend/src/components/userActious/claim/ClaimVoucherSection.tsx
@@ -26,7 +26,7 @@ export const ClaimVoucherSection = ({ setVoucher }: ClaimVoucherSectionProps) =>
     <VoucherOption>
       {error && <ErrorNotifications error={error} onClick={mutate} reset={reset} />}
       <Button view="primary" wide onClick={mutate} isLoading={isPending}>
-        Claim voucher code
+        Get voucher code
       </Button>
       {state !== 'ClaimingClosed' && <VoucherTimeLeft />}
     </VoucherOption>

diff --git a/packages/frontend/src/components/userActious/claim/VoucherTimeLeft.tsx b/packages/frontend/src/components/userActious/claim/VoucherTimeLeft.tsx
@@ -16,11 +16,17 @@ export const VoucherTimeLeft = () => {
 
   return (
     <TimeRow>
-      <b>{timeLeft}</b> <span>left to redeem your voucher code</span>
+      <h3>{timeLeft}</h3> <span>left to redeem your voucher code</span>
     </TimeRow>
   )
 }
 
 const TimeRow = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  flex-wrap: wrap;
+  column-gap: 16px;
+  width: 100%;
   color: ${Colors.Black};
 `
diff --git a/packages/frontend/src/components/userActious/claim/WinBidForm.tsx b/packages/frontend/src/components/userActious/claim/WinBidForm.tsx
@@ -44,6 +44,7 @@ export const WinBidForm = ({ userBid, withdrawalAmount, setView, voucher, setVou
 }
 
 export const WinnerForm = styled(Form)`
+  max-width: 440px;
   row-gap: 20px;
   text-align: center;
 `
@@ -62,7 +63,7 @@ const winTypeToText: Record<WinType, ReactNode> = {
   ),
   [WinType.Raffle]: (
     <span>
-      You were chosen <b>in the raffle</b> and have successfully purchased a ticket!
+      You were chosen <b>in the raffle!</b>
     </span>
   ),
 }