Make fieldpicker look more like other popovers (#38674)

frontend/src/metabase/common/components/FieldPicker/FieldPicker.styled.tsx

 import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
+import { Icon } from "metabase/ui";
 
-export const ToggleItem = styled.li`
-  margin-bottom: 0.5rem;
-  padding: 1rem 0.5rem 0.5rem;
-  border-bottom: 1px solid ${color("border")};
+export const ItemTitle = styled.div`
+  min-width: 10ch;
+`;
+
+export const ItemIcon = styled(Icon)`
+  margin: 0 0.5em;
+  margin-left: 0.75em;
+  color: ${color("text-dark")};
 `;
 
 export const ColumnItem = styled.li`
-  padding: 0 0.5rem 0.5rem;
+  &:first-child {
+    margin-top: 0.5em;
+  }
+  &:last-child {
+    margin-bottom: 0.5em;
+  }
+
+  label {
+    display: flex;
+    align-items: center;
+    margin: 0 0.5em;
+    padding: 0.5em;
+    padding-right: 3em;
+    border-radius: 6px;
+    cursor: pointer;
+
+    &:hover {
+      background: ${color("bg-medium")};
+    }
+  }
+`;
+
+export const ToggleItem = styled(ColumnItem)`
+  border-bottom: 1px solid ${color("border")};
+  padding-bottom: 0.5em;
+  margin-bottom: 0.5em;
+
+  ${ItemTitle} {
+    margin-left: 1em;
+  }
 `;

frontend/src/metabase/common/components/FieldPicker/FieldPicker.tsx

 import { useMemo } from "react";
 import { t } from "ttag";
-import CheckBox from "metabase/core/components/CheckBox";
-import { StackedCheckBox } from "metabase/components/StackedCheckBox";
+import { Checkbox } from "metabase/ui";
 import * as Lib from "metabase-lib";
-import { ToggleItem, ColumnItem } from "./FieldPicker.styled";
+import { getColumnIcon } from "metabase/common/utils/columns";
+import {
+  ToggleItem,
+  ColumnItem,
+  ItemTitle,
+  ItemIcon,
+} from "./FieldPicker.styled";
 
 interface FieldPickerProps {
   query: Lib.Query;
@@ -61,22 +66,28 @@ export const FieldPicker = ({
   return (
     <ul data-testid={props["data-testid"]}>
       <ToggleItem>
-        <StackedCheckBox
-          className=""
-          label={isAll ? t`Select none` : t`Select all`}
-          checked={isAll}
-          indeterminate={!isAll && !isNone}
-          onChange={handleLabelToggle}
-        />
+        <label>
+          <Checkbox
+            variant="stacked"
+            checked={isAll}
+            indeterminate={!isAll && !isNone}
+            onChange={handleLabelToggle}
+          />
+          <ItemTitle>{isAll ? t`Select none` : t`Select all`}</ItemTitle>
+        </label>
       </ToggleItem>
       {items.map((item, index) => (
         <ColumnItem key={item.longDisplayName}>
-          <CheckBox
-            checked={isColumnSelected(item.column)}
-            label={item.displayName}
-            disabled={isColumnSelected(item.column) && isDisabledDeselection}
-            onChange={event => onToggle(index, event.target.checked)}
-          />
+          <label>
+            <Checkbox
+              checked={isColumnSelected(item.column)}
+              disabled={isColumnSelected(item.column) && isDisabledDeselection}
+              onChange={event => onToggle(index, event.target.checked)}
+            />
+
+            <ItemIcon name={getColumnIcon(item.column)} size={18} />
+            <ItemTitle>{item.displayName}</ItemTitle>
+          </label>
         </ColumnItem>
       ))}
     </ul>