Merge pull request #41 from ai16zpartners/telegram-button

add telegram styles

src/pages/auth/signin.module.css

@@ -30,7 +30,7 @@
   justify-content: center;
   gap: 12px;
   padding: 12px 24px;
-  border-radius: 14px;
+  border-radius: 1000px;
   font-size: 16px;
   font-weight: 600;
   color: white;
@@ -46,10 +46,3 @@
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
-
-.telegramContainer {
-  height: 48px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-} 

src/pages/auth/signin.tsx

@@ -2,7 +2,8 @@ import { signIn } from "next-auth/react";
 import Image from "next/image";
 import styles from "./signin.module.css";
 import { useEffect } from "react";
-import discordLogo from "../../../public/discord.svg";
+import discordLogo from "../../../public/discordLogo.svg";
+import telegramLogo from "../../../public/telegramLogo.svg"
 
 export default function SignIn() {
   const handleDiscordSignIn = () => {
@@ -48,14 +49,24 @@ export default function SignIn() {
 
       <div className={styles.buttonContainer}>
         <button onClick={handleDiscordSignIn} className={styles.discordButton}>
-          <Image src={discordLogo} alt="Discord" width={100} height={100} />
+          <Image src={discordLogo} alt="Discord" width={24} height={24} />
           Connect to Discord
         </button>
 
         <div
-          id="telegram-login-container"
-          className={styles.telegramContainer}
-        />
+        id="telegram-login-container"
+        className={styles.discordButton}
+        style={{
+          backgroundColor: '#54a9eb',
+          color: 'white',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '14px 48px',
+          borderRadius: '1000px',
+        }}
+      >
+      </div>
       </div>
     </div>
   );