fix: make buttons visible

frontend/src/pages/Login.tsx

@@ -1,4 +1,4 @@
-import { useToast } from "@chakra-ui/react";
+import { Button, useToast } from "@chakra-ui/react";
 import type { ChangeEvent, FormEvent } from "react";
 import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
@@ -67,7 +67,7 @@ export function Login() {
           autoComplete="current-password"
           required={true}
         />
-        <button type="submit">Login</button>
+        <Button colorScheme="purple" type="submit">Login</Button>
       </form>
       <Link className="links" to="/">
         Main

frontend/src/pages/ProfileDeletion.tsx

@@ -1,4 +1,4 @@
-import { useToast } from "@chakra-ui/react";
+import { Button, useToast } from "@chakra-ui/react";
 import { useNavigate } from "react-router-dom";
 import { deleteProfile } from "../httpClient.ts";
 import { usePetClinicState } from "../state.ts";
@@ -44,21 +44,21 @@ export function ProfileDeletion() {
         profile? We're sad to see you go! Please remember, this action is
         permanent and you'll lose all your data."
       </p>
-      <button
+      <Button
         type="button"
         data-testid="delete-profile-button"
         style={{ backgroundColor: "red", margin: "10px" }}
         onClick={handleDeletion}
       >
         Yes, delete it!
-      </button>
-      <button
+      </Button>
+      <Button
         type="button"
         style={{ backgroundColor: "green", margin: "10px" }}
         onClick={routChange}
       >
         Nope, take me back!
-      </button>
+      </Button>
     </>
   );
 }

frontend/src/pages/ProfileDetail.tsx

@@ -1,5 +1,6 @@
 import { Link, useNavigate } from "react-router-dom";
 import { usePetClinicState } from "../state.ts";
+import { Button } from "@chakra-ui/react";
 
 export function ProfileDetail() {
   const { auth } = usePetClinicState();
@@ -27,13 +28,13 @@ export function ProfileDetail() {
       <Link className={"links"} to="/profile-update">
         Profile update
       </Link>
-      <button
+      <Button
         style={{ backgroundColor: "red" }}
         type="button"
         onClick={() => navigate("/delete-profile")}
       >
         Delete Profile
-      </button>
+      </Button>
     </>
   );
 }

frontend/src/pages/ProfileUpdate.tsx

@@ -4,6 +4,7 @@ import {
   type ProfileUpdateForm,
   useProfileUpdateState,
 } from "../hooks/useProfileUpdate.ts";
+import { Button } from "@chakra-ui/react";
 
 export function ProfileUpdate() {
   const {
@@ -71,10 +72,10 @@ export function ProfileUpdate() {
           required={true}
         />
         <PasswordStrengthValidator password={user.password} />
-        <button type="submit">Save</button>
-        <button type="button" onClick={() => navigate("/")}>
+        <Button colorScheme="green" type="submit">Save</Button>
+        <Button colorScheme="blue" type="button" onClick={() => navigate("/")}>
           Discard
-        </button>
+        </Button>
       </form>
     </>
   );

frontend/src/pages/Register.tsx

@@ -1,4 +1,4 @@
-import { useToast } from "@chakra-ui/react";
+import { Button, useToast } from "@chakra-ui/react";
 import type { ChangeEvent, FormEvent } from "react";
 import { useState } from "react";
 import { Link } from "react-router-dom";
@@ -90,7 +90,7 @@ function Register() {
           onChange={handleUserChange}
         />
         <PasswordStrengthValidator password={user.password} />
-        <button type="submit">Register</button>
+        <Button colorScheme="purple" type="submit">Register</Button>
       </form>
       <Link className={"links"} to="/login">
         Login