feat(app): Compact UI and show download counts on PRO account

README.md

@@ -5,13 +5,13 @@
 
 The place where Bibata's cursor gets personalized. This project is the successor to [Bibata_Cursor](https://github.com/ful1e5/Bibata_Cursor) and provides the easiest personalization of cursors, along with other options to create your own Bibata cursor.
 
-#### Bibata?
+## Bibata?
 
 TLDR; This cursor set is a masterpiece of cursors available on the internet, hand-designed by [Abdulkaiz Khatri](https://github.com/ful1e5).
 
 Bibata is an open-source, compact, and material designed cursor set that aims to improve the cursor experience for users. It is one of the most popular cursor sets in the Linux community and is now available for free on Windows as well, with multiple color and size options. Its goal is to offer personalized cursors to users.
 
-#### What does "Bibata" word mean?
+### What does "Bibata" word mean?
 
 The sweetest word I ever spoke was "BI-Buh," which, coincidentally, is also the word for peanuts. To make it more pronounceable and not sound like a baby's words, I added the suffix "Ta." And with that, my journey in the world of open-source began.
 
@@ -28,7 +28,7 @@ Bibata, originally an open-source project, has evolved into a web application to
 
 Upon achieving my monthly sponsorship goal, the public download limit is lifted.
 
-#### Information on Downloads
+### Information on Downloads
 
 -   **Pro:** Unlimited Downloads
 -   **Fresh SignIn:** 20 Free Downloads
@@ -38,7 +38,7 @@ Upon achieving my monthly sponsorship goal, the public download limit is lifted.
 
 To access the benefits of a "Pro" account, initiate sponsorship for [ful1e5](https://github.com/sponsors/ful1e5) with a **monthly tier**. Connect this sponsored account with the Bibata app to unlock unlimited downloads.
 
-### TODO:
+## TODO:
 
 -   [ ] Custom size component
 -   [ ] Report issues with error stack when errors are generated while crafting cursor images

src/app/api/db/download/count/route.ts

@@ -25,7 +25,8 @@ export async function GET(request: NextRequest) {
         total: DB_SEEDS.DOWNLOADS_PER_CENTS(
           sponsor_data.monthlySponsorshipInCents
         ),
-        count: await getIndex(null)
+        count: await getIndex(null),
+        role: 'ANONYMOUS'
       });
 
       if (!token) return sponsorCount;
@@ -41,7 +42,11 @@ export async function GET(request: NextRequest) {
 
           if (total === undefined) return sponsorCount;
 
-          return NextResponse.json({ total, count: await getIndex(auth.id) });
+          return NextResponse.json({
+            total,
+            count: await getIndex(auth.id),
+            role: auth.role
+          });
         } else {
           return sponsorCount;
         }

src/components/ColorPicker/modal.tsx

@@ -109,7 +109,7 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
       {props.isOpen && (
         <div
           onClick={(e) => e.target === e.currentTarget && props.onClose()}
-          className='z-20 fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black backdrop-filter backdrop-blur-xl firefox:bg-opacity-80'>
+          className='z-20 fixed top-0 left-0 w-full h-full flex items-center justify-center bg-black backdrop-filter backdrop-blur-xl firefox:bg-opacity-80 bg-opacity-80'>
           <div className='w-full md:w-1/2 xl:w-1/3 max-h-full overflow-y-auto p-4 m-4 rounded-3xl shadow-lg bg-black ring-1 ring-white/[.06]'>
             <div className='flex justify-between text-xs'>
               <button

src/components/DownloadButton/counts.tsx

@@ -22,7 +22,7 @@ export const DownloadCount: React.FC<Props> = (props) => {
     try {
       return getDownloadCounts(props.token);
     } catch {
-      return { total: 0, count: 0 };
+      return { total: 0, count: 0, role: 'ANONYMOUS' };
     }
   };
 
@@ -52,13 +52,13 @@ export const DownloadCount: React.FC<Props> = (props) => {
 
   return (
     <>
-      {props.show && (data!.total || data.total === 0) && (
+      {props.show && (
         <div className='flex flex-row py-1 mt-1 justify-center items-center gap-1'>
           <p
             className={`${
               noDownloads ? 'text-red-100/[.8]' : 'text-green-100/[.8]'
             } font-extrabold text-center text-md p-1`}>
-            {`${data.count}/${data.total}`}
+            {`${data.count}`}/{data.role === 'PRO' ? <> &#8734;</> : data.total}
           </p>
           <Tooltip
             tooltip={

src/components/DownloadButton/index.tsx

@@ -136,9 +136,9 @@ export const DownloadButton: React.FC<Props> = (props) => {
   };
 
   const handleDownload = async (platform: Platform) => {
+    setLoadingText('Authorizing...');
     setLoading(true);
     setLock(true);
-
     setErrorLogs({ text: '' });
 
     const api = new CoreApi();
@@ -244,14 +244,14 @@ export const DownloadButton: React.FC<Props> = (props) => {
         <div className='flex justify-center' ref={dropdownRef}>
           <div className='absolute clip-bottom h-2 w-4 bg-white/[.4]' />
           <div className='absolute w-full sm:w-1/2 lg:w-1/4 2xl:w-1/5 h-auto mt-2 z-10 px-6 sm:px-0'>
-            <div className='bg-black backdrop-filter backdrop-blur-2xl firefox:bg-opacity-40 border border-white/[.2] text-white rounded-3xl shadow-lg relative'>
+            <div className='bg-black backdrop-filter backdrop-blur-2xl firefox:bg-opacity-40 bg-opacity-40 border border-white/[.2] text-white rounded-3xl shadow-lg relative'>
               {loading ? (
                 <>
                   <div className='flex p-6 justify-center items-center'>
-                    <div className='-ml-1 mr-3 h-5 w-5'>
+                    <div className='-ml-1 mr-3 h-4 w-4'>
                       <ProcessingSVG />
                     </div>
-                    <p className='text-[7px] sm:text-sm'>{loadingText}</p>
+                    <p className='text-[10px] sm:text-sm'>{loadingText}</p>
                   </div>
                 </>
               ) : (

src/components/NavBar/index.tsx

@@ -17,7 +17,7 @@ export const NavBar: React.FC<Props> = (_props) => {
   const { data: session, status } = useSession();
 
   return (
-    <header className='sticky py-px top-0 z-20 bg-[#030303] backdrop-filter backdrop-blur-2xl border-b border-white/[.1] firefox:bg-opacity-70'>
+    <header className='sticky py-px top-0 z-20 bg-[#030303] backdrop-filter backdrop-blur-2xl border-b border-white/[.1] firefox:bg-opacity-70 bg-opacity-70'>
       <nav className='container mx-auto p-3 md:p-4 flex items-center justify-between'>
         <Link href='/'>
           <div className='overflow-hidden flex items-center justify-center gap-2'>

src/components/NavBar/profile.tsx

@@ -17,12 +17,12 @@ export const Profile: React.FC<Props> = (props) => {
     <div className='inline-flex items-center gap-1'>
       {!props.session ? (
         <button
-          className='inline-flex items-center py-1 sm:py-2 px-2 sm:px-6 bg-white/[.03] ring-1 ring-white/[.2] shadow text-white fill-white rounded-xl sm:rounded-2xl text-lg font-semibold'
+          className='inline-flex items-center justify-center py/[3px] sm:py-1 px-3 sm:px-4 bg-white/[.03] ring-1 ring-white/[.2] shadow text-white fill-white rounded-xl text-lg font-semibold'
           title='Click to Connect your GitHub Account'
           onClick={() => signIn('github', { callbackUrl: '/' })}>
           <span className='mr-2 block sm:hidden text-sm font-bold'>+</span>
           <GitHubLogo />
-          <span className='ml-3 hidden sm:block'>Connect</span>
+          <span className='ml-3 hidden sm:block text-sm'>Connect</span>
         </button>
       ) : (
         <>
@@ -36,7 +36,7 @@ export const Profile: React.FC<Props> = (props) => {
             <LogoutSVG />
           </button>
 
-          <div className='w-7 sm:w-14 h-7 sm:h-14 overflow-hidden rounded-3xl ring-white/[.2] ring-1 '>
+          <div className='w-9 sm:w-12 overflow-hidden rounded-2xl ring-white/[.2] ring-1 '>
             <img
               width={100}
               height={100}

src/components/svgs/gems.tsx

@@ -11,7 +11,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   if (props.gems === 'Amber') {
     return (
       <svg
-        className='fill-current h-12 sm:h-16'
+        className='fill-current h-7 sm:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -86,7 +86,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else if (props.gems === 'Ice') {
     return (
       <svg
-        className='fill-current h-12 sm:h-16'
+        className='fill-current h-7 sm:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -169,7 +169,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else if (props.gems === 'Classic') {
     return (
       <svg
-        className='fill-current h-12 sm:h-16'
+        className='fill-current h-7 sm:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>
@@ -182,7 +182,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
             <path
               d='M333.645 249.726L252.68 486.23C250.909 486.551 249.091 486.551 247.32 486.23L166.355 249.726H333.655H333.645Z'
               fill='#DEDBE3'
-              fill-opacity='0.62'
+              fillOpacity='0.62'
             />
             <path
               d='M333.645 249.726H166.346L247.32 13.2415C249.091 12.9195 250.909 12.9195 252.68 13.2415L292.528 129.642L299.772 150.797L304.147 163.581L326.316 228.315L333.645 249.735V249.726Z'
@@ -215,7 +215,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
             height='513.471'
             filterUnits='userSpaceOnUse'
             colorInterpolationFilters='sRGB'>
-            <feFlood flood-opacity='0' result='BackgroundImageFix' />
+            <feFlood floodOpacity='0' result='BackgroundImageFix' />
             <feColorMatrix
               in='SourceAlpha'
               type='matrix'
@@ -250,7 +250,7 @@ export const GemsSVG: React.FC<Props> = (props) => {
   } else {
     return (
       <svg
-        className='fill-current h-12 sm:h-16'
+        className='fill-current h-7 sm:h-16'
         viewBox='0 0 500 500'
         fill='none'
         xmlns='http://www.w3.org/2000/svg'>

src/components/svgs/github.tsx

@@ -8,7 +8,7 @@ type Props = {};
 export const GitHubLogo: React.FC<Props> = (_props) => {
   return (
     <svg
-      className='fill-current w-4 h-4 sm:w-7 sm:h-7'
+      className='fill-current w-4 sm:w-5'
       width='22'
       height='22'
       viewBox='0 0 100 100'

src/types/bibata-live.d.ts

@@ -43,6 +43,7 @@ declare module 'bibata/misc' {
   type DownloadCounts = {
     total: number | null;
     count: number;
+    role: Role;
   };
 
   type JWTToken = {