From 20111491f31694ccc6fd1860c5637a9c3fd8646d Mon Sep 17 00:00:00 2001
From: JeevaRamanathan <jeevaramanathan.m@infosys.com>
Date: Mon, 7 Oct 2024 20:09:19 +0530
Subject: [PATCH] fix: welcome text, button visibility in light/dark mode

---
 src/components/GoogleSignIn.js      | 24 +++++++++++---
 src/components/css/GoogleSignIn.css | 40 -----------------------
 src/pages/EditorComponent.js        | 50 ++++++++++++++++++-----------
 3 files changed, 50 insertions(+), 64 deletions(-)
 delete mode 100644 src/components/css/GoogleSignIn.css

diff --git a/src/components/GoogleSignIn.js b/src/components/GoogleSignIn.js
index 7dedd34..1871b7f 100644
--- a/src/components/GoogleSignIn.js
+++ b/src/components/GoogleSignIn.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import "../components/css/GoogleSignIn.css";
+import { Button } from "@mui/material";
 import { useAuth } from "../context/AuthContext.js";
 
 const GoogleSignIn = () => {
@@ -22,16 +22,30 @@ const GoogleSignIn = () => {
   };
 
   return loading ? null : (
-    <button onClick={handleSignIn} className="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="google-logo"
+        style={{ height: "25px", width: "25px", paddingRight: "6px" }}
         src="https://www.svgrepo.com/show/475656/google-color.svg"
         loading="lazy"
         alt="google logo"
       />
-      <span>Login with Google</span>
-    </button>
-
+      <span> Login with Google</span>
+    </Button>
   );
 };
 
diff --git a/src/components/css/GoogleSignIn.css b/src/components/css/GoogleSignIn.css
deleted file mode 100644
index 7533912..0000000
--- a/src/components/css/GoogleSignIn.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.sign-in-button {
-    padding: 8px 16px; 
-    border: 1px solid #E2E8F0; 
-    display: flex;
-    align-items: center;
-    gap: 8px; 
-    border-radius: 8px; 
-    color: #334155;
-    background-color: #000;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out; 
-  }
-  
-  .sign-in-button:hover {
-    border-color: #CBD5E1; 
-    color: #1E293B; 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
-  }
-  
-  .google-logo {
-    width: 24px;
-    height: 24px;
-  }
-  
-  .sign-in-button span {
-    color: inherit; 
-  }
-  
-  /* Dark mode styles */
-  @media (prefers-color-scheme: dark) {
-    .sign-in-button {
-      color: #fff; 
-    }
-  
-    .sign-in-button:hover {
-        background-color: #fff;
-      color: #000; 
-    }
-  }
-  
\ No newline at end of file
diff --git a/src/pages/EditorComponent.js b/src/pages/EditorComponent.js
index 15e6d1c..f9efea8 100644
--- a/src/pages/EditorComponent.js
+++ b/src/pages/EditorComponent.js
@@ -53,6 +53,11 @@ const OutputLayout = styled("div")(({ theme }) => ({
   borderRadius: "1rem",
 }));
 
+const WelcomeText = styled("span")(({ theme }) => ({
+  color: theme.palette.text.primary,
+  fontWeight: "bold",
+}));
+
 function EditorComponent() {
   const [code, setCode] = useState(null);
   const [output, setOutput] = useState([]);
@@ -200,18 +205,16 @@ function EditorComponent() {
   function handleLanguageChange(_, value) {
     setCurrentLanguage(value.DEFAULT_LANGUAGE);
     setOutput("");
-    setCode(
-      code ? code : value.HELLO_WORLD
-    );
+    setCode(code ? code : value.HELLO_WORLD);
   }
 
   const handleSignOut = async () => {
-		try {
-			await logOut();
-		} catch (error) {
-			console.log(error);
-		}
-	};
+    try {
+      await logOut();
+    } catch (error) {
+      console.log(error);
+    }
+  };
 
   const renderAuthenticatedContent = () => (
     <>
@@ -278,13 +281,15 @@ function EditorComponent() {
   );
 
   const renderUnauthenticatedContent = () => (
-    <div style={{
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      height: "50vh",
-      flexDirection: "column"
-    }}>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "50vh",
+        flexDirection: "column",
+      }}
+    >
       <h2>Please sign in to use the Code Editor</h2>
       <GoogleSignIn />
     </div>
@@ -330,11 +335,16 @@ function EditorComponent() {
             <div className="flex items-center space-x-2">
               {currentUser ? (
                 <>
-                  <span className="welcome-text">Welcome, {currentUser.displayName}</span>
+                  <WelcomeText>Welcome, {currentUser.displayName}</WelcomeText>
                   <Avatar
                     src={currentUser.photoURL}
                     alt={currentUser.displayName}
-                    sx={{ width: 32, height: 32, marginLeft: "0.5rem", marginRight: "0.5rem" }}
+                    sx={{
+                      width: 32,
+                      height: 32,
+                      marginLeft: "0.5rem",
+                      marginRight: "0.5rem",
+                    }}
                   />
                   <div className="signout-container">
                     <button onClick={handleSignOut} className="signout-button">
@@ -351,7 +361,9 @@ function EditorComponent() {
           </div>
         </div>
       </Box>
-      {currentUser ? renderAuthenticatedContent() : renderUnauthenticatedContent()}
+      {currentUser
+        ? renderAuthenticatedContent()
+        : renderUnauthenticatedContent()}
     </div>
   );
 }