Merge pull request #33 from oslabs-beta/yihe/modals-display

Yihe/modify Navbar

Author: vyue013

src/components/DBDisplay/FeatureTab.tsx

@@ -1,5 +1,5 @@
 // React & React Router & React Query Modules
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef } from 'react';
 import axios, { AxiosResponse } from 'axios';
 import { NavLink, useNavigate } from 'react-router-dom';
 import { useNavStore } from '../../store/navStore';
@@ -15,7 +15,6 @@ import useSettingsStore from '../../store/settingsStore';
 import useCredentialsStore from '../../store/credentialsStore';
 //import icon
 import {
-  HomeIcon,
   ConnectDatabaseIcon,
   UploadSQLFileIcon,
   ExportQueryIcon,
@@ -53,9 +52,9 @@ export default function FeatureTab(props: any) {
   const { schemaStore, setSchemaStore, undoHandler, redoHandler } = useSchemaStore(
     (state) => state
   );
-  const { user, setUser } = useCredentialsStore((state: any) => state);
+  const { user } = useCredentialsStore((state: any) => state);
 
-  const { setWelcome, isSchema, setDarkMode, darkMode, setDBName } = useSettingsStore(
+  const { setWelcome, isSchema, setDBName } = useSettingsStore(
     (state) => state
   );
   const [action, setAction] = useState(new Array());
@@ -301,27 +300,13 @@ export default function FeatureTab(props: any) {
     }
   };
 
-  // Clears session + reset store
-  const signoutSession = async () => {
-    await fetch(`/api/logout`);
-    window.open('/', '_self');
-    setSchemaStore({});
-    setUser(null);
-  };
-
-  //Toggle function for DarkMode
-  const toggleClass = (): void => {
-    const page = document.getElementById('body');
-    page!.classList.toggle('dark');
-    setDarkMode();
-  };
   // END: HELPER FUNCTIONS
 
   return (
     <>
       {/* PAGE */}
       {/* MODAL FOR CONFIRMATION POPUP */}
-      {/* dbSpy 8.0: move confirmModal out from FeatureTab */}
+      {/* dbSpy 8.0: move confirmModal to show on whole page */}
       <div
         ref={confirmModal}
         id="confirmModal"
@@ -352,7 +337,7 @@ export default function FeatureTab(props: any) {
       </div>
       {/* dbSpy 8.0: added toggle button in Navbar to control FeatureTab */}
       <div
-        className={`bg-blue fixed left-0 top-12 z-10 h-full w-64 transition-transform duration-300 ${
+        className={`bg-blue fixed left-0 top-8 z-10 h-full w-64 transition-transform duration-300 ${
           toggleClicked ? '-translate-x-full' : 'translate-x-0'
         }`}
       >
@@ -362,28 +347,6 @@ export default function FeatureTab(props: any) {
           aria-label="FeatureTab"
         >
           <div className="menuBar light:bg-sky-800 overflow-auto rounded px-5 py-6 transition-colors duration-500">
-            <button onClick={toggleClass}>
-              <div className="ItemLink group inline-flex h-10 w-[160px] items-center justify-start gap-0 rounded-lg py-2 pl-0 pr-0">
-                <svg
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth="1.0"
-                  stroke="currentColor"
-                  className=" ml-2 mr-2 h-[24] stroke-current text-gray-500 group-hover:text-yellow-500 dark:text-[#f8f4eb] dark:group-hover:text-yellow-300"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M1.50488 10.7569C1.50488 16.4855 6.14803 21.1294 11.8756 21.1294C16.2396 21.1294 19.974 18.4335 21.5049 14.616C20.3104 15.0962 19.0033 15.3668 17.6372 15.3668C11.9095 15.3668 7.26642 10.7229 7.26642 4.99427C7.26642 3.63427 7.53299 2.3195 8.00876 1.12939C4.19637 2.66259 1.50488 6.39536 1.50488 10.7569Z"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-                <span className="DarkMode text-sm font-normal leading-normal text-gray-900 group-hover:text-yellow-500 group-hover:underline dark:text-[#f8f4eb] dark:group-hover:text-yellow-300 ">
-                  {darkMode === true ? 'Light' : 'Dark'} Mode
-                </span>
-              </div>
-            </button>
             {/* ConnectDB code */}
             <p className=" mt-4 text-slate-900 dark:text-[#f8f4eb]">Connect</p>
             <hr />
@@ -570,17 +533,6 @@ export default function FeatureTab(props: any) {
                     <span className="ml-3 flex-1 whitespace-nowrap">Delete Database</span>
                   </a>
                 </li>
-                {user ? (
-                  <li>
-                    <a
-                      onClick={() => signoutSession()}
-                      className="group flex cursor-pointer items-center rounded-lg p-2 text-sm font-normal text-gray-900 hover:text-yellow-500 hover:underline dark:text-[#f8f4eb] dark:hover:text-yellow-300"
-                    >
-                      <SignOutIcon />
-                      <span className="ml-3 flex-1 whitespace-nowrap">Sign Out</span>
-                    </a>
-                  </li>
-                ) : null}
               </ul>
             </div>
           </div>

src/components/Navbar.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { NavLink } from 'react-router-dom';
+import useSchemaStore from '../store/schemaStore';
 import useCredentialsStore from '../store/credentialsStore';
+import useSettingsStore from '../store/settingsStore';
 import logo from '../assets/newLogoWhite.png';
 import login from '../assets/right-to-bracket-solid.svg';
 import default_pfp from '../assets/default_pfp.svg';
@@ -25,16 +27,20 @@ import logo10 from '../assets/newLogoWhite_color10.png';
 import logo11 from '../assets/newLogoWhite_color11.png';
 import logo12 from '../assets/newLogoWhite_color12.png';
 
+import { SignOutIcon } from '../FeatureTabIcon';
+
 const linkbtn = 'inline-block text-white hover:text-white mr-4';
 
 function Navbar() {
   // dbSpy 8.0: removed theme state and add state for the animated logo
   const [currentLogo, setCurrentLogo] = useState<string>(logo);
   const toggleClicked = useNavStore((state) => state.toggleClicked);
   const toggleNav = useNavStore((state): any => state.toggleNav);
-  // toggleNav();
+  // dbSpy 8.0: move toggle button to control dark mode in Navbar
+  const { setDarkMode, darkMode } = useSettingsStore((state) => state);
+  const { schemaStore, setSchemaStore } = useSchemaStore((state: any) => state);
   //STATE DECLARATION (dbSpy3.0)
-  const { user } = useCredentialsStore((state): any => state);
+  const { user, setUser } = useCredentialsStore((state): any => state);
   //END: STATE DECLARATION
 
   // dbSpy 8.0: made logo animation sparkling in the navbar
@@ -67,10 +73,25 @@ function Navbar() {
     return () => clearInterval(interval); // Cleanup on unmount
   }, []);
 
+  //Toggle function for DarkMode
+  const toggleClass = (): void => {
+    const page = document.getElementById('body');
+    page!.classList.toggle('dark');
+    setDarkMode();
+  };
+
+  // Clears session + reset store
+  const signoutSession = async () => {
+    await fetch(`/api/logout`);
+    window.open('/', '_self');
+    setSchemaStore({});
+    setUser(null);
+  };
+
   return (
     <>
-      <nav className="fixed top-0 z-50 flex w-full flex-wrap items-center justify-between bg-opacity-80 bg-gradient-to-b from-sky-700 to-transparent p-3 backdrop-blur-md">
-        <div className="navItems flex min-w-0 items-center gap-3">
+      <nav className="fixed left-1 right-1 top-2 z-50 flex w-[calc(100%-2rem)] items-center overflow-x-auto justify-between rounded-2xl bg-opacity-80 bg-gradient-to-b from-blue-400 to-transparent p-3 backdrop-blur-md">
+        <div className="navItems flex flex-1 items-center text-[clamp(12px,1.2vw,16px)] min-w-0 items-center gap-2">
           {/* dbSpy 8.0: added toggle button to control FeatureTab */}
           <img
             className="w-[25px] shrink-0 filter transition-transform duration-200 hover:translate-y-[-2px] hover:cursor-pointer"
@@ -80,38 +101,63 @@ function Navbar() {
           />
 
           {/* Sparkling logo */}
-          <img className="mr-3 h-[45px] w-auto shrink-0" src={currentLogo} alt="Logo" />
+          <img className="h-[3.5vw] min-h-[30px] max-h-[45px] w-auto shrink-0" src={currentLogo} alt="Logo" />
 
-          <div className="flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap">
+          <div className="flex min-w-0 items-center overflow-hidden whitespace-nowrap">
             <NavLink to="/" className={`${linkbtn} flex items-center`}>
               Home
             </NavLink>
-            <NavLink to="/display" data-testid="navbar-display" className={`${linkbtn} flex items-center`}>
+            <NavLink
+              to="/display"
+              data-testid="navbar-display"
+              className={`${linkbtn} flex items-center`}
+            >
               Display
             </NavLink>
+            <button onClick={toggleClass}>
+              <div className="ItemLink group inline-flex h-10 w-[160px] items-center justify-start gap-0 rounded-lg py-2 pl-0 pr-0">
+                <svg
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.0"
+                  stroke="currentColor"
+                  className=" mr-1 h-[18] stroke-current text-gray-500 group-hover:text-yellow-500 dark:text-[#f8f4eb] dark:group-hover:text-yellow-300"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1.50488 10.7569C1.50488 16.4855 6.14803 21.1294 11.8756 21.1294C16.2396 21.1294 19.974 18.4335 21.5049 14.616C20.3104 15.0962 19.0033 15.3668 17.6372 15.3668C11.9095 15.3668 7.26642 10.7229 7.26642 4.99427C7.26642 3.63427 7.53299 2.3195 8.00876 1.12939C4.19637 2.66259 1.50488 6.39536 1.50488 10.7569Z"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+                <span className="DarkMode font-normal leading-normal text-gray-900 group-hover:text-yellow-500 dark:text-[#f8f4eb] dark:group-hover:text-yellow-300 ">
+                  {darkMode === true ? 'Light' : 'Dark'}
+                </span>
+              </div>
+            </button>
           </div>
         </div>
-        <div className="flex items-center justify-end gap-2">
+        <div className="flex items-center justify-end items-center text-[clamp(12px,1.2vw,16px)] gap-1 shrink-0 whitespace-nowrap">
           {user ? (
             <>
               {/* inline-block: behave like an inline element but allows width and height modifications */}
               {/* pt: padding to top, dark:text-white: change text color to white in dark mode */}
               {/* lg: large screens, mt-0: margin-top: 0, on lg mode */}
-              <span className="text-blue-200">
-                {user.full_name}
-              </span>
+              <span className="dark:text-[#f8f4eb]">{user.full_name}</span>
               {/* ml: margin left, mr: margin right, rounded-full: make the image circular, dark:invert: invert color in dark mode */}
-              <img
-                className="h-[25px] w-[25px] rounded-full invert"
-                src={default_pfp}
-              />
+              <img className="h-[clamp(18px,2.2vw,25px)] w-[clamp(18px,2.2vw,25px)] rounded-full invert" src={default_pfp} />
+              <a
+                onClick={() => signoutSession()}
+                className="group flex cursor-pointer items-center rounded-lg font-normal text-gray-900 hover:text-yellow-500 dark:text-[#f8f4eb] dark:hover:text-yellow-300"
+              >
+                <SignOutIcon />
+                <span className="flex-1 whitespace-nowrap">Sign Out</span>
+              </a>
             </>
           ) : (
             <>
-              <NavLink
-                to="/login"
-                className="text-white text-base font-bold"
-              >
+              <NavLink to="/login" className="text-base font-bold text-white">
                 Login
               </NavLink>
               <img className="h-[20px] w-[20px] invert" src={login} />