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 { AxiosError } from "axios";
 import type { ChangeEvent, FormEvent } from "react";
 import { useState } from "react";
@@ -80,7 +80,9 @@ 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 { AxiosError } from "axios";
 import { useNavigate } from "react-router-dom";
 import { deleteProfile } from "../httpClient.ts";
@@ -57,21 +57,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,3 +1,4 @@
+import { Button } from "@chakra-ui/react";
 import { Link, useNavigate } from "react-router-dom";
 import { usePetClinicState } from "../state.ts";
 
@@ -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

@@ -1,3 +1,4 @@
+import { Button } from "@chakra-ui/react";
 import type { ChangeEvent, FormEvent } from "react";
 import { PasswordStrengthValidator } from "../components/PasswordStrengthValidator";
 import {
@@ -71,10 +72,12 @@ 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 { AxiosError } from "axios";
 import type { ChangeEvent, FormEvent } from "react";
 import { useState } from "react";
@@ -103,7 +103,9 @@ 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