feat: added user avatars in author search dropdown (#4551)

* feat: added user avatars in author search dropdown

* cleanup

* cleanup

* feat: added user avatars in author search dropdown

* cleanup

* cleanup

* added user icon

* Size tweaks

Co-authored-by: Aditya Sharma <aditya167411@gmail.com>

app/components/Avatar/Avatar.tsx

@@ -74,9 +74,10 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
+  border: ${(props) =>
+    props.$showBorder === false
+      ? "none"
+      : `2px solid ${props.theme.background}`};
   flex-shrink: 0;
   overflow: hidden;
 `;

app/components/FilterOptions.tsx

@@ -10,6 +10,7 @@ type TFilterOption = {
   key: string;
   label: string;
   note?: string;
+  icon?: React.ReactNode;
 };
 
 type Props = {
@@ -57,6 +58,7 @@ const FilterOptions = ({
             selected={option.key === activeKey}
             {...menu}
           >
+            {option.icon && <Icon>{option.icon}</Icon>}
             {option.note ? (
               <LabelWithNote>
                 {option.label}
@@ -106,6 +108,12 @@ const StyledButton = styled(Button)`
   }
 `;
 
+const Icon = styled.div`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+
 const Wrapper = styled.div`
   margin-right: 8px;
 `;