From 8badf383b24fe9365fa0dec8cc2246c3132ec59d Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 10 Jan 2023 23:26:29 +0400
Subject: [PATCH] Responsiveness changes

---
 src/components/FAQs/Answer.astro      |  2 +-
 src/components/FAQs/FAQs.astro        |  2 +-
 src/components/FAQs/Question.astro    |  4 ++--
 src/components/OpenSourceBanner.astro |  2 +-
 src/components/ResourcesAlert.astro   |  2 +-
 src/components/Sponsor/Sponsor.astro  | 16 ++++++++++++++++
 6 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/FAQs/Answer.astro b/src/components/FAQs/Answer.astro
index 5cce8e3ae..d28a283c4 100644
--- a/src/components/FAQs/Answer.astro
+++ b/src/components/FAQs/Answer.astro
@@ -1,3 +1,3 @@
-<div class='leading-relaxed text-left p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
+<div class='text-sm sm:text-base leading-relaxed text-left p-2 sm:p-4 text-md text-gray-800 border-t border-t-gray-300 bg-gray-100 rounded-bl-md rounded-br-md'>
   <slot />
 </div>
\ No newline at end of file
diff --git a/src/components/FAQs/FAQs.astro b/src/components/FAQs/FAQs.astro
index 0f007afa5..f7d7447f1 100644
--- a/src/components/FAQs/FAQs.astro
+++ b/src/components/FAQs/FAQs.astro
@@ -1,7 +1,7 @@
 <div class='border-t bg-gray-100'>
   <div class='container'>
     <div class='flex justify-between relative -top-5'>
-      <h1 class='text-md font-medium py-1 px-3 border bg-white rounded-md'>
+      <h1 class='text-sm sm:text-base font-medium py-1 px-3 border bg-white rounded-md'>
         Frequently Asked Questions
       </h1>
     </div>
diff --git a/src/components/FAQs/Question.astro b/src/components/FAQs/Question.astro
index 4b47a28c4..1ba53c113 100644
--- a/src/components/FAQs/Question.astro
+++ b/src/components/FAQs/Question.astro
@@ -14,9 +14,9 @@ const { question, isActive = false } = Astro.props;
 >
   <button
     faq-question
-    class='flex flex-row justify-between items-center p-3 w-full'
+    class='flex flex-row justify-between items-center p-2 sm:p-3 w-full'
   >
-    <span class='text-md text-left font-medium'>{question}</span>
+    <span class='text-sm sm:text-base text-left font-medium'>{question}</span>
     <Icon icon='down' class='h-6 hidden sm:block text-gray-400' />
   </button>
   <div class:list={['answer', { hidden: !isActive }]} faq-answer>
diff --git a/src/components/OpenSourceBanner.astro b/src/components/OpenSourceBanner.astro
index 4264da2f0..6603f6fc4 100644
--- a/src/components/OpenSourceBanner.astro
+++ b/src/components/OpenSourceBanner.astro
@@ -7,7 +7,7 @@ const starCount = await getFormattedStars('kamranahmedse/developer-roadmap');
 
 <div class='py-6 sm:py-16 border-b border-t text-left sm:text-center bg-white'>
   <div class='max-w-[600px] container'>
-    <h2 class='text-3xl sm:text-5xl font-bold'>Open Source</h1>
+    <h2 class='text-2xl sm:text-5xl font-bold'>Open Source</h2>
     <p class='text-gray-600 text-sm sm:text-lg leading-relaxed my-2.5 sm:my-5'>
       The project is OpenSource, <a
         href='https://github.com/search?o=desc&q=stars%3A%3E100000&s=stars&type=Repositories'
diff --git a/src/components/ResourcesAlert.astro b/src/components/ResourcesAlert.astro
index cfa71937e..ac0604ecf 100644
--- a/src/components/ResourcesAlert.astro
+++ b/src/components/ResourcesAlert.astro
@@ -16,7 +16,7 @@ const roadmapTitle =
 
 <div
   class:list={[
-    'mt-4 sm:mt-7 border rounded-md mb-0',
+    'mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0',
     {
       'sm:-mb-[82px]': hasTNSBanner,
       'sm:-mb-[65px]': !hasTNSBanner,
diff --git a/src/components/Sponsor/Sponsor.astro b/src/components/Sponsor/Sponsor.astro
index d48c0f87a..bb51a4441 100644
--- a/src/components/Sponsor/Sponsor.astro
+++ b/src/components/Sponsor/Sponsor.astro
@@ -1,5 +1,6 @@
 ---
 import type { GAEventType } from '../Analytics/analytics';
+import Icon from '../Icon.astro';
 
 export type SponsorType = {
   url: string;
@@ -28,6 +29,13 @@ const {
   onclick={event ? `window.fireEvent(${JSON.stringify(event)})` : ''}
   class='fixed bottom-[15px] right-[20px] outline-transparent z-50 bg-white max-w-[330px] shadow-lg outline-0 hidden'
 >
+  <button
+    class='absolute top-1.5 right-1.5 text-gray-300 hover:text-gray-800'
+    aria-label='Close'
+    close-sponsor
+  >
+    <Icon icon='close' class='h-4' />
+  </button>
   <img src={imageUrl} class='h-[150px] lg:h-[169px]' alt='Sponsor Banner' />
   <span class='text-sm flex flex-col justify-between'>
     <span class='p-[10px]'>
@@ -37,3 +45,11 @@ const {
     <span class='sponsor-footer'>Partner Content</span>
   </span>
 </a>
+
+<script>
+  document.querySelector('[close-sponsor]')?.addEventListener('click', (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    document.getElementById('sponsor-ad')?.classList.add('hidden');
+  });
+</script>