fix(popover): use theme color make it same with other cmp

Author: mydearxym

components/ArticleActionsPanel/styles/index.js

@@ -5,8 +5,8 @@ import Img from '@Img'
 
 export const Wrapper = styled.div`
   ${cs.flexColumn()};
-  padding: 10px;
-  padding-left: 15px;
+  padding: 5px;
+  padding-left: 10px;
   padding-bottom: 0;
 `
 export const Option = styled.div`

components/ContentFilter/styles/setting_menu.js

@@ -7,9 +7,8 @@ export const Wrapper = styled.div`
   ${cs.flexColumn('align-start')};
 
   width: 110px;
-  padding: 15px;
+  padding: 10px;
   padding-right: 5px;
-  margin: 0 10px;
 `
 export const Title = styled.div`
   font-size: 0.9rem;

components/Popover/styles/index.js

@@ -3,15 +3,12 @@ import { theme } from '@utils'
 
 // margin: -20px;
 export const ContentContainer = styled.div`
-  margin-top: -8px;
-  margin-left: -6px;
-  border-radius: 2px;
-  background: ${theme('popover.bg')};
-  border: 1px solid;
-  border-top: 2px solid;
-  border-color: ${theme('popover.borderColor')};
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-  position: relative;
+  // background: ${theme('popover.bg')};
+  // border: 1px solid;
+  // border-top: 2px solid;
+  // border-color: ${theme('popover.borderColor')};
+  // box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+  // position: relative;
 `
 
 export const holder = 1

containers/ThemeWrapper/AntUIOverWrite.js

@@ -1,7 +1,7 @@
 import { createGlobalStyle } from 'styled-components'
 import { lighten } from 'polished'
 
-import { theme } from '@utils'
+import { theme, cs } from '@utils'
 
 // move ant style to seperate file
 const AntUIOverWrite = createGlobalStyle`
@@ -377,6 +377,24 @@ const AntUIOverWrite = createGlobalStyle`
     color: ${theme('table.text')};
     opacity: 0.6;
   }
+
+  .ant-popover {
+    z-index: ${cs.zIndex.popover};
+  }
+  .ant-popover-inner {
+    background-color: ${theme('popover.bg')} !important;
+    border: 1px solid;
+    border-color: ${theme('popover.borderColor')} !important;
+    z-index: ${cs.zIndex.popover};
+  }
+  .ant-popover-arrow {
+    background-color: ${theme('popover.borderColor')} !important;
+    border-radius: 3px;
+    z-index: ${cs.zIndex.popover - 1};
+  }
+  .ant-popover-inner-content {
+    padding: 5px;
+  }
 `
 
 export default AntUIOverWrite