From 24b6344445806142bce3342598b1318afcbe81aa 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           |  6 ++++--
 frontend/src/pages/ProfileDeletion.tsx | 10 +++++-----
 frontend/src/pages/ProfileDetail.tsx   |  5 +++--
 frontend/src/pages/ProfileUpdate.tsx   |  9 ++++++---
 frontend/src/pages/Register.tsx        |  6 ++++--
 5 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index 30c2971c..f4d77f34 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,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
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..40b2a8e6 100644
--- a/frontend/src/pages/ProfileDetail.tsx
+++ b/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>
     </>
   );
 }
diff --git a/frontend/src/pages/ProfileUpdate.tsx b/frontend/src/pages/ProfileUpdate.tsx
index d141a901..bd400fa5 100644
--- a/frontend/src/pages/ProfileUpdate.tsx
+++ b/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>
     </>
   );
diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx
index bdd44cf0..17555d06 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,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