From 7534047155d4c32824f1721fce3a02c582e57118 Mon Sep 17 00:00:00 2001
From: Ahmed Hamdy <82416131+AhmedHHamdy@users.noreply.github.com>
Date: Tue, 25 Jul 2023 21:45:39 +0300
Subject: [PATCH] Bugfix/issue 435 (#437)

* fixed the focus rings on navbuttons

* fixed the focus rings on navbuttons file
---
 client/src/features/home/NavButtons.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/features/home/NavButtons.js b/client/src/features/home/NavButtons.js
index 08bf7f8..98ebee4 100644
--- a/client/src/features/home/NavButtons.js
+++ b/client/src/features/home/NavButtons.js
@@ -17,7 +17,7 @@ const NavButtons = ({ HomeIcon, LoginIcon, CalendarIcon }) => {
       {/* Home Button */}
       <button
         onClick={() => routing.setCurrentPage("landingPage")}
-        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32"
+        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32 focus:ring-4 focus:ring-black"
       >
         <div className="flex justify-center">
           <HomeIcon className="text-mainBlue w-7 h-7 lg:w-10 lg:h-10" />
@@ -28,7 +28,7 @@ const NavButtons = ({ HomeIcon, LoginIcon, CalendarIcon }) => {
       </button>
       {/* Log In & Log Out Button */}
       <button
-        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32"
+        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32 focus:ring-4 focus:ring-black"
         onClick={isAuthenticated() ? logout : handleLogin}
       >
         <div className="flex justify-center">
@@ -42,7 +42,7 @@ const NavButtons = ({ HomeIcon, LoginIcon, CalendarIcon }) => {
 
       <button
         onClick={() => navigate("calendar")}
-        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32"
+        className="bg-white border-2 border-black rounded-2xl flex flex-col justify-center items-center p-1 w-24 h-24 lg:w-28 lg:h-28 xl:w-32 xl:h-32 focus:ring-4 focus:ring-black"
       >
         <div className="flex justify-center">
           <CalendarIcon className="text-mainOrange w-7 h-7 lg:w-10 lg:h-10" />