Refactored buttons and modals to be separate

src/components/ChangeNicknameButton.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { Box, Input, Button, Label, IconButton, Flex } from "theme-ui";
+import { IconButton } from "theme-ui";
 
-import Modal from "./Modal";
+import ChangeNicknameModal from "../modals/ChangeNicknameModal";
 
 function ChangeNicknameButton({ nickname, onChange }) {
   const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
@@ -41,23 +41,13 @@ function ChangeNicknameButton({ nickname, onChange }) {
           <path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
         </svg>
       </IconButton>
-      <Modal isOpen={isChangeModalOpen} onRequestClose={closeModal}>
-        <Box as="form" onSubmit={handleChangeSubmit}>
-          <Label py={2} htmlFor="nicknameChange">
-            Change your nickname
-          </Label>
-          <Input
-            id="nicknameChange"
-            value={changedNickname}
-            onChange={handleChange}
-          />
-          <Flex py={2}>
-            <Button sx={{ flexGrow: 1 }} disabled={!changedNickname}>
-              Change
-            </Button>
-          </Flex>
-        </Box>
-      </Modal>
+      <ChangeNicknameModal
+        isOpen={isChangeModalOpen}
+        onRequestClose={closeModal}
+        onChangeSubmit={handleChangeSubmit}
+        onChange={handleChange}
+        nickname={changedNickname}
+      />
     </>
   );
 }