fix: Subtler chart empty state messages

5app · Aug 21, 2019 · 8bb2074 · 8bb2074
1 parent 1fc4fce
commit 8bb2074
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/src/charts/SimpleChart/index.js b/src/charts/SimpleChart/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import {getColorBlock} from '../../utils/colors';
 
-import CenterContent from '../../CenterContent';
+import Box from '../../Box';
 
 import useChartist from '../useChartist';
 import ChartTooltips from './ChartTooltips';
@@ -113,7 +113,9 @@ function SimpleChart({
 					getReadout={getTooltipReadout}
 				/>
 			) : (
-				<CenterContent fillParent>{emptyContent}</CenterContent>
+				<Box dimmed bottom right position="absolute" mx="xs" my="xxs">
+					{emptyContent}
+				</Box>
 			)}
 		</ChartWrapper>
 	);

diff --git a/src/charts/SimpleGauge/index.js b/src/charts/SimpleGauge/index.js
@@ -4,7 +4,7 @@ import styled, {css} from 'styled-components';
 import {pxToRem} from '../../utils/units';
 import {getColorBlock} from '../../utils/colors';
 
-import CenterContent from '../../CenterContent';
+import Box from '../../Box';
 
 import useChartist from '../useChartist';
 import StripesPattern from './StripesPattern';
@@ -87,10 +87,10 @@ function SimpleGauge({
 			patternId={hasValue ? null : patternId}
 		>
 			{!hasValue && (
-				<CenterContent fillParent spacing="0">
+				<Box dimmed bottom right position="absolute" mx="xs" my="xxs">
 					{emptyContent}
 					<StripesPattern color={color} id={patternId} />
-				</CenterContent>
+				</Box>
 			)}
 		</Wrapper>
 	);