From a1576fd348bac8cdafd4c8a9f732e77923be75a9 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 9 Dec 2021 22:42:44 +0100
Subject: [PATCH] Fix multiple group marking as done

---
 components/roadmap/content-drawer.tsx         | 20 +++++++++++++------
 .../content/102-css/100-learn-the-basics.md   | 12 ++++++++++-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/components/roadmap/content-drawer.tsx b/components/roadmap/content-drawer.tsx
index 7aa276264..9f33f11ba 100644
--- a/components/roadmap/content-drawer.tsx
+++ b/components/roadmap/content-drawer.tsx
@@ -53,8 +53,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 onClick={() => {
                   localStorage.setItem(groupId, 'done');
                   document
-                    .querySelector(`[data-group-id*="-${groupId}"]`)
-                    ?.classList?.add('done');
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.add('done'));
                   onClose();
                 }}
                 colorScheme="green"
@@ -62,7 +62,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 size="xs"
                 iconSpacing={0}
               >
-                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
                   Mark as Done
                 </Text>
               </Button>
@@ -72,8 +76,8 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 onClick={() => {
                   localStorage.removeItem(groupId);
                   document
-                    .querySelector(`[data-group-id*="-${groupId}"]`)
-                    ?.classList?.remove('done');
+                    .querySelectorAll(`[data-group-id*="-${groupId}"]`)
+                    .forEach((item) => item?.classList?.remove('done'));
                   onClose();
                 }}
                 colorScheme="red"
@@ -81,7 +85,11 @@ export function ContentDrawer(props: ContentDrawerProps) {
                 size="xs"
                 iconSpacing={0}
               >
-                <Text as="span" d={['block', 'none', 'none', 'block']} ml="10px">
+                <Text
+                  as="span"
+                  d={['block', 'none', 'none', 'block']}
+                  ml="10px"
+                >
                   Mark as Pending
                 </Text>
               </Button>
diff --git a/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md b/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
index 8819f0624..ad9e72046 100644
--- a/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
+++ b/content/roadmaps/100-frontend/content/102-css/100-learn-the-basics.md
@@ -1 +1,11 @@
-# Learn the basics
\ No newline at end of file
+# CSS Basics
+
+CSS or Cascading Style Sheets is the language used to style the frontend of any website. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.w3schools.com/css/'>W3Schools — Learn CSS</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/learn/responsive-web-design/'>freeCodeCamp — Responsive Web Design</BadgeLink>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://learn.shayhowe.com/html-css/building-your-first-web-page/'>Learn to Code HTML & CSS</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=yfoY53QXEnI'>CSS Crash Course For Absolute Beginners</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=D-h8L5hgW-w'>HTML and CSS Tutorial</BadgeLink>
+<BadgeLink colorScheme='green' badgeText='Course' href='https://www.youtube.com/watch?v=FqmB-Zj2-PA'>CSS Masterclass - Tutorial & Course for Beginners</BadgeLink>