UI fixes

Author: devksingh4

src/ui/pages/membershipLists/InternalMembershipQuery.tsx

@@ -1,13 +1,5 @@
 import { useState } from "react";
-import {
-  TextInput,
-  Button,
-  Stack,
-  Box,
-  Text,
-  Group,
-  Loader,
-} from "@mantine/core";
+import { TextInput, Button, Stack, Box, Text, Group } from "@mantine/core";
 import { IconCircleCheck, IconCircleX } from "@tabler/icons-react";
 
 interface InternalMembershipQueryProps {
@@ -30,13 +22,12 @@ export const InternalMembershipQuery = ({
     }
 
     setIsLoading(true);
-    setResult(null); // Clear previous results on new query
+    setResult(null);
     try {
-      const isMember = await queryInternalMembership(netId.trim());
-      setResult({ netId: netId.trim(), isMember });
-    } catch (error) {
-      // The parent component's passed-in function already handles notifications
-      console.error(`Query failed for ${netId}:`, error);
+      const isMember = await queryInternalMembership(
+        netId.trim().toLowerCase(),
+      );
+      setResult({ netId: netId.trim().toLowerCase(), isMember });
     } finally {
       setIsLoading(false);
     }
@@ -78,7 +69,7 @@ export const InternalMembershipQuery = ({
             ) : (
               <IconCircleX style={{ color: "var(--mantine-color-red-7)" }} />
             )}
-            <Text c={result.isMember ? "green.9" : "red.9"} fw={500}>
+            <Text c={result.isMember ? "green.9" : "red.9"} fw={500} size="sm">
               <Text span fw={700} inherit>
                 {result.netId}
               </Text>{" "}

src/ui/pages/membershipLists/MembershipListsPage.tsx

@@ -20,6 +20,7 @@ import { IconAlertCircle } from "@tabler/icons-react";
 import ExternalMemberListManagement from "./ExternalMemberListManagement";
 import FullScreenLoader from "@ui/components/AuthContext/LoadingScreen";
 import InternalMembershipQuery from "./InternalMembershipQuery";
+import { AxiosError } from "axios";
 
 export const ManageExternalMembershipPage = () => {
   const api = useApi("core");
@@ -54,6 +55,10 @@ export const ManageExternalMembershipPage = () => {
       );
       return result.data.isPaidMember;
     } catch (error: any) {
+      if (error instanceof AxiosError && error.status === 400) {
+        // Invalid NetID.
+        return false;
+      }
       console.error("Failed to check internal membership:", error);
       notifications.show({
         title: "Failed to get query membership list.",
@@ -112,7 +117,7 @@ export const ManageExternalMembershipPage = () => {
     return <FullScreenLoader />;
   }
   return (
-    <Container fluid mr="xl" ml="xl">
+    <Container fluid m="lg">
       <Grid>
         <Grid.Col span={{ base: 12, lg: 6 }}>
           <AuthGuard
@@ -122,7 +127,7 @@ export const ManageExternalMembershipPage = () => {
             }}
           >
             <Stack>
-              <Title order={2}>Query ACM Paid Membership Lists</Title>
+              <Title order={2}>Query ACM Paid Membership List</Title>
               <InternalMembershipQuery
                 queryInternalMembership={queryInternalMembership}
               />