[59] Apply the extension's theme styles to the new New Chat layout
#60
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
… extension's design patterns (#59) - Added custom styles to the list of examples that appear when clicking on prompt action cards - Improved the visual appearance of the examples list for better readability and usability Changes summary: - Enhanced the visual design of the list of examples that appear when clicking on prompt action cards.
itsmartashub
changed the title
New Chat layoutNew Chat layout
itsmartashub
changed the title
New Chat layoutNew Chat layout
…s below prompt field
- Added a consistent style to the example cards below the prompt field, including the new layout and existing list of examples
- Added accent gradient background, blur, and SVG styles to match the prompt cards from the previous "New Chat" layout
- Ensured a visually appealing and user-friendly design for the prompt action cards, such as "Create image", "Summarize text", and more
Changes summary:
- Improved the visual design of the prompt action cards below the prompt field for a familiar user experience.
- Added a global style for `.bg-brand-blue-800/20` to fix the "Attach files" SVG background circle
- Ensured consistent background appearance for elements using this class, such as the "Attach files" SVG background circle "Attach files" svg background circled div triggered when clicked some of the new "New Chat" layout prompt action cards (Like "Summarize text", "Analyze images", etc.)
Changes summary:
- Fixed the "Attach files" SVG background circle not matching the extension's theme triggered when using certain prompt action cards.
…` to use the accent color
- Ensured consistency with the extension's visual theme
Changes summary:
- Updated the main heading color to match the extension's accent color.
…nd main heading
- Changed the color of the ChatGPT main logo above prompt cards to the accent color
- Ensured visual consistency with the extension's theme and main heading
Changes summary:
- Updated the ChatGPT main logo color to match the accent color and main heading.
- Reverted to previous design for dark themes
- Added better hover state with accent color for both SVG and text, and scaled down the button
- For light themes, made the SVG and text color accent color by default for better visibility because colorful svg icons was unpleasant and almost invisible
Changes summary:
- Improved the design of prompt action cards for both dark and light themes, enhancing visibility and user experience.
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.
Closes #59