Improve UI for login modal (#235)

* removed loading skeleton from password authentication modal background

* added logo to login modals

* change BG colors for dark/light mode support

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

frontend/src/components/Modals/Password/MultiUserAuth.jsx

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import System from "../../../models/system";
 import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
+import useLogo from "../../../hooks/useLogo";
 
 export default function MultiUserAuth() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const { logo: _initLogo } = useLogo();
   const handleLogin = async (e) => {
     setError(null);
     setLoading(true);
@@ -29,9 +31,12 @@ export default function MultiUserAuth() {
     <form onSubmit={handleLogin}>
       <div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
-          <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
-            This instance is password protected.
-          </h3>
+          <div className="flex items-center flex-col">
+            <img src={_initLogo} alt="Logo" className="w-1/2" />
+            <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
+              This instance is password protected.
+            </h3>
+          </div>
         </div>
         <div className="p-6 space-y-6 flex h-full w-full">
           <div className="w-full flex flex-col gap-y-4">

frontend/src/components/Modals/Password/SingleUserAuth.jsx

@@ -1,10 +1,12 @@
 import React, { useState } from "react";
 import System from "../../../models/system";
 import { AUTH_TOKEN } from "../../../utils/constants";
+import useLogo from "../../../hooks/useLogo";
 
 export default function SingleUserAuth() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const { logo: _initLogo } = useLogo();
   const handleLogin = async (e) => {
     setError(null);
     setLoading(true);
@@ -28,9 +30,12 @@ export default function SingleUserAuth() {
     <form onSubmit={handleLogin}>
       <div className="relative bg-white rounded-lg shadow dark:bg-stone-700">
         <div className="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
-          <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
-            This workspace is password protected.
-          </h3>
+          <div className="flex items-center flex-col">
+            <img src={_initLogo} alt="Logo" className="w-1/2" />
+            <h3 className="text-md md:text-xl font-semibold text-gray-900 dark:text-white">
+              This instance is password protected.
+            </h3>
+          </div>
         </div>
         <div className="p-6 space-y-6 flex h-full w-full">
           <div className="w-full flex flex-col gap-y-4">

frontend/src/components/Modals/Password/index.jsx

@@ -6,7 +6,7 @@ import { AUTH_TOKEN, AUTH_USER } from "../../../utils/constants";
 
 export default function PasswordModal({ mode = "single" }) {
   return (
-    <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-black bg-opacity-50 flex items-center justify-center">
+    <div className="fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] h-full bg-gray-600 dark:bg-stone-800 flex items-center justify-center">
       <div className="flex fixed top-0 left-0 right-0 w-full h-full" />
       <div className="relative w-full max-w-2xl max-h-full">
         {mode === "single" ? <SingleUserAuth /> : <MultiUserAuth />}

frontend/src/pages/Main/index.jsx

@@ -1,8 +1,6 @@
 import React from "react";
 import DefaultChatContainer from "../../components/DefaultChat";
 import Sidebar from "../../components/Sidebar";
-import SidebarPlaceholder from "../../components/Sidebar/Placeholder";
-import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
 import PasswordModal, {
   usePasswordModal,
 } from "../../components/Modals/Password";
@@ -10,16 +8,9 @@ import { isMobile } from "react-device-detect";
 
 export default function Main() {
   const { requiresAuth, mode } = usePasswordModal();
-  if (requiresAuth === null || requiresAuth) {
-    return (
-      <>
-        {requiresAuth && <PasswordModal mode={mode} />}
-        <div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
-          {!isMobile && <SidebarPlaceholder />}
-          <ChatPlaceholder />
-        </div>
-      </>
-    );
+
+  if (requiresAuth !== false) {
+    return <>{requiresAuth !== null && <PasswordModal mode={mode} />}</>;
   }
 
   return (

frontend/src/pages/WorkspaceChat/index.jsx

@@ -3,8 +3,6 @@ import { default as WorkspaceChatContainer } from "../../components/WorkspaceCha
 import Sidebar from "../../components/Sidebar";
 import { useParams } from "react-router-dom";
 import Workspace from "../../models/workspace";
-import SidebarPlaceholder from "../../components/Sidebar/Placeholder";
-import ChatPlaceholder from "../../components/WorkspaceChat/LoadingChat";
 import PasswordModal, {
   usePasswordModal,
 } from "../../components/Modals/Password";
@@ -12,16 +10,9 @@ import { isMobile } from "react-device-detect";
 
 export default function WorkspaceChat() {
   const { requiresAuth, mode } = usePasswordModal();
-  if (requiresAuth === null || requiresAuth) {
-    return (
-      <>
-        {requiresAuth && <PasswordModal mode={mode} />}
-        <div className="w-screen h-screen overflow-hidden bg-orange-100 dark:bg-stone-700 flex">
-          {!isMobile && <SidebarPlaceholder />}
-          <ChatPlaceholder />
-        </div>
-      </>
-    );
+
+  if (requiresAuth !== false) {
+    return <>{requiresAuth !== null && <PasswordModal mode={mode} />}</>;
   }
 
   return <ShowWorkspaceChat />;