github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

Better spacing for Join CTA

Browse Source 
Make a larger margin on small screens, a consistent space between page header and the CTA and the lists
This commit is contained in:
HHH-GH
2022-12-23 09:54:09 +08:00
committed by vidvidvid
parent b239e07762
commit 9726831095
3 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/pages/guilds.tsx
View File

@@ -28,7 +28,7 @@ const GuildsPage: React.FC<Props> = ({ guilds }) => (
/>
{/* VStack is used to make a consistent gap between the Join CTA and the Guilds list */}
<VStack maxW="7xl" w="100%" spacing={{ base: 4, md: 8, lg: 12 }} pb={8}>
<VStack maxW="7xl" w="100%" spacing={{ base: 6, md: 8, lg: 12 }} pb={8}>
<Center
fontSize={{
base: 'sm',
@@ -38,6 +38,10 @@ const GuildsPage: React.FC<Props> = ({ guilds }) => (
base: '400',
md: '700',
}}
marginTop={{
base: 3, // Consistent gap between top and Players list on small screens
md: 0,
}}
w="100%"
maxW="4xl"
>

6
packages/web/pages/patrons.tsx
View File

@@ -127,7 +127,7 @@ const PatronsPage: React.FC<Props> = ({ patrons, pSeedPrice }) => {
</VisuallyHidden>
{/* VStack is used to make a consistent gap between the Join CTA, the Patrons list, the Load More button, the X of Y patrons text, and the Octo image and back to top link */}
<VStack maxW="7xl" w="100%" spacing={{ base: 4, md: 8, lg: 12 }}>
<VStack maxW="7xl" w="100%" spacing={{ base: 6, md: 8, lg: 12 }}>
<Center
fontSize={{
base: 'sm',
@@ -137,6 +137,10 @@ const PatronsPage: React.FC<Props> = ({ patrons, pSeedPrice }) => {
base: '400',
md: '700',
}}
marginTop={{
base: 3, // Consistent gap between top and Patrons list on small screens
md: 0,
}}
w="100%"
maxW="4xl"
>

6
packages/web/pages/players.tsx
View File

@@ -77,7 +77,7 @@ const Players: React.FC<Props> = () => {
description="See the players of MetaGame."
url="https://metagame.wtf/players"
/>
<VStack w="100%" spacing={{ base: 4, md: 8, lg: 12 }} pb={8}>
<VStack w="100%" spacing={{ base: 6, md: 8, lg: 12 }} pb={8}>
<Center
fontSize={{
base: 'sm',
@@ -87,6 +87,10 @@ const Players: React.FC<Props> = () => {
base: '400',
md: '700',
}}
marginTop={{
base: 3, // Consistent gap between top and Players list on small screens
md: 0,
}}
w="100%"
maxW="4xl"
>