fix(charts): fixing responsivity for chart on homepage

blockchain · Mar 31, 2021 · 0a9029b · 0a9029b
1 parent 04b56f3
commit 0a9029b
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 72 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Chart/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Chart/index.tsx
@@ -9,7 +9,7 @@ import { actions } from 'data'
 import { getData } from './selectors'
 import Error from './template.error'
 import Loading from './template.loading'
-import Success from './template.success'
+import Chart from './template.success'
 
 const ChartContainer = (props: Props) => {
   useEffect(() => {
@@ -20,7 +20,7 @@ const ChartContainer = (props: Props) => {
 
   return props.data.cata({
     Success: value => (
-      <Success currency={props.currency} coin={value.coin} data={value.data} />
+      <Chart currency={props.currency} coin={value.coin} data={value.data} />
     ),
     Failure: message => <Error>{message}</Error>,
     Loading: () => <Loading />,

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Chart/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Chart/template.success.tsx
@@ -4,7 +4,7 @@ import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
 import { LinearGradient } from '@visx/gradient'
 import { scaleLinear, scaleTime } from '@visx/scale'
-import { AreaClosed,Bar, Line, LinePath } from '@visx/shape'
+import { AreaClosed, Bar, Line, LinePath } from '@visx/shape'
 import { defaultStyles, TooltipWithBounds, useTooltip } from '@visx/tooltip'
 import { bisector, extent, max, min } from 'd3-array'
 import { timeFormat } from 'd3-time-format'
@@ -34,10 +34,15 @@ const circleStroke = 2
 
 const tooltipBorderRadius = 4
 
+const margin = 8
+
 const Wrapper = styled.div`
   position: relative;
   height: 300px;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `
 
 const Chart = ({ coin, currency, data }: OwnProps) => {
@@ -107,7 +112,7 @@ const Chart = ({ coin, currency, data }: OwnProps) => {
 
   return (
     <Wrapper ref={ref}>
-      <svg width={width} height={height}>
+      <svg width={width - margin} height={height}>
         <LinearGradient
           id={color}
           fromOpacity={0.5}

diff --git a/...t-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/CoinTicker/template.loading.tsx b/...t-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/CoinTicker/template.loading.tsx
@@ -1,7 +1,21 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { SkeletonRectangle } from 'blockchain-info-components'
+import { media } from 'services/styles'
 
-const Loading = () => <SkeletonRectangle width='100px' height='44px' />
+const Wrapper = styled.div`
+  margin-top: 8px;
+  margin-left: 0;
+
+  ${media.atLeastTabletL`
+    margin-left: 24px;
+  `}
+`
+const Loading = () => (
+  <Wrapper>
+    <SkeletonRectangle width='100px' height='29px' />
+  </Wrapper>
+)
 
 export default Loading
diff --git a/...t-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/CoinTicker/template.success.tsx b/...t-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/CoinTicker/template.success.tsx
@@ -1,19 +1,24 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
+import { media } from 'services/styles'
+
+const Wrapper = styled.div`
+  margin-left: 0;
+
+  ${media.atLeastTabletL`
+    margin-left: 24px;
+  `}
+`
 
 const Success = ({ fiat, ...props }: { fiat: string }) => {
   return (
-    <>
-      <Text
-        size='32px'
-        weight={500}
-        color='grey800'
-        data-e2e={props['data-e2e']}
-      >
+    <Wrapper>
+      <Text size='24px' weight={600} color='black' data-e2e={props['data-e2e']}>
         {fiat}
       </Text>
-    </>
+    </Wrapper>
   )
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/CoinCurrentPrice/index.tsx
@@ -1,24 +1,12 @@
 import React from 'react'
 import { connect, ConnectedProps } from 'react-redux'
-import styled from 'styled-components'
 
 import { selectors } from 'data'
-import { media } from 'services/styles'
 
 import CoinTicker from './CoinTicker'
 
-const Wrapper = styled.div`
-  ${media.atLeastTabletL`
-    padding-left: 24px;
-  `}
-`
-
 const CoinCurrentPrice = ({ priceChart: { coin = 'BTC' } }: Props) => {
-  return (
-    <Wrapper>
-      <CoinTicker coin={coin} data-e2e={`coinTicker${coin}`} />
-    </Wrapper>
-  )
+  return <CoinTicker coin={coin} data-e2e={`coinTicker${coin}`} />
 }
 
 const mapStateToProps = state => ({

diff --git a/...-frontend/src/scenes/Home/PriceChart/CoinPerformance/CoinPriceChange/template.loading.tsx b/...-frontend/src/scenes/Home/PriceChart/CoinPerformance/CoinPriceChange/template.loading.tsx
@@ -2,10 +2,15 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { SkeletonRectangle } from 'blockchain-info-components'
+import { media } from 'services/styles'
 
 const Wrapper = styled.div`
-  margin-top: 12px;
-  padding-left: 24px;
+  margin-top: 8px;
+  margin-left: 0;
+
+  ${media.atLeastTabletL`
+    margin-left: 24px;
+  `}
 `
 
 const Loading = () => {

diff --git a/...-frontend/src/scenes/Home/PriceChart/CoinPerformance/CoinPriceChange/template.success.tsx b/...-frontend/src/scenes/Home/PriceChart/CoinPerformance/CoinPriceChange/template.success.tsx
@@ -3,11 +3,17 @@ import { PriceChange } from 'blockchain-wallet-v4-frontend/src/scenes/Transactio
 import styled from 'styled-components'
 
 import { PriceChangeType } from 'blockchain-wallet-v4/src/redux/data/misc/types'
+import { media } from 'services/styles'
 
 import { Props as OwnProps, SuccessStateType } from '.'
 
 const Wrapper = styled.div`
-  padding-left: 8px;
+  margin-top: 8px;
+  margin-left: 0;
+
+  ${media.atLeastTabletL`
+    margin-left: 24px;
+  `}
 `
 
 const Success = ({ currency, priceChange }: Props) => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/index.tsx
@@ -36,24 +36,18 @@ const Row = styled.div`
 
 const Column = styled.div`
   margin-bottom: 16px;
-
-  ${media.atLeastTabletL`
-    margin: 0;
-  `}
-`
-
-const InlineContainer = styled.div`
   display: flex;
-  align-items: baseline;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
 
   ${media.atLeastTabletL`
-    justify-content: flex-start;
+    margin: 0;
+    align-items: flex-start;
   `}
 `
 
 const Header = styled(Row)`
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 `
 
 const Main = styled(Row)`
@@ -69,13 +63,9 @@ const PriceChart = () => {
     <Wrapper>
       <Header>
         <Column>
-          <InlineContainer>
-            <CoinSelector />
-          </InlineContainer>
-          <InlineContainer>
-            <CoinCurrentPrice />
-            <CoinPerformance />
-          </InlineContainer>
+          <CoinSelector />
+          <CoinCurrentPrice />
+          <CoinPerformance />
         </Column>
         <Column>
           <Actions />

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/index.tsx
@@ -2,48 +2,40 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { SceneWrapper } from 'components/Layout'
-import { media, mediaHeight } from 'services/styles'
+import { media } from 'services/styles'
 
 import Banners from './Banners'
 import Holdings from './Holdings'
 import PriceChart from './PriceChart'
 
 const ColumnWrapper = styled.section`
+  width: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
-  width: 100%;
-  ${media.atLeastLaptopM`
+
+  ${media.atLeastLaptopL`
     flex-direction: row;
   `}
 `
 const Column = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: center;
-  height: 100%;
   width: 100%;
   box-sizing: border-box;
-  padding-bottom: 25px;
-  ${mediaHeight.big`
-    height: auto;
-    display: block;
-  `}
-  ${media.tablet`
-    height: auto;
-    display: block;
-  `}
+  margin-bottom: 24px;
 `
 const ColumnLeft = styled(Column)`
-  ${media.atLeastLaptopM`
-    padding-right: 30px;
+  flex: 2;
+  ${media.atLeastLaptopL`
+    margin-right: 24px;
   `}
 `
+
 const ColumnRight = styled(Column)`
-  & > :not(:first-child) {
-    margin-top: 20px;
-  }
+  flex: 3;
+  margin-top: 24px;
+
+  ${media.atLeastLaptopL`
+    margin-top: 0;
+  `}
 `
 
 const Home = () => {

diff --git a/...ckchain-wallet-v4-frontend/src/scenes/Transactions/CoinPerformance/CoinChart/template.tsx b/...ckchain-wallet-v4-frontend/src/scenes/Transactions/CoinPerformance/CoinChart/template.tsx
@@ -4,7 +4,7 @@ import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
 import { LinearGradient } from '@visx/gradient'
 import { scaleLinear, scaleTime } from '@visx/scale'
-import { AreaClosed, Bar, Line,LinePath } from '@visx/shape'
+import { AreaClosed, Bar, Line, LinePath } from '@visx/shape'
 import { defaultStyles, TooltipWithBounds, useTooltip } from '@visx/tooltip'
 import { bisector, extent, max, min } from 'd3-array'
 import { timeFormat } from 'd3-time-format'
@@ -32,10 +32,15 @@ const circleSize = 4
 
 const tooltipBorderRadius = 4
 
+const margin = 8
+
 const Wrapper = styled.div`
   position: relative;
   height: 80px;
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `
 
 const Chart = ({
@@ -116,7 +121,7 @@ const Chart = ({
 
   return (
     <Wrapper ref={ref}>
-      <svg width={width} height={height}>
+      <svg width={width - margin} height={height}>
         <LinearGradient
           id={color}
           fromOpacity={0.5}