make faucet web app more responsive

autonomys · Dec 20, 2023 · 5ee27b6 · 5ee27b6
1 parent 45de017
commit 5ee27b6
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git a/web-app/src/components/layout.tsx b/web-app/src/components/layout.tsx
@@ -40,33 +40,26 @@ export const ConnectWallet: React.FC = () => {
       </Button>
     )
   return (
-    <Button colorScheme='brand' size='lg' onClick={openConnectModal}>
+    <Button colorScheme='brand' size={['sm', 'md', 'lg']} onClick={openConnectModal}>
       Connect Wallet
     </Button>
   )
 }
 
 export const Header: React.FC = () => {
   return (
-    <HStack w='50vw' h='10vh' display='flex' flexDir='row'>
+    <HStack w={['100%', '70%', '50%']} h='10vh' display='flex' flexDir='row' m='auto' align='center'>
       <Link href='/'>
-        <Image src='/logo.svg' alt='Subspace Network Logo' w='20vw' h='8vh' />
+        <Image src='/logo.svg' alt='Subspace Network Logo' w={[20, 36, 60]} h='8vh' />
       </Link>
       <Spacer />
-      <Box position='relative' w='20vw'>
-        <AbsoluteCenter axis='both'>
-          <Heading size='xl' whiteSpace='nowrap'>
-            Faucet
-          </Heading>
-          <Text fontWeight={600}>Gemini 3g Nova</Text>
-        </AbsoluteCenter>
-      </Box>
+      <Heading size={['md', 'lg', 'xl']} whiteSpace='nowrap'>
+        Faucet
+      </Heading>
+      <Text fontWeight={[400, 500, 600]}>Gemini 3g Nova</Text>
+      <Spacer />
+      <ConnectWallet />
       <Spacer />
-      <Box position='relative' h='10vh' verticalAlign='center' pr='2vw'>
-        <AbsoluteCenter axis='vertical'>
-          <ConnectWallet />
-        </AbsoluteCenter>
-      </Box>
     </HStack>
   )
 }
@@ -81,14 +74,14 @@ export const Layout: React.FC<LayoutProps> = ({ children }) => {
       <Link href='https://forum.subspace.network/t/incentivized-testnet-launch-announcement/1713'>
         <Box position='relative' w='100%' h='4vh' bg='brand.500' _hover={{ bg: 'brand.600' }}>
           <AbsoluteCenter axis='both'>
-            <Text fontSize='1rem' color='white'>
+            <Text fontSize={[10, 14, 16]} color='white'>
               The Gemini Incentivized Testnet is LIVE!
             </Text>
           </AbsoluteCenter>
         </Box>
       </Link>
       <Center>
-        <VStack h='100%' p={1} pt={4} display='flex' flexDir='column'>
+        <VStack w='100%' h='100%' display='flex' flexDir='column'>
           <Header />
           {children}
           <Footer />

diff --git a/web-app/src/pages/index.tsx b/web-app/src/pages/index.tsx
@@ -24,6 +24,7 @@ import {
   UnorderedList,
   VStack,
   useColorMode,
+  useMediaQuery,
   useToast
 } from '@chakra-ui/react'
 import { useConnectModal } from '@rainbow-me/rainbowkit'
@@ -306,6 +307,7 @@ const Page: React.FC = () => {
     () => !!(session && session.user != null && session.user.isDiscordGuildMember),
     [session]
   )
+  const [isLargerThan800] = useMediaQuery('(min-width: 800px)', { ssr: true, fallback: false })
 
   useEffect(() => {
     setClientSide(true)
@@ -318,29 +320,33 @@ const Page: React.FC = () => {
   if (!clientSide) return null
 
   return (
-    <Card minW='60vw' maxW='50vw' mt='10' p='4'>
-      <Heading p='4'>How to get Testnet token</Heading>
+    <Card minW='60vw' maxW={['100vw', '70vw', '50vw']} mt={[2, 6, 10]} p={[0, 2, 4]}>
+      <Heading p={['0', '2', '4']}>How to get Testnet token</Heading>
       <Tabs>
-        <TabList pt='4'>
+        <TabList pt={['0', '2', '4']}>
           <Tab>
             <Image src='/images/github.svg' alt='X' w='10' />
-            <Heading size='lg' pl='4'>
-              GitHub
-            </Heading>
+            {isLargerThan800 && (
+              <Heading size='lg' pl='4'>
+                GitHub
+              </Heading>
+            )}
           </Tab>
           <Tab>
             <Image src='/images/discord.svg' alt='X' w='10' />
-            <Heading size='lg' pl='4'>
-              Discord
-            </Heading>
+            {isLargerThan800 && (
+              <Heading size='lg' pl='4'>
+                Discord
+              </Heading>
+            )}
           </Tab>
           <Tab>
-            <Heading size='lg' pl='4'>
+            <Heading size={['sm', 'md', 'lg']} pl='4'>
               Network Settings
             </Heading>
           </Tab>
           <Tab>
-            <Heading size='lg' pl='4'>
+            <Heading size={['sm', 'md', 'lg']} pl='4'>
               Terms and Conditions
             </Heading>
           </Tab>