Merge branch 'release/0.3.2'

Author: thelicato

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "droidground",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "author": "Angelo Delicato",
   "scripts": {

package.json

@@ -92,13 +92,11 @@ const AppRoute = () => {
 
   return (
     <WebSocketProvider>
-      <div className="min-h-screen flex flex-col">
-        <Header />
-        <div className="container m-auto h-full py-4 flex items-start gap-8">
-          <VideoRenderer />
-          <Outlet />
-        </div>
-      </div>
+      <Header />
+      <main className="container m-auto h-full p-4 flex flex-col lg:flex-row items-start gap-8">
+        <VideoRenderer />
+        <Outlet />
+      </main>
     </WebSocketProvider>
   );
 };
@@ -114,23 +112,23 @@ const DefaultRoute = () => {
 
 const ErrorComponent = () => {
   return (
-    <div className="min-h-screen flex flex-col">
+    <>
       <Header />
-      <div className="container m-auto h-full py-4 flex items-start gap-8">
+      <main className="container m-auto h-full py-4 flex items-start gap-8">
         <Error />
-      </div>
-    </div>
+      </main>
+    </>
   );
 };
 
 const NotFoundRoute = () => {
   return (
-    <div className="min-h-screen flex flex-col">
+    <>
       <Header />
-      <div className="container m-auto h-full py-4 flex items-start gap-8">
+      <main className="container m-auto h-full py-4 flex items-start gap-8">
         <Outlet />
-      </div>
-    </div>
+      </main>
+    </>
   );
 };
 

src/client/App.tsx

@@ -19,6 +19,10 @@
   canvas {
     @apply w-full h-auto;
   }
+
+  #app {
+    @apply min-h-screen flex flex-col;
+  }
 }
 
 @layer utilities {

src/client/index.css

@@ -13,6 +13,7 @@ import { BsGithub } from "react-icons/bs";
 import { HiQueueList } from "react-icons/hi2";
 import { CiStopwatch } from "react-icons/ci";
 import { PiEmptyDuotone } from "react-icons/pi";
+import { LuMenu } from "react-icons/lu";
 
 interface INavItem {
   label: string;
@@ -124,10 +125,44 @@ const Navbar: React.FC = () => {
         onConfirm={reset}
       />
 
-      {/*************
-       *   Navbar   *
-       ***************/}
-      <nav className="flex px-2 py-1 h-12">
+      {/********************
+       *   Mobile Navbar   *
+       **********************/}
+      <div className="flex items-center gap-2 lg:hidden">
+        <a
+          href="https://github.com/SECFORCE/droidground"
+          target="_blank"
+          rel="noreferrer"
+          className="btn btn-ghost btn-sm px-2"
+        >
+          <BsGithub size={22} className="text-white" />
+        </a>
+
+        <div className="dropdown dropdown-end">
+          <label tabIndex={0} className="btn btn-ghost btn-sm px-2" aria-label="Open menu">
+            <LuMenu size={24} />
+          </label>
+          <ul
+            tabIndex={0}
+            className="menu dropdown-content mt-3 w-52 rounded-box bg-base-200 p-2 shadow border border-base-300"
+          >
+            {navItems
+              .filter(i => i.routeEnabled)
+              .map(item => (
+                <li key={item.to}>
+                  <button className="justify-between" onClick={() => navigate(item)}>
+                    {item.label}
+                  </button>
+                </li>
+              ))}
+          </ul>
+        </div>
+      </div>
+
+      {/*********************
+       *   Desktop Navbar   *
+       **********************/}
+      <nav className="hidden lg:flex px-2 py-1 h-12 items-center">
         <ul className="relative flex space-x-8 text-sm font-medium">
           {navItems
             .filter(i => i.routeEnabled)
@@ -155,7 +190,7 @@ const Navbar: React.FC = () => {
                   {location.pathname === item.to && (
                     <motion.div
                       layoutId="underline"
-                      className="absolute bottom-[-20px] left-0 right-0 h-0.5 bg-info rounded z-20"
+                      className="absolute -bottom-4.5 left-0 right-0 h-0.5 bg-info rounded z-20"
                       transition={{ type: "spring", stiffness: 500, damping: 30 }}
                     />
                   )}
@@ -169,7 +204,7 @@ const Navbar: React.FC = () => {
           </button>
         )}
         <div className="flex h-full items-center justify-center">
-          <div className="flex h-[1.5rem]">
+          <div className="flex h-6">
             <div className="divider divider-horizontal" />
           </div>
           <div className="flex gap-4">
@@ -226,13 +261,15 @@ const Navbar: React.FC = () => {
 
 export const Header: React.FC = () => {
   return (
-    <header className="w-full bg-neutral h-18 select-none">
-      <div className="container m-auto h-full flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <img src={Logo} className="h-10" />
-          <h1 className="font-orbitron text-2xl select-none">DroidGround</h1>
+    <header className="w-full bg-neutral select-none">
+      <div className="container mx-auto h-18 px-4 sm:px-6 lg:px-8">
+        <div className="h-full flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2 min-w-0">
+            <img src={Logo} className="h-10" />
+            <h1 className="font-orbitron text-xl sm:text-2xl truncate">DroidGround</h1>
+          </div>
+          <Navbar />
         </div>
-        <Navbar />
       </div>
     </header>
   );

src/client/layout/Header.tsx

@@ -183,7 +183,7 @@ export const VideoRenderer: React.FC = () => {
 
   return (
     <div
-      className={`w-1/4 min-w-1/4 rounded-2xl border-10 border-black shadow-2xl flex items-center justify-center relative overflow-hidden ${streamingPhase !== StreamingPhase.RENDER ? "aspect-[9/16] bg-gray-950" : "bg-transparent "}`}
+      className={`m-auto w-3/4 min-w-3/4 sm:w-1/2 sm:min-w-1/2 lg:w-1/4 lg:min-w-1/4 rounded-2xl border-10 border-black shadow-2xl flex items-center justify-center relative overflow-hidden ${streamingPhase !== StreamingPhase.RENDER ? "aspect-9/16 bg-gray-950" : "bg-transparent "}`}
     >
       {/* Speaker + Camera Dot */}
       <div className="absolute top-2 w-full flex justify-center items-center z-10">

src/client/layout/Renderer.tsx

@@ -125,7 +125,7 @@ export const AppManager: React.FC = () => {
               </div>
             </div>
             <p className="mb-2">
-              If you are worried that other teams may start your exploit app (via another app thorugh an explicit
+              If you are worried that other teams may start your exploit app (via another app through an explicit
               intent) you may add the <code className="inline">android.permission.DUMP</code> permission to the launcher
               activity so that other apps won't be able to start it.
             </p>
@@ -147,7 +147,7 @@ export const AppManager: React.FC = () => {
                     return (
                       <tr className="hover:bg-base-200" key={key}>
                         <th>
-                          <img src={p.icon} className="w-[3rem] h-[3rem]" />
+                          <img src={p.icon} className="w-12 h-12" />
                         </th>
                         <td>{p.label}</td>
                         <td className="flex flex-col">

src/client/views/AppManager.tsx

@@ -6,13 +6,13 @@ export const Error: React.FC = () => {
       <div className="hero-content text-center">
         <div className="max-w-md">
           <div className="flex items-center text-emerald-600">
-            <h1 className="text-[12rem] leading-none select-none mr-[-2rem] tstroke">Err</h1>
+            <h1 className="text-[12rem] leading-none select-none -mr-8 tstroke">Err</h1>
             <BsAndroid2
               size={140}
               className="text-shadow-black text-shadow-lg z-20 stroke-black stroke-[0.5]"
               stroke="#000"
             />
-            <h1 className="text-[12rem] leading-none select-none ml-[-2rem] tstroke">r</h1>
+            <h1 className="text-[12rem] leading-none select-none -ml-8 tstroke">r</h1>
           </div>
           <h1 className="mb-5 font-bold opacity-20 text-2xl">
             A fatal exception has occurred in the main thread. Try to reboot the device

src/client/views/Error.tsx

@@ -6,13 +6,13 @@ export const NotFound: React.FC = () => {
       <div className="hero-content text-center">
         <div className="max-w-md">
           <div className="flex items-center text-emerald-600">
-            <h1 className="text-[16rem] leading-none select-none mr-[-2rem] tstroke">4</h1>
+            <h1 className="text-[16rem] leading-none select-none -mr-8 tstroke">4</h1>
             <BsAndroid2
               size={180}
               className="text-shadow-black text-shadow-lg z-20 stroke-black stroke-[0.5]"
               stroke="#000"
             />
-            <h1 className="text-[16rem] leading-none select-none ml-[-2rem] tstroke">4</h1>
+            <h1 className="text-[16rem] leading-none select-none -ml-8 tstroke">4</h1>
           </div>
           <h1 className="mb-5 font-bold opacity-20 text-5xl">Not Found</h1>
           <a className="btn btn-info " href="/">

src/client/views/NotFound.tsx

@@ -305,7 +305,7 @@ export const Overview: React.FC = () => {
         <div className="collapse collapse-arrow bg-base-300 border border-base-300">
           <input type="checkbox" name="readme-accordion" className="peer" />
           <div className="collapse-title text-lg font-semibold peer-hover:bg-gray-600 peer-checked:mb-4">README</div>
-          <div className="collapse-content text-sm leading-[1.5]">
+          <div className="collapse-content text-sm leading-normal">
             <h3 className="text-base font-semibold my-2">What is DroidGround?</h3>
             <p>
               In traditional Capture the Flag (CTF) challenges, it's common to hide flags in files on a system,