more mobile ui styling.

ballaswag · Mar 27, 2024 · ce00c7e · ce00c7e
1 parent a6811c7
commit ce00c7e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -25,25 +25,23 @@ function App() {
             <MenuIcon className='className="block h-6 w-6 fill-current' />
             </button>
           </div>
-          <div className="flex items-center w-1/2 text-white text-3xl font-bold pl-10">
+          <div className="flex items-center w-1/2 text-white text-3xl font-bold ml-2 md:ml-10">
             Guppy<span className="text-green-400">FLO</span>
           </div>
-          <div className="pt-4 pb-4 pr-9 w-1/2 flex items-center justify-end text-lg text-gray-300">
-            <a className="mr-6" href='https://ko-fi.com/Z8Z3RE4GK' target='_blank'>
-              <img height='36' className="h-9" src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+          <div className="pt-4 pb-4 pr-3 md:pr-9 w-1/2 flex items-center justify-end text-lg text-gray-300">
+            <a className="mr-2 md:mr-6" href='https://ko-fi.com/Z8Z3RE4GK' target='_blank'>
+              <img className="h-9" src='https://storage.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' />
             </a>
             <a className="flex items-center text-gray-300 hover:text-gray-200 border-transparent" href="https://github.com/ballaswag">
             <GitHubIcon className='w-9 h-9 fill-current' />
             </a>
           </div>
         </div>
         <div className='flex flex-row w-full'>
-          <MobileMenu show={showMenu} />
+          <MobileMenu show={showMenu} setShow={setShowMenu} />
           <SideMenu />
           <div id="content-panel" className="w-full mt-5 flex justify-center">
-{/*             <div className='w-[800px] space-y-5'>
- */}
-<div>
+          <div>
              <Routes>
               <Route path='/' element={<Printers />} />
               <Route path='/settings' element={<Settings />} />
@@ -56,13 +54,13 @@ function App() {
   )
 }
 
-function MobileMenu({show}) {
+function MobileMenu({show, setShow}) {
   return !show ? (<></>) : (
     <div className="flex-col w-52 h-full md:hidden fixed bg-gray-800 z-10">
     <div className="overflow-y-auto overflow-x-hidden flex-grow">
       <ul className="flex flex-col py-4 space-y-1">
         <li>
-          <Link to='/'
+          <Link onClick={() => setShow(false)} to='/'
             className="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-700 text-gray-300 hover:text-gray-200 border-l-4 border-transparent hover:border-green-400 pr-6">
             <span className="inline-flex justify-center items-center ml-4">
               <HomeIcon className='w-5 h-5' />
@@ -71,7 +69,7 @@ function MobileMenu({show}) {
           </Link>
         </li>
         <li>
-          <Link to="/settings"
+          <Link onClick={() => setShow(false)} to="/settings"
             className="relative flex flex-row items-center h-11 focus:outline-none hover:bg-gray-700 text-gray-300 hover:text-gray-200 border-l-4 border-transparent hover:border-green-400 pr-6">
             <span className="inline-flex justify-center items-center ml-4">
               <SettingsIcon className='w-5 h-5' />

diff --git a/client/src/Printers.jsx b/client/src/Printers.jsx
@@ -65,7 +65,7 @@ function Printers() {
     <>
     {!settings.ngrok_auth_token && !settings.ngrok_api_key ? 
     (<div>
-      <p className='text-lg'>
+      <p className='px-10 py-2 text-lg'>
         <span className='inline-flex mr-2'>
         <WarningIcon className='w-6 h-6 fill-yellow-500' />
         </span>
@@ -434,7 +434,7 @@ function AddPrinterModal({addPrinter, setShowModal, showModal}) {
 
   return (
     <>
-    <div className='flex justify-end mb-3'>
+    <div className='flex justify-end mb-3 mr-2'>
       <Button onClick={() => setShowModal(true)} >
         <PrinterIcon className='w-5 h-5 fill-current' />
         <span>Add Printer</span>

diff --git a/client/src/Settings.jsx b/client/src/Settings.jsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import WarningIcon from './assets/images/warning.svg?react'
 
 function Settings() {
   const [settings, setSettings] = useState({})
@@ -36,15 +37,13 @@ function Settings() {
 
 
   return (
-    <>
+    <div className='px-10 space-y-10'>
     {!settings.ngrok_auth_token && !settings.ngrok_api_key ? 
     (<div>
       <p className='text-lg'>
-        <span className='inline-flex mr-2'>
-        <svg className="w-6 h-6 fill-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-        <path d="M13 14H11V9H13M13 18H11V16H13M1 21H23L12 2L1 21Z" />
-        </svg>  
-        </span>
+      <span className='inline-flex mr-2'>
+      <WarningIcon className="w-6 h-6 fill-yellow-500" />
+      </span>
       Ngrok is not configured. <a className='text-green-300 hover:underline' href="https://dashboard.ngrok.com/signup" target='_blank'>Sign up</a> for a free Ngrok account and add the Ngrok auth token to enable remote tunneling. 
       Without Ngrok, GuppyFLO only works within your local network.
       </p>
@@ -99,7 +98,7 @@ function Settings() {
 
         <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save</button>
       </form>
-    </>
+    </div>
   )
 }