Updated dropdown styles

RealWagmi · Nov 15, 2023 · c3a5cc7 · c3a5cc7
1 parent b3d194c
commit c3a5cc7
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
@@ -1,10 +1,9 @@
-import { Box, Grid } from "../Box";
+import { Grid } from "../Box";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useOnClickOutside } from "../../hooks";
 import { ArrowDownIcon } from "../Svg";
-import { DropdownWrapper, DropdownActivatorWrapper, DropdownItemWrapper } from "./styles";
+import { DropdownContainer, DropdownActivatorWrapper, DropdownItemWrapper, DropdownWrap } from "./styles";
 import { IDropdownProps } from "./types";
-import { Z_INDEX } from "../../constants";
 
 export default function Dropdown({ items, value, onChange }: IDropdownProps) {
   const activeItem = useMemo(() => items.find((v) => v.value === value), [items, value]);
@@ -28,8 +27,8 @@ export default function Dropdown({ items, value, onChange }: IDropdownProps) {
   const height = useMemo(() => (opened ? maxHeight : minHeight), [opened, maxHeight]);
 
   return (
-    <Box height={`${minHeight}px`} overflow={"visible"} position={"relative"} zIndex={Z_INDEX.DROPDOWN}>
-      <DropdownWrapper
+    <DropdownWrap height={`${minHeight}px`}>
+      <DropdownContainer
         ref={listRef}
         maxHeight={height}
         onFocus={() => {
@@ -76,7 +75,7 @@ export default function Dropdown({ items, value, onChange }: IDropdownProps) {
             </DropdownItemWrapper>
           ))}
         </Grid>
-      </DropdownWrapper>
-    </Box>
+      </DropdownContainer>
+    </DropdownWrap>
   );
 }
diff --git a/src/components/Dropdown/styles.tsx b/src/components/Dropdown/styles.tsx
@@ -1,9 +1,18 @@
 import styled from "styled-components";
-import { Grid } from "../Box";
+import { Box, Grid } from "../Box";
 import { rgba } from "polished";
+import { Z_INDEX } from "../../constants";
 
-export const DropdownWrapper = styled(Grid)<{ maxHeight: number; opened?: boolean }>`
+export const DropdownWrap = styled(Box)<{ height: string }>`
   width: max-content;
+  position: relative;
+  overflow: visible;
+  z-index: ${Z_INDEX.DROPDOWN};
+  height: ${({ height }) => height};
+`;
+
+export const DropdownContainer = styled(Grid)<{ maxHeight: number; opened?: boolean }>`
+  width: 100%;
   max-height: ${({ maxHeight }) => maxHeight}px;
   padding: 0 0 4px;
   overflow: hidden;
@@ -59,4 +68,4 @@ export const DropdownItemWrapper = styled.button<{ active?: boolean }>`
 export const DropdownActivatorWrapper = styled(DropdownItemWrapper)`
   height: 34px;
   padding: 0 20px;
-`;
+`;