style(App.css): adjust max-width of .app class to 500px for better layout

style(App.css): increase margin-bottom and font-size of h1 for improved readability
feat(UpdatePet.tsx): add update-pet class for styling the update pet form
feat(PetDetail.tsx): add refetch button to allow users to refresh pet data
style(index.css): center body content and add padding for better visual appeal

Author: brentkirkland

examples/hooks/src/App.css

@@ -1,5 +1,5 @@
 .app {
-  max-width: 800px;
+  max-width: 500px;
   margin: 0 auto;
   padding: 2rem;
   font-family: system-ui, -apple-system, sans-serif;
@@ -8,7 +8,8 @@
 .app h1 {
   color: #2563eb;
   text-align: center;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
+  font-size: 2rem;
 }
 
 .app > p {
@@ -85,6 +86,41 @@
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
+.update-pet {
+  background: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  color: black;
+}
+
+.update-pet label {
+  display: block;
+  margin: 0.5rem 0;
+  font-weight: 500;
+  color: #374151;
+}
+
+.update-pet input {
+  box-sizing: border-box;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.update-pet select {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  width: 100%;
+}
+
+.update-pet button {
+  margin-top: 1rem;
+}
+
 .pet-card h2 {
   margin: 0 0 1rem 0;
   color: #1f2937;

examples/hooks/src/components/PetDetail.tsx

@@ -13,6 +13,7 @@ export const PetDetail = ({
     data: pet,
     isPending,
     isRefetching,
+    refetch,
     error,
   } = hooks.useGetPetById({
     params,
@@ -76,6 +77,9 @@ export const PetDetail = ({
             </div>
           )}
         </div>
+        <button type="button" onClick={() => refetch()}>
+          Refetch
+        </button>
       </div>
     )
   );

examples/hooks/src/components/UpdatePet.tsx

@@ -50,6 +50,9 @@ export const UpdatePetForm = ({
   };
 
   return (
+    <div className="update-pet">
+
+
     <form onSubmit={handleSubmit}>
       <div>
         <label htmlFor="name">Pet Name:</label>
@@ -98,6 +101,7 @@ export const UpdatePetForm = ({
         </div>
       )}
     </form>
+    </div>
   );
 };
 

examples/hooks/src/index.css

@@ -24,9 +24,10 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
+  align-items: center;
   min-width: 320px;
-  min-height: 100vh;
+  margin: 2rem auto;
+  padding: 2rem;
 }
 
 h1 {