feat: footer for mobiles

src/app/verify-phone/components/VerifyPhoneForm/VerifyPhoneForm.tsx

@@ -27,7 +27,7 @@ const VerifyPhoneForm: FC = () => {
     const authState = useSelector((state: RootState) => state.auth);
 
     const handleSubmit = (values: VerifyNumberForm) => {
-        
+
         if (!authState.phoneNumber || !authState.loginChallenge) return;
         console.log(authState.phoneNumber.replace(/ /g, ""));
 
@@ -55,8 +55,10 @@ const VerifyPhoneForm: FC = () => {
     const navigateToLogin = () => redirect("/");
 
     return (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack>
+        <form
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PinInput
                     length={6}
                     placeholder="_"

src/components/features/LoginForm/LoginForm.tsx

@@ -6,11 +6,11 @@ import { Button, Stack } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { Auth } from "@/client";
 import PhoneInput from "@/components/ui/PhoneInput/PhoneInput";
+import { notifications } from "@/lib/notifications";
 import {
     setLoginChallenge,
     setPhoneNumber,
 } from "@/lib/store/features/auth/authSlice";
-import { notifications } from "@/lib/notifications";
 import { useAppDispatch } from "@/lib/store/store";
 
 type LoginForm = {
@@ -69,8 +69,10 @@ const LoginForm: FC<Props> = ({ loginChallenge, isCreatingId = false }) => {
     const navigateToLogin = () => router.push("/");
 
     return (
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-            <Stack>
+        <form
+            style={{ justifyItems: "center" }}
+            onSubmit={form.onSubmit(handleSubmit)}>
+            <Stack maw={500}>
                 <PhoneInput
                     {...form.getInputProps("phoneNumber")}
                     setPhoneMask={setPhoneMask}

src/components/layout/Footer/Footer.module.css

@@ -0,0 +1,6 @@
+.footer {
+    padding: var(--mantine-spacing-md);
+    @media (max-width: 48em) {
+        padding: 0
+    }
+}

src/components/layout/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { Group, Text } from "@mantine/core";
+import styles from "@/components/layout/Footer/Footer.module.css";
 
 const Footer = () => {
     return (
@@ -7,7 +8,7 @@ const Footer = () => {
             justify={"flex-end"}
             align={"flex-end"}
             h={"7vh"}
-            p={"md"}>
+            className={styles.footer}>
             <Group gap={"xl"}>
                 <Link
                     href={"#"}

src/components/layout/PageBlock/PageItem.module.css

@@ -37,5 +37,15 @@
         bottom: 0;
         z-index: 100;
         overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.mobile-footer {
+    display: none;
+    @media (max-width: 48em) {
+        display: block;
+        margin-top: auto;
     }
 }

src/components/layout/PageBlock/PageItem.tsx

@@ -1,6 +1,7 @@
 import { CSSProperties, FC, ReactNode } from "react";
 import classNames from "classnames";
 import { MotionWrapper } from "@/components/layout/MotionWrapper/MotionWrapper";
+import Footer from "@/components/layout/Footer/Footer";
 import styles from "./PageItem.module.css";
 
 type Props = {
@@ -31,6 +32,11 @@ const PageItem: FC<Props> = ({
                 fullScreenMobile && styles["container-full-screen-mobile"]
             )}>
             {children}
+            {fullScreenMobile && (
+                <div className={styles["mobile-footer"]}>
+                    <Footer />
+                </div>
+            )}
         </div>
     );
 

src/components/ui/Logo/Logo.tsx

@@ -32,7 +32,7 @@ const Logo = ({ title }: Props) => {
                     <Title
                         order={4}
                         mb={"lg"}
-                        style={{ color: myColor[6] }}>
+                        style={{ color: myColor[6], textAlign: "center" }}>
                         {title}
                     </Title>
                 </Center>

src/components/ui/PhoneInput/PhoneInput.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { IMaskInput } from "react-imask";
 import {
     InputBase,
     type InputBaseProps,
     type PolymorphicComponentProps,
 } from "@mantine/core";
+import CountrySelect from "@/components/ui/PhoneInput/components/CountrySelect";
 import { Country } from "@/components/ui/PhoneInput/types";
 import getInitialDataFromValue from "@/components/ui/PhoneInput/utils/getInitialDataFromValue";
+import getPhoneMask from "@/components/ui/PhoneInput/utils/getPhoneMask";
 
 type AdditionalProps = {
     onChange: (value: string | null) => void;
@@ -60,28 +62,32 @@ const PhoneInput = ({
         setDropdownWidth(inputRef.current?.offsetWidth);
     }, [inputRef.current?.offsetWidth]);
 
+    const countrySelect = useMemo(
+        () => (
+            <CountrySelect
+                disabled={disabled || readOnly}
+                country={country}
+                setCountry={country => {
+                    setCountry(country);
+                    setPhoneMask(getPhoneMask(country.code), country);
+                    setValue("");
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                }}
+                leftSectionWidth={leftSectionWidth}
+                inputWidth={dropdownWidth}
+            />
+        ),
+        [country, leftSectionWidth, dropdownWidth, disabled, readOnly]
+    );
+
     return (
         <InputBase
             {...props}
             component={IMaskInput}
             inputRef={inputRef}
-            leftSection={
-                <></>
-                // <CountrySelect
-                //     disabled={disabled || readOnly}
-                //     country={country}
-                //     setCountry={country => {
-                //         setCountry(country);
-                //         setPhoneMask(getPhoneMask(country.code), country);
-                //         setValue("");
-                //         if (inputRef.current) {
-                //             inputRef.current.focus();
-                //         }
-                //     }}
-                //     leftSectionWidth={leftSectionWidth}
-                //     inputWidth={dropdownWidth}
-                // />
-            }
+            leftSection={countrySelect}
             leftSectionWidth={leftSectionWidth}
             styles={{
                 input: {
@@ -93,7 +99,6 @@ const PhoneInput = ({
                         "1px solid var(--mantine-color-default-border)",
                 },
             }}
-            inputMode={"numeric"}
             mask={mask}
             value={value}
             onAccept={onChange}