From 81918b861fcd34f12004e1964cf52ed6a18e5a22 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Thu, 1 Apr 2021 14:52:09 +0700
Subject: [PATCH] Fix the background arrow issue

---
 client/index.css                        | 1 +
 client/patterns/popover-arrow/Cover.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/index.css b/client/index.css
index cfb10fd..99c5d25 100644
--- a/client/index.css
+++ b/client/index.css
@@ -44,6 +44,7 @@ a {
 
 /* Hero */
 .hero {
+    --current-background-color: var(--background-color);
     background: var(--background-color);
     display: flex;
     justify-content: center;
diff --git a/client/patterns/popover-arrow/Cover.tsx b/client/patterns/popover-arrow/Cover.tsx
index 47dade7..be4e06b 100644
--- a/client/patterns/popover-arrow/Cover.tsx
+++ b/client/patterns/popover-arrow/Cover.tsx
@@ -31,7 +31,7 @@ const Cover: React.FC<{}> = () => {
                 >
                     <div
                         style={{
-                            backgroundColor: '#FFF',
+                            backgroundColor: 'var(--current-background-color, #FFF)',
                             borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
                             borderRight: '1px solid rgba(0, 0, 0, 0.3)',
                             height: '10px',