Fix: made images not selectable and undraggable

keyshade-xyz · Dec 28, 2023 · b8c200e · b8c200e
1 parent 8894c95
commit b8c200e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 3 deletions.
diff --git a/apps/web/app/components/Killers.tsx b/apps/web/app/components/Killers.tsx
@@ -15,6 +15,8 @@ const Killers = ({ image, twitterUserName }: KillersProps) => {
                     height={36}
                     width={37}
                     alt={`${image}`}
+                    className='unselectable'
+                    draggable='false'
                 />
             </div>
             <div className={`flex flex-col justify-center items-center gap-1 ${inter.className}`}>

diff --git a/apps/web/app/components/Links.tsx b/apps/web/app/components/Links.tsx
@@ -22,6 +22,8 @@ const Links = ({ icon, description, link }: LinksProps) => {
                     alt={`${icon}`}
                     height={12}
                     width={13}
+                    className='unselectable'
+                    draggable='false'
                 />
                 <p className="text-white text-sm">{description}</p>
             </div>

diff --git a/apps/web/app/global.css b/apps/web/app/global.css
@@ -6,3 +6,12 @@
   margin: 0;
   padding: 0;
 }
+
+.unselectable {
+  user-drag: none;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -15,15 +15,15 @@ export default async function Index() {
       </div>
       <div className="bg-[#03080B] w-full min-h-screen flex justify-center items-center absolute">
         <div className='h-[69.16vh] w-[61.23vw] absolute'>
-          <Image src="./grid.svg" alt="grid" fill />
+          <Image src="./grid.svg" alt="grid" fill className='unselectable' draggable='false' />
         </div>
         <div className='h-[47.51vh] w-[87.92vw] absolute'>
-          <Image src="./stars.svg" alt="stars" fill />
+          <Image src="./stars.svg" alt="stars" fill className='unselectable' draggable='false' />
         </div>
         <div className="bg-transparent  w-fit h-[75%] flex flex-col p-1 mt-20 gap-10 z-20">
           <div className="flex flex-col items-center justify-center gap-10 min-w-screen">
             <div className="flex items-center justify-center">
-              <Image src="./logo.svg" height={60} width={61} alt="logo" />
+              <Image src="./logo.svg" height={60} width={61} alt="logo" className='unselectable' draggable='false' />
               <h1
                 className={`px-4 bg-gradient-to-br from-[#727576] to-[#fafafb] inline-block text-transparent bg-clip-text text-6xl ${poppins.className} py-1  md:text-5xl lg:text-7xl`}
               >