From 87e44b2e94f0749b2e47941419e9e6777bd14220 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Fri, 4 Dec 2020 01:05:54 -0500
Subject: [PATCH] fix: update popover style color

---
 ui/components/src/Popover/Popover.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/ui/components/src/Popover/Popover.tsx b/ui/components/src/Popover/Popover.tsx
index b627ed4c0..df3635987 100644
--- a/ui/components/src/Popover/Popover.tsx
+++ b/ui/components/src/Popover/Popover.tsx
@@ -1,11 +1,13 @@
 import React, { FC } from 'react';
 import TooltipTrigger from 'react-popper-tooltip';
+import { get } from '@theme-ui/css';
 import {
   TooltipTriggerProps,
   ChildrenArg,
 } from 'react-popper-tooltip/dist/types';
-import { Box } from 'theme-ui';
+import { Box, ColorModesScale } from 'theme-ui';
 import { Arrow, Wrapper } from './PopoverUtils';
+import { useTheme } from '../ThemeContext';
 
 export interface PopoverOwnProps {
   /**
@@ -33,6 +35,7 @@ export const Popover: FC<PopoverProps> = ({
   ...rest
 }) => {
   const borderColor = 'lightgrey';
+  const theme = useTheme();
   return (
     <TooltipTrigger
       placement={placement}
@@ -56,7 +59,10 @@ export const Popover: FC<PopoverProps> = ({
             ref={tooltipRef as any}
             style={{
               ...containerProps.style,
-              backgroundColor: 'background',
+              backgroundColor: get(
+                theme.colors as ColorModesScale,
+                'background',
+              ),
             }}
           >
             {arrowVisible && (