From d57fbb66fca2cbb5e3a3a00ab58b03cdb4ed13ec Mon Sep 17 00:00:00 2001
From: Francis Rupert <francis.rupert@dialpad.com>
Date: Wed, 4 Jan 2023 16:08:43 -0600
Subject: [PATCH] fix: popover background (#776)

---
 docs/components/popover.md             | 11 ++++++-----
 lib/build/less/components/popover.less |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/components/popover.md b/docs/components/popover.md
index ee4148043f..a9955e9754 100644
--- a/docs/components/popover.md
+++ b/docs/components/popover.md
@@ -6,7 +6,8 @@ thumb: true
 storybook_url: https://vue.dialpad.design/?path=/story/components-popover--default
 figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Components-7?node-id=8921%3A22411&viewport=831%2C-269%2C0.43&t=xHutRjwo1o5zMTgT-11
 ---
-<code-well-header>
+
+<code-well-header bgclass="d-bgc-white">
   <example-popover modal />
 </code-well-header>
 
@@ -57,7 +58,7 @@ Your popover should be non-modal when:
 
 ### Popover - Modal
 
-<code-well-header>
+<code-well-header bgclass="d-bgc-white">
   <example-popover modal />
 </code-well-header>
 
@@ -76,7 +77,7 @@ Your popover should be non-modal when:
 
 ### Popover - Non Modal
 
-<code-well-header>
+<code-well-header bgclass="d-bgc-white">
   <example-popover />
 </code-well-header>
 
@@ -94,7 +95,7 @@ Your popover should be non-modal when:
 
 ### With Header - Modal
 
-<code-well-header>
+<code-well-header bgclass="d-bgc-white">
   <example-popover modal header>
     <template #content>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio id iure labore, maiores mollitia reprehenderit sunt tempore veritatis. Aliquam delectus earum ex, expedita ipsam nobis obcaecati quibusdam repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio id iure labore, maiores mollitia reprehenderit sunt tempore veritatis. Aliquam delectus earum ex, expedita ipsam nobis obcaecati quibusdam repudiandae.<br>
@@ -122,7 +123,7 @@ Your popover should be non-modal when:
 
 ### With Footer - Modal
 
-<code-well-header>
+<code-well-header bgclass="d-bgc-white">
   <example-popover modal footer>
     <template #content>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio id iure labore, maiores mollitia reprehenderit sunt tempore veritatis. Aliquam delectus earum ex, expedita ipsam nobis obcaecati quibusdam repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur delectus distinctio id iure labore, maiores mollitia reprehenderit sunt tempore veritatis. Aliquam delectus earum ex, expedita ipsam nobis obcaecati quibusdam repudiandae.<br>
diff --git a/lib/build/less/components/popover.less b/lib/build/less/components/popover.less
index 787a93a5fc..2e0710d3d9 100644
--- a/lib/build/less/components/popover.less
+++ b/lib/build/less/components/popover.less
@@ -40,6 +40,7 @@
     display: grid;
     grid-template-rows: 1fr;
     overflow: auto;
+    background-color: var(--popover-color-background);
     border-radius: var(--popover-border-radius);
     box-shadow: var(--popover-shadow);