Fix badge alignment

pull/1331/head
Kamran Ahmed 3 years ago
parent b4ce36fb04
commit d80327c8e8
  1. 2
      pages/guides/components/guide-list-item.tsx
  2. 20
      pages/index.tsx
  3. 2
      pages/watch/components/video-list-item.tsx

@ -30,7 +30,7 @@ export function GuideListItem(props: GuideListItemProps) {
<Flex alignItems='center' className='guide-title' transition={'200ms'}> <Flex alignItems='center' className='guide-title' transition={'200ms'}>
<Text as='span' ml='7px'>{title}</Text> <Text as='span' ml='7px'>{title}</Text>
{isPro && <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>} {isPro && <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
</Flex> </Flex>
<Text fontSize='13px' color='gray.500' as='span'>{date}</Text> <Text fontSize='13px' color='gray.500' as='span'>{date}</Text>
</Link> </Link>

@ -1,20 +1,5 @@
import { import { Box, Container, Heading, Link, SimpleGrid, StackDivider, Text, Tooltip, VStack } from '@chakra-ui/react';
Badge,
Box, Button,
Container,
Flex,
Heading,
Image,
Link,
SimpleGrid,
Stack,
StackDivider,
Text,
Tooltip,
VStack
} from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons'; import { InfoIcon } from '@chakra-ui/icons';
import { VideoIcon } from '../icons/video-icon';
import { Header } from '../components/header'; import { Header } from '../components/header';
import { Footer } from '../components/footer'; import { Footer } from '../components/footer';
import { UpdatesBanner } from '../components/updates-banner'; import { UpdatesBanner } from '../components/updates-banner';
@ -42,8 +27,7 @@ export default function Home() {
guides</Link> which we hope you are going to love.</Text> guides</Link> which we hope you are going to love.</Text>
</Box> </Box>
<SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'> <SimpleGrid columns={{ xl: 3, md: 3, sm: 2, base: 1 }} spacing='20px'>
<Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} <Link as={Box} href={'#'} _hover={{ textDecoration: 'none', transform: 'scale(1.02)' }} flex={1} shadow='2xl'
shadow='2xl'
bg='blue.900' color='white' p='15px' rounded='10px'> bg='blue.900' color='white' p='15px' rounded='10px'>
<Heading fontSize='22px' mb='5px'>Frontend</Heading> <Heading fontSize='22px' mb='5px'>Frontend</Heading>
<Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text> <Text color='gray.200' fontSize='13px'>Step by step guide to becoming a frontend developer in 2021</Text>

@ -30,7 +30,7 @@ export function VideoListItem(props: VideoListItemProps) {
<Flex alignItems='center' className='video-title' transition={'200ms'}> <Flex alignItems='center' className='video-title' transition={'200ms'}>
<VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} /> <VideoIcon style={{ width: '18px', height: '18px', color: '#9c9c9c' }} />
<Text as='span' ml='7px'>{title}</Text> <Text as='span' ml='7px'>{title}</Text>
{isPro && <Badge variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>} {isPro && <Badge pos='relative' top='1px' variant='subtle' colorScheme='purple' ml='10px'>Pro</Badge>}
</Flex> </Flex>
<Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>{duration}</Text> <Text as='span' fontWeight={500} color='gray.400' fontSize='12px' ml='10px'>{duration}</Text>
</Link> </Link>

Loading…
Cancel
Save