Supported networks design fixes

components/ResourceHub/Resources.tsx

@@ -334,14 +334,20 @@ export const Resources: React.FC = () => {
           alignItems='center'
           justifyContent='center'
         >
-          <Typography textAlign='center' variant='h1' mb={[2, 0]}>
+          <Typography textAlign='center' variant='h1' fontSize='42px' mb={4}>
             Resource Hub
           </Typography>
           <TextField
             className={css.searchField}
             variant='outlined'
             placeholder='Search by name, description, or tag'
             InputProps={{
+              style: {
+                color: 'white',
+                backgroundColor: 'rgba(28, 28, 28, 1)',
+                borderRadius: '8px',
+                border: 'none'
+              },
               startAdornment: (
                 <InputAdornment position='start'>
                   <SearchIcon />
@@ -357,7 +363,7 @@ export const Resources: React.FC = () => {
                 ) : undefined
             }}
             value={searchQuery}
-            sx={{ border: 'none', width: '80%', mt: [2, 0] }}
+            sx={{ border: 'none', width: ['80%', '500px'], mt: [2, 0] }}
             onChange={e => {
               if (e.target.value.length === 0) onResetSearch()
               else setSelectedFilter([e.target.value], 'search')

components/SupportedNetworks/Card.tsx

@@ -48,12 +48,16 @@ const NetworkCard = (network: Network): JSX.Element => {
         }}
         className={css.card}
         onClick={() => {
-          void push({
-            query: {
-              ...query,
-              expand: network.chainId
-            }
-          })
+          void push(
+            {
+              query: {
+                ...query,
+                expand: network.chainId
+              }
+            },
+            undefined,
+            { scroll: false }
+          )
           // sendGAEvent('event', 'supported_networks_link', {
           //   network_chainId: network.chainId,
           //   network_name: network.name
@@ -104,7 +108,7 @@ const NetworkCard = (network: Network): JSX.Element => {
                   height: '23px',
                   fontSize: '14px',
                   cursor: 'pointer',
-                  ml: 1
+                  mr: 1
                 }}
                 className={css.chip}
                 label={version}
@@ -131,7 +135,7 @@ const NetworkCard = (network: Network): JSX.Element => {
                   height: '23px',
                   fontSize: '14px',
                   cursor: 'pointer',
-                  ml: 1
+                  mr: 1
                 }}
                 className={css.chip}
                 label={feature}