chore: improve ux (rohitdasu#332)

prestidigitateur · Jan 20, 2023 · 6eea0ea · 6eea0ea
1 parent 72d5755
commit 6eea0ea
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 27 deletions.
diff --git a/components/BackToTopButton/BackToTop.tsx b/components/BackToTopButton/BackToTop.tsx
@@ -36,7 +36,7 @@ export const BackToTop = () => {
           transition={{ duration: 0.3 }}
           exit={{ opacity: 0 }}
           whileTap={{ scale: 0.7 }}
-          className="mx-auto rounded-full border border-slate-600 bg-transparent p-4 font-semibold shadow-lg backdrop-blur-lg dark:border-slate-100"
+          className="mx-auto animate-bounce rounded-full border border-slate-600 bg-transparent p-4 font-semibold shadow-lg backdrop-blur-lg dark:border-slate-100"
           onClick={handleClick}
         >
           <FaArrowUp className="text-xl text-slate-600 dark:text-slate-100" />

diff --git a/components/LandingPage/Hero.tsx b/components/LandingPage/Hero.tsx
@@ -13,7 +13,7 @@ import { Typography } from '@/components/Typography';
 export const Hero = () => {
   const router = useRouter();
   const dispatch = useAppDispatch();
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
 
   const handleModal = () => dispatch(openModal());
   const handleRoute = () => router.push('/projects');
@@ -64,7 +64,10 @@ export const Hero = () => {
             open source project by sharing it on ProjectMate !
           </Typography>
         </motion.div>
-        <div className="flex w-full flex-col items-center justify-between gap-4 md:w-auto md:flex-row">
+        <motion.div
+          layout
+          className="flex w-full flex-col items-center justify-between gap-4 md:w-auto md:flex-row"
+        >
           {session === null && (
             <Button
               onClick={handleModal}
@@ -82,7 +85,7 @@ export const Hero = () => {
               whileTap={{ scale: 0.9 }}
               layout
               onClick={handleRoute}
-              className={`text-md w-full rounded-md border-2 border-slate-200 py-3 px-6 font-semibold text-gray-800 opacity-75 transition-all hover:opacity-100 focus:ring dark:border-slate-600 dark:text-gray-100 md:w-auto md:text-lg ${
+              className={`text-md w-full rounded-md border-2 border-gray-200 py-3 px-6 font-semibold text-gray-900 opacity-75 transition-all hover:opacity-100 focus:ring dark:border-gray-600 dark:text-gray-100 md:w-auto md:text-lg ${
                 session &&
                 'border-0 !bg-orange-100 !text-orange-500 ring-orange-800 dark:!bg-[#2c1c0f] dark:!text-orange-400'
               }`}
@@ -93,7 +96,21 @@ export const Hero = () => {
               </span>
             </motion.button>
           )}
-        </div>
+          {status === 'loading' && (
+            <motion.button
+              whileTap={{ scale: 0.9 }}
+              layout
+              className={`text-md w-full rounded-md border-2 border-gray-200 py-3 px-6 font-semibold text-gray-900 opacity-75 transition-all hover:opacity-100 focus:ring dark:border-gray-600 dark:text-gray-100 md:w-auto md:text-lg ${
+                session &&
+                'border-0 !bg-orange-100 !text-orange-500 ring-orange-800 dark:!bg-[#2c1c0f] dark:!text-orange-400'
+              }`}
+            >
+              <span className="flex animate-pulse items-center justify-center gap-3">
+                Loading...
+              </span>
+            </motion.button>
+          )}
+        </motion.div>
       </div>
       <div className="-mr-10 hidden lg:block">
         <Lottie animationData={animation} style={style} />

diff --git a/components/ProductHunt/ProductHunt.tsx b/components/ProductHunt/ProductHunt.tsx
@@ -1,20 +1,29 @@
+import { useTheme } from 'next-themes';
 import React from 'react';
 
 export const ProductHunt = ({ isMobile = false }) => {
+  const { theme } = useTheme();
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    setLoaded(true);
+  }, []);
+
   return (
-    <a
-      href="https://www.producthunt.com/products/projectmate/reviews?utm_source=badge-product_review&utm_medium=badge&utm_souce=badge-projectmate"
-      target="_blank"
-      rel="noreferrer"
-      className={
-        isMobile ? 'mt-4 flex items-center justify-center' : 'hidden md:block'
-      }
-    >
-      <img
-        src={`https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=516791&theme=light`}
-        alt="Projectmate - Connecting&#0032;open&#0045;source&#0032;collaborators&#0032;and&#0032;maintainers | Product Hunt"
-        style={{ width: '250px', height: '48px' }}
-      />
-    </a>
+    loaded && (
+      <a
+        href="https://www.producthunt.com/products/projectmate/reviews?utm_source=badge-product_review&utm_medium=badge&utm_souce=badge-projectmate"
+        target="_blank"
+        rel="noreferrer"
+        className={
+          isMobile ? 'mt-4 flex items-center justify-center' : 'hidden md:block'
+        }
+      >
+        <img
+          src={`https://api.producthunt.com/widgets/embed-image/v1/product_review.svg?product_id=516791&theme=${theme}`}
+          alt="Projectmate - Connecting&#0032;open&#0045;source&#0032;collaborators&#0032;and&#0032;maintainers | Product Hunt"
+          style={{ width: '250px', height: '48px' }}
+        />
+      </a>
+    )
   );
 };
diff --git a/components/Projects/Project.tsx b/components/Projects/Project.tsx
@@ -20,7 +20,7 @@ export const Project = ({
 
   return (
     <motion.li
-      initial={{ opacity: 0, scale: 0.9 }}
+      initial={{ opacity: 0, scale: 0.98 }}
       animate={{ opacity: 1, scale: 1 }}
       exit={{ opacity: 0 }}
       transition={{ duration: 1 }}
@@ -55,7 +55,7 @@ export const Project = ({
             <Button
               onClick={handleContributeClick}
               isDisabled={false}
-              className="mt-2 px-2 py-1.5 font-bold sm:my-0"
+              className="mt-2 px-2 py-1.5 font-bold hover:animate-pulse sm:my-0"
             >
               <span>Contribute</span>
             </Button>

diff --git a/components/Topbar/Logo.tsx b/components/Topbar/Logo.tsx
@@ -6,7 +6,7 @@ export const Logo = () => {
     <Link href="/">
       <motion.span
         whileTap={{ scale: 0.9 }}
-        className="flex cursor-pointer items-center font-mono text-2xl font-semibold uppercase text-foreground-1 md:space-x-2"
+        className="flex cursor-pointer items-center font-mono text-2xl font-semibold uppercase text-foreground-1 hover:animate-pulse md:space-x-2"
       >
         <p>
           project<span className="text-primary-color">mate</span>

diff --git a/components/Topbar/Sidebar.tsx b/components/Topbar/Sidebar.tsx
@@ -16,7 +16,6 @@ import { useAppDispatch } from '../../app/hooks';
 import { openModal } from '@/store/slices/sliceModal';
 import { GiClick } from 'react-icons/gi';
 import { ProductHunt } from '../ProductHunt';
-import { BuyMeACoffee } from '../BuyMeACoffee';
 
 export const Sidebar = () => {
   const [open, setOpen] = useState(false);
@@ -108,7 +107,6 @@ export const Sidebar = () => {
               </div>
 
               {<RenderNavigation routes={appRoutes} />}
-              {/* {<RenderNavigation routes={socialLinks} />} */}
 
               {session && (
                 <button
@@ -139,7 +137,6 @@ export const Sidebar = () => {
                 </button>
               )}
               <ProductHunt isMobile />
-              <BuyMeACoffee isMobile />
             </motion.div>
           </>
         )}

diff --git a/components/Topbar/Topbar.tsx b/components/Topbar/Topbar.tsx
@@ -9,7 +9,6 @@ import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/router';
 import { openModal } from '@/store/slices/sliceModal';
 import { useAppDispatch } from '../../app/hooks';
-import { BuyMeACoffee } from '../BuyMeACoffee';
 import { ProductHunt } from '../ProductHunt';
 
 export const Topbar = () => {
@@ -32,7 +31,6 @@ export const Topbar = () => {
           {router.pathname !== '/' && <DesktopRoutes />}
         </div>
         <div className="flex items-center gap-2">
-          {router.pathname === '/' && <BuyMeACoffee />}
           {router.pathname !== SUBMIT_PAGE && router.pathname !== '/' && (
             <button
               className="hidden h-[2.939rem] w-40 rounded-md !bg-transparent text-gray-500 shadow-border-shadow transition-all hover:border-2 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 md:block"

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -43,6 +43,19 @@ export default class MyDocument extends Document {
               })(window,document,'script','dataLayer','GTM-KSS8T4M');`,
             }}
           />
+          <script
+            data-name="BMC-Widget"
+            data-cfasync="false"
+            src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
+            data-id="rohit.dasu"
+            data-description="Support me on Buy me a coffee!"
+            data-message=""
+            data-color="#FF813F"
+            data-position="left"
+            data-x_margin="22"
+            data-y_margin="22"
+            defer
+          />
         </Head>
         <body className="bg-background-1">
           <noscript>