fix: Layer visibilities (#45)

pancakeswap · Nov 10, 2020 · 6fbe6d5 · 6fbe6d5
1 parent 37f13c3
commit 6fbe6d5
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 2 deletions.
diff --git a/src/components/Dropdown/index.stories.tsx b/src/components/Dropdown/index.stories.tsx
@@ -12,7 +12,7 @@ export const Default: React.FC = () => {
   return (
     <div>
       <Dropdown target={<Button>Hover</Button>}>
-        {[...Array(6)].map(() => (
+        {[...Array(20)].map(() => (
           <div>Content</div>
         ))}
       </Dropdown>

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -16,7 +16,9 @@ const DropdownContent = styled.div`
   box-shadow: ${({ theme }) => theme.shadows.level1};
   padding: 16px;
   border-radius: 16px;
+  max-height: 250px;
   overflow-y: auto;
+  z-index: ${({ theme }) => theme.zIndices.modal};
 `;
 
 const Container = styled.div`

diff --git a/src/theme/base.ts b/src/theme/base.ts
@@ -27,11 +27,17 @@ const radii = {
   circle: "50%",
 };
 
+const zIndices = {
+  dropdown: 10,
+  modal: 100,
+};
+
 export default {
   siteWidth: 1200,
   breakpoints,
   mediaQueries,
   spacing,
   shadows,
   radii,
+  zIndices,
 };
diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -48,6 +48,11 @@ export type Colors = {
   textSubtle: string;
 };
 
+export type ZIndices = {
+  dropdown: number;
+  modal: number;
+};
+
 export interface PancakeTheme {
   siteWidth: number;
   isDark: boolean;
@@ -62,4 +67,5 @@ export interface PancakeTheme {
   spacing: Spacing;
   shadows: Shadows;
   radii: Radii;
+  zIndices: ZIndices;
 }
diff --git a/src/widgets/Modal/Modal.tsx b/src/widgets/Modal/Modal.tsx
@@ -16,7 +16,7 @@ const StyledModal = styled.div`
   border: 1px solid rgba(14, 14, 44, 0.05);
   border-radius: 32px;
   width: 100%;
-  z-index: 11;
+  z-index: ${({ theme }) => theme.zIndices.modal};
   overflow-y: auto;
   ${({ theme }) => theme.mediaQueries.xs} {
     width: auto;

diff --git a/src/widgets/Modal/ModalContext.tsx b/src/widgets/Modal/ModalContext.tsx
@@ -12,6 +12,7 @@ const ModalWrapper = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
+  z-index: ${({ theme }) => theme.zIndices.modal - 1};
 `;
 
 interface ModalsContext {