make input box component; improve box edit style

client/src/app.js

@@ -4,6 +4,7 @@ import Box from './box';
 import api from './api';
 import Modal from './modal';
 import Button from './button';
+import InputBox from './inputBox';
 import ColorSelect from './color';
 import Color from 'color';
 import './styles/app.css';
@@ -376,30 +377,29 @@ function App() {
   });
 
   const colorSelector =
-    <div className="color-selector-container">
-      {colorData.map((data) => {
-        return <ColorSelect colorData={data} handler={boxHandler.handleColor} boxColor={boxColor} />
-      })
-      }
-    </div>
+    <>
+      <label>color</label>
+      <div className="color-selector-container">
+        {colorData.map((data) => {
+          return <ColorSelect colorData={data} handler={boxHandler.handleColor} boxColor={boxColor} />
+        })
+        }
+      </div>
+    </>
 
   const boxForm =
     <form id="form">
-      <input id="id" name="id" value={boxID} readOnly hidden></input>
-      <legend>New Box</legend>
+      <InputBox id="id" name="id" value={boxID} readOnly={true} hidden={true} />
+      <legend>Edit Box</legend>
       <fieldset>
-        <label htmlFor="box-name">name
-          <input autoFocus onChange={boxHandler.handleName} value={boxName} id="box-name" name="name" type="text" />
-        </label>
-        <label htmlFor="box-description">description
-          <input onChange={boxHandler.handleDescription} value={boxDescription} id="box-description" name="description" type="text" />
-        </label>
+        <InputBox id="box-name" label='name' onChange={boxHandler.handleName} value={boxName} name="name" type="text" />
+        <InputBox id="box-description" label='description' onChange={boxHandler.handleDescription} value={boxDescription} name="description" type="text" />
         {colorSelector}
       </fieldset>
     </form>
 
   const itemForm = <form id="form">
-    <legend>New Item</legend>
+    <legend>Edit Item</legend>
     <fieldset>
       <input id="id" name="id" value={itemID} readOnly hidden></input>
       <label htmlFor="item-name">name

client/src/button.js

@@ -2,7 +2,6 @@ import React, {useState} from 'react';
 import './styles/button.css';
 
 const Button = ({style, form, onClick, label, className}) => {
-
     return <button style={style} form={form} onClick={onClick} className={`button ${className}`}>{label}</button>
 }
 

client/src/inputBox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import './styles/inputBox.css';
+
+const InputBox = ({ id, name, label, onChange, value, type, readOnly, hidden }) => {
+    return (
+        <>
+        <label htmlFor={id}>{label}</label>
+        <input readOnly={readOnly} hidden={hidden} autoFocus onChange={onChange} value={value} id={id} name={name} type={type} />
+        </>
+    )
+}
+
+export default InputBox;

client/src/styles/app.css

@@ -272,4 +272,4 @@ li.item {
     display: flex;
     justify-content: center;
     align-items: center;
-}
+}

client/src/styles/inputBox.css

@@ -0,0 +1,9 @@
+label {
+    display: block;
+}
+input {
+    border: 1px solid grey;
+    border-radius: 0.2rem;
+    padding: 0.4rem 0.6rem;
+    margin: 0 0 0.8rem 0;
+}

client/src/styles/modal.css

@@ -10,6 +10,7 @@
 }
 .modal-content {
     display: grid;
+    padding: 0.8rem;
     grid-template-rows: 1fr auto;
     width: 80%;
     height: 90%;