From d8a15b83893f8b28117e4bf751a816b1c33ce674 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 18 Feb 2022 08:59:53 -0800
Subject: [PATCH] fix: Height of user status filter on Members page

---
 app/routes/settings.tsx                             |  4 ++--
 app/scenes/Settings/{People.tsx => Members.tsx}     | 11 ++++++++---
 app/scenes/Settings/components/UserStatusFilter.tsx |  3 ++-
 3 files changed, 12 insertions(+), 6 deletions(-)
 rename app/scenes/Settings/{People.tsx => Members.tsx} (96%)

diff --git a/app/routes/settings.tsx b/app/routes/settings.tsx
index 1114a0c3e..7319c7b72 100644
--- a/app/routes/settings.tsx
+++ b/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} />
diff --git a/app/scenes/Settings/People.tsx b/app/scenes/Settings/Members.tsx
similarity index 96%
rename from app/scenes/Settings/People.tsx
rename to app/scenes/Settings/Members.tsx
index 0c365a3ce..7abaf2fd7 100644
--- a/app/scenes/Settings/People.tsx
+++ b/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);
diff --git a/app/scenes/Settings/components/UserStatusFilter.tsx b/app/scenes/Settings/components/UserStatusFilter.tsx
index fd6fea00b..6a22350a1 100644
--- a/app/scenes/Settings/components/UserStatusFilter.tsx
+++ b/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}
     />
   );
 };