feat: update filter dropdown style

src/components/Dropdown/Checkbox.tsx

@@ -1,10 +1,33 @@
 import styled from '@emotion/styled'
 
-const CustomCheckboxWrapper = styled.label`
+interface CustomCheckboxProps {
+  checked: boolean
+  onChange: () => void
+  label: string
+}
+
+const Checkbox: React.FC<CustomCheckboxProps> = ({
+  checked,
+  onChange,
+  label,
+}) => (
+  <Container>
+    <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
+    <StyledCheckbox isChecked={checked} />
+    <LabelText>{label}</LabelText>
+  </Container>
+)
+
+const Container = styled.label`
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin-bottom: 10px;
+  padding: 10px 16px 10px 11px;
+  border-bottom: 1px solid white;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
 `
 
 const HiddenCheckbox = styled.input`
@@ -20,7 +43,7 @@ const StyledCheckbox = styled.span<{ isChecked: boolean }>`
   width: 18px;
   height: 18px;
   background-color: ${({ isChecked }) => (isChecked ? 'white' : 'black')};
-  border: 2px solid white;
+  border: 1px solid white;
   position: relative;
   margin-right: 10px;
 
@@ -38,22 +61,4 @@ const LabelText = styled.span`
   color: white;
 `
 
-interface CustomCheckboxProps {
-  checked: boolean
-  onChange: () => void
-  label: string
-}
-
-const Checkbox: React.FC<CustomCheckboxProps> = ({
-  checked,
-  onChange,
-  label,
-}) => (
-  <CustomCheckboxWrapper>
-    <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
-    <StyledCheckbox isChecked={checked} />
-    <LabelText>{label}</LabelText>
-  </CustomCheckboxWrapper>
-)
-
 export default Checkbox

src/components/Dropdown/Dropdown.tsx

@@ -64,7 +64,7 @@ const Dropdown: React.FC<DropdownProps> = ({
 
   return (
     <DropdownContainer ref={dropdownRef}>
-      <DropdownHeader onClick={toggleDropdown}>
+      <DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
         <span>{title}</span>
         <Chevron isExpanded={isExpanded}>
           <img src="/assets/chevron-down.svg" alt="chevron down" />
@@ -98,15 +98,15 @@ const DropdownContainer = styled.div`
   width: 200px;
 `
 
-const DropdownHeader = styled.div`
+const DropdownHeader = styled.div<{ isExpanded: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   cursor: pointer;
   border: 1px solid white;
-  background-color: black;
+  background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')};
-  color: white;
+  color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
 `
 
 const Chevron = styled.span<{ isExpanded: boolean }>`
@@ -124,27 +124,25 @@ const DropdownContent = styled.div`
   background-color: black;
   border: 1px solid white;
   z-index: 10;
-  padding: 10px;
+
   box-sizing: border-box;
 `
 
 const ButtonContainer = styled.div`
   display: flex;
-  margin-top: 10px;
+  height: 40px;
 `
 
 const Button = styled.button`
   background-color: transparent;
-  border: 1px solid white;
+  border-top: 1px solid white;
   width: 100%;
+  padding: 10px 16px;
   color: white;
-  padding: 5px;
   cursor: pointer;
-  transition: background-color 0.3s;
 
-  &:hover {
+  &:first-of-type {
-    background-color: white;
+    border-right: 1px solid white;
-    color: black;
   }
 `
 

src/components/Explore/OperatorGrid/OperatorGrid.tsx

@@ -126,14 +126,12 @@ const GridItem = styled.div`
   overflow: hidden;
   cursor: pointer;
   background-color: var(--grey-900);
-  border-radius: 8px;
 `
 
 const Placeholder = styled.div`
   width: 100%;
   aspect-ratio: 1;
   background-color: var(--grey-900);
-  border-radius: 8px;
   opacity: 0.5;
 `