fix: add layered button

oxen-io · Jul 4, 2024 · c68e8b9 · c68e8b9
1 parent 96f9642
commit c68e8b9
Showing 1 changed file with 8 additions and 16 deletions.
diff --git a/packages/auth/components/TelegramAuthButton.tsx b/packages/auth/components/TelegramAuthButton.tsx
@@ -7,13 +7,11 @@ import { TelegramIcon } from '../icons/TelegramIcon';
 import { signIn, signOut, useSession } from '../lib/client';
 import { ButtonDataTestId } from '../testing/data-test-ids';
 
-type TelegramAuthButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-  csrfToken: string;
-};
+type TelegramAuthButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export const TelegramAuthButton = forwardRef<HTMLButtonElement, TelegramAuthButtonProps>(
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ({ csrfToken, ...props }, ref) => {
+  (props, ref) => {
     const { data, status } = useSession();
 
     const isConnected = status === 'authenticated';
@@ -23,13 +21,6 @@ export const TelegramAuthButton = forwardRef<HTMLButtonElement, TelegramAuthButt
 
     console.log('username', username);
 
-    const handleButtonClick = () => {
-      if (!isConnected) {
-        /** @ts-expect-error -- Exists at runtime */
-        return TWidgetLogin.auth();
-      }
-    };
-
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const handleAuth = (data: any) => {
       if (!isConnected) {
@@ -40,21 +31,22 @@ export const TelegramAuthButton = forwardRef<HTMLButtonElement, TelegramAuthButt
     };
 
     return (
-      <>
-        <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
-        <div className="hidden">
+      <div className="relative">
+        <div className="absolute opacity-0">
           <LoginButton botUsername="session_testnet_bot" onAuthCallback={handleAuth} />
         </div>
         <Button
-          onClick={handleButtonClick}
           data-testid={ButtonDataTestId.TELEGRAM_AUTH}
           ref={ref}
           {...props}
+          rounded="md"
+          size="lg"
+          className="text-session-black hover:text-session-black gap-2 border-transparent bg-[#2AABEE] hover:bg-[#2AABEE] hover:brightness-125"
         >
           <TelegramIcon className="h-4 w-4" />
           {isConnected ? username ?? 'Connected' : 'Connect Telegram'}
         </Button>
-      </>
+      </div>
     );
   }
 );