Skip to content

Commit

Permalink
refactor: restructure HomePage layout and update FormBuilder styles f…
Browse files Browse the repository at this point in the history 
…or dark mode

This commit introduces significant restructuring of the `HomePage` layout and updates the styling of the `FormBuilder` component to better accommodate dark mode. These changes aim to enhance usability and visual consistency across different themes.

**HomePage Changes:**
- Modularized the homepage content by introducing new functional components: `HeaderSection` and `MainContent`, improving code readability and maintainability.
- Adjusted the layout to use functional components for displaying the header section and main content, promoting reusability and cleaner code structure.
- Refined text alignment and structure within the homepage for a more cohesive user experience.

**FormBuilder Changes:**
- Updated button and border styles to dynamically adjust to dark mode, ensuring visual compatibility across both light and dark themes.
- Simplified the `AddNewButton` component by replacing the manual button implementation with the existing `Button` component, reducing code redundancy.
- Adjusted CSS classes throughout the `FormBuilder` component, prefixing border color classes with `dark:` to ensure proper appearance in dark mode.

**New Components Added:**
- `HeaderSection`: Renders the introductory section of the homepage, encapsulating the title, subtitle, and a brief description of the application.
- `MainContent`: Centrally manages the layout for the main content area on the homepage, including the image display, navigation button to the WebUI, and resources links.
- `SectionTitle`: A utility component for rendering section titles within the `MainContent`, enhancing the visual hierarchy.
- `ResourceLinks`: Facilitates the display of resource links, making the code more organized and modular.

These improvements not only refine the user interface but also embrace best practices for maintaining a scalable and easily navigable codebase.
  • Loading branch information
@IanSkelskey
IanSkelskey committed May 21, 2024
1 parent 8a76782 commit 82b4f7c
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 45 deletions.
74 changes: 44 additions & 30 deletions src/pages/HomePage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,37 +9,51 @@ export default function HomePage() {

return (
<PageWrapper>
<div className='m-5 p-10 rounded-lg shadow-md bg-asu-maroon mt-8'>
<div className="text-white">
<h1 className="title">Field Day</h1>
<h2 className="subtitle">Data Management Tool</h2>
<p>
Field Day builds rich, dynamic forms for mobile data collection and query.
</p>
</div>
<div className='m-5 p-10 rounded-lg shadow-md bg-asu-maroon mt-8 text-white'>
<HeaderSection />
</div>
<div className='m-5 p-10 rounded-lg shadow-md bg-white dark:bg-neutral-900 flex md:flex-row gap-5 flex-col items-center'>
<img src={lizardImage} alt="Lizard" className="w-full md:w-1/3 rounded-full shadow-md" />
<div className="flex flex-col items-center gap-5">
<h1 className="heading">Enter the WebUI</h1>
<p>
The Field Day Web UI is a powerful desktop application designed to manage wildlife data collected through the Field Day mobile app. It serves as an essential tool for researchers, allowing them to efficiently view, manage, and export data collected in the field.
</p>
<p>&nbsp;</p>
<Button text='Enter WebUI' onClick={() => setCurrentPage('Table')} />
<h1 className="heading">Resources</h1>
<ul className="list-disc pl-5 flex flex-wrap space-x-10 justify-around">
<li><a href="https://github.com/Field-Day-2022/field-day-2022-webUI" target="_blank" rel="noopener noreferrer">GitHub Repository</a></li>
<li><a href="https://tailwindcss.com/docs/guides/vite" target="_blank" rel="noopener noreferrer">Tailwind with Vite</a></li>
<li><a href="https://reactjs.org/docs/getting-started.html" target="_blank" rel="noopener noreferrer">React Documentation</a></li>
<li><a href="https://firebase.google.com/docs" target="_blank" rel="noopener noreferrer">Firebase Documentation</a></li>
<li><a href="https://cloud.google.com/firestore/docs" target="_blank" rel="noopener noreferrer">Firestore Documentation</a></li>
</ul>
</div>


<div className='m-5 p-10 rounded-lg shadow-md bg-white dark:bg-neutral-900 flex flex-col items-center'>
<MainContent setCurrentPage={setCurrentPage} />
</div>

</PageWrapper>
)
);
}

const HeaderSection = () => (
<div className="text-center">
<h1 className="text-4xl font-bold mb-4">Field Day</h1>
<h2 className="text-2xl mb-2">Data Management Tool</h2>
<p className="text-lg">
Field Day builds rich, dynamic forms for mobile data collection and query.
</p>
</div>
);

const MainContent = ({ setCurrentPage }) => (
<div className="w-full flex flex-col lg:flex-row items-center gap-10">
<img src={lizardImage} alt="Lizard" className="w-full lg:w-1/3 rounded-full shadow-md" />
<div className="flex flex-col items-center lg:items-start gap-5 text-center lg:text-left">
<SectionTitle title="Enter the WebUI" />
<p className="text-lg">
The Field Day Web UI is a powerful desktop application designed to manage wildlife data collected through the Field Day mobile app. It serves as an essential tool for researchers, allowing them to efficiently view, manage, and export data collected in the field.
</p>
<Button text='Enter WebUI' onClick={() => setCurrentPage('Table')} />
<SectionTitle title="Resources" />
<ResourceLinks />
</div>
</div>
);

const SectionTitle = ({ title }) => (
<h1 className="text-3xl font-semibold mb-3">{title}</h1>
);

const ResourceLinks = () => (
<ul className="list-disc pl-5 space-y-2">
<li><a href="https://github.com/Field-Day-2022/field-day-2022-webUI" target="_blank" rel="noopener noreferrer">GitHub Repository</a></li>
<li><a href="https://tailwindcss.com/docs/guides/vite" target="_blank" rel="noopener noreferrer">Tailwind with Vite</a></li>
<li><a href="https://reactjs.org/docs/getting-started.html" target="_blank" rel="noopener noreferrer">React Documentation</a></li>
<li><a href="https://firebase.google.com/docs" target="_blank" rel="noopener noreferrer">Firebase Documentation</a></li>
<li><a href="https://cloud.google.com/firestore/docs" target="_blank" rel="noopener noreferrer">Firestore Documentation</a></li>
</ul>
);
25 changes: 10 additions & 15 deletions src/tools/FormBuilder.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { collection, getDocs, setDoc, doc, addDoc, where, query, orderBy, writeB
import { db } from '../utils/firebase';
import { notify, Type } from '../components/Notifier';
import { AnimatePresence, motion } from 'framer-motion';
import Button from '../components/Button';

export default function FormBuilder({ triggerRerender }) {
const [activeCollection, setActiveCollection] = useState(''); // current collection selected
Expand Down Expand Up @@ -280,7 +281,7 @@ export default function FormBuilder({ triggerRerender }) {
e.preventDefault();
setEditAllEntriesModal(true)
}}
className="button border-gray-800 border-2 m-2 rounded text-xl py-1 px-4 w-min cursor-pointer hover:bg-blue-400 active:bg-blue-500"
className="button border-neutral-800 dark:border-neutral-200 border-2 m-2 rounded text-xl py-1 px-4 w-min cursor-pointer hover:bg-blue-400 active:bg-blue-500"
>
Submit
</button>
Expand All @@ -305,7 +306,7 @@ export default function FormBuilder({ triggerRerender }) {
duration: .25
}
}}
className='absolute inset-0 m-40 flex flex-col items-center justify-around p-4 bg-white border-2 border-black rounded'
className='absolute inset-0 m-40 flex flex-col items-center justify-around p-4 bg-white border-2 border-black dark:border-white rounded'
>
<p className='text-4xl'>Where would you like to update this data?</p>
<button
Expand Down Expand Up @@ -365,7 +366,7 @@ export default function FormBuilder({ triggerRerender }) {
return (
<div className="flex flex-col items-start p-2 text-center">
<div className="grid grid-cols-3 w-full gap-1">
<div className="border-gray-800 border-2 rounded">
<div className="border-neutral-800 dark:border-neutral-200 border-2 rounded">
<h2 className="text-2xl">Collection</h2>
<ReusableUnorderedList
listItemArray={['AnswerSet']}
Expand All @@ -376,7 +377,7 @@ export default function FormBuilder({ triggerRerender }) {
selectedItem={activeCollection}
/>
</div>
<div className="border-gray-800 border-2 h-[calc(100vh-21em)] rounded">
<div className="border-neutral-800 dark:border-neutral-200 border-2 h-[calc(100vh-21em)] rounded">
<div className="flex justify-around items-center">
<h2 className="text-2xl">Document</h2>
{activeCollection && (
Expand All @@ -397,7 +398,7 @@ export default function FormBuilder({ triggerRerender }) {
selectedItem={activeDocument}
/>
</div>
<div className="grid grid-rows-2 border-gray-800 border-2 h-[calc(100vh-21em)] rounded">
<div className="grid grid-rows-2 border-neutral-800 dark:border-neutral-200 border-2 h-[calc(100vh-21em)] rounded">
<div className="border-gray-800 border-b-2 flex flex-col">
<div className="flex justify-around items-center">
<h2 className="text-2xl">Data</h2>
Expand Down Expand Up @@ -464,8 +465,8 @@ const ReusableListItem = ({ listItem, clickHandler, selectedItem, index }) => {
onClick={() => clickHandler(listItem, index)}
className={
listItem === selectedItem
? 'border-2 border-black m-2 p-2 text-xl hover:bg-blue-400 active:bg-blue-500 bg-blue-300 cursor-pointer sticky top-0 rounded'
: 'border-2 border-black m-2 p-2 text-xl hover:bg-blue-400 active:bg-blue-500 cursor-pointer rounded'
? 'border-2 border-black dark:border-white m-2 p-2 text-xl hover:bg-blue-400 active:bg-blue-500 bg-blue-300 cursor-pointer sticky top-0 rounded'
: 'border-2 border-black dark:border-white m-2 p-2 text-xl hover:bg-blue-400 active:bg-blue-500 cursor-pointer rounded'
}
>
{displayText}
Expand All @@ -475,13 +476,7 @@ const ReusableListItem = ({ listItem, clickHandler, selectedItem, index }) => {

const AddNewButton = ({ clickHandler }) => {
return (
<motion.button
layout
onClick={() => clickHandler()}
className="border-2 border-black m-2 p-2 text-xl hover:bg-blue-400 active:bg-blue-500 cursor-pointer rounded"
>
Add new
</motion.button>
<Button onClick={clickHandler} text="Add New" />
);
};

Expand Down Expand Up @@ -522,7 +517,7 @@ const NewDocumentForm = ({
</div>
))}
<button
className="button border-gray-800 border-2 m-2 rounded text-xl py-1 px-4 w-max cursor-pointer hover:bg-blue-400 active:bg-blue-500"
className="button border-neutral-800 dark:border-neutral-200 border-2 m-2 rounded text-xl py-1 px-4 w-max cursor-pointer hover:bg-blue-400 active:bg-blue-500"
onClick={e => {
e.preventDefault();
let tempKeysArray = [...formData.secondary_keys];
Expand Down

0 comments on commit 82b4f7c

Please sign in to comment.