Refactor UI styles & configurations #324
Merged
Conversation
This file contains hidden or 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
Contributor
techwithanirudh
commented
May 19, 2023
techwithanirudh
commented
- Modify button styles and their color schemes to create a consistent user experience when interacting with buttons.
- Adjust the design of the search bar to a more user-friendly layout by changing its background color and styling.
- Create a responsive mobile behavior for the navigation bar to hide it behind a menu icon instead of permanently displaying it.
- Introduce OpenAI API key user-defined feature in endpoint access.
- Modify button styles and their color schemes to create a consistent user experience when interacting with buttons. - Adjust the design of the search bar to a more user-friendly layout by changing its background color and styling. - Create a responsive mobile behavior for the navigation bar to hide it behind a menu icon instead of permanently displaying it. - Introduce OpenAI API key user-defined feature in endpoint access.
danny-avila
requested changes
May 19, 2023
There was a problem hiding this comment.
see my comments in the discord channel https://discord.com/channels/1086345563026489514/1107687896426762293
Update .gitignore to exclude meilisearch.exe and data.ms/*, which are not necessary for Meilisearch.
This commit adds a getCurrentBreakpoint function to determine the current breakpoint of the viewport. The function uses fullConfig to determine the biggest breakpoint value of the window, and returns the corresponding breakpoint. It also updates the useEffect function to use getCurrentBreakpoint instead of checking if the userAgent matches a mobile regex.
Adjustments were made to the OpenAI Access Key setup to allow users to provide a key from the UI by setting the access key to "user_provided". The change revamps the authentication process, eliminates the error of incorrect setup, and makes the system more user-friendly.
The import path for the tailwind config was updated in the Nav component to match the new project structure. This ensures that the correct Tailwind styles are applied to the component and improves maintainability.
This commit adds the ThemeContext and cn utility function to the Nav component's dependencies with useContext and import respectively. It also modifies a class name with a ternary operator that toggles based on the theme value passed via ThemeContext.
Changed the button styles for the Nav close and open buttons to enhance visibility. The text color for both buttons will now change when hovering to gray and gray-600 respectively.
This commit updates the MessageHeader component styles by adjusting the text color, as well as adding transition effects to enhance the hover experience. The commit also tweaks mobile styles by adding a transition effect to `.nav` when resizing the window to mobile size.
The message header component was refactored to improve its visual contrast by changing the text color for better readability. The styles of the component were modified to improve hover behavior as well as transition effects. The setSaveAsDialogShow method was shifted to the onClick prop to only execute when the endpoint is not 'chatGPTBrowser'.
The commit message describes changes made to the MessageHeader and Nav components. It summarizes the code changes as a refactor of the CSS styling for the buttons in both components, specifically updating the text and hover colors for the dark and light themes.
danny-avila
approved these changes
May 19, 2023
danorlando
pushed a commit
to danorlando/librechat
that referenced
this pull request
Jun 1, 2023
* Refactor UI styles & configurations - Modify button styles and their color schemes to create a consistent user experience when interacting with buttons. - Adjust the design of the search bar to a more user-friendly layout by changing its background color and styling. - Create a responsive mobile behavior for the navigation bar to hide it behind a menu icon instead of permanently displaying it. * Update .gitignore to exclude unnecessary files for Meilisearch Update .gitignore to exclude meilisearch.exe and data.ms/*, which are not necessary for Meilisearch. * feat: Add getCurrentBreakpoint function to get current breakpoint This commit adds a getCurrentBreakpoint function to determine the current breakpoint of the viewport. The function uses fullConfig to determine the biggest breakpoint value of the window, and returns the corresponding breakpoint. It also updates the useEffect function to use getCurrentBreakpoint instead of checking if the userAgent matches a mobile regex. * Update tailwind import path in Nav component The import path for the tailwind config was updated in the Nav component to match the new project structure. This ensures that the correct Tailwind styles are applied to the component and improves maintainability. * Add ThemeContext and cn utility function to Nav component This commit adds the ThemeContext and cn utility function to the Nav component's dependencies with useContext and import respectively. It also modifies a class name with a ternary operator that toggles based on the theme value passed via ThemeContext. * Update Nav button styles for better visibility Changed the button styles for the Nav close and open buttons to enhance visibility. The text color for both buttons will now change when hovering to gray and gray-600 respectively. * Improve message header styles and add transition effects This commit updates the MessageHeader component styles by adjusting the text color, as well as adding transition effects to enhance the hover experience. The commit also tweaks mobile styles by adding a transition effect to `.nav` when resizing the window to mobile size. * Refactor the message header component styling for better visual contrast The message header component was refactored to improve its visual contrast by changing the text color for better readability. The styles of the component were modified to improve hover behavior as well as transition effects. The setSaveAsDialogShow method was shifted to the onClick prop to only execute when the endpoint is not 'chatGPTBrowser'. * refactor: Update styling of MessageHeader and Nav buttons The commit message describes changes made to the MessageHeader and Nav components. It summarizes the code changes as a refactor of the CSS styling for the buttons in both components, specifically updating the text and hover colors for the dark and light themes.
cnkang
pushed a commit
to cnkang/LibreChat
that referenced
this pull request
Feb 6, 2024
* Refactor UI styles & configurations - Modify button styles and their color schemes to create a consistent user experience when interacting with buttons. - Adjust the design of the search bar to a more user-friendly layout by changing its background color and styling. - Create a responsive mobile behavior for the navigation bar to hide it behind a menu icon instead of permanently displaying it. * Update .gitignore to exclude unnecessary files for Meilisearch Update .gitignore to exclude meilisearch.exe and data.ms/*, which are not necessary for Meilisearch. * feat: Add getCurrentBreakpoint function to get current breakpoint This commit adds a getCurrentBreakpoint function to determine the current breakpoint of the viewport. The function uses fullConfig to determine the biggest breakpoint value of the window, and returns the corresponding breakpoint. It also updates the useEffect function to use getCurrentBreakpoint instead of checking if the userAgent matches a mobile regex. * Update tailwind import path in Nav component The import path for the tailwind config was updated in the Nav component to match the new project structure. This ensures that the correct Tailwind styles are applied to the component and improves maintainability. * Add ThemeContext and cn utility function to Nav component This commit adds the ThemeContext and cn utility function to the Nav component's dependencies with useContext and import respectively. It also modifies a class name with a ternary operator that toggles based on the theme value passed via ThemeContext. * Update Nav button styles for better visibility Changed the button styles for the Nav close and open buttons to enhance visibility. The text color for both buttons will now change when hovering to gray and gray-600 respectively. * Improve message header styles and add transition effects This commit updates the MessageHeader component styles by adjusting the text color, as well as adding transition effects to enhance the hover experience. The commit also tweaks mobile styles by adding a transition effect to `.nav` when resizing the window to mobile size. * Refactor the message header component styling for better visual contrast The message header component was refactored to improve its visual contrast by changing the text color for better readability. The styles of the component were modified to improve hover behavior as well as transition effects. The setSaveAsDialogShow method was shifted to the onClick prop to only execute when the endpoint is not 'chatGPTBrowser'. * refactor: Update styling of MessageHeader and Nav buttons The commit message describes changes made to the MessageHeader and Nav components. It summarizes the code changes as a refactor of the CSS styling for the buttons in both components, specifically updating the text and hover colors for the dark and light themes.
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.