mobile UI

zkonduit · Nov 22, 2023 · afaa8fc · afaa8fc
1 parent 04de88f
commit afaa8fc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 24 deletions.
diff --git a/app/components/APINavColumn.tsx b/app/components/APINavColumn.tsx
@@ -37,7 +37,7 @@ export default function APINavColumn() {
       <div>
         {/* Wide screen side nav */}
         <div
-          className={`bg-black border-r-2 border-slate-300 w-64 fixed z-[100] top-0 left-0 overflow-y-auto h-full hidden md:block`}
+          className={`bg-black border-r-2 border-slate-300 w-64 fixed z-[100] top-16 left-0 overflow-y-auto h-full hidden md:block`}
         >
           <NavList />
         </div>

diff --git a/app/components/Main.tsx b/app/components/Main.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 export default function Main({ children }: { children: React.ReactNode }) {
   return (
-    <div className='flex w-full md:w-auto justify-center md:block md:ml-64 p-4 min-h-screen lg:pl-40 md:pl-20 sm:pl-10'>
+    <div className='flex w-full md:w-auto justify-center pb-20 md:block md:ml-64 p-4 min-h-screen lg:pl-40 md:pl-20 sm:pl-10'>
       {children}
     </div>
   )

diff --git a/app/encryption/page.tsx b/app/encryption/page.tsx
@@ -170,13 +170,13 @@ export default function Encryption() {
   }
 
   return (
-    <div className='flex flex-col justify-center items-center h-5/6 pb-20'>
+    <div className='flex flex-column justify-around'>
       {bufferCipher && !warningEncrypt ? (
-        <div className='w-10/12 flex flex-col'>
+        <div className='flex flex-col justify-around'>
           <h1 className='text-2xl mb-6 '>{cipherResult}</h1>
-          <div className='flex w-full justify-center pt-5'>
+          <div className='flex flex-col flex-grow w-full items-center justify-around'>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow'
               type='submit'
               onClick={() =>
                 utils.handleFileDownload('cipher.txt', bufferCipher)
@@ -185,14 +185,14 @@ export default function Encryption() {
               Download Cipher
             </Button>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow mt-4'
               onClick={() => props.setOpenModal('default')}
               data-modal-target='witness-modal'
               data-modal-toggle='witness-modal'
             >
               Show Cipher
             </Button>
-            <Button className='w-1/2' onClick={() => setBufferCipher(null)}>
+            <Button className='w-full flex-grow mt-4' onClick={() => setBufferCipher(null)}>
               Reset
             </Button>
             <Modal
@@ -215,7 +215,7 @@ export default function Encryption() {
           <h1 className='text-2xl mb-6 '>{decryptResult}</h1>
           <div className='flex w-full justify-center pt-5'>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow'
               type='submit'
               onClick={() =>
                 utils.handleFileDownload('decrypted.txt', bufferDecrypt)
@@ -224,14 +224,14 @@ export default function Encryption() {
               Download Message
             </Button>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow mt-4'
               onClick={() => props.setOpenModal('default')}
               data-modal-target='witness-modal'
               data-modal-toggle='witness-modal'
             >
               Show Message
             </Button>
-            <Button className='w-1/2' onClick={() => setBufferDecrypt(null)}>
+            <Button className='w-full flex-grow mt-4' onClick={() => setBufferDecrypt(null)}>
               Reset
             </Button>
             <Modal
@@ -240,8 +240,8 @@ export default function Encryption() {
             >
               <Modal.Header>Decrypted Cipher File Content: </Modal.Header>
               <Modal.Body className='bg-black'>
-                <div className='mt-4 p-4 bg-black-100 rounded border'>
-                  <pre className='whitespace-pre-wrap'>
+                <div className='mt-4 p-4 bg-black-100 rounded'>
+                  <pre className='whitespace-pre-wrap' style={{ fontSize: '13px' }}>
                     {stringify(decrypted, null, 5)}
                   </pre>
                 </div>
@@ -366,7 +366,7 @@ async function populateWithSampleFiles() {
 
 function ElgamalRandomVar({ utils }: { utils: Utils }) {
   return (
-    <div className='flex flex-col justify-center items-center h-4/6 pb-0'>
+    <div className='flex flex-col justify-center items-center pb-4'>
       <h1 className='text-2xl mb-3 '>Generate Random Elgamal Variables</h1>
       <Label
         color='white'

diff --git a/app/hashing/page.tsx b/app/hashing/page.tsx
@@ -79,13 +79,13 @@ export default function Hashing() {
   }
 
   return (
-    <div className='flex flex-col justify-center items-center h-5/6 pb-20'>
+    <div className='flex flex-column justify-around'>
       {buffer && !warning ? (
-        <div className='w-10/12 flex flex-col'>
+        <div className='flex flex-col justify-around'>
           <h1 className='text-2xl mb-6 '>{hashResult}</h1>
-          <div className='flex w-full justify-center pt-5'>
+          <div className='flex flex-col flex-grow w-full items-center justify-around'>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow'
               type='submit'
               onClick={() =>
                 utils.handleFileDownload(
@@ -97,14 +97,14 @@ export default function Hashing() {
               Download Hash
             </Button>
             <Button
-              className='w-1/2 mr-3'
+              className='w-full flex-grow mt-4'
               onClick={() => props.setOpenModal('default')}
               data-modal-target='witness-modal'
               data-modal-toggle='witness-modal'
             >
               Show Hash
             </Button>
-            <Button className='w-1/2' onClick={() => setBuffer(null)}>
+            <Button className='w-full flex-grow mt-4' onClick={() => setBuffer(null)}>
               Reset
             </Button>
             <Modal
@@ -113,8 +113,8 @@ export default function Hashing() {
             >
               <Modal.Header>Hash File Content: </Modal.Header>
               <Modal.Body className='bg-black'>
-                <div className='mt-4 p-4 bg-black-100 rounded border'>
-                  <pre className='blackspace-pre-wrap'>
+                <div className='mt-4 p-4 bg-black-100 rounded'>
+                  <pre className='blackspace-pre-wrap' style={{ fontSize: '13px' }}>
                     {stringify(hash, null, 6)}
                   </pre>
                 </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,4 @@
-// import Header from './components/Header'
+import Header from './components/Header'
 import './globals.css'
 import type { Metadata } from 'next'
 import APINavColumn from './components/APINavColumn'
@@ -19,8 +19,10 @@ export default function RootLayout({
     <SharedResourcesProvider>
       <html lang='en'>
         <body className='m-0 h-screen flex flex-col'>
+          {/* <!-- Top Navbar --> */}
+          <Header />
           {/* <!-- Content Area --> */}
-          <div className='flex-grow flex flex-row mt-0'>
+          <div className='flex-grow flex flex-row pt-16'>
             {/* <!-- Left Navigation Column --> */}
             <APINavColumn />