feat: Button Click Animation added

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   More polished UI
 -   Custom `404` (not-found) page
 -   Using `geist` fonts
+-   Button Click Animation added
 
 ## [v1.0.0] - 30 December 2023
 

core/builder/compress.py

@@ -24,7 +24,7 @@ def win_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.zip"
 
     if not fp.exists():
@@ -56,7 +56,7 @@ def png_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.zip"
 
     if not fp.exists():
@@ -81,7 +81,7 @@ def x11_compress(id: str, param: DownloadParams, logger: Logger) -> FileResponse
     errors: List[str] = []
 
     dir = gsubtmp(id)
-    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}"
+    name = f"{param.name}-{dir.stem.split('-')[1]}-v{param.version}-{param.platform}"
     fp = gtmp(id) / f"{name}.tar.gz"
 
     if not fp.exists():

src/app/(home)/styles.css

@@ -17,7 +17,7 @@
   @apply text-lg text-center font-light text-white/[.7];
 }
 .heading-button {
-  @apply flex gap-2 px-5 sm:px-12 py-3 sm:py-5 rounded-full uppercase;
+  @apply flex gap-2 px-5 sm:px-12 py-3 sm:py-5 rounded-full uppercase transition active:scale-95;
 }
 
 .selected-button {
@@ -79,7 +79,7 @@
 
 /* Open Source & Libraries */
 .library-card {
-  @apply rounded-3xl p-6 flex flex-col transform hover:scale-105 ease-in-out duration-150 hover:bg-[#8aa8f2]/[.2];
+  @apply rounded-3xl p-6 flex flex-col transform hover:scale-105 ease-in-out duration-150 hover:bg-[#8aa8f2]/[.2] transition active:scale-95;
 }
 .library-card-heading {
   @apply md:text-2xl font-bold;

src/components/ColorPicker/index.tsx

@@ -28,7 +28,7 @@ export const ColorPickerButton: React.FC<Props> = (props) => {
     <button
       className={`p-3 sm:p-7 flex flex-col gap-1 justify-center items-center rounded-3xl transform ring-1 ring-white/[.2] hover:scale-105 hover:bg-white/[.1] ${
         selected ? 'bg-white/[.25] font-black' : 'bg-white/[.03]'
-      } transition-all ease-in-out duration-100`}
+      } transition-all ease-in-out active:scale-90`}
       title={name !== 'Custom' ? `Bibata ${name}` : 'Customize Bibata Colors'}
       disabled={selected && disabled}
       onClick={props.onClick}>

src/components/ColorPicker/modal.tsx

@@ -147,13 +147,13 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
             <div className='flex justify-between text-xs'>
               <div className='inline-flex gap-3'>
                 <button
-                  className='p-2 bg-white/[.1] text-white rounded-lg sm:rounded-2xl hover:bg-green-400 active:bg-green-200 hover:text-black'
+                  className='p-2 bg-white/[.1] text-white rounded-lg sm:rounded-2xl hover:bg-green-400 transition active:bg-green-200 active:scale-90 hover:text-black'
                   onClick={refresh}>
                   <RefreshSVG />
                 </button>
 
                 <button
-                  className={`py-2 px-5 rounded-lg sm:rounded-2xl text-xs sm:text-lg font-bold ${
+                  className={`py-2 px-5 rounded-lg sm:rounded-2xl text-xs sm:text-lg font-bold transition active:scale-90 ${
                     monochromeMode
                       ? 'bg-white/[.2] hover:bg-white/[.6] hover:text-black'
                       : 'bg-white hover:bg-white/[.7] text-black'
@@ -164,7 +164,7 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
               </div>
 
               <button
-                className='p-3 bg-white/[.1] text-white rounded-xl font-bold hover:bg-white hover:text-black'
+                className='p-3 bg-white/[.1] text-white rounded-xl font-bold hover:bg-white hover:text-black transition active:scale-90'
                 onClick={props.onClose}>
                 <CloseSVG />
               </button>
@@ -286,7 +286,7 @@ export const ColorPickerModal: React.FC<ColorPickerModalProps> = (props) => {
 
             <div className='mt-11 flex justify-center'>
               <button
-                className='w-36 py-3 bg-green-600 text-white font-bold rounded-2xl text-sm sm:text-md hover:bg-green-500'
+                className='w-36 py-3 bg-green-600 text-white font-bold rounded-2xl text-sm sm:text-md hover:bg-green-500 transition active:scale-90'
                 onClick={handleColorPick}>
                 Apply
               </button>

src/components/DownloadButton/index.tsx

@@ -44,7 +44,7 @@ export const DownloadButton: React.FC<Props> = (props) => {
   const [loading, setLoading] = useState<boolean>(false);
   const [lock, setLock] = useState<boolean>(false);
 
-  const [loadingText, setLoadingText] = useState<string>('Preparing...');
+  const [loadingText, setLoadingText] = useState<string>('Fetching Cursors...');
   const [errorLogs, setErrorLogs] = useState<ErrorLogs>({ text: '' });
 
   const [showDropdown, setShowDropdown] = useState<boolean>(false);
@@ -170,9 +170,13 @@ export const DownloadButton: React.FC<Props> = (props) => {
         printError(upload.error);
         await api.refreshSession(token);
       } else {
-        setLoadingText(
-          `Packaging ${platform === 'win' ? 'Win Cursors' : 'XCursors'} ...`
-        );
+        if (platform === 'win') {
+          setLoadingText('Packaging Windows Cursors ...');
+        } else if (platform === 'png') {
+          setLoadingText('Compressing PNG files ...');
+        } else {
+          setLoadingText('Packaging XCursors ...');
+        }
 
         const file = await api.download(platform, n, props.version);
 
@@ -232,9 +236,9 @@ export const DownloadButton: React.FC<Props> = (props) => {
               ? 'Download locked while collecting cursor images.'
               : 'Download'
           }
-          className='relative flex justify-center items-center uppercase gap-2 w-4/5 sm:w-1/3 lg:w-1/5 h-16 sm:h-20 rounded-full bg-green-600 hover:bg-green-500'
-          disabled={props.disabled && !lock && !props.lock}
-          onClick={() => !props.lock && setShowDropdown(!showDropdown)}>
+          className='relative flex justify-center items-center uppercase gap-2 w-4/5 sm:w-1/3 lg:w-1/5 h-16 sm:h-20 rounded-full bg-green-600 transition active:scale-90 hover:bg-green-500'
+          disabled={props.disabled && !lock}
+          onClick={() => setShowDropdown(!showDropdown)}>
           {props.lock ? (
             <LockSVG />
           ) : busy ? (
@@ -254,15 +258,13 @@ export const DownloadButton: React.FC<Props> = (props) => {
           <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 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-4 w-4'>
-                      <ProcessingSVG />
-                    </div>
-                    <p className='text-[10px] sm:text-sm'>{loadingText}</p>
+              {props.lock || loading ? (
+                <div className='flex p-6 justify-center items-center'>
+                  <div className='-ml-1 mr-3 h-4 w-4'>
+                    <ProcessingSVG />
                   </div>
-                </>
+                  <p className='text-[10px] sm:text-sm'>{loadingText}</p>
+                </div>
               ) : (
                 <>
                   <DownloadError

src/components/DownloadButton/sub-buttons.tsx

@@ -22,15 +22,15 @@ export const DownloadSubButtons: React.FC<Props> = (props) => {
       <div className='p-6 grid grid-cols-2 gap-4 diviide-y-2 divide-white/[.1] text-left'>
         <button
           disabled={props.disabled}
-          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-orange-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-orange-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('x11')}>
           <LinuxDownloadSVG />
           <p className='text-sm font-bold mt-2'>XCursors</p>
           <strong className='text-xs font-extrabold'>(.tar.gz)</strong>
         </button>
         <button
           disabled={props.disabled}
-          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-blue-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex flex-col justify-center items-center bg-white/[.1] hover:bg-blue-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('win')}>
           <WindowsDownloadSVG />
           <p className='text-sm font-bold mt-2'>Windows Cursors</p>
@@ -39,7 +39,7 @@ export const DownloadSubButtons: React.FC<Props> = (props) => {
 
         <button
           disabled={props.disabled}
-          className='inline-flex col-span-2 flex-col justify-center items-center bg-white/[.1] hover:bg-violet-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center'
+          className='inline-flex col-span-2 flex-col justify-center items-center bg-white/[.1] hover:bg-violet-400 fill-white/[.5] hover:fill-black/[.6] text-white/[.7] hover:text-black/[.6] rounded-xl p-4 text-center transition active:scale-90'
           onClick={() => props.onClick('png')}>
           <PNGsDownloadSVG />
           <p className='text-sm font-bold mt-2'>PNGs</p>

src/components/NavBar/index.tsx

@@ -28,7 +28,7 @@ export const NavBar: React.FC<Props> = (_props) => {
           <div className='overflow-hidden flex items-center justify-center gap-2'>
             <span className='inline-flex items-center gap-1'>
               <span
-                className={`hover:text-white/[.8] ${
+                className={`hover:text-white/[.8] transition active:scale-95 ${
                   session?.user?.role === 'PRO' || pathname === '/'
                     ? 'text-[--accent]'
                     : 'text-white'

src/components/NavBar/profile.tsx

@@ -17,7 +17,7 @@ export const Profile: React.FC<Props> = (props) => {
     <div className='inline-flex items-center gap-1'>
       {!props.session ? (
         <button
-          className='inline-flex items-center py-2 sm:py-3 px-3 sm:px-7 text-white ring-1 ring-white/[.4] rounded-full text-lg font-semibold'
+          className='inline-flex items-center py-2 sm:py-3 px-3 sm:px-7 text-white ring-1 ring-white/[.4] rounded-full text-lg font-semibold transition active:scale-95'
           title='Click to Connect your GitHub Account'
           onClick={() => signIn('github', { callbackUrl: '/' })}>
           <GitHubLogo />

src/components/SizePicker.tsx

@@ -38,7 +38,7 @@ export const SizePicker: React.FC<Props> = (props) => {
                 maxLength={3}
                 min={16}
                 max={256}
-                className={`remove-arrow text-lg md:text-xl w-40 py-2 text-center border border-white/[.1] hover:border-white focus:outline-none rounded-full ${
+                className={`remove-arrow text-lg md:text-xl w-40 py-4 text-center border border-white/[.1] hover:border-white focus:outline-none rounded-full ${
                   errorText ? 'bg-red-300/[.2]' : 'bg-white/[.05] '
                 }`}
                 value={size}
@@ -59,7 +59,7 @@ export const SizePicker: React.FC<Props> = (props) => {
             ) : (
               <span
                 onClick={() => setEditMode(!editMode)}
-                className='text-lg md:text-xl font-bold transition py-2 pl-16 pr-12 text-left bg-white/[.01] border border-white/[.2] hover:border-white text-white rounded-full'>
+                className='text-lg md:text-xl font-bold transition py-4 pl-16 pr-12 text-left bg-white/[.01] border border-white/[.2] hover:border-white text-white rounded-full active:scale-90'>
                 {props.default}px
               </span>
             )}
@@ -77,7 +77,7 @@ export const SizePicker: React.FC<Props> = (props) => {
           {size !== props.default ? (
             <button
               type='submit'
-              className='p-3 bg-green-500 hover:bg-green-400 rounded-full'
+              className='p-3 bg-green-500 hover:bg-green-400 rounded-full transition active:scale-90'
               onClick={() => handleChange()}>
               <svg
                 xmlns='http://www.w3.org/2000/svg'
@@ -88,7 +88,7 @@ export const SizePicker: React.FC<Props> = (props) => {
             </button>
           ) : (
             <button
-              className={`p-3 bg-red-100 hover:bg-white/[.8] rounded-full text-red-800 ${
+              className={`p-3 bg-red-100 hover:bg-white/[.8] rounded-full text-red-800 transition active:scale-90 ${
                 editMode ? '' : 'hidden'
               }`}
               onClick={() => setEditMode(!editMode)}>
@@ -120,10 +120,10 @@ export const SizePicker: React.FC<Props> = (props) => {
                   setErrorText('');
                   setEditMode(false);
                 }}
-                className={`p-1 py-2 sm:p-3 rounded-full text-center transition ring-1 ring-white/[.2] hover:scale-110 hover:bg-white/[.1] hover:text-white ${
+                className={`p-1 py-3 sm:py-5 lg:py-6 rounded-full text-center transition ring-1 ring-white/[.2] hover:scale-105 hover:bg-white/[.1] hover:text-white ${
                   selected
-                    ? 'bg-green-50 text-green-950 font-black '
-                    : 'bg-white/[.03]'
+                    ? 'bg-green-50 text-green-950 font-black'
+                    : 'bg-white/[.03] transition active:scale-90'
                 }`}>
                 {t}
               </button>

src/components/TypePicker.tsx

@@ -22,10 +22,10 @@ export const TypePicker: React.FC<Props> = (props) => {
               title={`Bibata ${t}`}
               disabled={t === props.value}
               onClick={() => props.onClick(t)}
-              className={`py-2 flex justify-center items-center gap-1 font-bold border rounded-full shadow-md border-white/[.2] transition ${
+              className={`py-2 flex justify-center items-center gap-1 font-bold border rounded-full shadow-md border-white/[.2] transition active:scale-90 ${
                 t === props.value
                   ? 'bg-white fill-black text-black font-bold'
-                  : 'fill-white/[.4] text-white/[.4] hover:text-white hover:fill-white hover:border-white '
+                  : 'fill-white/[.4] text-white/[.4] hover:text-white hover:fill-white hover:border-white'
               }`}>
               <>
                 {t === 'Modern' && <ModernSVG />}