[WIP] Styles

[dpikt]

Resolves #410

Author Checklist

• [ ] Add unit test(s)
• [ ] Update version in package.json
• [ ] Update documentation (if necessary)
• [ ] Add story to storybook (if necessary)
• [ ] Assign dev reviewer

[chawes13]

@marchwiany Do you have any context here as to what David was trying to accomplish? Is there any overlap with #459 ?

[mwislek]

@CodiumAI-Agent /review

[mwislek]

@CodiumAI-Agent /describe

[CodiumAI-Agent]

Title

Refactoring and Enhancement of Styles

---

Type

Enhancement

---

Description

This PR focuses on refactoring and enhancing the styles used in the project. The changes include:

• Refactoring the styles for form elements like fieldsets, labels, inputs, checkboxes, radio buttons, etc.
• Enhancing the styles for buttons, tooltips, color picker, date picker, etc.
• Updating the variables for buttons.
• Removing some prosci-specific styles.
• Deleting several unused stylesheets.
• Changing the imported stylesheet in the storybook configuration.

---

PR changes walkthrough

	Relevant files
Configuration changes	1 files config.js                                                                                                      .storybook/config.js The imported stylesheet in the storybook configuration has been changed from 'application.scss' to 'storybook.scss'. +1/-1
Enhancement	2 files _forms.scss                                                                                                  .storybook/styles/components/_forms.scss The styles for form elements like fieldsets, labels, inputs, checkboxes, radio buttons, etc. have been refactored and enhanced. New styles for elements like hidden input, radio buttons, error messages, etc. have been added. +368/-363 _buttons.scss                                                                                              .storybook/styles/settings/variables/_buttons.scss The variables for buttons have been updated to include new button types like primary-outline, secondary, secondary-outline, warn, and warn-outline. +7/-4
Miscellaneous	14 files main.scss                                                                                                      .storybook/styles/main.scss This is a new file added in the PR, but the content of the file is not provided in the diff. +18/-0 storybook.scss                                                                                            .storybook/styles/storybook.scss This is a new file added in the PR, but the content of the file is not provided in the diff. +8/-0 dependencies.scss                                                                                      .storybook/styles/dependencies.scss This is a new file added in the PR, but the content of the file is not provided in the diff. +4/-0 _buttons.scss                                                                                              .storybook/styles/components/_buttons.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +91/-67 _modal.scss                                                                                                  .storybook/styles/components/_modal.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +101/-94 _typography.scss                                                                                        .storybook/styles/base/_typography.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +54/-57 _layout.scss                                                                                                .storybook/styles/settings/mixins/_layout.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +32/-63 _pagination.scss                                                                                        .storybook/styles/components/_pagination.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +67/-35 _table.scss                                                                                                  .storybook/styles/components/_table.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +39/-40 _colors.scss                                                                                                .storybook/styles/settings/variables/_colors.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +19/-39 _flash.scss                                                                                                  .storybook/styles/components/_flash.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +61/-11 _typography.scss                                                                                        .storybook/styles/settings/mixins/_typography.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +18/-24 _typography.scss                                                                                        .storybook/styles/settings/variables/_typography.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +15/-12 _spinner.scss                                                                                              .storybook/styles/components/_spinner.scss This is a modified file in the PR, but the content of the changes is not provided in the diff. +6/-7

---

User description

Resolves #410

Author Checklist

• [ ] Add unit test(s)
• [ ] Update version in package.json
• [ ] Update documentation (if necessary)
• [ ] Add story to storybook (if necessary)
• [ ] Assign dev reviewer

[josiasds]

@CodiumAI-Agent /review

[CodiumAI-Agent]

PR Analysis

• 🎯 Main theme: Updating and refactoring styles

• 📝 PR summary: This PR focuses on updating and refactoring styles across the application. It includes changes to the SCSS files, with updates to color schemes, typography, form inputs, buttons, and more. It also involves the deletion of some unnecessary style files.

• 📌 Type of PR: Enhancement

• 🧪 Relevant tests added: No

• ⏱️ Estimated effort to review [1-5]: 4, because the PR involves a significant amount of changes to the styling of the application, which requires a thorough visual inspection to ensure that the changes have not negatively impacted the UI/UX.

• 🔒 Security concerns: No security concerns found

  PR Feedback

• 💡 General suggestions: The PR includes a large number of changes to the styling of the application. It would be beneficial to include screenshots or other visual aids in the PR to help reviewers understand the impact of the changes. Additionally, it would be helpful to have a more detailed PR description that explains the reasoning behind the changes and any specific areas that should be focused on during the review.

• 🤖 Code feedback:

  - **relevant file:** ``.storybook/styles/components/_forms.scss`` **suggestion:** It would be beneficial to separate the styles for different form components into their own SCSS files. This would make the code more modular and easier to maintain. [medium] **relevant line:** [.react-datepicker__input-container {](https://github.com/LaunchPadLab/lp-components/pull/425/files#diff-e2a12df273f4026fa0e72d1a5fb4084e2a484a8641e42f93d4f5410c8a7f83ccR523) - **relevant file:** ``.storybook/styles/components/_forms.scss`` **suggestion:** Consider using a variable for the color values instead of hardcoding them. This would make it easier to update the color scheme in the future and ensure consistency across the application. [important] **relevant line:** [&:hover {](https://github.com/LaunchPadLab/lp-components/pull/425/files#diff-e2a12df273f4026fa0e72d1a5fb4084e2a484a8641e42f93d4f5410c8a7f83ccR212) - **relevant file:** ``.storybook/styles/components/_forms.scss`` **suggestion:** It seems like there are some commented out lines of code. If these are not needed, they should be removed to keep the codebase clean. [medium] **relevant line:** [//background-image: url('../images/utility-icons/dropdown.svg');](https://github.com/LaunchPadLab/lp-components/pull/425/files#diff-e2a12df273f4026fa0e72d1a5fb4084e2a484a8641e42f93d4f5410c8a7f83ccR156) - **relevant file:** ``.storybook/styles/components/_forms.scss`` **suggestion:** It would be beneficial to use more descriptive class names. This would make the code easier to understand and maintain. [medium] **relevant line:** [.fileupload {](https://github.com/LaunchPadLab/lp-components/pull/425/files#diff-e2a12df273f4026fa0e72d1a5fb4084e2a484a8641e42f93d4f5410c8a7f83ccR463)

How to use

Instructions

> Tag me in a comment '@CodiumAI-Agent' and add one of the following commands: > **/review**: Request a review of your Pull Request. > **/describe**: Update the PR title and description based on the contents of the PR. > **/improve [--extended]**: Suggest code improvements. Extended mode provides a higher quality feedback. > **/ask \**: Ask a question about the PR. > **/update_changelog**: Update the changelog based on the PR's contents. > **/add_docs**: Generate docstring for new components introduced in the PR. > **/generate_labels**: Generate labels for the PR based on the PR's contents. > see the [tools guide](https://github.com/Codium-ai/pr-agent/blob/main/docs/TOOLS_GUIDE.md) for more details. >To edit any configuration parameter from the [configuration.toml](https://github.com/Codium-ai/pr-agent/blob/main/pr_agent/settings/configuration.toml), add --config_path=new_value. >For example: /review --pr_reviewer.extra_instructions="focus on the file: ..." >To list the possible configuration parameters, add a **/config** comment.