adjusted the logo to be visible on dark and light mode and some paddi…

…ng adjustment and button positioning in the modal
BuidlGuidl · Aug 26, 2024 · 7898cd4 · 7898cd4
1 parent 5ddcec5
commit 7898cd4
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/packages/nextjs/components/CheckInFlag.tsx b/packages/nextjs/components/CheckInFlag.tsx
@@ -14,31 +14,33 @@ export const CheckInFlag = () => {
   };
   return (
     <div>
-      <dialog id="my_modal_1" className="modal">
+      <dialog id="my_modal_1" className="modal ">
         <div className="modal-box">
-          <h3 className={`font-bold text-lg ${isCheckedIn ? "" : "hidden"}`}>You have successfully checked in🎉</h3>
-          <h3 className={`font-bold text-lg ${isCheckedIn ? "hidden" : ""}`}>You have to yet check in 😌</h3>
+          <h3 className={`font-bold text-xl ${isCheckedIn ? "" : "hidden"}`}>You have successfully checked in🎉</h3>
+          <h3 className={`font-bold text-xl ${isCheckedIn ? "hidden" : ""}`}>You have to yet check in 😌</h3>
           <div className={` ${isCheckedIn ? "" : "hidden"}`}>
-            <p className="pt-4">You used the below contract to check in</p>
-            <p className="">{isCheckedIn}</p>
+            <p className="pt-4 mb-1">You used the below contract to check in</p>
+            <p className="m-0 font-semibold">{isCheckedIn}</p>
           </div>
 
           <div className={` ${isCheckedIn ? "hidden" : ""}`}>
-            <p className="py-4">Visit the github issue for the checkIn challenge</p>
+            <p className="text-lg">Visit the github issue for the checkIn challenge</p>
           </div>
 
-          <div className="modal-action">
-            <form method="dialog">
-              <button className="btn">Close</button>
+          <div className="modal-action mt-10">
+            <form method="dialog" className="w-full flex justify-between">
+              <button className="btn dark:bg-slate-500 dark:text-slate-800 dark:hover:text-slate-900 hover:text-slate-600 dark:hover:bg-slate-400 transition-all border-none text-slate-400">
+                Close
+              </button>
               <a
-                className={`btn mx-4 ${isCheckedIn ? "hidden" : ""}`}
+                className={`btn  ${isCheckedIn ? "hidden" : ""}`}
                 href="https://github.com/BuidlGuidl/batch8.buidlguidl.com/issues/10"
                 target="_blank"
               >
                 Onwards to checkIn <span className="text-lg">👩🏽‍✈️</span>
               </a>
               <a
-                className={`btn mx-4 ${isCheckedIn ? "" : "hidden"}`}
+                className={`btn ${isCheckedIn ? "" : "hidden"}`}
                 //Here the is checked provides the address of the deployed contract!!!
                 href={`https://optimistic.etherscan.io/address/${isCheckedIn}`}
                 target="_blank"
@@ -50,7 +52,7 @@ export const CheckInFlag = () => {
         </div>
       </dialog>
       <button
-        className={`${isCheckedIn ? "bg-green-600" : "bg-red-500 mr-3"} ${isConnected ? "" : "hidden"} px-3 py-2 sm:py-1.5 rounded-full shadow-xl font-semibold text-sm `}
+        className={`btn btn-sm border-none ${isCheckedIn ? "dark:bg-emerald-600 bg-emerald-400 dark:hover:bg-emerald-700 hover:bg-emerald-500" : "bg-red-500 dark:hover:bg-red-600"} ${isConnected ? "" : "hidden"} sm:py-1.5 rounded-full shadow-xl font-semibold text-sm transition-all`}
         onClick={() => openModal("my_modal_1")}
       >
         <span className="hidden sm:inline-block">{isCheckedIn ? "CheckedIn 🎉" : "CheckIn 🤔"}</span>

diff --git a/packages/nextjs/components/Footer.tsx b/packages/nextjs/components/Footer.tsx
@@ -32,7 +32,7 @@ export const Footer = () => {
                 </div>
                 {/* Conditionally renders the batch member logo is they are in the allow list */}
                 <div className={`${isMember ? "" : "hidden"}`}>
-                  <BatchMemberLogo className="" />
+                  <BatchMemberLogo classNameWord="fill-current dark:text-white text-slate-700" className="" />
                 </div>
               </div>
             )}

diff --git a/packages/nextjs/components/assets/BatchMemberLogo.tsx b/packages/nextjs/components/assets/BatchMemberLogo.tsx
diff --git a/...ges/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx b/...ges/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx
@@ -6,7 +6,7 @@ export const WrongNetworkDropdown = () => {
   const { disconnect } = useDisconnect();
 
   return (
-    <div className="dropdown dropdown-end mr-2">
+    <div className="dropdown dropdown-end mr-2 ml-3">
       <label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1">
         <span>Wrong network</span>
         <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />