diff --git a/src/app/containers/SalesPage/hooks/useSaleEndTime.ts b/src/app/containers/SalesPage/hooks/useSaleEndTime.ts index 2cea473f0..9e92787a8 100644 --- a/src/app/containers/SalesPage/hooks/useSaleEndTime.ts +++ b/src/app/containers/SalesPage/hooks/useSaleEndTime.ts @@ -1,13 +1,20 @@ import { useEffect, useState } from 'react'; import moment from 'moment'; import { useCacheCallWithValue } from '../../../hooks/useCacheCallWithValue'; +import { currentNetwork } from '../../../../utils/classifiers'; // 12.30 GTM, 15th Jan const DATE_FORMAT = 'HH:mm [GMT], Do MMM'; export function useSaleEndTime() { const [endDate, setEndDate] = useState( - moment('2021-01-15 15:30+0').utc(false).toDate(), + moment( + currentNetwork === 'testnet' + ? '2021-01-15 15:30+0' + : '2021-01-21 15:30+0', + ) + .utc(false) + .toDate(), ); const [endDateString, setEndDateString] = useState( moment(endDate).format(DATE_FORMAT), diff --git a/src/app/containers/SalesPage/index.tsx b/src/app/containers/SalesPage/index.tsx index 7f1600235..7b53d77ac 100644 --- a/src/app/containers/SalesPage/index.tsx +++ b/src/app/containers/SalesPage/index.tsx @@ -126,20 +126,24 @@ export function SalesPage() { )} - {!isConnected ? ( - - ) : ( + {currentNetwork === 'testnet' && ( <> - {Number(state.maxDeposit) === 0 ? ( - + {!isConnected ? ( + ) : ( <> - {state.step === 1 && } - {state.step === 2 && } - {state.step === 3 && } - {state.step === 4 && } - {state.step === 5 && } - {state.step === 6 && } + {Number(state.maxDeposit) === 0 ? ( + + ) : ( + <> + {state.step === 1 && } + {state.step === 2 && } + {state.step === 3 && } + {state.step === 4 && } + {state.step === 5 && } + {state.step === 6 && } + + )} )} diff --git a/src/app/containers/SalesPage/screen1/index.tsx b/src/app/containers/SalesPage/screen1/index.tsx index 1b74fbd72..6bbbfec1c 100644 --- a/src/app/containers/SalesPage/screen1/index.tsx +++ b/src/app/containers/SalesPage/screen1/index.tsx @@ -11,7 +11,7 @@ import { useDispatch } from 'react-redux'; const StyledContent = styled.div` height: 620px; background: var(--sales-background); - max-width: 1200px; + max-width: 1235px; margin: 40px auto; border-radius: 20px; display: flex; diff --git a/src/app/containers/SalesPage/screen2/index.tsx b/src/app/containers/SalesPage/screen2/index.tsx index d001b61be..be7cedfd2 100644 --- a/src/app/containers/SalesPage/screen2/index.tsx +++ b/src/app/containers/SalesPage/screen2/index.tsx @@ -83,7 +83,7 @@ export default function Screen2() { return ( -

Welcome to the SOV Genesis Sale

+

Welcome to the SOV* Genesis Sale

diff --git a/src/app/containers/SalesPage/screen4/index.tsx b/src/app/containers/SalesPage/screen4/index.tsx index 4662e953e..94ea9421e 100644 --- a/src/app/containers/SalesPage/screen4/index.tsx +++ b/src/app/containers/SalesPage/screen4/index.tsx @@ -11,19 +11,22 @@ import SOVCalculator from 'app/components/SOVCalculator'; const StyledContent = styled.div` background: var(--sales-background); - max-width: 1200px; + max-width: 1235px; margin: 40px auto; border-radius: 20px; display: flex; flex-direction: column; position: relative; + .tab-item button { + font-size: 20px; + } .tab-content { background: black; min-height: 560px; height: 100%; position: relative; - padding-left: 15px; - padding-right: 15px; + padding-left: 3.5rem; + padding-right: 3.5rem; padding-bottom: 25px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; @@ -31,12 +34,31 @@ const StyledContent = styled.div` font-size: 28px; text-align: center; margin-top: 1em; + margin-bottom: 1.4rem; + } + .support-text { + font-size: 14px; + margin-top: 30px; } a { - color: var(--gold) !important; + color: var(--gold); font-weight: normal; font-size: 14px; } + p { + margin-bottom: 0.4rem; + } + ul { + padding: 0 18px; + margin: 0 0 3px 0; + li { + font-size: 16px; + font-weight: 300; + span { + font-size: 14px; + } + } + } } `; @@ -47,7 +69,7 @@ export default function Screen4() { return (
-
+
BTC
-
+
props.background && css` background: ${props.background}; `} border-radius: 10px; + .rbtc-text { + font-size: 18px; + } .header { display: flex; justify-content: center; @@ -60,10 +64,17 @@ const Wrapper = styled.div` .gas-fee { border-bottom: 1px solid grey; border-top: 1px solid grey; - padding: 1em 0; + padding: 0.9em 0 0.7rem; justify-content: center; text-align: center; font-size: 14px; + margin-top: 6px; + font-family: 'Work Sans'; + letter-spacing: 0; + font-weight: 300; + span { + padding-left: 10px; + } } .rbtc-input { background: white; @@ -71,14 +82,36 @@ const Wrapper = styled.div` border-radius: 8px; padding: 10px; color: black; + height: 50px; + font-size: 22px; + font-family: 'Work Sans'; + font-weight: 300; + margin-bottom: 4px; } .sov-res { text-align: center; background: #707070; border-radius: 8px; - padding: 10px; + padding: 9px; + display: flex; + align-items: center; + justify-content: center; font-size: 20px; + font-weight: 600; margin: 10px 0 20px 0; + span { + font-size: 14px; + font-weight: 100; + padding-left: 6px; + } + } + .font-sale-sm { + font-size: 14px; + font-weight: 100; + a { + color: white !important; + font-weight: 100 !important; + } } .content { padding: 20px; @@ -117,21 +150,25 @@ const StyledButton = styled.button.attrs(_ => ({ type: 'button', }))` border: none; - background: rgb(78, 205, 196); + background: #4ecdc4; color: white; height: 48px; text-align: center; + font-size: 24px; + letter-spacing: 0; + font-family: 'Work Sans'; + transition: background 0.3s; ${media.xl` - height: 50px; + height: 60px; padding: 2px 20px; border-radius: 8px; font-weight: 600; - + &:hover, &:focus { - background: rgba(78, 205, 196, 0.75) !important; + background: rgba(78, 205, 196, 0.9) !important; } &:active:hover { - background: rgb(78, 205, 196) !important; + background: #4ECDC4 !important; } `} ${props => @@ -292,12 +329,14 @@ export default function SendRBTC() { return !showTx ? (

Buy SOV with (r)BTC

-
-
+
+ -