From 82359f89a00dc375f9f8778dcdfef4d4a393b637 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 23 Sep 2024 19:10:21 +0100
Subject: [PATCH] Update account streak UI and changelog banner design

---
 .../AccountStreak/AccountStreak.tsx           |  6 +++---
 src/components/ChangelogBanner.astro          | 21 +++++++++----------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/components/AccountStreak/AccountStreak.tsx b/src/components/AccountStreak/AccountStreak.tsx
index 60f602d99..750d966c4 100644
--- a/src/components/AccountStreak/AccountStreak.tsx
+++ b/src/components/AccountStreak/AccountStreak.tsx
@@ -111,7 +111,7 @@ export function AccountStreak(props: AccountStreakProps) {
           ref={dropdownRef}
           className="absolute right-0 top-full z-50 w-[335px] translate-y-1 rounded-lg bg-slate-800 shadow-xl"
         >
-          <div className="py-3 pl-4 pr-5">
+          <div className="py-5 pl-4 pr-5">
             <div className="flex items-center justify-between gap-2 text-sm text-slate-500">
               <p>
                 Current Streak
@@ -127,7 +127,7 @@ export function AccountStreak(props: AccountStreakProps) {
               </p>
             </div>
 
-            <div className="mb-5 mt-8">
+            <div className="mb-6 mt-9">
               <div className="grid grid-cols-10 gap-1">
                 {Array.from({ length: totalCircles }).map((_, index) => {
                   let dayCount,
@@ -181,7 +181,7 @@ export function AccountStreak(props: AccountStreakProps) {
               </div>
             </div>
 
-            <p className="-mt-[0px] mb-[1.75px] text-center text-xs tracking-wide text-slate-600">
+            <p className="-mt-[0px] mb-[1.5px] text-center text-xs tracking-wide text-slate-500">
               Visit every day to keep your streak going!
             </p>
             <p className='text-xs mt-1.5 text-center'>
diff --git a/src/components/ChangelogBanner.astro b/src/components/ChangelogBanner.astro
index e1ea7cf46..af2cd1b64 100644
--- a/src/components/ChangelogBanner.astro
+++ b/src/components/ChangelogBanner.astro
@@ -6,23 +6,22 @@ const allChangelogs = await getAllChangelogs();
 const top10Changelogs = allChangelogs.slice(0, 10);
 ---
 
-<div class='border-b border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
+<div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
   <div class='container !max-w-[650px]'>
     <p class='text-2xl font-bold sm:text-5xl'>
       <img
         src='/images/rocket.gif'
         alt='Rocket'
-        class='mr-2 inline h-12 w-12'
+        class='mr-2 hidden sm:inline h-12 w-12'
       />
       Actively Maintained
     </p>
-    <p class='my-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
+    <p class='mt-1 mb-2 sm:my-2 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
       We are always improving our content, adding new resources and adding
       features to enhance your learning experience.
     </p>
 
-    <!-- here -->
-    <div class='relative mt-8 text-left'>
+    <div class='relative mt-2 sm:mt-8 text-left'>
       <div
         class='absolute inset-y-0 left-[120px] hidden w-px -translate-x-[0.5px] translate-x-[5.75px] bg-gray-300 sm:block'
       >
@@ -37,13 +36,13 @@ const top10Changelogs = allChangelogs.slice(0, 10);
               <li class='relative'>
                 <a
                   href={`/changelog#${changelog.id}`}
-                  class='flex items-center'
+                  class='flex flex-col sm:flex-row items-start sm:items-center'
                 >
-                  <span class='w-[120px] flex-shrink-0 pr-4 text-right text-sm tracking-wide text-gray-400'>
+                  <span class='sm:w-[120px] flex-shrink-0 pr-0 sm:pr-4 text-right text-sm tracking-wide text-gray-400'>
                     {formattedDate}
                   </span>
-                  <span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300' />
-                  <span class='text-balance pl-8 text-base font-medium text-gray-900'>
+                  <span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 hidden sm:block' />
+                  <span class='text-balance sm:pl-8 text-base font-medium text-gray-900'>
                     {changelog.frontmatter.title}
                   </span>
                 </a>
@@ -53,10 +52,10 @@ const top10Changelogs = allChangelogs.slice(0, 10);
         }
       </ul>
     </div>
-    <div class='mt-8 text-center'>
+    <div class='mt-2 sm:mt-8 text-left sm:text-center'>
       <a
         href='/changelog'
-        class='inline-block rounded-full bg-gray-800 px-6 py-2 text-base text-white transition-colors hover:bg-gray-700'
+        class='inline-block text-sm sm:text-base rounded-lg sm:rounded-full bg-gray-800 px-4 sm:px-6 py-2 text-white transition-colors hover:bg-gray-700'
       >
         View Full Changelog
       </a>