fix: Height of user status filter on Members page

app/routes/settings.tsx

@@ -5,8 +5,8 @@ import Export from "~/scenes/Settings/Export";
 import Features from "~/scenes/Settings/Features";
 import Groups from "~/scenes/Settings/Groups";
 import Import from "~/scenes/Settings/Import";
+import Members from "~/scenes/Settings/Members";
 import Notifications from "~/scenes/Settings/Notifications";
-import People from "~/scenes/Settings/People";
 import Profile from "~/scenes/Settings/Profile";
 import Security from "~/scenes/Settings/Security";
 import Shares from "~/scenes/Settings/Shares";
@@ -24,7 +24,7 @@ export default function SettingsRoutes() {
       <Route exact path="/settings" component={Profile} />
       <Route exact path="/settings/details" component={Details} />
       <Route exact path="/settings/security" component={Security} />
-      <Route exact path="/settings/members" component={People} />
+      <Route exact path="/settings/members" component={Members} />
       <Route exact path="/settings/features" component={Features} />
       <Route exact path="/settings/groups" component={Groups} />
       <Route exact path="/settings/shares" component={Shares} />

app/scenes/Settings/Members.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import styled from "styled-components";
 import { PAGINATION_SYMBOL } from "~/stores/BaseStore";
 import User from "~/models/User";
 import Invite from "~/scenes/Invite";
@@ -23,7 +24,7 @@ import useStores from "~/hooks/useStores";
 import PeopleTable from "./components/PeopleTable";
 import UserStatusFilter from "./components/UserStatusFilter";
 
-function People() {
+function Members() {
   const topRef = React.useRef();
   const location = useLocation();
   const history = useHistory();
@@ -223,7 +224,7 @@ function People() {
           placeholder={`${t("Filter")}…`}
           onChange={handleSearch}
         />
-        <UserStatusFilter activeKey={filter} onSelect={handleFilter} />
+        <LargeUserStatusFilter activeKey={filter} onSelect={handleFilter} />
       </Flex>
       <PeopleTable
         topRef={topRef}
@@ -249,4 +250,8 @@ function People() {
   );
 }
 
-export default observer(People);
+const LargeUserStatusFilter = styled(UserStatusFilter)`
+  height: 32px;
+`;
+
+export default observer(Members);

app/scenes/Settings/components/UserStatusFilter.tsx

@@ -7,7 +7,7 @@ type Props = {
   onSelect: (key: string | null | undefined) => void;
 };
 
-const UserStatusFilter = ({ activeKey, onSelect }: Props) => {
+const UserStatusFilter = ({ activeKey, onSelect, ...rest }: Props) => {
   const { t } = useTranslation();
   const options = React.useMemo(
     () => [
@@ -45,6 +45,7 @@ const UserStatusFilter = ({ activeKey, onSelect }: Props) => {
       activeKey={activeKey}
       onSelect={onSelect}
       defaultLabel={t("Active")}
+      {...rest}
     />
   );
 };