From 43117b4305460f45cf93713d43d8eae13808fb09 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 25 Aug 2022 17:35:07 -0700
Subject: [PATCH] refactor visuallyHidden style out of Page

---
 web/components/page.tsx | 20 +-------------------
 web/pages/home.tsx      |  2 +-
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/web/components/page.tsx b/web/components/page.tsx
index 1913eb7a..8b691c6b 100644
--- a/web/components/page.tsx
+++ b/web/components/page.tsx
@@ -6,13 +6,11 @@ import { Toaster } from 'react-hot-toast'
 
 export function Page(props: {
   rightSidebar?: ReactNode
-  suspend?: boolean
   className?: string
   rightSidebarClassName?: string
   children?: ReactNode
 }) {
-  const { children, rightSidebar, suspend, className, rightSidebarClassName } =
-    props
+  const { children, rightSidebar, className, rightSidebarClassName } = props
 
   const bottomBarPadding = 'pb-[58px] lg:pb-0 '
   return (
@@ -23,7 +21,6 @@ export function Page(props: {
           bottomBarPadding,
           'mx-auto w-full lg:grid lg:grid-cols-12 lg:gap-x-2 xl:max-w-7xl xl:gap-x-8'
         )}
-        style={suspend ? visuallyHiddenStyle : undefined}
       >
         <Toaster />
         <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
@@ -46,22 +43,7 @@ export function Page(props: {
           </div>
         </aside>
       </div>
-
       <BottomNavBar />
     </>
   )
 }
-
-const visuallyHiddenStyle = {
-  clip: 'rect(0 0 0 0)',
-  clipPath: 'inset(50%)',
-  height: 1,
-  margin: -1,
-  overflow: 'hidden',
-  padding: 0,
-  position: 'absolute',
-  width: 1,
-  whiteSpace: 'nowrap',
-  userSelect: 'none',
-  visibility: 'hidden',
-} as const
diff --git a/web/pages/home.tsx b/web/pages/home.tsx
index 3aa791ab..5464cdbe 100644
--- a/web/pages/home.tsx
+++ b/web/pages/home.tsx
@@ -33,7 +33,7 @@ const Home = (props: { auth: { user: User } | null }) => {
 
   return (
     <>
-      <Page suspend={!!contract}>
+      <Page className={contract ? 'sr-only' : ''}>
         <Col className="mx-auto w-full p-2">
           <ContractSearch
             user={user}