From a42e92781a3934979ed80ef794acee51c14345bf Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sun, 5 Dec 2021 02:38:42 +0100
Subject: [PATCH] Styling for badge links

---
 components/md-renderer/mdx-components/badge-link.tsx        | 6 +++---
 .../md-renderer/mdx-components/resource-group-title.tsx     | 2 +-
 .../roadmaps/100-frontend/content/100-internet/readme.md    | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/md-renderer/mdx-components/badge-link.tsx b/components/md-renderer/mdx-components/badge-link.tsx
index 3c30aae3e..b4a6cb200 100644
--- a/components/md-renderer/mdx-components/badge-link.tsx
+++ b/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>
diff --git a/components/md-renderer/mdx-components/resource-group-title.tsx b/components/md-renderer/mdx-components/resource-group-title.tsx
index 95eca8111..c66635e46 100644
--- a/components/md-renderer/mdx-components/resource-group-title.tsx
+++ b/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>;
 }
diff --git a/content/roadmaps/100-frontend/content/100-internet/readme.md b/content/roadmaps/100-frontend/content/100-internet/readme.md
index d0c9f207f..1aec73622 100644
--- a/content/roadmaps/100-frontend/content/100-internet/readme.md
+++ b/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>