From 0fb1a35492148f8cc18e2185f131b4ef362de98c Mon Sep 17 00:00:00 2001
From: Brenda Sukh <brendasukh@gmail.com>
Date: Fri, 22 Jan 2021 10:14:30 -0500
Subject: [PATCH] Add divider in tooltip

---
 .../CostOverviewByProductChart.tsx            | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx
index e6a40a9595..b562434c5e 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewByProductChart.tsx
@@ -16,7 +16,13 @@
 import React, { useState } from 'react';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
-import { useTheme, Box, Typography } from '@material-ui/core';
+import {
+  useTheme,
+  Box,
+  Typography,
+  Divider,
+  emphasize,
+} from '@material-ui/core';
 import { default as FullScreenIcon } from '@material-ui/icons/Fullscreen';
 import {
   AreaChart,
@@ -182,9 +188,17 @@ export const CostOverviewByProductChart = ({
       fill: p.fill!,
     }));
     const expandText = (
-      <Box display="flex" justifyContent="space-between" alignItems="center">
-        <FullScreenIcon />
-        <Typography>Click to expand</Typography>
+      <Box>
+        <Divider
+          style={{
+            backgroundColor: emphasize(theme.palette.divider, 1),
+            margin: '10px 0',
+          }}
+        />
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <FullScreenIcon />
+          <Typography>Click to expand</Typography>
+        </Box>
       </Box>
     );
     return (