Improve admin page UI

Author: MeshanKhosla

src/components/admin/AdminView.tsx

@@ -28,6 +28,7 @@ const AdminView = () => {
   const setIsPendingStageEnabledMutation =
     trpc.admin.setIsPendingStageEnabled.useMutation();
 
+  // When the site settings are loaded, set the state to the current values
   useEffect(() => {
     if (siteSettings) {
       setIsPendingStageEnabled(
@@ -85,7 +86,7 @@ const AdminView = () => {
       <AdminList assignmentsOrLocationsProps={locations} isAssignment={false} />
       <Flex direction="column" mt={10} mb={3}>
         <Text fontSize="3xl" fontWeight="semibold">
-          General Settings
+          Settings
         </Text>
         <Flex>
           <Text fontSize="xl">Pending Stage</Text>

src/components/admin/ImportUsers.tsx

@@ -1,4 +1,4 @@
-import { Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
+import { Box, Flex, Radio, RadioGroup, Stack, Text } from "@chakra-ui/react";
 import { UserRole } from "@prisma/client";
 import { useState } from "react";
 import { trpc } from "../../utils/trpc";
@@ -42,11 +42,24 @@ const ImportUsers = () => {
           </Radio>
         </Stack>
       </RadioGroup>
-      {importType === ImportNumberPossibilities.BATCH_IMPORT ? (
-        <BatchImporter handleAddUsers={handleAddUsers} />
-      ) : (
-        <SingleImporter handleAddUsers={handleAddUsers} />
-      )}
+
+      <Flex
+        mt={2}
+        hidden={importType === ImportNumberPossibilities.SINGLE_IMPORT}
+      >
+        <Text>
+          The CSV should have 2 columns. One for email and one for role (
+          {Object.values(UserRole).join(" or ")})
+        </Text>
+      </Flex>
+
+      <Box mt={2} mb={6}>
+        {importType === ImportNumberPossibilities.BATCH_IMPORT ? (
+          <BatchImporter handleAddUsers={handleAddUsers} />
+        ) : (
+          <SingleImporter handleAddUsers={handleAddUsers} />
+        )}
+      </Box>
     </>
   );
 };

src/components/admin/ImportUsersMethod.tsx

@@ -1,5 +1,6 @@
 import {
   Button,
+  Divider,
   Flex,
   Input,
   Radio,
@@ -154,33 +155,26 @@ const ImportUsersMethod = () => {
           Only allow students from from email domain (Leave blank for all
           domains)
         </Text>
-        <Input
-          placeholder="@berkeley.edu"
-          value={emailDomain}
-          onChange={handleDomainChange}
-          maxLength={25}
-        />
-        <Button
-          mt={2}
-          colorScheme="telegram"
-          onClick={handleDomainSubmit}
-          disabled={!isValidDomain}
-        >
-          Confirm
-        </Button>
+        <Flex direction="row">
+          <Input
+            placeholder="@berkeley.edu"
+            value={emailDomain}
+            onChange={handleDomainChange}
+            maxLength={25}
+            mr={1}
+          />
+          <Button
+            colorScheme="telegram"
+            onClick={handleDomainSubmit}
+            disabled={!isValidDomain}
+          >
+            Confirm
+          </Button>
+        </Flex>
       </Flex>
 
-      <Flex mt={2}>
-        <Text>
-          The CSV should have 2 columns. One for email and one for role (
-          {isImportStaffAndStudents ? "STUDENT OR " : ""}
-          STAFF or INTERN)
-        </Text>
-      </Flex>
+      <Divider mt={2} mb={2} />
 
-      <Text mb={2} fontSize="sm" hidden={isImportStaffAndStudents}>
-        Please still specify STAFF or INTERN role when importing.
-      </Text>
       <ImportUsers />
     </Flex>
   );

src/components/admin/import/SingleImporter.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex, Input, useToast } from "@chakra-ui/react";
+import { Button, Flex, FormControl, Input, useToast } from "@chakra-ui/react";
 import { UserRole } from "@prisma/client";
 import { Select, SingleValue } from "chakra-react-select";
 import { useState } from "react";
@@ -55,6 +55,8 @@ const SingleImporter = ({ handleAddUsers }: SingleImporterProps) => {
           position: "top-right",
         }),
       );
+
+    setEmail("");
   };
 
   const userRoles = Object.values(UserRole).map((role: UserRole) => ({
@@ -65,18 +67,23 @@ const SingleImporter = ({ handleAddUsers }: SingleImporterProps) => {
   return (
     <Flex direction="row">
       <Input
+        mr={1}
         placeholder="Input email"
-        w="400px"
         value={email}
         onChange={(e) => setEmail(e.target.value)}
       />
-      <Select
-        options={userRoles}
-        onChange={(val: SingleValue<{ label: UserRole; value: UserRole }>) =>
-          setRole(val?.value)
-        }
-      />
-      <Button onClick={handleAddUser}>Import</Button>
+      <FormControl width="20%" mr={1}>
+        <Select
+          placeholder="Role"
+          options={userRoles}
+          onChange={(val: SingleValue<{ label: UserRole; value: UserRole }>) =>
+            setRole(val?.value)
+          }
+        />
+      </FormControl>
+      <Button colorScheme="telegram" onClick={handleAddUser}>
+        Import
+      </Button>
     </Flex>
   );
 };