Merge pull request #157 from JeevaRamanathan/fix/login_button_visibility

fix: github login button visibility in light/dark mode

src/components/GithubSignIn.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "../components/css/GithubSignIn.css";
+import { Button } from "@mui/material";
 import { useAuth } from "../context/AuthContext.js";
 
 const GithubSignIn = () => {
@@ -23,16 +23,31 @@ const GithubSignIn = () => {
   };
 
   return loading ? null : (
-    <button onClick={handleSignIn} className="github-sign-in-button">
+    <Button
+      variant="outlined"
+      onClick={handleSignIn}
+      sx={[
+        (theme) => ({
+          marginLeft: "5px",
+          bgcolor: theme.palette.text.primary,
+          color: theme.palette.background.default,
+          border: "1px solid #E2E8F0",
+          fontSize: "0.8em",
+          cursor: "pointer",
+          boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        }),
+      ]}
+    >
       <img
         className="github-logo"
+        style={{ height: "25px", width: "25px", paddingRight: "6px" }}
         src="https://www.svgrepo.com/show/452211/github.svg"
         loading="lazy"
         alt="github logo"
       />
       <span>Login with Github</span>
-    </button>
+    </Button>
   );
 };
 
-export default GithubSignIn;
+export default GithubSignIn;