fix: welcome text, button visibility in light/dark mode

DhanushNehru · Oct 7, 2024 · 2011149 · 2011149
1 parent 7f23426
commit 2011149
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 64 deletions.
diff --git 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
diff --git 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>
   );
 }