Add detect keyboard open

apps/app/src/hooks/useDetectKeyboardOpen.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react';
+
+const useDetectKeyboardOpen = (
+  minKeyboardHeight = 300,
+  defaultValue = false,
+) => {
+  const [isKeyboardOpen, setIsKeyboardOpen] = useState(defaultValue);
+
+  useEffect(() => {
+    const listener = () => {
+      const viewportHeight =
+        window.visualViewport && window.visualViewport.height !== null
+          ? window.visualViewport.height
+          : window.innerHeight;
+
+      const newState =
+        window.screen.height - minKeyboardHeight > viewportHeight;
+      if (isKeyboardOpen !== newState) {
+        setIsKeyboardOpen(newState);
+      }
+    };
+
+    if (typeof window.visualViewport !== 'undefined') {
+      window.visualViewport?.addEventListener('resize', listener);
+    } else {
+      window.addEventListener('resize', listener);
+    }
+
+    return () => {
+      if (typeof window.visualViewport !== 'undefined') {
+        window.visualViewport?.removeEventListener('resize', listener);
+      } else {
+        window.removeEventListener('resize', listener);
+      }
+    };
+  }, [isKeyboardOpen, minKeyboardHeight]);
+
+  return isKeyboardOpen;
+};
+
+export default useDetectKeyboardOpen;

apps/app/src/pages/LoginPage/LoginPage.module.scss

@@ -111,6 +111,7 @@
   opacity: 0.6;
   text-decoration: none;
   align-self: flex-end;
+  margin-top: -16px;
 }
 
 .buttonContainer {
@@ -122,6 +123,16 @@
   margin-top: auto;
   transition: transform 0.3s ease;
 
+  @media (max-width: $breakpoint-tablet) {
+    &.keyboardOpen {
+      transform: translateY(-140px);
+    }
+    &:not(.keyboardOpen) {
+      transform: translateY(0);
+      transition: transform 0.3s ease-in-out;
+    }
+  }
+
   @media (min-width: $breakpoint-tablet) {
     margin: 0 auto;
     min-width: 470px;

apps/app/src/pages/LoginPage/LoginPage.tsx

@@ -5,13 +5,16 @@ import closeIcon from '../../assets/icons/close-icon.svg';
 import Button from '../../components/Button';
 import googleIcon from '../../assets/icons/google.svg';
 import { RouteNames } from '../../router/routes';
+import useDetectKeyboardOpen from '../../hooks/useDetectKeyboardOpen';
 
 export const LoginPage = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [emailError, setEmailError] = useState('');
   const [passwordError, setPasswordError] = useState('');
 
+  const isKeyboardOpen = useDetectKeyboardOpen(400, false);
+
   const validateInputs = () => {
     let isValid = true;
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -74,7 +77,10 @@ export const LoginPage = () => {
               Zaboravili ste lozinku?
             </a>
           </div>
-          <div className={c.buttonContainer}>
+          <div
+            className={`${c.buttonContainer} ${
+              isKeyboardOpen ? c.keyboardOpen : ''
+            }`}>
             <Button variant='orange' onClick={handleLogin}>
               Prijavi se
             </Button>