Merge pull request #67 from chiscookeke11/connector-component

FEAT: redesigned wallet connector component
mubarak23 · Feb 27, 2025 · 9159f1f · 9159f1f
2 parents 4153b25 + b314eed
commit 9159f1f
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 20 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -5,37 +5,58 @@
 @tailwind utilities;
 
 body {
-    position: relative;
+  position: relative;
 }
 
 .create-event-form label {
-    font-size: 16px;
-    font-weight: 500;
-    color: #f1e4e4;
+  font-size: 16px;
+  font-weight: 500;
+  color: #f1e4e4;
 }
 
 .create-event-form input[type="text"] {
-    width: 100%;
-    margin-top: 12px;
-    border-radius: 2px;
-    padding: 8px 12px;
-    background-color: #d9d9d9;
-    border: 1px #c4c4c4 solid;
-    color: black;
+  width: 100%;
+  margin-top: 12px;
+  border-radius: 2px;
+  padding: 8px 12px;
+  background-color: #d9d9d9;
+  border: 1px #c4c4c4 solid;
+  color: black;
 }
 
 .sidebarLinks li .active {
-    color: white;
+  color: white;
 }
 
 .sidebarLinks li a {
-    transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 }
 
 .sidebarLinks li a:hover {
-    background-color: #fff;
+  background-color: #fff;
 }
 
 .custom-button-bg {
-    background-color: #1E1D1D;
-}
+  background-color: #1e1d1d;
+}
+@keyframes loadingWave {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+
+.loading-gradient {
+  background: linear-gradient(
+    90deg,
+    #f0e1b8,
+    #e4cfa0,
+    #d8bc88,
+    #e4cfa0,
+    #f0e1b8
+  );
+  background-size: 200% 100%;
+  animation: loadingWave 4s infinite linear;
+}
diff --git a/src/components/ConnectModal.jsx b/src/components/ConnectModal.jsx
@@ -1,25 +1,39 @@
 "use client";
 import { useConnect } from "@starknet-react/core";
+import Image from "next/image";
 
 const ConnectModal = ({ setIsOpen }) => {
   const { connect, connectors } = useConnect();
 
   return (
     <div
-      className="absolute inset-0 bg-white bg-opacity-65 backdrop-blur-sm flex gap-x-4 justify-center pt-[400px] z-[100]"
+      className="fixed top-0 left-0 h-screen w-full bg-white/10 backdrop-blur-lg shadow-lg flex items-center gap-x-4 justify-center z-[100]"
       onClick={() => setIsOpen(false)}
     >
-      <div onClick={(e) => e.stopPropagation()} className="flex gap-x-4">
+      <div
+        onClick={(e) => e.stopPropagation()}
+        className="md:w-[380px] h-[252px] flex px-3 min-w-[300px]   flex-col gap-2 items-center justify-center bg-white  rounded-lg shadow-xl shadow-[rgba(0,0,0,0.2)] loading-gradient
+ "
+      >
         {connectors.map((connector) => (
           <button
             key={connector.id}
             onClick={() => {
               connect({ connector });
               setIsOpen(false);
             }}
-            className="border border-black rounded-md text-black font-regular py-2 px-4  h-fit capitalize shadow-md"
+            className=" w-full text-[]    bg-[#1E1D1D] p-[2px] overflow-hidden gap-4 pr-[15%] rounded-md flex  items-center justify-between   "
           >
-            Connect {connector.id}
+            <p className=" py-2 bg-[#C4B07A] w-full  rounded-l-md shadow-inner shadow-[#8a7651] border border-[#9d865a] text-base font-semibold ">
+              {" "}
+              {connector.id.toUpperCase()}{" "}
+            </p>
+            <Image
+              src={connector.icon}
+              alt={connector.id}
+              height={25}
+              width={25}
+            />
           </button>
         ))}
       </div>