Merge pull request #5 from ObolNetwork/Hanan/fix-buttonWidth

fix width
ObolNetwork · Oct 17, 2024 · 239cbe7 · 239cbe7
2 parents 3958a77 + 45a07ec
commit 239cbe7
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/src/components/ConnectButton.tsx b/src/components/ConnectButton.tsx
@@ -63,7 +63,7 @@ export const ConnectButton = ({ children }: PropsWithChildren) => {
                   <Button
                     suppressHydrationWarning
                     onClick={openConnectModal}
-                    className="text-[#182d32] text-base font-semibold" //needs improvements
+                    className="text-[#182d32] h-10 px-6 py-3 w-36 inline-flex items-center justify-center  text-center transition-colors  backdrop-blur-sm  rounded-lg duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:ring-offset-gray-800" //move it as a variant to button ui
                     variant="primary"
                   >
                     {isMobile ? "Connect" : "Connect wallet"}

diff --git a/src/components/LoadingPage/ConnectButtonSection.tsx b/src/components/LoadingPage/ConnectButtonSection.tsx
@@ -2,9 +2,10 @@ import Link from "next/link";
 import { ConnectButton } from "../ConnectButton";
 import { Button } from "../ui/Button";
 
-export const ConnectButtonSection = () => 
-<ConnectButton>
-    <Button className="text-[#182d32] text-base font-semibold" variant="primary" as={Link} href={"/app"}>
-        Enter RAF
-    </Button>
-</ConnectButton>
+export const ConnectButtonSection = () =>
+    <ConnectButton>
+        {/* move it as a variant to button ui same as connect button */}
+        <Button className="text-[#182d32] h-10 px-6 py-3 w-36 inline-flex items-center justify-center text-center transition-colors  backdrop-blur-sm  rounded-lg duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:ring-offset-gray-800" variant="primary" as={Link} href={"/app"}>
+            Go To App
+        </Button>
+    </ConnectButton>
diff --git a/src/components/LoadingPage/Header.tsx b/src/components/LoadingPage/Header.tsx
@@ -5,7 +5,6 @@ export const Header = () => {
     return (
       <header className="flex justify-between items-center py-6 bg-white px-3 md:px-20 ">
       <ObolLogo/>
-      <ConnectButtonSection/>
       </header>
     );
   };
diff --git a/src/components/LoadingPage/InfoSection.tsx b/src/components/LoadingPage/InfoSection.tsx
@@ -20,7 +20,7 @@ const InfoUnit = ({ heading, description }: { heading: string, description: stri
         </div>
         <div className="flex justify-center md:justify-start">
           <div className="w-36 h-10 px-6 py-3 bg-[#182d32] rounded-lg justify-center items-center inline-flex">
-            <Link target="_blank" href="https://blog.obol.org/1-percent-for-decentralisation/" className="text-[#e1e9eb] text-base font-semibold">Learn more</Link>
+            <Link target="_blank" href="https://blog.obol.org/1-percent-for-decentralisation/" className="text-[#e1e9eb] text-base">Learn more</Link>
           </div>
         </div>
       </section>

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -10,7 +10,7 @@ import { cn } from "~/utils/classNames";
 import { Spinner } from "./Spinner";
 
 export const button = tv({
-  base: "w-36 inline-flex items-center justify-center font-semibold text-center transition-colors h-10 py-3 backdrop-blur-sm  gap-2.5 rounded-lg duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:ring-offset-gray-800",
+  base: "inline-flex items-center justify-center font-semibold text-center transition-colors h-10 py-3 backdrop-blur-sm  gap-2.5 rounded-lg duration-150 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 dark:ring-offset-gray-800",
   variants: {
     variant: {
       primary: