Fix all the broken styles due to new ChatGPT layout (GPT4o) #17
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
…sign and edit state - Rewrite the logic for chat bubble styling to accommodate the new GPT4o changes and improve the design of user chat bubbles. - Fix the broken user chat bubble design caused by recent GPT4o updates. - Enhance the user experience when editing messages by improving the visual indicators of the edit state. Changes summary: - Refactored chat bubble styling logic to ensure compatibility with GPT4o and improved the overall design. - Addressed issues with broken user chat bubble styling caused by recent GPT4o changes. - Enhanced the visual indicators during the message edit state, providing a clearer user experience when modifying messages.
- Fix the broken design of the prompt textarea, ensuring it adheres to the new gpt4o layout and styling guidelines. - Remove deprecated code that is no longer used due to the transition to gpt4o, streamlining the codebase and reducing potential sources of bugs. Changes summary: - Resolved design issues with the prompt textarea, ensuring it aligns with the gpt4o aesthetic and functionality. - Removed outdated code, reducing clutter and improving maintainability by eliminating deprecated functionality specific to previous versions.
- Improve the background and text color of various button types: `.btn`, `.btn-primary`, `.btn-secondary`, `button[role='combobox']`, etc. - Fix button styles within the user chat bubble edit state and the settings dialog to ensure consistent and accessible color contrast. Changes summary: - Enhanced the styling of various button types by improving the background and text color contrast for better visibility and accessibility. - Addressed issues with button styles within the user chat bubble edit state and the settings dialog, ensuring a consistent and visually appealing design.
…ve deprecated code in sticky header ChatGPT 3.5 context menu - Fix the rounded icon background and SVG color for the "ChatGPT 3.5" context menu, ensuring a consistent and visually appealing design. - Remove unused code related to the context menu to streamline the codebase and reduce potential bugs. Changes summary: - Resolved issues with the icon background and SVG color in the "ChatGPT 3.5" context menu, ensuring a cohesive design. - Removed deprecated code associated with the context menu, improving maintainability and reducing technical debt.
…t bubble - Fix the reply functionality in the prompt textarea field, ensuring it works as intended and adheres to the gpt4o design guidelines. - Improve the styling of replies within the user chat bubble, making them visually distinct and easily recognizable. Changes summary: - Addressed issues with the reply functionality in the prompt textarea field, ensuring it functions correctly and follows the gpt4o styling conventions. - Enhanced the styling of replies within user chat bubbles, making them stand out and improving the overall conversation flow.
- Fix the alignment of replies within the user chat bubble, ensuring they are positioned correctly at the right-hand side (end) of the message thread. Changes summary: - Resolved an issue where replies in the user chat bubble were not aligned correctly, causing a disruption in the conversation flow. Now, replies are properly aligned to the right, enhancing the user experience and improving the visual hierarchy of the chat interface.
…ed` notification cards - Add `Attach Files` SVG icon accent color in the message prompt, providing a visual indication of the file attachment feature. - Implement accent coloring to the `limit reached` notification cards that appear when hovering over the attach files button, enhancing the user experience. Changes summary: - Enhanced the `Attach Files` SVG icon with accent coloring, making it more noticeable and visually consistent with the theme. - Added accent colors to the `limit reached` notification cards that appear when hovering over the attach files button, providing a clearer indication of the available functionality.
- Fix the background color of `Search x sites` links on hover for all themes, ensuring a consistent and accessible design. - Add border-radius to each link item, improving the overall visual appearance and providing a smoother user experience. Changes summary: - Resolved an issue where the background color of `Search x sites` links on hover was inconsistent across different themes. - Enhanced the visual design of the links by adding border-radius, creating a more polished and modern appearance.
…ttons - Improve the `GPT-4.0 limit` notifications by adding appropriate "Get Plus" (primary button) and "New Chat" (secondary button) style. - Remove the outdated styling for the old "NEW CHAT" big buttons, which are no longer relevant with the new ChatGPT GPT-4.0 update (and it actually causes mess ad style overrides to those elements too) Changes summary: - Enhanced `GPT-4.0 limit` notifications by providing clear call-to-action buttons: "Get Plus" (primary) and "New Chat" (secondary). - Removed styling for the outdated "NEW CHAT" big buttons, ensuring a consistent and up-to-date user experience with the latest ChatGPT changes.
- Improve the "New Chat" card prompt by styling the pregenerated example buttons to match the theme, providing a seamless and visually appealing user experience. Changes summary: - Enhanced the pregerated-prompt card buttons in the "New Chat" layout to match the theme's styling, ensuring a cohesive and immersive user interface.
- Improve the style of the `GPT-4.0 limit reached` fixed element above the prompt textarea, ensuring a seamless and non-intrusive user experience. - Fix broken buttons by adding background colors to buttons that are not `btn-secondary`, `btn-danger`, and `btn-green`, providing a consistent and accessible design. Changes summary: - Enhanced the styling of the `GPT-4.0 limit reached` fixed element, making it visually appealing and non-obtrusive. - Addressed an issue with broken buttons by ensuring consistent background colors for buttons that do not have specific theme-related classes (`btn-secondary`, `btn-danger`, `btn-green`).
… class removing - Fix the user chat bubble style that was broken due to ChatGPT removing a specific targeting element. Ensure a consistent and visually appealing design for user messages. Changes summary: - Resolved an issue with the user chat bubble styling, which was affected by ChatGPT's removal of a targeting element. The updated styling ensures a seamless and consistent design for user messages, enhancing the conversation experience.
…r's bg shade - Improve the main sticky header's background color to match the chats container's background shade, creating a seamless and cohesive visual experience for users. Changes summary: - Updated the main sticky header's background color to match the chats container's background shade, providing a unified and aesthetically pleasing design.
…the page
- Improve the notification on the GPTs Store page ("GPTs will be coming to free users over the next few weeks. Stay tuned!") by ensuring it is visually prominent and easily noticeable by users.
Changes summary:
- Enhanced the notification on the GPTs Store page, making it more visually prominent and attention-grabbing. This ensures that users are aware of the upcoming availability of GPTs for free users.
…imit reached` elementa above `Attach Files` - Refactor the `[role='tooltip']` style to ensure its styling applies only to the intended elements, addressing an issue where it affected other elements like the "❓" button. Changes summary: - Improved the specificity of the `[role='tooltip']` styling to prevent unintended application to other elements, specifically the "❓" button. This ensures that the tooltip styling remains consistent and does not interfere with other UI components.
- Fix the gradient before the "Create Link" button in the "Share Link to Public" dialog by addressing the overriding caused by global styles. Ensure a consistent and visually appealing design. Changes summary: - Resolved an issue where the gradient before the "Create Link" button in the "Share Link to Public" dialog was affected by global styles, causing an inconsistent appearance. The updated styling ensures a seamless and visually appealing design for the dialog.
…hat` and y-center "Attach Files" icon - Apply the prompt textarea design to the temporary chat prompt message textarea, ensuring a consistent and familiar user experience. - Vertically enter the "Attach Files" icon within the message field, improving the overall layout and usability. Changes summary: - Enhanced design consistency by applying the prompt textarea styling to the temporary chat prompt message textarea. - Improved the alignment of the "Attach Files" icon within the message field, providing a more polished and user-friendly interface.
- Fix the "Terms of Service" and "Terms of Use" warning styles due to the new `bg-orange-600` class, ensuring a consistent and visually appealing design. Changes summary: - Updated the styling of "Terms of Service" and "Terms of Use" warnings to accommodate the new `bg-orange-600` class, providing a cohesive and accessible design that aligns with the updated theme.
…, tooltips with search links, markdown links in general - Fix the "Reply" button positioning within GPT chat bubbles, ensuring it is correctly aligned and visible. - Address the issue of search links wrapping to separate rows in GPT chat bubbles, ensuring a compact and readable layout. - Resolve broken styling for tooltips containing search links in GPT chat bubbles, ensuring a consistent and accessible design. - Enhance the styling of links in markdown to have an underlined style only if they are clickable and have a valid link, improving the visual distinction between regular text and interactive links. Changes summary: - Improved the positioning of the "Reply" button within GPT chat bubbles, ensuring better visibility and usability. - Resolved an issue where search links wrapped to separate rows in GPT chat bubbles, creating a more compact and readable layout. - Fixed styling issues with tooltips containing search links in GPT chat bubbles, ensuring a consistent and accessible design. - Enhanced the visual distinction of links in markdown by applying an underlined style only to clickable links with valid URLs, improving readability and user interaction.
…ius to attached image preview - Classic tooltips: Refactor the styling of classic tooltips to ensure a consistent and accessible design across the application. - Tooltip with searched links in GPT chat bubble: Improve the appearance and layout of tooltips containing searched links in GPT chat bubbles, ensuring a seamless user experience. - Tooltip for "Attach Files" button: Enhance the tooltip that appears when hovering over the "Attach Files" button in the prompt textarea, providing clear guidance to users. - Tooltip for closing attached images: Update the tooltip that appears when hovering over the "❌" button in attached images within the prompt textarea, ensuring a consistent and intuitive user interface. Changes summary: - Refactored classic tooltips to ensure consistent and accessible styling throughout the application. - Improved the design and layout of tooltips containing searched links in GPT chat bubbles. - Enhanced the tooltip for the "Attach Files" button in the prompt textarea, providing clearer guidance to users. - Updated the tooltip for closing attached images in the prompt textarea, ensuring a consistent and intuitive user experience. - Added border-radius to attached image previews in the prompt textarea, creating a polished and modern appearance.
… prompt textarea - Undo the centering of the "Attach Files" SVG icon and align it to the end (bottom) of the prompt textarea, ensuring better visibility, especially when there is more content or text. Changes summary: - Aligned the "Attach Files" SVG icon to the end (bottom) of the prompt textarea, improving its visibility, particularly when there is a significant amount of content or text in the textarea.
…buttons and related dialogs - Add better styling to the "Tell us more" example buttons that appear when clicking on the 👎 in GPT chat bubbles, creating a visually appealing and intuitive user experience. - Improve the design of the subsequent dialog that appears when clicking on "More" within the example buttons, ensuring a consistent and seamless interaction flow. - Add the `.agent-turn` class to the selector for special GPT chat width adjustments, ensuring that the "Tell us more" element within the same class benefits from the correct content width. Changes summary: - Enhanced the styling of "Tell us more" example buttons that appear after clicking on the 👎 in GPT chat bubbles, making them more visually appealing and intuitive. - Improved the design of the follow-up dialog triggered by clicking "More" within the example buttons, ensuring a seamless and consistent user experience. - Added the `.agent-turn` class to the selector for special GPT chat width adjustments, ensuring that the "Tell us more" element within the same class is properly formatted and does not affect content width.
…PTs product item - Fix the broken gradient in the dialog header when clicking on the GPTs product by addressing the conflicting styles with the "Create Link" dialog, which requires a different surface color variable (`--c-surface-2`) for the `.from-token-main-surface-primary` class. Changes summary: - Resolved an issue with broken gradients in dialog headers when interacting with the GPTs product, ensuring a consistent and visually appealing design. - Addressed the conflicting styles between dialog headers and the "Create Link" dialog, ensuring that each component uses the appropriate surface color variable (`--c-surface-3` and `--c-surface-2`, respectively) for a seamless user interface
… image-preview dialog - Improve the design of the preview image in the dialog by removing the unintended frame effect caused by dialog padding. - Add a small radius and border to the preview image for a polished look. - Apply the consistent GPThemes modal design to the black modal background for a unified user experience. Changes summary: - Removed strange frame effect from the preview image, ensuring a clean and focused display. - Added subtle radius and border to the image for improved visual appeal. - Applied consistent GPThemes modal styling to the black modal background for design harmony.
- Fix the "Attach files" SVG icon not respecting the accent color in the temporary chat message textarea. Changes summary: - Resolved an issue where the "Attach files" SVG icon (`📎`) did not reflect the chosen accent color in the temporary chat message textarea. Now, the icon will dynamically adapt to the selected theme's accent color.
…` gradient - Remove the `.from-token-main-surface-primary` gradient from the "Share link to public" dialog for a cleaner appearance. Changes summary: - Simplified the styling of the "Share link to public" dialog by removing the `.from-token-main-surface-primary` gradient, resulting in a more straightforward and elegant design.
…` prompt textarea - Fix the text and caret color in the "Temporary chat" feature to ensure legibility and consistency with the chosen theme. Changes summary: - Addressed an issue where the text and caret color in the "Temporary chat" textarea were inconsistent with the selected theme, impacting readability. Now, the text and caret colors will dynamically adjust based on the chosen theme's settings.
… users for `New Chat` big buttons and prompt textarea - Reintroduce the old new chat big buttons (pregenerated prompt examples) and prompt textarea styles to maintain compatibility for guests and users of the older ChatGPT 3.5 interface. Changes summary: - Restored the previous "New Chat" big buttons (pregenerated prompt examples) and prompt textarea designs to ensure a seamless experience for guests and users who have not yet transitioned to the latest ChatGPT updates.
- Improve the logic to apply the old 3.5 style only to the ChatGPT 3.5 UI, preventing conflicts with the new 4o UI. - Add chat bubbles for user messages in the old UI for a consistent conversation flow. - Center the "Attach file" icon within the prompt textarea for a more balanced layout. Changes summary: - Enhanced compatibility by ensuring that the old 3.5 style is exclusively applied to the ChatGPT 3.5 UI, avoiding any styling conflicts with the newer 4o interface. - Introduced chat bubbles for user messages in the old UI, providing a clearer conversation structure. - Improved the alignment of the "Attach file" icon within the prompt textarea for a more aesthetically pleasing composition.
…GPT-3.5 users for `New Chat` big buttons and prompt textarea - Reintroduce the old new chat big buttons (pregenerated prompt examples) and prompt textarea styles to maintain compatibility for guests and users of the older ChatGPT 3.5 interface. Changes summary: - Restored the previous "New Chat" big buttons (pregenerated prompt examples) and prompt textarea designs to ensure a seamless experience for guests and users who have not yet transitioned to the latest ChatGPT updates.
… UIs - Improve the logic to apply the old 3.5 style only to the ChatGPT 3.5 UI, preventing conflicts with the new 4o UI. - Add chat bubbles for user messages in the old UI for a consistent conversation flow. - Center the "Attach file" icon within the prompt textarea for a more balanced layout. Changes summary: - Enhanced compatibility by ensuring that the old 3.5 style is exclusively applied to the ChatGPT 3.5 UI, avoiding any styling conflicts with the newer 4o interface. - Introduced chat bubbles for user messages in the old UI, providing a clearer conversation structure. - Improved the alignment of the "Attach file" icon within the prompt textarea for a more aesthetically pleasing composition.
- Confirm that the "Attach file" icon is now correctly positioned within the prompt textarea for the old ChatGPT 3.5 UI. Changes summary: - Verified and ensured that the "Attach file" icon is properly aligned and positioned within the prompt textarea for users of the older ChatGPT 3.5 interface.
- Readd design logic for chat bubble icons, ensuring consistent and recognizable iconography. - Improve the user experience when editing messages by enhancing the visual indicators of the edit state. - Implement animations for the new chat "big" buttons, adding polish and interactivity. - Style the collapse sidebar button to match the overall gpt4o aesthetic. Changes summary: - Reintroduced design logic for chat bubble icons, ensuring a familiar and intuitive user interface. - Enhanced the visual indicators for the user chat bubble edit state, making it clearer when a message is being edited. - Added animations to the new chat "big" buttons, providing visual feedback and a more dynamic user experience. - Styled the collapse sidebar button to be consistent with the gpt4o design language
- Remove transitions for chat bubble hover footer icons as a temporary measure to troubleshoot the issue of the footer disappearing when hovering over "4o" text. Changes summary: - Removed transitions from chat bubble hover footer icons as a temporary troubleshooting step to identify the cause of the disappearing footer issue when hovering over "4o" text.
… detection logic - Enhance the detection logic for the old UI by utilizing additional selectors: `[data-testid='send-button']` and `[aria-label='Stop generating']`. - Address the issue of the old UI selector not being present while GPT is generating an answer, causing potential conflicts with the new UI. Changes summary: - Improved the reliability of detecting the old UI by incorporating additional selectors, `[data-testid='send-button']` and `[aria-label='Stop generating']`, to handle cases where the original selector is temporarily absent during GPT's answer generation. - Mitigated potential conflicts with the new UI by ensuring that the old UI detection logic remains robust and accurate, preventing unintended merging of design styles.
- Enhance the visual indicators of the edit state for user chat bubbles in the old UI, making it clearer when a message is being edited. Changes summary: - Improved the design of the edit state for user chat bubbles in the old UI, providing clearer visual cues to indicate when a message is being edited. This enhancement ensures that users can easily identify and differentiate between editable and non-editable messages.
- Enhance the visibility of the SVG icon within the `.btn-secondary` button by adding an accent fill color. - Specifically address the issue with the button used to collapse the sidebar in the old UI, ensuring the icon is visible and easily recognizable. Changes summary: - Improved the contrast and visibility of the SVG icon within the `.btn-secondary` button by adding an accent fill color. - Resolved an issue where the icon in the button for collapsing the sidebar in the old UI was difficult to see, enhancing the overall user experience and accessibility.
… for mobile devicess - Improve the overall design of chat bubbles in the old UI, with a focus on enhancing radius and spacing for a more polished appearance. - Optimize the chat bubble design for mobile devices, ensuring a seamless and intuitive user experience on smaller screens. Changes summary: - Enhanced the visual appeal of chat bubbles in the old UI by refining radius and spacing, creating a more harmonious and balanced layout. - Optimized the chat bubble design for mobile devices, ensuring a responsive and user-friendly experience on various screen sizes. These improvements maintain
…ctly positioned - Address an issue where the "Stop generating" button, which appears while GPT is generating an answer, is not positioned correctly within the prompt textarea in the old UI. Changes summary: - Resolved a positioning issue with the "Stop generating" button that appears during GPT's answer generation in the old UI. Now, the button is correctly positioned within the prompt textarea, providing a seamless user experience when interacting with GPT's responses.
…er chat bubble - Improve the styling of uploaded images within user chat bubbles in the old UI by adding a border radius and removing the strange top frame. Changes summary: - Enhanced the visual appearance of uploaded images in user chat bubbles by applying a border radius for a softer and more modern look. - Removed the unusual top frame from uploaded images, creating a cleaner and more aesthetically pleasing display. These changes improve the overall user experience and better showcase the uploaded content.
…x hat bubble styling issues for `Share` Page too - Find a new "unique" element for old UI detection to accurately apply the old style to the "Share" page, with focus on user chat bubble - Fix the issue of SVG icons not respecting accent colors on `.btn-secondary` buttons in the main sticky header of the old UI. Changes summary: - Improved the detection logic for the old UI by identifying a new "unique" element, ensuring accurate application of the old style to the "Share" page. - Addressed a styling issue where SVG icons within `.btn-secondary` buttons in the main sticky header were not adapting to the chosen accent color in the old UI. Now, these icons will dynamically reflect the selected theme's accent color.
…SVG icon in the prompt textarea - Remove the code responsible for positioning the "Attach Files" SVG icon in the prompt textarea for the old UI. Changes summary: - Simplified the codebase by removing unnecessary positioning code for the "Attach Files" SVG icon in the prompt textarea specific to the old ChatGPT 3.5 UI.
- Improve the design of attached images and files in the prompt textarea by removing the frame around images and adding a smooth background, border, and accent-colored text. Changes summary: - Enhanced the visual appearance of attached images by removing the frame and applying a subtle background and border for a cleaner look. - Added accent-colored text to attached files, making them stand out. - Introduced a smooth background and border to attached files, creating a cohesive and modern design.
- Improve the styling of GPT mentions in the prompt textarea when typing `@`. This is a new feature introduced in GPT-4o Changes summary: - Enhanced the visual appearance of GPT mentions in the prompt textarea when using the `@` symbol, providing a clear indication of the mentioned GPT entity.
- Apply GPThemes error message colors to the `.bg-token-surface-error` class to maintain consistent error message styling across the interface. - Address an issue where users receive an error message, "We are sorry, but you do not have access to GPT interactions," when attempting to interact with GPT features without the necessary access. Changes summary: - Ensured consistent error message styling by applying GPThemes error colors to the `.bg-token-surface-error` class, creating a unified visual indicator for errors. - Addressed a specific error message, "We are sorry, but you do not have access to GPT interactions," which appeared when users without the required access tried to engage with GPT-related features.
…tting it into separate files - Split the code within `_old-ui.scss` into separate files for each layout to enhance code organization and maintainability. Changes summary: - Improved code organization by dividing the contents of `_old-ui.scss` into individual files specific to each layout, making it easier to manage and update the old UI styles independently.
- Remove built code to facilitate easier merging with the master branch and maintain a clean repository. Changes summary: - Removed built code artifacts to streamline the merging process with the master branch, ensuring a tidy and well-maintained codebase.
itsmartashub
changed the title
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.
Resolves issue #16 while maintaining backwards compatibility to support users who have not yet transitioned to the new layout.