From 3552adf3fb00c5517db7211ab02b061e7f6f00f8 Mon Sep 17 00:00:00 2001
From: markkovari <kovarimarkofficial@gmail.com>
Date: Sat, 7 Sep 2024 12:21:29 +0200
Subject: [PATCH] fix: make buttons visible

---
 frontend/src/pages/Login.tsx           |  4 ++--
 frontend/src/pages/ProfileDeletion.tsx | 10 +++++-----
 frontend/src/pages/ProfileDetail.tsx   |  5 +++--
 frontend/src/pages/ProfileUpdate.tsx   |  7 ++++---
 frontend/src/pages/Register.tsx        |  4 ++--
 5 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 30c2971c..44194959 100644
--- a/frontend/src/pages/Login.tsx
+++ b/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
diff --git a/frontend/src/pages/ProfileDeletion.tsx b/frontend/src/pages/ProfileDeletion.tsx
index b10aaff1..ef3f8583 100644
--- a/frontend/src/pages/ProfileDeletion.tsx
+++ b/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>
     </>
   );
 }
diff --git a/frontend/src/pages/ProfileDetail.tsx b/frontend/src/pages/ProfileDetail.tsx
index bfda1e5f..41687a9b 100644
--- a/frontend/src/pages/ProfileDetail.tsx
+++ b/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>
     </>
   );
 }
diff --git a/frontend/src/pages/ProfileUpdate.tsx b/frontend/src/pages/ProfileUpdate.tsx
index d141a901..9a1e7593 100644
--- a/frontend/src/pages/ProfileUpdate.tsx
+++ b/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>
     </>
   );
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index bdd44cf0..169562c6 100644
--- a/frontend/src/pages/Register.tsx
+++ b/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