added a workaround for routing and fixed scroll on mobile view (#74)

Bendomey · Mar 21, 2024 · 5d4453a · 5d4453a
1 parent 1f2a41c
commit 5d4453a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git a/apps/wait-list/app/components/button/index.tsx b/apps/wait-list/app/components/button/index.tsx
@@ -3,6 +3,7 @@ import {useCallback, useMemo} from 'react'
 
 interface Props extends React.HTMLAttributes<HTMLButtonElement> {
   isLink?: boolean
+  isHref?: boolean
   href?: string
   variant?: 'outline' | 'solid' | 'ghost' | 'unstyled'
   color?:
@@ -26,6 +27,7 @@ export const Button = ({
   color: propColor = 'primary',
   size: propSize = 'md',
   isLink,
+  isHref,
   type = 'button',
   externalClassName = '',
   ...props
@@ -86,7 +88,8 @@ export const Button = ({
   if (isLink) {
     return (
       <Link
-        to={props.href || '/'}
+        to={props.href ?? '/'}
+        reloadDocument={isHref}
         className={`${className} ${externalClassName}`}
       >
         {children}

diff --git a/apps/wait-list/app/components/layout/header.tsx b/apps/wait-list/app/components/layout/header.tsx
@@ -19,7 +19,7 @@ export const Header = ({showWaitlist = false}: Props) => {
         className="mx-auto flex w-full max-w-8xl items-center justify-between py-4 px-4 lg:px-8"
         aria-label="Global"
       >
-        <Link to="/" className="-m-1.5 p-1.5">
+        <Link reloadDocument relative="path" to="/" className="-m-1.5 p-1.5">
           <div className="flex flex-row items-end">
             <span className="text-4xl text-blue-700 font-extrabold">
               {APP_NAME.slice(0, 1)}
@@ -51,7 +51,7 @@ export const Header = ({showWaitlist = false}: Props) => {
               </span>
             </Button>
           ) : (
-            <Button href="/learn-more" variant="outline" isLink>
+            <Button href="/learn-more" variant="outline" isHref isLink>
               Learn more{' '}
               <span className="pl-1" aria-hidden="true">
                 &rarr;

diff --git a/apps/wait-list/app/components/spring-modal/index.tsx b/apps/wait-list/app/components/spring-modal/index.tsx
@@ -14,7 +14,7 @@ export const SpringModal = ({
   setIsOpen,
   children,
   canClose = true,
-  className = 'relative w-full max-w-xl p-6 overflow-hidden text-gray-800 bg-white rounded-lg shadow-xl cursor-default',
+  className = 'relative w-full max-w-xl p-6 overflow-hidden overflow-y-auto text-gray-800 bg-white rounded-lg shadow-xl cursor-default max-h-[95dvh] md:max-h-[90dvh] lg:max-h-[100vh]',
 }: Props) => {
   return (
     <AnimatePresence>

diff --git a/apps/wait-list/app/modules/landing-page/modals/wait-list-form/index.tsx b/apps/wait-list/app/modules/landing-page/modals/wait-list-form/index.tsx
@@ -201,7 +201,7 @@ export default function WaitListForm({show, setShow, handleClose}: Props) {
               </div>
               <div className="relative mt-2">
                 <input
-                  type="text"
+                  type="tel"
                   {...register('phoneNumber')}
                   className={classNames(
                     'block w-full rounded-md border-0 py-2.5 lg:py-2 text-gray-900 shadow-nome ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset  text-xs lg:text-sm sm:leading-6 ',