PR2: Show modal button (Originally PR #1854)

src/Components/Navbar/UserNavbar.js

@@ -3,7 +3,7 @@ import { membershipState } from '../../Enums';
 import { useSCE } from '../context/SceContext';
 
 export default function UserNavbar(props) {
-  const { user, authenticated } = useSCE();
+  const { user, authenticated, setModalOpen } = useSCE();
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
   let initials = '';
@@ -84,12 +84,19 @@ export default function UserNavbar(props) {
       </div>
 
       <div className="hidden navbar-center sm:flex">
-        <ul className="menu menu-horizontal">
+        <ul className="menu menu-horizontal items-center">
           {getRoutesForNavbar()}
         </ul>
       </div>
 
       <div className="navbar-end">
+        <button
+          onClick={() => setModalOpen(true)}
+          className="btn btn-ghost btn-circle"
+          aria-label="Open search"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
+        </button>
         {authenticated && user ? (
           <>
             <div className="dropdown dropdown-end sm:hidden">

src/Components/ShortcutKeyModal/SearchModal.css

@@ -8,16 +8,17 @@
     /* blurred background */
     display: flex;
     justify-content: center;
-    align-items: flex-start;
-    padding-top: 33vh;
+    align-items: center;
     z-index: 9999;
 }
 
 .shortcut-search-modal .input-wrapper {
     padding: 8px;
     background: white;
     border-radius: 8px;
-    width: 35rem;
+    width: 100%;
+    /* the default is the mobile size */ 
+    max-width: 500px;
 }
 
 .shortcut-search-modal input {
@@ -67,3 +68,11 @@
         background-color: #1e293b;
     }
 }
+
+/* Desktop mode */
+@media (min-width: 768px) {
+    .shortcut-search-modal .input-wrapper {
+        width: 35rem;
+        max-width: none;
+    }
+}

src/Components/ShortcutKeyModal/SearchModal.js

@@ -6,7 +6,10 @@ import { useSCE } from '../context/SceContext';
 import { searchUsersAndCleezyUrls } from '../../APIFunctions/ShortcutSearch';
 
 export default function SearchModal() {
-  const [open, setOpen] = useState(false);
+  const {modalOpen, setModalOpen} = useSCE();
+  // kept original open and setOpen state variables
+  const open = modalOpen;
+  const setOpen = setModalOpen;
   const inputRef = useRef(null);
   const modalRef = useRef(null);
   const filteredSignedOutRoutes = [...signedOutRoutes].filter(r => !r.hideFromShortcutSuggestions);
@@ -77,26 +80,31 @@ export default function SearchModal() {
 
     const topFiveItems = suggestions.slice(0, SHORTCUT_MAX_RESULT);
     return (
-      <ul className='suggestion-list'>
+      <ul className='suggestion-list bg-slate-800 text-[1.2rem] overflow-x-hidden mt-2'>
         {topFiveItems.map((r, index) => (
           <li
             key={r.path} // Use r.path as key
-            className={`suggestion-item ${index === selectItem ? 'active' : ''}`}
+            className={`h-16 flex items-center p-2 truncate cursor-pointer ${index === selectItem ? ' bg-slate-500 text-white rounded p-1' : ''}`}
             onMouseMove={() => setSelectItem(index)}
             onClick={() => {
               if (externalSiteRoute(r)) return;
               window.location.href = r.path;
               setOpen(false);
             }}
           >
-            <span style={{ marginRight: '0.5rem' }}>
-              {r.type === 'user' ? '👤' : '📄'}
-            </span>
-            <div className='text-wrapper'>
-              {r.pageName}
-              <div className='hidden-tab'>
-                {selectItem === index && (r.type === 'external_url' ? r.path : `${window.location.origin}${r.path}`)}
+            <div className='flex flex-col overflow-hidden'>
+              <div className='flex items-center truncate'>
+                <span className='mr-3'>
+                  {r.type === 'user' ? '👤' : '📄'}
+                </span>
+                <span className='font-bold truncate text-white'>
+                  {r.pageName}
+                </span>
               </div>
+
+              <span className="text-sm truncate text-gray-300">
+                {r.type === 'external_url' ? r.path : window.location.origin + r.path}
+              </span>
             </div>
           </li>
         ))}
@@ -274,14 +282,16 @@ export default function SearchModal() {
   if (!open) return null;
 
   return (
-    <div className='shortcut-search-modal'>
+    <div className='fixed inset-0 bg-black/40 backdrop-blur-sm flex justify-center items-center z-[9999]'>
       <div ref={modalRef}>
-        <div className='input-wrapper'>
+        <div className='p-2 bg-slate-800 rounded-lg w-full max-w-[500px] md:w-[35rem] md:max-w-none'>
           <input
             ref={inputRef}
             placeholder="Search here... (Ctrl + k)"
             value={keyword}
-            onChange={handleChanges} />
+            onChange={handleChanges}
+            className='border-[1.5px] text-white border-gray-600 w-full rounded p-3 h-10 text-[1.2rem] bg-transparent focus:outline-sky-600'
+          />
           <SuggestionsList />
         </div>
         <div>

src/index.js

@@ -12,6 +12,7 @@ function App() {
   const [authenticated, setAuthenticated] = useState(false);
   const [isAuthenticating, setIsAuthenticating] = useState(true);
   const [user, setUser] = useState({});
+  const [modalOpen, setModalOpen] = useState(false);
 
   async function getAuthStatus() {
     setIsAuthenticating(true);
@@ -30,10 +31,10 @@ function App() {
 
   return (
     !isAuthenticating && (
-      <SceContext.Provider value={{user, setUser, authenticated, setAuthenticated}}>
+      <SceContext.Provider value={{user, setUser, authenticated, setAuthenticated, modalOpen, setModalOpen}}>
         <BrowserRouter>
-          <SearchModal/>
-          <Routing/>
+          <SearchModal />
+          <Routing />
         </BrowserRouter>
       </SceContext.Provider>
     )