Styling for badge links

components/md-renderer/mdx-components/badge-link.tsx

@@ -13,9 +13,9 @@ export function BadgeLink(props: BadgeLinkType) {
   const { target = '_blank', colorScheme='purple', badgeText, href, children } = props;
 
   return (
-    <Text mb={0}>
-      <Link color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
-        <Badge mr='10px' colorScheme={colorScheme} pos='relative' top='-2px'>{badgeText}</Badge>
+    <Text mb={'0px'}>
+      <Link fontSize='14px' color='blue.700' fontWeight={500} textDecoration='none' href={href} target={target} _hover={{ textDecoration: 'none', color: 'purple.400' }}>
+        <Badge fontSize='11px' mr='7px' colorScheme={colorScheme}>{badgeText}</Badge>
         {children}
       </Link>
     </Text>

components/md-renderer/mdx-components/resource-group-title.tsx

@@ -8,5 +8,5 @@ type ResourceGroupTitleProps = {
 export function ResourceGroupTitle(props: ResourceGroupTitleProps) {
   const { children } = props;
 
-  return <Heading fontSize='22px' as="h2" mb={'10px'}>{children}</Heading>;
+  return <Heading mt='20px' color='gray.800' fontSize='14px' pb='5px' borderBottomWidth={1} textTransform='uppercase' as="h2" mb={'10px'}>{children}</Heading>;
 }

content/roadmaps/100-frontend/content/100-internet/readme.md

@@ -7,3 +7,4 @@ The Internet is a global network of computers connected to each other which comm
 <BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=x3c1ih2NJEg'>How does the Internet work?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.vox.com/2014/6/16/18076282/the-internet'>The Internet Explained</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm'>How Does the Internet Work?</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://www.youtube.com/watch?v=7_LPdttKXPc'>How the Internet Works in 5 Minutes</BadgeLink>