From 68db4f950efbd121f1af9a90032a6528a5e95551 Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Mon, 5 Feb 2024 09:54:44 +0800
Subject: [PATCH 1/2] refactor: updated breakpoints in useDevice hook

---
 lib/hooks/useDevice.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/lib/hooks/useDevice.ts b/lib/hooks/useDevice.ts
index 0e5702ce..db4c1534 100644
--- a/lib/hooks/useDevice.ts
+++ b/lib/hooks/useDevice.ts
@@ -1,11 +1,21 @@
 import { useMediaQuery } from "./useMediaQuery";
 
+const breakpoints = {
+    mobile: '600px',
+    desktop: '1280px',
+};
+
 /** A custom hook to check for the client device and determine the layout to be rendered */
 export const useDevice = () => {
-    const isDesktop = useMediaQuery(`(min-width: 1024px)`);
-    const isMobile = useMediaQuery(`(max-width: 768px)`);
+    const isDesktop = useMediaQuery(`(min-width: ${breakpoints.desktop})`);
+    const isMobile = useMediaQuery(`(max-width: ${breakpoints.mobile})`);
+    const isTablet = useMediaQuery(`(min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.desktop})`);
     return {
+        /** returns Larger screen tablets [min-width: 1280px] */
         isDesktop,
+        /**  returns Smaller screen tablets [max-width: 600px] */
         isMobile,
+        /** returns Larger screen phones and smaller screen desktop [min-width: 600px and max-width: 1280px] */
+        isTablet
     };
 };

From 88f2c6e55d2c121641f75a36af5af8c897f13c33 Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Mon, 5 Feb 2024 10:04:43 +0800
Subject: [PATCH 2/2] fix: fixed breakpoints overlap issue

---
 lib/hooks/useDevice.ts | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/lib/hooks/useDevice.ts b/lib/hooks/useDevice.ts
index db4c1534..e9fc65bd 100644
--- a/lib/hooks/useDevice.ts
+++ b/lib/hooks/useDevice.ts
@@ -1,21 +1,16 @@
 import { useMediaQuery } from "./useMediaQuery";
 
-const breakpoints = {
-    mobile: '600px',
-    desktop: '1280px',
-};
-
 /** A custom hook to check for the client device and determine the layout to be rendered */
 export const useDevice = () => {
-    const isDesktop = useMediaQuery(`(min-width: ${breakpoints.desktop})`);
-    const isMobile = useMediaQuery(`(max-width: ${breakpoints.mobile})`);
-    const isTablet = useMediaQuery(`(min-width: ${breakpoints.mobile}) and (max-width: ${breakpoints.desktop})`);
+    const isDesktop = useMediaQuery(`(min-width: 1280px)`);
+    const isMobile = useMediaQuery(`(max-width: 600px)`);
+    const isTablet = useMediaQuery(`(min-width: 601px) and (max-width: 1279px)`);
     return {
         /** returns Larger screen tablets [min-width: 1280px] */
         isDesktop,
         /**  returns Smaller screen tablets [max-width: 600px] */
         isMobile,
-        /** returns Larger screen phones and smaller screen desktop [min-width: 600px and max-width: 1280px] */
+        /** returns Larger screen phones and smaller screen desktop [min-width: 601px and max-width: 1279px] */
         isTablet
     };
 };