finalize UI for create order

Synthetixio · Jul 28, 2020 · 6e60bcc · 6e60bcc
1 parent 62fc40b
commit 6e60bcc
Show file tree

Hide file tree

Showing 15 changed files with 794 additions and 667 deletions.
diff --git a/src/assets/images/reverse-arrow.svg b/src/assets/images/reverse-arrow.svg
diff --git a/src/components/Input/NumericInputWithCurrency.tsx b/src/components/Input/NumericInputWithCurrency.tsx
@@ -41,7 +41,7 @@ const TradeInput: FC<NumericInputWithCurrencyProps> = ({
 
 	return (
 		<>
-			{label != null && <Label>{label}</Label>}
+			{label != null && <Label className="label">{label}</Label>}
 			<Container className={className}>
 				<CurrencyContainer className="currency-container">
 					<StyledCurrencyName currencyKey={currencyKey} showIcon={showIcon} />

diff --git a/src/pages/Trade/components/ChartCard/Chart.tsx b/src/pages/Trade/components/ChartCard/Chart.tsx
@@ -106,7 +106,7 @@ const Chart: FC<ChartProps> = ({ synthPair: { quote }, data, isLoading, period,
 
 const ChartContainer = styled.div`
 	width: 100%;
-	height: 250px;
+	height: 244px;
 	display: flex;
 	justify-content: center;
 	align-items: center;

diff --git a/src/pages/Trade/components/ChartCard/ChartCard.tsx b/src/pages/Trade/components/ChartCard/ChartCard.tsx
@@ -104,15 +104,15 @@ const ChartCard: FC<ChartCardProps> = ({ synthPair }) => {
 					</Periods>
 				</HeaderContainer>
 			</StyledCardHeader>
-			<Card.Body>
+			<StyledCardBody>
 				<Chart
 					data={chartData}
 					isLoading={isLoading}
 					period={selectedPeriod}
 					synthPair={synthPair}
 				/>
 				<InfoRow data={chartData} volume24H={volume24H} synthPair={synthPair} />
-			</Card.Body>
+			</StyledCardBody>
 		</Card>
 	);
 };
@@ -121,6 +121,10 @@ const StyledCardHeader = styled(Card.Header)`
 	padding-left: 0;
 `;
 
+const StyledCardBody = styled(Card.Body)`
+	padding: 12px 12px 16px 12px;
+`;
+
 const HeaderContainer = styled.div`
 	width: 100%;
 	align-items: center;