Merge pull request #13 from SunbirdAI/changing-ui

Changing UI
SunbirdAI · Nov 15, 2024 · 3f2877d · 3f2877d
2 parents dfc8159 + b2ae20c
commit 3f2877d
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 134 deletions.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
@@ -1,20 +1,12 @@
 import {themes as prismThemes} from 'prism-react-renderer';
 import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
-import 'dotenv/config';
 
 const config: Config = {
   title: 'Sunbird AI',
   tagline: 'Artificial intelligence with social impact',
   favicon: 'img/favicon.ico',
-customFields: {
-  FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
-  FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN,
-  FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
-  FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET,
-  FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID, // if you have this
-  FIREBASE_APP_ID: process.env.FIREBASE_APP_ID,
-},
+
   // Set the production url of your site here
   url: 'https://sunbird-docs.github.io',
   // Set the /<baseUrl>/ pathname under which your site is served
@@ -63,17 +55,18 @@ customFields: {
       } satisfies Preset.Options,
     ],
   ],
-  // plugins: [[
-  //   "docusaurus2-dotenv",
-  //     {
-  //       path: "./.env",
-  //     systemvars: true
-  //   }
-  // ]],
+  plugins: [[
+    "docusaurus-plugin-dotenv",
+      {
+        path: "./.env",
+      systemvars: true
+    }
+  ]],
 
   themeConfig: {
     // Replace with your project's social card
     image: 'img/sunbird-card.png',
+
     navbar: {
       title: 'Sunbird AI',
       logo: {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "@mdx-js/react": "^3.1.0",
     "clsx": "^2.1.1",
     "docusaurus": "^1.14.7",
+    "docusaurus-plugin-dotenv": "^1.0.1",
     "dotenv": "^16.4.5",
     "firebase": "^11.0.1",
     "lucide-react": "^0.456.0",

diff --git a/sb-docs/docs/06-design-docs/language/images/API Framework arch.drawio.png b/sb-docs/docs/06-design-docs/language/images/API Framework arch.drawio.png
diff --git a/src/components/logout.tsx b/src/components/logout.tsx
@@ -1,19 +1,19 @@
 import React from "react";
 import { Power } from "lucide-react";
-//import { logout } from "../theme/firebase";
+import { signOut } from "firebase/auth";
+import { logout } from "../theme/firebase";
 
 const LogoutButton = () => {
-  // Accept logout as a prop
-  // const handleLogout = () => {
-  //   logout(() => window.location.reload()); // Call the logout function passed as prop
-  // };
+  const handleLogout = () => {
+    logout(() => window.location.reload()); // Call the logout function passed as prop
+  };
 
   return (
     <button
       title="Sign out of your account"
       className="logout__btn"
       style={{ cursor: "pointer" }}
-      // onClick={handleLogout} // Trigger the logout function when clicked
+      onClick={handleLogout} // Trigger the logout function when clicked
     >
       <Power size={18} />
     </button>

diff --git a/src/css/login.css b/src/css/login.css
@@ -1,11 +1,11 @@
 /* Style for the Login overlay */
 .login {
-  position: absolute;
+  position: relative;
   height: 100vh;
-  width: 100vw;
+  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 1rem;
   justify-content: center;
   align-items: center;
   z-index: 1000; /* To make sure it's above other content */
@@ -16,46 +16,53 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 10px;
-  padding: 10px;
-  margin-bottom: 10px;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  margin-bottom: 0.5rem;
   font-size:var(--ifm-font-size-base);
   /* background-color: var(--ifm-background-color); 
   border: none; */
+  width: 100%;
+  max-width: 18.75rem;
 
   color: var(--ifm-font-color-base);
-  border-radius: 5px; /* Optional: rounded corners */
+  border-radius: 0.5rem; /* Optional: rounded corners */
   cursor: pointer;
 }
 
+.logo {
+  width: 2.5rem;
+  height: 2.5rem;
+} 
+/* Style for the Google button */
 .login__btn {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 0.5rem 1rem;
+  gap: 0.5rem;
   border: 1px solid transparent;
   background-color: var(--ifm-background-surface-color); 
-  border-radius: 5px; 
-  gap: 8px;
-  padding: 8px;
+  font-size:var(--ifm-font-size-base);
   color: var(--ifm-font-color-base);
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional: subtle shadow */
-
+  font-weight: bold;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  box-shadow: 0px 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
 }
 
 .login__btn:hover {
   opacity: 70%;
 }
 
-.login div {
-  margin-top: 7px;
-}
-
 
 .logout__btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: 0.5rem;
   background-color: transparent;
   border: none;
   font-size:var(--ifm-font-size-base);
@@ -79,6 +86,7 @@
   background-color: var(--ifm-background-color); /* Semi-transparent black background */
   color: var(--ifm-font-color-base);
 }
+
 .animate-spin{
   animation: spin 1s linear infinite;
 }
@@ -89,4 +97,16 @@
   } 
   to { 
     transform: rotate(360deg); } 
-  } 
+  } 
+
+ /* @media (max_width:400px) {
+.logo {
+  width: 60px;
+  height: 60px;
+}
+
+.login__container {
+  max-width: none;
+}
+
+ } */
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
@@ -10,7 +10,7 @@ export default function ContentWrapper(props: Props): JSX.Element {
   return (
     <>
       <Content {...props} />
-      <LogoutButton />
+      <LogoutButton  />
     </>
   );
 }
diff --git a/src/theme/Root.tsx b/src/theme/Root.tsx
@@ -1,64 +1,13 @@
 import React, { useState, useEffect } from "react";
-import {
-  getAuth,
-  // signOut,
-  signInWithPopup,
-  GoogleAuthProvider,
-} from "firebase/auth";
-import { initializeApp } from "firebase/app";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import "../css/login.css";
 import Loading from "./loading";
+import { auth, signInWithGoogle } from "./firebase";
 
 // Default implementation to customize the authentication flow
 export default function Root({ children }) {
   const [userAuth, setUserAuth] = useState(false); // To store user authentication status
   const [authLoading, setAuthLoading] = useState(true); // To handle loading state
 
-  const { siteConfig } = useDocusaurusContext(); // Access Docusaurus site config
-
-  // Initialize Firebase app using siteConfig values
-  const app = initializeApp({
-    apiKey: siteConfig.customFields.FIREBASE_API_KEY,
-    authDomain: siteConfig.customFields.FIREBASE_AUTH_DOMAIN,
-    projectId: siteConfig.customFields.FIREBASE_PROJECT_ID,
-    storageBucket: siteConfig.customFields.FIREBASE_STORAGE_BUCKET,
-    messagingSenderId: siteConfig.customFields.FIREBASE_MESSAGING_SENDER_ID,
-    appId: siteConfig.customFields.FIREBASE_APP_ID,
-  });
-
-  const auth = getAuth(app);
-  const googleProvider = new GoogleAuthProvider();
-
-  // // Sign out function
-  // const logout = (afterAction = () => {}) => {
-  //   signOut(auth)
-  //     .then(() => {
-  //       afterAction();
-  //     })
-  //     .catch((error) => {
-  //       console.error("Error signing out: ", error);
-  //     });
-  // };
-
-  // Sign-in function
-  const signInWithGoogle = async () => {
-    try {
-      const res = await signInWithPopup(auth, googleProvider);
-      const user = res.user;
-      if (user) {
-        if (user.email.endsWith("@sunbird.ai")) {
-          return { authenticated: true };
-        }
-      }
-      return { authenticated: false };
-    } catch (err) {
-      console.error(err);
-      alert(err.message);
-      return { authenticated: false };
-    }
-  };
-
   // UseEffect to subscribe to authentication state changes
   useEffect(() => {
     const unsubscribe = auth.onAuthStateChanged((user) => {
@@ -104,8 +53,7 @@ export default function Root({ children }) {
           <div className="login__container">
             <img
               src="/sunbird-docs/img/logo.png"
-              width={40}
-              height={40}
+             className="logo"
               alt="Sunbird AI logo"
             />
             <button className="login__btn" onClick={handleGoogleSignIn}>