Dev/andy/designfix - Some design fixing & little improvments #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
The commit fixes a rendering issue in the MenusDetails component. Previously, the component would not update when the menuFromStore object was empty or when the menu id changed. This caused incorrect data to be displayed. The fix ensures that the component updates correctly by checking if the menuFromStore id is different from the current menu id and updating the store accordingly. Additionally, unnecessary code related to setting renderKey state and commented out code for setMenusToStore function were removed. Fixes #123
- In page.js: - Added import statement for Link from 'next/link' - Updated the main element's className to include flex-col and gap-6 - Updated the first div's className to include flex and gap-2 - Updated the second div's className to remove pt-8 - Updated the third div's className to remove p-6 and add p-8 px-16 - Updated the fourth div's className to remove bg-red-500 and add bg-blue-500, also updated its child elements' classNames accordingly - Updated the fifth div's className to remove bg-yellow-500, also updated its child element's classNames accordingly - Replaced anchor tag with Link component from next/link package - In layout.js: - Added weight value '200', '300', '800' in Playpen_Sans font - In ToggleMenu.component.js: - Added import statements for cn and Switch from '@nextui-org/react' - Implemented a Switch component instead of an input checkbox
Updated the tailwind.config.js file to include custom themes for dark and light modes. The primary color palette and focus color were modified for each theme.
Updated the color scheme in the tailwind.config.js file to use a darker shade of blue as the default color and changed the foreground color to white. Also updated the focus color to match the new default color.
- Updated the styling of menu title and description in page.js - Added font styles to menu title and description in page.js - Removed background colors from div elements in page.js - Adjusted width and margin-left of thumb element in ToggleMenu.component.js - Modified startContent and endContent text in ToggleMenu.component.js
- Added transition effect to menu items on hover - Adjusted positioning and size of change icon - Added hover effects to change icon
- Updated the layout of the main container to use flexbox and add vertical gap - Modified the heading to include the title of the menu being modified - Added a description text for modifying cards, ingredients, and dishes on-the-fly - Removed unnecessary padding top from a container These changes improve the visual presentation and user experience on the cartes page.
… update references
The ToggleDish and ToggleIngredient components have been renamed to ToggleMenu. All references to these components have been updated accordingly.
✨ Add Switch component for menu activation toggle
A new Switch component has been added to the ToggleMenu component for toggling the activation state of a menu. The switch is controlled by the isSelected state, which is initially set based on the activated prop. The toggleMenuState function has also been updated to handle menu activation changes.
🔧 Update API endpoint in toggleMenuState function
The API endpoint in the toggleMenuState function has been updated from `/api/dishes/${id}` to `/api/menus/${id}`.
Co-authored-by: AI Assistant <[email protected]>
- Updated the import path for `ToggleMenuComponent` in `src/app/cartes/page.js` - Updated the import paths for `ToggleDishComponent` and `ToggleIngredientComponent` in `src/components/MenusDetails.component.js` ✨ Improve UI and UX - Simplified the heading text in `src/app/cartes/[id]/page.js` - Improved the layout and styling of dish details in `src/components/MenusDetails.component.js` - Added a link to update menu details in `src/components/MenusDetails.component.js` 🐛 Fix broken link - Fixed a broken link to an external resource
This commit adds a new Toggle component to the project. The Toggle component is a switch that can be toggled on or off. It uses the Next UI library and allows for customization of size, color, and styling. The component also includes functionality to handle updates when the toggle is changed.
This commit refactors the ToggleMenuComponent by extracting the toggle functionality into a separate ToggleComponent. The new component takes in an id, activated state, and onUpdate function as props. The updateMenu function is now async and handles toggling the menu state using the toggleMenuState function.
This commit refactors the ToggleDishComponent to use the newly created ToggleComponent. The code now imports and uses the ToggleComponent instead of manually rendering the toggle switch. Additionally, the function name `toggleMenuState` has been changed to `toggleDishState` for clarity and consistency.
- Refactored ToggleIngredientComponent to use the new ToggleComponent. - Added a new function toggleIngredientState to handle ingredient state updates. - Updated the onChange event handler in the input element to call toggleIngredientState instead of toggleMenuState. - Created a new async function updateIngredient to handle updating the ingredient state using toggleIngredientState. This commit refactors the code for better organization and readability, and introduces a reusable ToggleComponent for handling ingredient toggling.
The `ToggleComponent` now correctly initializes the `isSelected` state based on the `activated` prop. This ensures that the toggle switch reflects the correct initial value.
- Removed console.log statement from page.js - Added useEffect hook to update isSelected state in Toggle.component.js based on activated prop
- Added new files `error.js` and `not-found.js` to handle error and not found pages respectively. - These components display appropriate messages and provide options for users to navigate back or return to the homepage. 🔧 Update Toggle component - Updated the `ToggleComponent` to use a custom hook from the menu store. - The component now listens for changes in the menu state and updates accordingly. - Removed commented out code that was no longer needed.
- Added "disabled" property to menu items for better UI interaction - Updated Nav component to handle disabled menu items correctly
This commit removes the 'as' prop from the Link component in NavComponent, as it is no longer needed. The 'as' prop was previously used to render a button element, but this functionality has been refactored.
- Updated the form inputs in the signin page to use the `Input` component from `@nextui-org/react`. - Added size, label, radius, variant, color, isInvalid, and errorMessage props to the email and password inputs. - Removed redundant classNames from the email and password inputs. - Updated the MenusDetails component to use the `Modal`, `ModalContent`, `ModalHeader`, `ModalBody`, `ModalFooter`, `Button`, `useDisclosure`, `Checkbox`, and `Link` components from '@nextui-org/react'. - Added a modal for login functionality with email and password inputs. - Added an onOpen prop to DishDetails component to open the login modal when clicking on a dish. - Removed '@tailwindcss/forms' plugin from tailwind.config.js.
- Added a new file `error.js` in the `auth/error` directory. - Added a new file `page.js` in the `auth/error` directory. - Modified the existing file `signin/page.js`. - Updated the translation on line 187 of `signin/page.js`. - Adjusted the positioning and dimensions of an image in `signin/page.js`. These changes introduce error handling, including signing out when there is an error. Additionally, some visual adjustments were made to improve the layout.
WadeFade
reviewed
Nov 22, 2023
This commit deletes the menu.json file, which contained information about a basic menu in French. The file included details such as categories, dishes, and their descriptions. This change removes the entire content of the file. ℹ️ℹ️ Note: Please make sure to provide more specific commit messages in your actual code changes.
- Adjusted the width of a container element on the Signin page to accommodate larger screens. - Modified the dimensions of an image on the Signin page to ensure it maintains its aspect ratio.
The code changes add a space of +4rem (equivalent to pr-16 / pl-16) under the nav bar in multiple pages (`cartes/[id]/page.js`, `cartes/page.js`, `page.js`, and `profil/page.js`). This ensures that the content is not hidden under the nav bar.
This commit refactors the code in `ToggleDish.component.js`, `ToggleIngredient.component.js`, and `ToggleMenu.component.js` to use a new service called `switchElementsActivation`. This service contains functions for toggling the activation state of dishes, ingredients, and menus. The previous functions `toggleDishState`, `toggleIngredientState`, and `toggleMenuState` have been moved to this new service. The purpose of this refactor is to improve code organization and maintainability by centralizing the logic for switching element activation.
The Nav component was not correctly disabling menu items when the "enabled" property was false. This has been fixed by updating the "disabled" prop to be the opposite of "enabled". 🌟 Add toast notifications for successful and failed actions Toast notifications have been added to provide feedback for successful and failed actions in the toggleDishState, toggleIngredientState, and toggleMenuState functions. Success messages include an emoji icon while error messages include a different emoji icon.
This commit fixes the error handling in the `switchElementsActivation.js` file. The code now properly displays a toast message when an error occurs during data modification.
|
j'ai pris en compte tous les commentaires, deuxième partie de vérif ;) ♥ |
This was
linked to
issues
Nov 22, 2023
LightInn
approved these changes
Nov 23, 2023
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.
Improve toggle components,
Menu page
Menu with dish & ingredient page
Nav bar
background
colors
Theming by nextui
Button & input by nextui
Toggler by nextui
add react toastify
handle login failure
some fixs (icons // design system)