Since this story is just for the UI, the logic behind the actual functionality of these pages will not be covered. Refer to SPRINT 1 - Settings for the logic. The subpages focused on in this sprint were the Edit Name, Edit Email, Logout, and Delete Account pages. Since the UI for each is very similar, a variation of the following format can be used to create the text box for every page depending on the desired outcome.

To define the structure of the forms, you set the background to have a slight shadow, with rounded corners and padding.

<form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
  {/* Form elements */}
</form>

Next, you must create an input field to allow users to enter text. Add styling for shadow, border, padding, and text. The value of the input field is controlled by the name state variable, and the handleChange function is called whenever the input changes.

<input
 className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
 id="name"
 type="name"
 placeholder="Enter your new name"
 value={name}
 onChange={handleChange}
/>

Finally, the button to allow users to submit the form must be created. Using color, a hover effect, rounded corners, and padding allows for a simple visually appealing experience.

<button
  className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
  type="submit"
>
  Submit
</button>

A final product will look something like this: