Updated nickname modal to focus input by default

src/modals/ChangeNicknameModal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef } from "react";
 import { Box, Input, Button, Label, Flex } from "theme-ui";
 
 import Modal from "../components/Modal";
@@ -10,13 +10,27 @@ function ChangeNicknameModal({
   nickname,
   onChange,
 }) {
+  const inputRef = useRef();
+  function focusInput() {
+    inputRef.current && inputRef.current.focus();
+  }
+
   return (
-    <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
+    <Modal
+      isOpen={isOpen}
+      onRequestClose={onRequestClose}
+      onAfterOpen={focusInput}
+    >
       <Box as="form" onSubmit={onChangeSubmit}>
         <Label py={2} htmlFor="nicknameChange">
           Change your nickname
         </Label>
-        <Input id="nicknameChange" value={nickname} onChange={onChange} />
+        <Input
+          id="nicknameChange"
+          value={nickname}
+          onChange={onChange}
+          ref={inputRef}
+        />
         <Flex py={2}>
           <Button sx={{ flexGrow: 1 }} disabled={!nickname}>
             Change