chore: update checkbox style and on click outside handling

src/components/Dropdown/Checkbox.tsx

@@ -28,8 +28,8 @@ const StyledCheckbox = styled.span<{ isChecked: boolean }>`
     content: ${({ isChecked }) => (isChecked ? "'✓'" : "''")};
     color: black;
     position: absolute;
-    top: 0;
-    left: 3px;
+    top: -2px;
+    left: 2px;
     font-size: 14px;
   }
 `

src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import React, { useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import Checkbox from './Checkbox' // Import the CustomCheckbox
 
 interface DropdownProps {
@@ -15,6 +15,7 @@ const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const [selectedOptions, setSelectedOptions] = useState<string[]>([])
   const [isExpanded, setIsExpanded] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
 
   const handleSelect = (option: string) => {
     let newSelectedOptions = []
@@ -41,8 +42,28 @@ const Dropdown: React.FC<DropdownProps> = ({
     setIsExpanded(!isExpanded)
   }
 
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsExpanded(false)
+    }
+  }
+
+  useEffect(() => {
+    if (isExpanded) {
+      document.addEventListener('mousedown', handleClickOutside)
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [isExpanded])
+
   return (
-    <DropdownContainer>
+    <DropdownContainer ref={dropdownRef}>
       <DropdownHeader onClick={toggleDropdown}>
         <span>{title}</span>
         <Chevron isExpanded={isExpanded}>

src/containers/Operator/OperatorContainer.tsx

@@ -1,5 +1,5 @@
 import { OperatorDetails } from '@/components/Operator/OperatorDetails'
-import { SimilarOperators } from '@/components/Operator/SimilarOperators'
+// import { SimilarOperators } from '@/components/Operator/SimilarOperators'
 import styled from '@emotion/styled'
 import { useRouter } from 'next/router'
 import React from 'react'
@@ -25,7 +25,7 @@ const ExploreOperator: React.FC<ExploreOperatorProps> = ({ id }) => {
         <img src={`/assets/chevron-left.svg`} alt="Share icon" />
       </GoBackButton>
       <OperatorDetails id={Number(id)} />
-      <SimilarOperators />
+      {/* <SimilarOperators /> */}
     </Container>
   )
 }