buttons

web/packages/new/photos/components/PeopleList.tsx

@@ -20,9 +20,9 @@ export const SearchPeopleList: React.FC<SearchPeopleListProps> = ({
 }) => {
     const isMobileWidth = useIsMobileWidth();
     return (
-        <SearchFaceChipContainer>
+        <SearchPeopleContainer>
             {people.slice(0, isMobileWidth ? 6 : 7).map((person) => (
-                <SearchFaceChip
+                <SearchPeopleButton
                     key={person.id}
                     onClick={() => onSelectPerson(person)}
                 >
@@ -31,13 +31,13 @@ export const SearchPeopleList: React.FC<SearchPeopleListProps> = ({
                         enteFile={person.displayFaceFile}
                         placeholderDimension={87}
                     />
-                </SearchFaceChip>
+                </SearchPeopleButton>
             ))}
-        </SearchFaceChipContainer>
+        </SearchPeopleContainer>
     );
 };
 
-const SearchFaceChipContainer = styled("div")`
+const SearchPeopleContainer = styled("div")`
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -47,19 +47,32 @@ const SearchFaceChipContainer = styled("div")`
     /* On very small (~ < 375px) mobile screens 6 faces won't fit in 2 rows.
        Clip the third one. */
     overflow: hidden;
+    /* Keep enough space for the button outline (since we overflow hidden). */
+    padding-inline: 2px;
+    padding-block: 4px;
 `;
 
-const SearchFaceChip = styled("div")`
+const SearchPeopleButton = styled("button")(
+    ({ theme }) => `
+    /* Reset some button defaults */
+    border: 0;
+    padding: 0;
+    /* Button should do this for us, but it isn't working inside the select */
+    cursor: pointer;
     width: 87px;
     height: 87px;
     border-radius: 50%;
     overflow: hidden;
-    cursor: pointer;
     & > img {
         width: 100%;
         height: 100%;
     }
-`;
+    :hover {
+        outline: 1px solid ${theme.colors.stroke.faint};
+        outline-offset: 2px;
+    }
+`,
+);
 
 const FaceChipContainer = styled("div")`
     display: flex;

web/packages/new/photos/components/SearchBar.tsx

@@ -446,14 +446,32 @@ interface PeopleHeaderProps {
 }
 
 const PeopleHeader: React.FC<PeopleHeaderProps> = ({ onClick }) => (
-    <button {...{ onClick }}>
-        <Stack direction="row">
+    <PeopleHeaderButton {...{ onClick }}>
+        <Stack direction="row" color="text.muted">
             <Typography color="text.base" variant="large">
                 {t("people")}
             </Typography>
             <ChevronRightIcon />
         </Stack>
-    </button>
+    </PeopleHeaderButton>
+);
+
+const PeopleHeaderButton = styled("button")(
+    ({ theme }) => `
+    /* Reset some button defaults that are affecting us */
+    background: transparent;
+    border: 0;
+    padding: 0;
+    font: inherit;
+    /* Button should do this for us, but it isn't working inside the select */
+    cursor: pointer;
+    /* The color for the chevron */
+    color: ${theme.colors.stroke.muted};
+    /* Hover indication */
+    && :hover {
+        color: ${theme.colors.stroke.base};
+    }
+`,
 );
 
 const Option: React.FC<OptionProps<SearchOption, false>> = (props) => (