Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor and fix styling for all [role="dialog"] elements #95

Closed
5 tasks done
itsmartashub opened this issue Dec 20, 2024 · 0 comments
Closed
5 tasks done

Refactor and fix styling for all [role="dialog"] elements #95

itsmartashub opened this issue Dec 20, 2024 · 0 comments
Assignees
@itsmartashub
Labels
Status: Already Implemented A proposal which has already been implemented before

Comments

@itsmartashub
Copy link
Owner

itsmartashub commented Dec 20, 2024 •
edited
Loading

OpenAI's recent changes have modified the implementation of various UI elements to use [role="dialog"] and popover. This affects:

  • Menu and submenu components
  • Dialog windows
  • Popup notifications
  • Command palette interface ("/", "@" mentions)
  • Search popup menu, etc

Current Issues

  • Inconsistent Styling: Existing CSS for [role="dialog"] no longer appropriately styles these elements since OpenAI moved various components to use this role
  • Prompt Commands Code Scope: Command palette features ("/", "@" mentions) and search popup have been moved outside the prompt field in the background (code stucture)
  • Empty Dialog Styling: Empty dialogs are receiving unwanted styling and excessive padding which creates unnecessary circular styling around the prompt textarea

Risks

  • Changes to dialog styling might affect other legitimate [role="dialog"] elements that should retain current styling
  • Need to ensure backward compatibility with existing dialog implementations

Tasks

  • Audit all current uses of [role="dialog"] in the application
  • Create new CSS selectors to differentiate between different types of dialogs (modal dialogs vs radix dialogs)
  • Revert the style to all the /, @, autocomplete suggestion list etc
  • Test changes across all affected components
  • Verify no regression in existing dialog functionality
@itsmartashub itsmartashub added To Fix Status: WIP Work In Progress labels Dec 20, 2024
@itsmartashub itsmartashub self-assigned this Dec 20, 2024
itsmartashub added a commit that referenced this issue Dec 20, 2024
@itsmartashub
fix(dialogs): prevent styling of empty [role="dialog"] elements (#95)
9c403d7 
- Ensure styling is not applied to empty elements with `[role="dialog"]`, which caused them to appear as random circles with huge padding (e.g., around the prompt field)

Changes summary:
    - Fixed the issue where empty elements with `[role="dialog"]` were styled incorrectly, causing them to appear as random circles, such as around the prompt field.
itsmartashub added a commit that referenced this issue Dec 20, 2024
@itsmartashub
refactor(dialogs): Rewrite all dialogs and scope modal dialogs (#95)
160af00 
- Rewrote all dialogs to improve code structure and maintainability
- Scoped modal dialogs to differentiate them from other radix dialogs
- Ensured consistent styling and behavior across all dialog types

Changes summary:
    - Refactored all dialogs to improve code organization and maintainability.
    - Scoped modal dialogs to differentiate them from other radix dialogs.
itsmartashub added a commit that referenced this issue Dec 20, 2024
@itsmartashub
fix(prompt-field): Style issue in autocomplete suggestion list (#95)
7901de6 
- Fix broken styling of autocomplete suggestion list when typing in prompt field
- Update styles to accommodate recent OpenAI changes

Changes summary:
    - Resolved styling issue in autocomplete suggestion list while typing in the prompt field due to recent OpenAI updates.
itsmartashub added a commit that referenced this issue Dec 20, 2024
@itsmartashub
fix(radix-dialog/@mentions): GPTs-mentions styling when type @ in p…
96a0989 
…rompt field (#95)

- Fix broken styling of GPTs-mentions when typing '@' in prompt field
- Update styles to accommodate recent OpenAI changes

Changes summary:
    - Fixed styling issue with GPTs-mentions when typing '@' in the prompt field due to recent OpenAI updates.
itsmartashub added a commit that referenced this issue Dec 20, 2024
@itsmartashub
feat(radix-dialogs): Add background to uncolored dialogs (#95)
fb4103d 
- Add a default background color to uncolored Radix dialogs to improve visual consistency (only those that have '.bg-token-main-surface-primary' class)

Changes summary:
    - Added a default background color to uncolored Radix dialogs to enhance visual consistency.
itsmartashub added a commit that referenced this issue Dec 21, 2024
@itsmartashub
fix(radix-dialog/canvas): Fix hover effect to items in Text style d…
1e1c950 
…ialog (#95)

- Ensure items in the "Text style" Radix dialog in Text Canvas have a hover effect

Changes summary:
    - Added hover effects to items in the "Text style" Radix dialog in Text Canvas for better user interaction.
@itsmartashub itsmartashub added Status: Already Implemented A proposal which has already been implemented before and removed To Fix Status: WIP Work In Progress labels Dec 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@itsmartashub itsmartashub

Labels
Status: Already Implemented A proposal which has already been implemented before
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@itsmartashub