Merge pull request #2 from adafel-official/fe-changes

Fe changes
adafel-official · May 13, 2024 · 7f1b58b · 7f1b58b
2 parents 5553788 + e78f1bb
commit 7f1b58b
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 15 deletions.
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -85,10 +85,10 @@ const Home: NextPage = () => {
         </div>
         <div className="grid grid-cols-2 gap-10 w-full max-w-7xl">
           <div className="z-10">
-            <div className="adafelbg bg-base-100 rounded-3xl shadow-md shadow-secondary border border-base-300 flex flex-col mt-10 relative">
-              <div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-base-300">
+            <div className="adafelbg bg-base-100 rounded-3xl  border-base-300 flex flex-col mt-10 relative">
+              <div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm black-text">Schemas</p>
+                  <p className="my-0 text-sm">Schemas</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-base-300 h-screen ">
@@ -98,10 +98,10 @@ const Home: NextPage = () => {
             </div>
           </div>
           <div className="z-10">
-            <div className="adafelbg bg-base-100 rounded-3xl shadow-md shadow-secondary border border-base-300 flex flex-col mt-10 relative">
-              <div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg shadow-base-300">
+            <div className="adafelbg bg-base-100 rounded-3xl  border-base-300 flex flex-col mt-10 relative">
+              <div className="h-[5rem] w-[5.5rem] bg-base-300 absolute self-start rounded-[22px] -top-[38px] -left-[1px] -z-10 py-[0.65rem] shadow-lg">
                 <div className="flex items-center justify-center space-x-2">
-                  <p className="my-0 text-sm black-text">Create</p>
+                  <p className="my-0 text-sm">Create</p>
                 </div>
               </div>
               <div className="p-5 divide-y divide-base-300">

diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -43,8 +43,8 @@ export const HeaderMenuLinks = () => {
               href={href}
               passHref
               className={`${
-                isActive ? "navbar-text bg-secondary shadow-md" : ""
-              } hover:bg-secondary hover:shadow-md focus:!bg-secondary active:!text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
+                isActive ? "text-white gloss-effect" : "text-gray-300"
+              } hover:bg-gradient-to-r from-purple-500 to-pink-500 hover:text-white focus:bg-gradient-to-r focus:from-purple-500 focus:to-pink-500 active:text-neutral py-1.5 px-3 text-sm rounded-full gap-2 grid grid-flow-col`}
             >
               {icon}
               <span>{label}</span>

diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/index.tsx
@@ -31,7 +31,7 @@ export const RainbowKitCustomConnectButton = () => {
             {(() => {
               if (!connected) {
                 return (
-                  <button className="btn btn-primary btn-sm" onClick={openConnectModal} type="button">
+                  <button className="button" onClick={openConnectModal} type="button">
                     Connect Wallet
                   </button>
                 );

diff --git a/packages/nextjs/styles/globals.css b/packages/nextjs/styles/globals.css
@@ -14,13 +14,12 @@
   background: radial-gradient(circle, #4d004d, black);
 } */
 .adafelbg {
-  background: linear-gradient(to right, #404142, #2c2d2e);
-  /* padding: 0;
-  margin: 0;
-  justify-content: center;
-  align-items: center; */
-
+  background: linear-gradient(to right, #404142, #1c1c34);
+  /* Starts at the top left (135 degrees) and goes to the bottom right */
+  /* The purple (#6741D9) is centered but subtle, positioned at 50% */
 }
+
+
 .glossy-background {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
@@ -83,3 +82,70 @@ p {
   @apply shadow-none;
   color:#0f0f23
 }
+
+.button {
+  background: #6741D9; /* Initial background color (dark purple) */
+  color: white; /* Text color */
+  border: none; /* No border */
+  padding: 10px 20px; /* Padding around the text */
+  border-radius: 20px; /* Rounded corners */
+  font-weight: bold; /* Bold text */
+  text-transform: uppercase; /* Uppercase text */
+  cursor: pointer; /* Pointer cursor on hover */
+  outline: none; /* Remove outline */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Subtle shadow */
+  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
+}
+
+.button:hover {
+  background: #FC49AB; /* Background color on hover (vibrant pink) */
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); /* Brighter shadow on hover */
+}
+
+.gloss-effect {
+  position: relative;
+  color: white;
+}
+
+.gloss-effect::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
+  border-radius: 9999px; /* rounded-full equivalent */
+  pointer-events: none; /* Ensure clicks pass through to the link */
+}
+.bg-base-300 {
+color: white;
+background: linear-gradient(to right, #404142, #2c2d2e);
+
+}
+
+.white-text{
+  color:white;
+}
+
+.border{
+
+}
+
+.btn.btn-secondary.btn-sm {
+  background: #6741D9 !important; /* Initial background color (dark purple) */
+  color: white !important; /* Text color */
+  border: none !important; /* No border */
+  padding: 10px 20px !important; /* Padding around the text */
+  border-radius: 20px !important; /* Rounded corners */
+  cursor: pointer; /* Pointer cursor on hover */
+  outline: none !important; /* Remove outline */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */
+  transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
+  font-size: 0.875rem; /* Match the 'btn-sm' font size */
+}
+
+.btn.btn-secondary.btn-sm:hover {
+  background: #FC49AB !important; /* Background color on hover (vibrant pink) */
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5) !important; /* Brighter shadow on hover */
+}
diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -79,9 +79,17 @@ module.exports = {
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",
       },
+      colors: {
+        'purple-500': '#a855f7',
+        'pink-500': '#ec4899',
+      },
       animation: {
         "pulse-fast": "pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite",
       },
+      backgroundImage: theme => ({
+        'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
+      }),
+
     },
   },
 };