Improve UI for filters

Author: MartinBraquet

web/components/comments/dropdown-menu.tsx

@@ -10,7 +10,6 @@ export type DropdownItem = {
   onClick: () => void | Promise<void>
 }
 
-// NOTE: you can't conditionally render any of the items from a useEffect hook, or you'll get hydration errors
 export default function DropdownMenu(props: {
   items: DropdownItem[]
   icon?: ReactNode
@@ -90,7 +89,7 @@ export default function DropdownMenu(props: {
                     className={clsx(
                       selectedItemName && item.name == selectedItemName
                         ? 'bg-primary-100'
-                        : 'hover:bg-canvas-100 hover:text-ink-900',
+                        : 'hover:bg-canvas-200 hover:text-ink-900',
                       'text-ink-700',
                       'flex w-full gap-2 px-4 py-2 text-left text-sm'
                     )}

web/components/filters/desktop-filters.tsx

@@ -465,7 +465,11 @@ export function DesktopFilters(props: {
           />
         )}
         dropdownMenuContent={
-          <ReligionFilter filters={filters} updateFilter={updateFilter}/>
+          <ReligionFilter
+            filters={filters}
+            updateFilter={updateFilter}
+            className={'w-[350px] grid grid-cols-2'}
+          />
         }
         popoverClassName="bg-canvas-50"
         menuWidth="w-50"
@@ -491,7 +495,7 @@ export function DesktopFilters(props: {
           <MbtiFilter filters={filters} updateFilter={updateFilter} />
         }
         popoverClassName="bg-canvas-50"
-        menuWidth="w-[350px]"
+        menuWidth="w-[350px] grid-cols-2"
       />
 
       {/* SMOKER */}

web/components/filters/mbti-filter.tsx

@@ -51,6 +51,7 @@ export function MbtiFilter(props: {
 
   return (
     <MultiCheckbox
+      className={'grid grid-cols-2 xs:grid-cols-4'}
       selected={filters.mbti ?? []}
       choices={MBTI_CHOICES as any}
       onChange={(c) => {

web/components/filters/religion-filter.tsx

@@ -49,8 +49,9 @@ export function ReligionFilterText(props: {
 export function ReligionFilter(props: {
   filters: Partial<FilterFields>
   updateFilter: (newState: Partial<FilterFields>) => void
+  className?: string
 }) {
-  const {filters, updateFilter} = props
+  const {filters, updateFilter, className} = props
   return (
     <>
       <MultiCheckbox
@@ -59,6 +60,7 @@ export function ReligionFilter(props: {
         onChange={(c) => {
           updateFilter({religion: c})
         }}
+        className={className}
       />
     </>
   )

web/components/multi-checkbox.tsx

@@ -1,14 +1,16 @@
 import { Row } from 'web/components/layout/row'
 import { Checkbox } from 'web/components/widgets/checkbox'
+import clsx from "clsx";
 
 export const MultiCheckbox = (props: {
   choices: { [key: string]: string }
   selected: string[]
   onChange: (selected: string[]) => void
+  className?: string
 }) => {
-  const { choices, selected, onChange } = props
+  const { choices, selected, onChange,  className } = props
   return (
-    <Row className={'flex-wrap gap-3'}>
+    <Row className={clsx('flex-wrap', className)}>
       {Object.entries(choices).map(([key, value]) => (
         <Checkbox
           key={key}

web/components/profile-about.tsx

@@ -98,6 +98,10 @@ export default function ProfileAbout(props: {
         text={profile.religion?.map(belief => INVERTED_RELIGION_CHOICES[belief])}
         suffix={profile.religious_beliefs}
       />
+      <AboutRow
+        icon={<BsPersonVcard className="h-5 w-5"/>}
+        text={profile.mbti ? INVERTED_MBTI_CHOICES[profile.mbti] : null}
+      />
       <AboutRow
         icon={<HiOutlineGlobe className="h-5 w-5"/>}
         text={profile.ethnicity
@@ -110,10 +114,6 @@ export default function ProfileAbout(props: {
         icon={<GiFruitBowl className="h-5 w-5"/>}
         text={profile.diet?.map(e => INVERTED_DIET_CHOICES[e])}
       />
-      <AboutRow
-        icon={<BsPersonVcard className="h-5 w-5"/>}
-        text={profile.mbti ? INVERTED_MBTI_CHOICES[profile.mbti] : null}
-      />
       <HasKids profile={profile}/>
       <WantsKids profile={profile}/>
       {!isCurrentUser && <LastOnline lastOnlineTime={userActivity?.last_online_time}/>}

web/components/widgets/checkbox.tsx

@@ -10,7 +10,7 @@ export function Checkbox(props: {
   const { label, checked, toggle, className, disabled } = props
 
   return (
-    <div className={clsx(className, 'space-y-5')}>
+    <div className={clsx(className, 'space-y-5 px-2 py-1 hover:bg-canvas-200 hover:rounded')}>
       <div className="relative flex items-center">
         <div className="flex h-6 items-center">
           <input

web/components/widgets/customizeable-dropdown.tsx

@@ -54,7 +54,7 @@ export function CustomizeableDropdown(props: {
               style={styles.popper}
               {...attributes.popper}
               className={clsx(
-                'bg-canvas-0 ring-ink-1000 z-30 rounded-md px-4 py-2 shadow-lg ring-1 ring-opacity-5 focus:outline-none',
+                'bg-canvas-0 ring-ink-1000 z-30 rounded-md px-2 py-2 shadow-lg ring-1 ring-opacity-5 focus:outline-none',
                 menuWidth ?? 'w-36',
                 popoverClassName
               )}