info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-11 19:53:59 +02:00
Code Issues Releases Wiki Activity

Update account streak UI and changelog banner design

Browse Source
This commit is contained in:
Kamran Ahmed
2024-09-23 19:10:21 +01:00
parent e3e972a360
commit 82359f89a0
2 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/AccountStreak/AccountStreak.tsx
View File

@@ -111,7 +111,7 @@ export function AccountStreak(props: AccountStreakProps) {
ref={dropdownRef} ref={dropdownRef}
className="absolute right-0 top-full z-50 w-[335px] translate-y-1 rounded-lg bg-slate-800 shadow-xl" 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"> <div className="flex items-center justify-between gap-2 text-sm text-slate-500">
<p> <p>
Current Streak Current Streak
@@ -127,7 +127,7 @@ export function AccountStreak(props: AccountStreakProps) {
</p> </p>
</div> </div>
<div className="mb-5 mt-8"> <div className="mb-6 mt-9">
<div className="grid grid-cols-10 gap-1"> <div className="grid grid-cols-10 gap-1">
{Array.from({ length: totalCircles }).map((_, index) => { {Array.from({ length: totalCircles }).map((_, index) => {
let dayCount, let dayCount,
@@ -181,7 +181,7 @@ export function AccountStreak(props: AccountStreakProps) {
</div> </div>
</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! Visit every day to keep your streak going!
</p> </p>
<p className='text-xs mt-1.5 text-center'> <p className='text-xs mt-1.5 text-center'>

21
src/components/ChangelogBanner.astro
View File

@@ -6,23 +6,22 @@ const allChangelogs = await getAllChangelogs();
const top10Changelogs = allChangelogs.slice(0, 10); 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]'> <div class='container !max-w-[650px]'>
<p class='text-2xl font-bold sm:text-5xl'> <p class='text-2xl font-bold sm:text-5xl'>
<img <img
src='/images/rocket.gif' src='/images/rocket.gif'
alt='Rocket' alt='Rocket'
class='mr-2 inline h-12 w-12' class='mr-2 hidden sm:inline h-12 w-12'
/> />
Actively Maintained Actively Maintained
</p> </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 We are always improving our content, adding new resources and adding
features to enhance your learning experience. features to enhance your learning experience.
</p> </p>
<!-- here --> <div class='relative mt-2 sm:mt-8 text-left'>
<div class='relative mt-8 text-left'>
<div <div
class='absolute inset-y-0 left-[120px] hidden w-px -translate-x-[0.5px] translate-x-[5.75px] bg-gray-300 sm:block' 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'> <li class='relative'>
<a <a
href={`/changelog#${changelog.id}`} 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} {formattedDate}
</span> </span>
<span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300' /> <span class='h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 hidden sm:block' />
<span class='text-balance pl-8 text-base font-medium text-gray-900'> <span class='text-balance sm:pl-8 text-base font-medium text-gray-900'>
{changelog.frontmatter.title} {changelog.frontmatter.title}
</span> </span>
</a> </a>
@@ -53,10 +52,10 @@ const top10Changelogs = allChangelogs.slice(0, 10);
} }
</ul> </ul>
</div> </div>
<div class='mt-8 text-center'> <div class='mt-2 sm:mt-8 text-left sm:text-center'>
<a <a
href='/changelog' 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 View Full Changelog
</a> </a>