From 129d1e6fa1a7ac6e69153b235de80592dc761a56 Mon Sep 17 00:00:00 2001
From: =Mtg_Dev <=mtg0987654321@gmail.com>
Date: Mon, 22 Nov 2021 16:50:05 +0200
Subject: [PATCH] fixing Issue #1

---
 package-lock.json                             | 42 +++++++++++++++++++
 package.json                                  |  2 +
 .../ClaimProject/Claim_CopySignatureCard.tsx  |  2 +-
 .../ExplorePage/partials/ProjectsRow.tsx      | 34 +++++++++++----
 src/Components/Project/ProjectCard.tsx        | 22 ++++++----
 src/Components/Shared/Navbar/NavMobile.tsx    |  8 ++--
 src/Components/Shared/Navbar/Navbar.tsx       | 12 +++++-
 src/Components/Vote/VoteCard.tsx              |  4 +-
 src/index.css                                 |  2 +-
 9 files changed, 104 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 15a9ab4..16fc249 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@types/react": "^17.0.33",
         "@types/react-dom": "^17.0.10",
         "framer-motion": "^5.3.0",
+        "lodash.throttle": "^4.1.1",
         "react": "^17.0.2",
         "react-copy-to-clipboard": "^5.0.4",
         "react-dom": "^17.0.2",
@@ -33,6 +34,7 @@
       },
       "devDependencies": {
         "@craco/craco": "^6.4.0",
+        "@types/lodash.throttle": "^4.1.6",
         "@types/react-copy-to-clipboard": "^5.0.2",
         "autoprefixer": "^9.8.8",
         "gh-pages": "^3.2.3",
@@ -3608,6 +3610,21 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.177",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
+      "integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
+      "dev": true
+    },
+    "node_modules/@types/lodash.throttle": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz",
+      "integrity": "sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -13401,6 +13418,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "node_modules/lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -25126,6 +25148,21 @@
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
       "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4="
     },
+    "@types/lodash": {
+      "version": "4.14.177",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
+      "integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
+      "dev": true
+    },
+    "@types/lodash.throttle": {
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.throttle/-/lodash.throttle-4.1.6.tgz",
+      "integrity": "sha512-/UIH96i/sIRYGC60NoY72jGkCJtFN5KVPhEMMMTjol65effe1gPn0tycJqV5tlSwMTzX8FqzB5yAj0rfGHTPNg==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/minimatch": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
@@ -32649,6 +32686,11 @@
         "lodash._reinterpolate": "^3.0.0"
       }
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ="
+    },
     "lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
diff --git a/package.json b/package.json
index 14da1d3..876c583 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
     "framer-motion": "^5.3.0",
+    "lodash.throttle": "^4.1.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
@@ -56,6 +57,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.0",
+    "@types/lodash.throttle": "^4.1.6",
     "@types/react-copy-to-clipboard": "^5.0.2",
     "autoprefixer": "^9.8.8",
     "gh-pages": "^3.2.3",
diff --git a/src/Components/ClaimProject/Claim_CopySignatureCard.tsx b/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
index 4640c11..7499f94 100644
--- a/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
+++ b/src/Components/ClaimProject/Claim_CopySignatureCard.tsx
@@ -46,7 +46,7 @@ export default function Claim_CopySignatureCard({ onClose, direction, ...props }
                 Good job! Now paste this on the webpage
                 <a className="font-bold" href="www.projectname.com/"
                     target='_blank' rel='noreferrer'
-                >www.projectname.com/</a>
+                > www.projectname.com/</a>
             </p>
             <div className="input-wrapper mt-32">
                 <input
diff --git a/src/Components/ExplorePage/partials/ProjectsRow.tsx b/src/Components/ExplorePage/partials/ProjectsRow.tsx
index 94fe025..116a435 100644
--- a/src/Components/ExplorePage/partials/ProjectsRow.tsx
+++ b/src/Components/ExplorePage/partials/ProjectsRow.tsx
@@ -1,24 +1,33 @@
-import { ReactElement, useRef } from "react";
+import { ReactElement, useEffect, useRef, useState } from "react";
 import { ProjectCard } from "../../../utils/interfaces";
 import Carousel from 'react-multi-carousel';
 import { MdLocalFireDepartment } from 'react-icons/md';
 import { useAppDispatch } from "../../../utils/hooks";
 import { ModalId, openModal } from "../../../redux/features/modals.slice";
+import _throttle from 'lodash.throttle'
 
 const responsive = {
     all: {
         breakpoint: { max: 5000, min: 0 },
-        items: (((window.innerWidth - 64) / (296 + 24))),
+        items: (((window.innerWidth - 64) / (296 + 48))),
     }
 }
 
+const calcNumItems = () => {
+    const res = (((window.innerWidth - 32 - 296) / (296 + 20)));
+    console.log(res);
 
+    return res;
+}
 
 interface Props { title: string | ReactElement, projects: ProjectCard[] }
 
 export default function ProjectsRow({ title, projects }: Props) {
 
     const dispatch = useAppDispatch()
+    const [carouselItmsCnt, setCarouselItmsCnt] = useState(calcNumItems);
+
+    responsive.all.items = carouselItmsCnt
 
     let drag = useRef(false);
 
@@ -31,17 +40,28 @@ export default function ProjectsRow({ title, projects }: Props) {
             dispatch(openModal({ modalId: ModalId.Project, propsToPass: { projectId } }))
     }
 
+    useEffect(() => {
+        const listener = _throttle(() => {
+            setCarouselItmsCnt(calcNumItems());
+        }, 1000);
+
+        window.addEventListener('resize', listener)
+        return () => {
+            window.removeEventListener('resize', listener)
+        }
+    }, [])
+
     return (
-        <div className='mb-40 overflow-hidden'>
-            <h3 className="font-bolder text-body3 mb-20 px-32">{title}</h3>
+        <div className='mb-48'>
+            <h3 className="font-bolder text-body3 mb-24 px-32">{title}</h3>
             <Carousel
-                containerClass='py-10 pl-32'
+                containerClass='pl-32 pr-[-32px]'
                 showDots={false}
                 arrows={false}
                 responsive={responsive}
-                infinite
+                centerMode
             >
-                {projects.map((project, idx) => <div key={idx} className="select-none px-16 py-16  flex w-[296px] gap-16 border-gray-200 shadow-md border-2 rounded-10 transform transition-transform hover:cursor-pointer hover:scale-105" onClick={() => handleClick(project.id)}>
+                {projects.map((project, idx) => <div key={idx} className="bg-gray-25 select-none px-16 py-16 flex w-[296px] gap-16 border-gray-200 shadow-md border-2 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => handleClick(project.id)}>
                     <img src={project.img} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
                     <div className="justify-around items-start min-w-0">
                         <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
diff --git a/src/Components/Project/ProjectCard.tsx b/src/Components/Project/ProjectCard.tsx
index b6e1e83..2806ed2 100644
--- a/src/Components/Project/ProjectCard.tsx
+++ b/src/Components/Project/ProjectCard.tsx
@@ -82,7 +82,7 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
                     </div>
                 </div>
                 <p className="mt-40 text-body4 leading-normal">{project.description}</p>
-                <div className="flex gap-24 mt-24 flex-wrap">
+                <div className="flex gap-16 mt-24 flex-wrap">
                     <span className="chip-small bg-red-100 text-red-800 font-regular"> payments </span>
                     <span className="chip-small bg-primary-100 text-primary-800 font-regular"> lightining </span>
                 </div>
@@ -91,12 +91,20 @@ export default function ProjectCard({ onClose, direction, ...props }: ModalCard)
                     <button onClick={onVote} className="btn w-full bg-yellow-100 hover:bg-yellow-50 py-12 px-24 rounded-lg mb-24">Vote <MdLocalFireDepartment className='text-fire' /></button>
                 </div>
                 <div className="mt-40">
-                    <h3 className="text-h5 font-bold">Screenshots</h3>
-                    <div className="grid grid-cols-1 justify-items-center md:grid-cols-2 gap-x-24 gap-y-20">
-                        <div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
-                        <div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
-                        <div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
-                        <div className="w-full max-w-[310px] self-center h-[130px] bg-gray-300 rounded-xl"></div>
+                    <h3 className="text-h5 font-bold mb-16">Screenshots</h3>
+                    <div className="grid grid-cols-2 gap-12 justify-items-center md:gap-24">
+                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
+                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        </div>
+                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
+                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        </div>
+                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
+                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        </div>
+                        <div className="w-full relative" style={{ aspectRatio: '16/9' }}>
+                            <div className="w-full h-full object-cover bg-gray-300 rounded-xl"></div>
+                        </div>
                     </div>
                 </div>
                 <hr className="my-40" />
diff --git a/src/Components/Shared/Navbar/NavMobile.tsx b/src/Components/Shared/Navbar/NavMobile.tsx
index de6a672..eaf60a8 100644
--- a/src/Components/Shared/Navbar/NavMobile.tsx
+++ b/src/Components/Shared/Navbar/NavMobile.tsx
@@ -44,12 +44,12 @@ export default function NavMobile({ onSearch }: Props) {
 
     return (
         <nav className='block lg:hidden overflow-hidden z-[2010]'>
-            <div className="p-16   w-screen flex items-center">
+            <div className="p-16 w-screen flex justify-center items-center">
                 <div className="w-40 h-40 bg-gray-100 rounded-8 mr-16 overflow-hidden">
                     <img className="w-full h-full object-cover" src="https://www.figma.com/file/OFowr5RJk9YZCW35KT7D5K/image/07b85d84145942255afd215b3da26dbbf1dd03bd?fuid=772401335362859303" alt="" />
                 </div>
-                <h2 className="text-h5 font-bold mr-64">makers.bolt.fun</h2>
-                <button className='rounded-full ml-auto mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
+                <h2 className="text-h5 font-bold mx-auto">makers.bolt.fun</h2>
+                <button className='rounded-full mr-16 text-2xl w-[50px] h-[50px] hover:bg-gray-200' onClick={handleClick}>
 
                     {!open ? (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='menuHide' animate='menuShow'><FiMenu /></motion.div>)
                         : (<motion.div key={open ? 1 : 0} variants={navBtnVariant} initial='closeHide' animate='closeShow'><GrClose /></motion.div>)}
@@ -75,7 +75,7 @@ export default function NavMobile({ onSearch }: Props) {
 
                             {/* <input className="btn bg-gray-100 w-full  rounded-24 mt-16 placeholder-gray-500" placeholder="Search" /> */}
                         </form>
-                        <button className="btn btn-primary w-full py-12 px-40 rounded-24 mt-64">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' />  app️</button>
+                        <button className="btn btn-primary w-full py-12 px-40 rounded-24 mt-40">Submit <AiFillThunderbolt className='inline-block text-thunder transform scale-125' />  app️</button>
                         <button className="btn btn-gray w-full py-12 px-40 rounded-24 my-16"> <AiFillThunderbolt className='inline-block text-thunder transform scale-125' /> Connect Wallet </button>
 
                     </div>
diff --git a/src/Components/Shared/Navbar/Navbar.tsx b/src/Components/Shared/Navbar/Navbar.tsx
index f9bd56c..5fe1c9c 100644
--- a/src/Components/Shared/Navbar/Navbar.tsx
+++ b/src/Components/Shared/Navbar/Navbar.tsx
@@ -26,7 +26,11 @@ export default function Navbar() {
     const { isWalletConnected } = useAppSelector(state => ({ isWalletConnected: state.wallet.isConnected }))
 
     const toggleSearch = () => {
-        if (!searchOpen) inputRef.current?.focus();
+        if (!searchOpen) {
+            console.log(inputRef.current);
+            inputRef.current?.focus();
+
+        }
         setSearchOpen(!searchOpen);
     }
 
@@ -84,7 +88,11 @@ export default function Navbar() {
                             onChange={e => setSearchInput(e.target.value)}
                             initial={{ scaleX: .3, opacity: 0, originX: 'right' }}
                             animate={searchOpen ? { scaleX: 1, opacity: 1, originX: 'right' } : { scaleX: .3, opacity: 0, originX: 'right' }}
-                            className="absolute top-0 right-0  z-10   bg-gray-200 text-gray-600 focus:outline-primary w-[300px] py-12 px-20 pr-40 rounded-24 placeholder-gray-500" placeholder="Search" />}
+                            onAnimationComplete={() => {
+                                if (searchOpen) inputRef.current?.focus()
+                            }}
+                            className="absolute top-0 right-0 z-10 bg-gray-200 text-gray-600 focus:outline-primary w-[300px] py-12 px-20 pr-40 rounded-24 placeholder-gray-500" placeholder="Search" />
+                        }
                     </form>
                 </div>
             </nav>
diff --git a/src/Components/Vote/VoteCard.tsx b/src/Components/Vote/VoteCard.tsx
index 459ab9e..88015f5 100644
--- a/src/Components/Vote/VoteCard.tsx
+++ b/src/Components/Vote/VoteCard.tsx
@@ -52,14 +52,14 @@ export default function VoteCard({ onClose, direction, ...props }: ModalCard) {
                     {defaultOptions.map((option, idx) =>
                         <button
                             key={idx}
-                            className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 text-primary-600"}`}
+                            className={`btn border px-12 rounded-md py-8 text-body ${idx === selectedOption && "border-primary-500 bg-primary-100 hover:bg-primary-100 text-primary-600"}`}
                             onClick={() => onSelectOption(idx)}
                         >
                             {option.text}<AiFillThunderbolt className='inline-block text-thunder' />
                         </button>
                     )}
                 </div>
-                <p className="text-body6 mt-14 text-gray-500">1 sat = 1 vote</p>
+                <p className="text-body6 mt-12 text-gray-500">1 sat = 1 vote</p>
                 <button className="btn btn-primary w-full mt-32" onClick={onClose}>
                     Upvote
                 </button>
diff --git a/src/index.css b/src/index.css
index 4e65e7d..2ac0cf6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -21,7 +21,7 @@
   }
 
   .input-field {
-    @apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-800 leading-tight focus:outline-none;
+    @apply flex-grow appearance-none w-full py-2 px-3 bg-transparent text-primary-500 leading-tight focus:outline-none;
   }
 
   .input-icon {