Pull Request Title: Update Field Day: Desktop Data Manager with New Dark Theme and UI Enhancements #92
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…field-day-2022-webUI into post-class-fixes
This update significantly restructures the README.md to provide a comprehensive overview of the Field Day Web UI project, including its key features, development stack, setup and installation instructions, and a mockup image. The HomePage.jsx layout has also been modified to streamline content presentation, emphasizing the entry into the WebUI and providing resources link for further reading. Changes include: - Enhanced `README.md` content to detail project overview, key features, development stack, and setup instructions. - Added mockup image (`mockup.png`) to `README.md` for visual demonstration. - Simplified and restructured `HomePage.jsx` by removing verbose project overview content and focusing on entry to the WebUI and adding a visual element with `lizard.jpg`. - Included direct links to resources like GitHub repository and documentation for Tailwind with Vite, React, Firebase, and Firestore. - New image files `field-day.jpeg`, `lizard.jpg`, and `mockup.png` have been added to the public directory, aiding in the visual improvement of the project documentation and HomePage. These modifications improve the comprehension and accessibility of project documentation for developers and facilitate a more engaging user interface on the HomePage with relevant links and imagery.
This commit updates the `README.md` to enhance the presentation of contributors. Instead of a simple list, contributors for the year 2022 are now displayed with their respective images linked to their GitHub profiles. Changes include: - Removal of plain text contributor names. - Addition of HTML links and image tags for each contributor, sorting them under the "2022" section.
…y-2022-webUI into ianskelskey-2024
This refactor significantly simplifies the App's page structure by removing the `WhatsNew` and `QuickStart` pages. Additionally, the `Card` component has been deleted, and its styling applied directly within the pages that previously utilized it. This change aims to streamline the codebase, reducing the number of files and potentially increasing maintainability and performance. Changes include: - Removal of the `WhatsNew` and `QuickStart` page references from `App.jsx`. - Deletion of the `Card.jsx` component file. - Direct application of the `Card` component's styles within `HomePage.jsx`, `LoginPage.jsx`, and other affected files. Elements now use a `div` with class attributes rather than the `Card` component. - Removal of imports for the `Card` component in `HomePage.jsx`, `LoginPage.jsx`, and all instances where it was previously used.
…y-2022-webUI into ianskelskey-2024
Catch up dev-new
This commit revises the dark mode color scheme for better consistency and readability. The updates include changes to background colors, borders, and modal components to ensure a cohesive look and feel throughout the application. Changes include: - Updated global dark mode background and text colors in `src/index.css`. - Modified `App.jsx` to remove redundant background color class for dark mode. - Enhanced `Modal.jsx` with a darker backdrop and content background in dark mode for better contrast. - Adjusted `NewEntryForm.jsx` and modal components like `DataInputModal.jsx` and `ExportModal.jsx` to use the new dark mode background color. - Updated `Tab.jsx`, `TableHeading.jsx`, and various input elements in `src/index.css` to align with the new dark color scheme. - In `TablePage.jsx`, removed commented-out code and adapted overflow background color for dark mode. - `DataManager.jsx` now uses the introduced `neutral-950` color for dark mode background to maintain consistency. New files or directories created: - None Relevant files updated: - `src/App.jsx` - `src/components/Modal.jsx` - `src/components/NewEntryForm.jsx` - `src/components/Tab.jsx` - `src/components/TableHeading.jsx` - `src/index.css` - `src/modals/DataInputModal.jsx` - `src/modals/ExportModal.jsx` - `src/pages/TablePage.jsx` - `src/tools/DataManager.jsx` - `tailwind.config.cjs` for adding the `neutral-950` color. This update ensures that our application's dark mode is up to par with modern UI standards, offering a better visual experience for users who prefer darker themes.
This commit brings several optimizations and code structure improvements to the `TableEntry.jsx` component, alongside minor CSS adjustments to ensure consistent text color across light and dark themes. ### Optimizations and Adjustments: - Ensured consistent use of semicolons and removed unused imports. - Introduced `BINARY_KEYS`, `TRUE_KEYS`, and `FALSE_KEYS` constants for clearer handling of binary values within `TableEntry`. - Simplified and consolidated event handler functions (`handleEditClick`, `handleDeleteClick`, `handleSaveClick`, `handleCancelClick`) for cleaner, more readable code. - Utilized `useEffect` to set keys based on the current table name, refining the component's reactivity to prop changes. - Streamlined conditional rendering within the Actions component to improve readability. - Adjusted `select` CSS in `index.css` to ensure text color is explicitly set to black in light mode, addressing an inconsistency in theme styling. ### Code Cleanup: - Removed unnecessary checks and verbose conditions, adopting more straightforward logic for state management and event handling. - Simplified the mapping and rendering of `keys` by directly integrating conditional rendering checks into the JSX returned by `map`, improving performance and readability. - Removed redundant code segments and consolidated duplicate logic for handling binary value conditions within form inputs. These changes aim to enhance the maintainability of the codebase, improve the component's performance, and ensure a consistent user experience across different themes.
…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.
This commit significantly refines and optimizes the firestore.js file, enhancing the efficiency and legibility of the firestore operations. Major changes include the simplification of database queries, the consolidation of similar functions into a single reusable function, and the removal of redundant code. Key changes made: - Streamlined `getArthropodLabels`, `getSitesForProject`, `getArraysForSite`, `getTrapStatuses`, `getFenceTraps`, and `getSexes` functions by introducing a generic `getAnswerSetOptions` function. - Optimized `getDocsFromCollection` and `deleteDocFromCollection` functions for clearer, more concise logic. - Refactored `editSessionAndItsEntries` and `deleteSessionAndItsEntries` to efficiently utilize batch operations and promise handling. - Cleaned up `uploadNewEntry` to prevent unnecessary checks and streamline the handling of Arthropod-specific logic. - Improved code styling consistency across the file, including the usage of template literals and arrow functions, and applying proper spacing for readability. Files and directories affected: - Modified `src/utils/firestore.js` for optimizations and refactoring. - Minor styling and consistency adjustments in `src/tools/DataManager.jsx`.
This commit introduces support for dark mode on the `LoginPage`. The implementation ensures that elements within the page adapt their background and icon colors according to the selected theme (light or dark mode). Changes include: - Updated the background color of the main container to also consider dark mode with `dark:bg-neutral-950`. - Modified the background color of the Google login icon to support dark mode with `dark:bg-black`. These adjustments enhance the visual compatibility of the `LoginPage` with user's system theme preferences, providing a more integrated and comfortable user experience in different lighting conditions.
…y-2022-webUI into ianskelskey-2024
…e dark theme This commit introduces various changes to enhance the UI and code organization. - Moved `lizard.jpg` from `public` to the new `src/assets` directory. This restructuring facilitates better management of static assets within the project's source code. - Updated the background color for dark theme in `index.css` making it slightly darker for body (`bg-neutral-800`). - Refactored `HomePage.jsx` to use a background image style for the lizard photo instead of an `img` tag, resulting in a more flexible presentation. - Adjusted markup structure in `HomePage.jsx` to wrap content within a `max-w-7xl` container for a more consistent layout across different screen sizes. - Changed `TablePage.jsx` to have a dark background (`bg-neutral-700`) for the `overflow-auto` div, improving consistency in dark theme appearance. Changes include: - Deleted `public/lizard.jpg`. - Added `src/assets/lizard.jpg`. - Modifications in `src/index.css` for a darker theme appearance. - Updated `src/pages/HomePage.jsx` with a more responsive layout and background image usage. - Minor UI adjustment in `src/pages/TablePage.jsx` for dark theme consistency.
This commit introduces support for a dark theme in the `TablePage` component by modifying the background color styling. This enhancement aligns with the application's theme flexibility and improves the user interface for dark mode users. Changes include: - Modified the background color class in the `<div>` tag to support dark mode (`dark:bg-neutral-700`). This ensures the `TablePage` component adapts its background color appropriately when the dark theme is activated. This change enhances the visual compatibility of the `TablePage` with the overall application theme, especially for users who prefer dark mode for their UI.
This update brings several enhancements to improve the Progressive Web App (PWA) experience and optimize caching strategies. Key improvements include: - Added a manifest file (`public/manifest.json`) to define the web application's name, appearance, and iconography, promoting a full-screen and high-quality PWA experience on supported devices. - Implemented service worker registration in `src/main.jsx` to manage offline capabilities and caching strategies efficiently. - Updated `firebase.json` to include cache control headers for `service-worker.js` and other resources, optimizing content delivery and freshness. - Introduced PWA compliant icons in various sizes (`public/icons/logo-192x192.png`, `public/icons/logo-512x512.ico`, and `public/icons/logo-512x512.png`) to ensure compatibility across a wide range of devices and display settings. - Removed `public/field-day.jpeg` to maintain focus on newly introduced icons and resources optimization. - Updated `index.html` to link to the new manifest file and specify the theme color, enhancing the aesthetic consistency with the app's branding on the splash screen and the address bar. These changes aim to enhance user engagement by providing a more app-like experience, leveraging native capabilities on modern browsers and ensuring optimal loading times through improved caching mechanisms.
This update introduces dynamic manifest file selection based on the user's preference for dark mode. This feature enhances user experience by providing a consistent theme across the operating system settings. Changes include: - Added script in `index.html` to switch between `/manifest.json` and `/manifest-dark.json` based on the `(prefers-color-scheme: dark)` media query. - Updated the `theme_color` in `public/manifest.json` to match the primary color of the application (`#8C1D40`). - Created a new `public/manifest-dark.json` that defines the dark theme appearance with `background_color` set to `#333333` and `theme_color` to `#8C1D40`, ensuring a coherent look in dark mode. Files added: - `public/manifest-dark.json`: New manifest file tailored for dark mode, containing adjusted colors and maintaining icon specifications. Files modified: - `index.html`: Inserted script for dynamic manifest link adjustment. - `public/manifest.json`: Updated `theme_color`. This implementation aims to cater to user preferences by automatically adjusting the application's theme to align with system settings, thus improving the visual user interface experience in both light and dark modes.
…y-2022-webUI into ianskelskey-2024
This commit updates the `.gitignore` file to exclude the `TODO.md` personal file from being tracked. Changes made: - Added `TODO.md` to `.gitignore` under a new "Personal files" section
This commit updates the `README.md` file to include instructions for test deployments. These deployments are automatically created on PRs into `main` and `dev` branches using the workflow `firebase-hosting-pull-request.yml`. Changes include: - Added a new section "Test Deployments" with details on accessing test deployments - Instructions on adding and removing authorized domains in the Firebase Console for Google Auth. This update ensures that contributors are aware of the process for handling test deployments and accessing them via Google Auth.
This commit updates the `README.md` to reflect the new project name "Field Day: Desktop Data Manager (DDM)" and adds a quick start guide for users. It also updates the project name and version in several config files. The following changes were made: - Updated title and project description in `README.md` - Added a "Quickstart for Users" section in `README.md` - Renamed project in `package.json` and `package-lock.json` - Updated project version in `package.json` and `package-lock.json` - Changed `name` and `short_name` in `public/manifest.json` These changes align the documentation and project files with the new project name and provide a quick start guide for users. ```
This commit refactors the `Icons` component by condensing multiple individual icon exports into a single object named `icons`. This approach reduces redundancy and streamlines the import process. The `LizardIcon` continues to be manually exported and the previous custom icon implementations were removed in favor of React-based icon creation for consistency. Additionally, the README has been updated to correctly format the 'Development Stack' section before 'Key Features.' Changes include: - Refactored `icons.jsx` to use a single `iconMap` and `icons` object containing all icons. - Updated `Pagination` component to use `BackArrowIcon` and `ForwardArrowIcon` instead of `ArrowIcon`. - Replaced `XIcon` with `CloseIcon` in the `TableEntry` component. - Minor CSS adjustment in `index.css` to ensure proper alignment of button contents. - Adjusted spacing and alignment of icons in the `LoginPage` component. New and deleted files: - `src/assets/icons.jsx`: Refactored icon structure.
This commit improves the code readability in existing components by revising indentation, adding semicolons consistently, and simplifying arrow function syntax. Additionally, it introduces an enhancement to the authentication logic by customizing the GoogleAuthProvider parameters and adding post-logout cleanup.
The key changes include:
- *Code readability improvements:*
- `LogoutButton.jsx`:
- Proper indentation and added a missing newline at the end of the file.
- Simplified the `onClick` arrow function for `Button`.
- `LoginPage.jsx`:
- Added semicolons for constants.
- Simplified the `onClick` arrow function for `Button`.
- Removed an unnecessary newline.
- *Authentication logic enhancements:*
- `authenticator.js`:
- Customized `GoogleAuthProvider` with `setCustomParameters` to force account selection during login.
- Enhanced the `logout` method in `Authenticator` class to:
- Clear cookies.
- Clear local storage.
- Redirect to the login page.
These changes improve the comprehensibility of the code and enhance the user experience during the login/logout process.
```
Replaced `signInWithRedirect` with `signInWithPopup` in the `Authenticator` class to improve the user experience by allowing sign-in in a popup window instead of a full page redirect. Files modified: - `src/utils/authenticator.js` - Replaced `signInWithRedirect` with `signInWithPopup` in the `login` method. ```
…y-2022-webUI into ianskelskey-2024
Enhance Field Day Web UI: Dark Mode Support, Component Refinements, and Google OAuth Fix
This commit enhances the `EntryItem` component and `pushEntryChangesToFirestore` function to improve user experience and code maintainability. Changes include: - Renamed `handleChange` to `onChangeHandler` in `TableEntry.jsx` for better naming consistency. - Added `onClickHandler` to handle click events, specifically preventing direct editing of the 'year' field. - Modified input element to use `readOnly` instead of `disabled` when conditions are met, improving the UI's visual feedback. - Updated firestore utility to set 'year' from 'dateTime' field if present and valid, ensuring data integrity. Modified files: - `src/components/TableEntry.jsx`: - `handleChange` renamed to `onChangeHandler`. - Added `onClickHandler` to notify users when attempting to edit the 'year' directly. - Changed `disabled` property to `readOnly` for better UX. - `src/utils/firestore.js`: - Added logic to extract and set 'year' from 'dateTime' field before saving to Firestore. - Refactored Firestore operations to use promise chaining for better readability.
feat: improve input handling and error notification
The favicon link in the `index.html` file has been updated from linking to `vite.svg` to `favicon.ico`. Changes include: - Modified the favicon link in `index.html` from `vite.svg` to `favicon.ico`. Binary files: - `public/vite.svg`: Original favicon. - `public/favicon.ico`: New favicon.
fix: update favicon link in HTML
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
Visit the preview URL for this PR (updated for commit f9346c6): https://asu-field-day-webui--pr92-dev-new-osctfjer.web.app (expires Sat, 03 Aug 2024 19:18:04 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 37b6afde5f0aef181981f0559a69aeab178feceb |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request introduces several significant updates and enhancements to the Field Day: Desktop Data Manager application, including:
firebase.jsonandindex.htmlto include necessary configurations for service workers.manifest.jsonandmanifest-dark.json.These updates aim to enhance the overall user experience, provide better accessibility options, and ensure the application is more maintainable and performant.