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
-
-
+
+
-
+
- Send (r)BTC:
+ Send (r)BTC:
setAmount(handleNumber(e.target.value))}
/>
-
+
Available Balance:{' '}
{weiToNumberFormat(balance, 8)}
@@ -352,17 +399,19 @@ export default function SendRBTC() {
(r)BTC
- Estimated Gas Fee*: ≈ {weiToNumberFormat(gasEstimation, 8)} (r)BTC
+ Estimated Gas Fee*:{' '}
+ ≈ {weiToNumberFormat(gasEstimation, 8)} (r)BTC
-
+
- Receive SOV:
+ Receive SOV:
- {toNumberFormat(sovToReceive)} ≈ {numberToUSD(price, 2)}
+
+ {toNumberFormat(sovToReceive)}{' '}
+ ≈ {numberToUSD(price, 2)}
}
/>
@@ -371,7 +420,11 @@ export default function SendRBTC() {
{...tx}
displayAbsolute={false}
/>
-
+
BUY SOV