update mobile form #124

.github/workflows/deploy.yml

@@ -25,7 +25,7 @@ jobs:
       HOTJAR_ID: ${{ secrets.HOTJAR_ID }}
       HOTJAR_SNIPPET_VERSION: ${{ secrets.HOTJAR_SNIPPET_VERSION }}
       BASE_PATH: ''
-      ORIGIN: salsaviva.am
+      ORIGIN: https://salsaviva.am
     steps:
       - name: Clone repository
         uses: actions/checkout@v4

app/contact/page.tsx

@@ -19,7 +19,7 @@ export const metadata: Metadata = {
 const titleVariants = getTextSlideIntoViewVarinats('right');
 const {FORMSPREE_ID} = env;
 const containerCn = clsx('flex', 'flex-col', 'min-h-screen', 'w-full');
-const titleCn = clsx('text-8xl', 'mt-24', 'ml-4', 'text-center');
+const titleCn = clsx('text-6xl', 'md:text-8xl', 'mt-24', 'ml-4', 'text-center');
 
 /**
  * @returns React component.

app/error.tsx

@@ -9,7 +9,7 @@ const errContainerCn = clsx('pt-64', 'flex', 'flex-col', 'gap-8');
  * @param {{error: Error; reset: () => void}} props Props.
  * @returns React component.
  */
-export default function Error({reset}: {error: Error; reset: () => void}) {
+export default function Error({reset}: {_err: Error; reset: () => void}) {
   return (
     <div className={errContainerCn}>
       <h2>Something went wrong!</h2>

app/gallery/page.tsx

@@ -4,9 +4,9 @@ import Gallery from '@/components/pages/Gallery/Gallery';
 import AppearInViewport from '@/components/shared/AppearInViewport/AppearInViewport';
 import SocialIcons from '@/components/shared/SocialIcons/SocialIcons';
 import TransitionDuration from '@/lib/framerMotion/TransitionDuration';
+import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 import metadataBase from '../metadata';
 import getSocialicons from '../socialIcons';
-import getTextSlideIntoViewVarinats from '@/lib/framerMotion/variants/getTextSlideIntoViewVarinats';
 import './styles.css';
 
 export const metadata: Metadata = {

components/pages/Contact/Form/Form.tsx

@@ -2,9 +2,11 @@
 
 import {FormikContext, useFormik} from 'formik';
 import {m} from 'framer-motion';
+import clsx from 'clsx';
 import Button from '@/components/shared/Button/Button';
 import validationSchema, {ContactFormData} from './validationSchema';
 import FormField from './FormField';
+import variants from './formElementChildrenVariants';
 
 /**
  * Props.
@@ -23,8 +25,9 @@ const initialValues = {
  * @returns React element.
  */
 export default function Form({onSubmit}: FormProps) {
+  const formCn = clsx('flex', 'flex-col', 'justify-center');
   const mottoCn = 'text-center text-gray-300 mt-16';
-  const btnCn = 'mt-8';
+  const btnCn = clsx('mt-8', 'lg:mx-0', 'mx-auto', 'w-64', 'lg:w-1/2');
 
   const formikData = useFormik<ContactFormData>({
     initialValues,
@@ -41,20 +44,28 @@ export default function Form({onSubmit}: FormProps) {
         initial="hidden"
         whileInView="visible"
         viewport={{once: true}}
+        className={formCn}
       >
         <FormField name="name" />
         <FormField name="message" />
-        <div className={mottoCn}>Select your preferred method of contact:</div>
+        <m.div
+          className={mottoCn}
+          variants={variants}
+        >
+          Select your preferred method of contact:
+        </m.div>
         <FormField name="email" />
         <FormField name="tel" />
         <FormField name="telegram" />
-        <Button
-          type="submit"
-          disabled={isSubmitting || !isValid || !dirty}
-          className={btnCn}
-        >
-          Submit
-        </Button>
+        <m.div variants={variants}>
+          <Button
+            type="submit"
+            disabled={isSubmitting || !isValid || !dirty}
+            className={btnCn}
+          >
+            Submit
+          </Button>
+        </m.div>
       </m.form>
     </FormikContext.Provider>
   );

components/pages/Contact/Form/FormField.tsx

@@ -5,6 +5,7 @@ import formConfig from './formConfig';
 import type {ContactFormData} from './validationSchema';
 import TextField from '../TextField/TextField';
 import ErrorMessage from './ErrorMessage';
+import variants from './formElementChildrenVariants';
 
 /**
  * Props.
@@ -13,23 +14,6 @@ type FormFieldProps = {
   name: keyof ContactFormData;
 };
 
-const variants = {
-  visible: {
-    y: 0,
-    opacity: 1,
-    transition: {
-      y: {stiffness: 1000, velocity: -100},
-    },
-  },
-  hidden: {
-    y: 50,
-    opacity: 0,
-    transition: {
-      y: {stiffness: 1000},
-    },
-  },
-};
-
 /**
  * @param {FormFieldProps} props Props.
  * @returns React element.

components/pages/Contact/Form/formElementChildrenVariants.ts

@@ -0,0 +1,21 @@
+/**
+ * Frmaer motion variants for form children elements.
+ */
+const variants = {
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      y: {stiffness: 1000, velocity: -100},
+    },
+  },
+  hidden: {
+    y: 50,
+    opacity: 0,
+    transition: {
+      y: {stiffness: 1000},
+    },
+  },
+};
+
+export default variants;

components/pages/Contact/FormWrapper/FormWrapper.tsx

@@ -6,7 +6,6 @@ import useFormspree from '@/lib/formspree/useFormspree';
 import Form from '../Form/Form';
 import SubmittedForm from './SubmittedForm';
 import ErrorSubmitForm from './ErrorSubmitForm';
-import DynamicFormBg from '../DynamicFormBg/DynamicFormBg';
 import {ContactFormData} from '../Form/validationSchema';
 
 /**
@@ -52,9 +51,5 @@ export default function FormWrapper({formspreeId}: FormWrapperProps) {
 
   // here animation on swich screen should occur
 
-  return (
-    <DynamicFormBg>
-      <div className={wrapperCn}>{render()}</div>
-    </DynamicFormBg>
-  );
+  return <div className={wrapperCn}>{render()}</div>;
 }

components/pages/Gallery/Gallery.tsx

@@ -2,9 +2,9 @@
 
 import {Gallery as PSGallery, GalleryProps} from 'react-photoswipe-gallery';
 import 'photoswipe/dist/photoswipe.css';
+import clsx from 'clsx';
 import config from './config';
 import GalleryItem from './GalleryItem';
-import clsx from 'clsx';
 
 const galleryId = 'images';
 const photoSwipeOptions: GalleryProps['options'] = {

components/shared/Menu/MenuList.tsx

@@ -6,6 +6,7 @@ import {useHotkeys} from 'react-hotkeys-hook';
 import clsx from 'clsx';
 import useWindowDimensions from '@/lib/shared/useWindowDimensions';
 import {useContextSafe} from '@/utils/useContextSafe';
+import {numericMobileMaxScreenSize} from '@/lib/shared/useIsMobile';
 import {MenuContext} from './MenuContext';
 import {MenuPosition} from './MenuPosition';
 import menuButtonSize from './menuButtonSize';
@@ -65,6 +66,7 @@ export default function MenuList({children}: MenuListProps) {
   const {height, width} = useWindowDimensions();
   const bodyHasOverflow = height ? height < document.body.clientHeight : undefined;
   const scrollbarWidth = width ? width - document.body.clientWidth : undefined;
+  const isMobile = width ? numericMobileMaxScreenSize >= width : false;
   useHotkeys('esc', close);
 
   useEffect(() => {
@@ -85,7 +87,7 @@ export default function MenuList({children}: MenuListProps) {
       style={{paddingRight: bodyHasOverflow ? `${scrollbarWidth}px` : '0px'}}
     >
       {children}
-      <MenuDynamicBg />
+      {!isMobile && <MenuDynamicBg />}
     </m.nav>
   );
 }

lib/shared/useIsMobile.ts

@@ -4,7 +4,11 @@ import tailwindConfig from '../../tailwind.config';
 import useWindowDimensions from './useWindowDimensions';
 
 const mobileMaxScreenSize = tailwindConfig.theme.extend.screens.sm;
-const numericMobileMaxScreenSize = parseInt(mobileMaxScreenSize.replace('px', ''));
+
+/**
+ * Numeric mobile max screen size.
+ */
+export const numericMobileMaxScreenSize = parseInt(mobileMaxScreenSize.replace('px', ''));
 
 /**
  * @returns Is mobile.