## Addresses #15325
- Define shared global styles for forms (`form` and `.form`s) and
`.form-field`s
- Sweep through the app, updating each form from being locally styled to
first prioritizing the global styles and only defining local styles
where needed for custom behavior
- Remove lots of unnecessary nesting of elements
- Other small bug fixes and improvements
### Samples, before (L) | after (R):
**Save query modal**
**Edit query form**
**Add hosts modal**
## QA Plan:
@xpkoala here's the same list from the issue, freshly de-checked for you
to use if it's helpful:
* Please check error states of each field
#### Specified by issue:
##### In "Save query" modal:
- [ ] Reduce space between checkboxes and their help text to 8px/0.5rem
for the following fields:
- [ ] Observers can run
- [ ] Discard data
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Discard data
##### On "Edit query" page:
- [ ] Update the following checkbox labels to have normal font weight
(not bold):
- [ ] Observers can run
- [ ] Discard data
##### In "Add hosts" modal, for copy text fields:
- [ ] match typical form form field styles
- [ ] Adjust the positioning of the copy icon to keep it from being too
far down
##### Further locations to check
- [ ] ChangeEmailForm.jsx
- [ ] ChangePasswordForm.jsx
- [ ] ConfirmInviteForm.jsx
- [ ] ConfirmSSOInviteForm.jsx
- [ ] EnrollSecretModal.tsx
- [ ] ForgotPasswordForm.jsx
- [ ] LoginForm.tsx
- [ ] EditPackForm.tsx
- [ ] (New)PackForm.tsx
- [ ] AdminDetails.jsx
- [ ] ConfirmationPage.tsx
- [ ] FleetDetails.jsx
- [ ] OrgDetails.jsx
- [ ] ResetPasswordForm.tsx
- [ ] UserSettingsForm.jsx
- [ ] EditTeamModal.tsx
- [ ] IdpSection.tsx
- [ ] DeleteIntegrationModal.tsx
- [ ] IntegrationForm.tsx
- [ ] EndUserMigrationSection.tsx
- [ ] RequestCSRModal.tsx
- [ ] Advanced.tsx
- [ ] Agents.tsx
- [ ] FleetDesktop.tsx
- [ ] HostStatusWebhook.tsx front
- [ ] Info.tsx
- [ ] Smtp.tsx
- [ ] Sso.tsx
- [ ] Statistics.tsx
- [ ] WebAddress.tsx
- [ ] CreateTeamModal.tsx
- [ ] DeleteTeamModal.tsx
- [ ] EditTeamModal.tsx
- [ ] AgentOptionsPage.tsx
- updated the layout of this page to align with the rest of the forms in
the UI – can easily revert if it's not what we want
- [ ] AddMemberModal.tsx
- [ ] RemoveMemberModal.tsx
- [ ] UserForm.tsx
- Used by both `EditUserModal` and `CreateUserModal`
- A few different conditions that cause different rendering behavior
- [ ] DeleteHostModal.tsx
- [ ] TransferHostModal.tsx
- [ ] LabelForm.tsx
- [ ] MacOSTargetForm.tsx
- [ ] WindowsTargetForm.tsx
- [ ] BootstrapPackageListltem.ts
- [ ] EndUserAuthForm.tsx
- [ ] PackQueryEditorModal.tsx
- [ ] PolicyForm.tsx
- [ ] SaveNewPolicyModal.tsx
- [ ] ConfirmSaveChangesModal.tsx
- [ ] Query automations modal
- [ ] Policy automations modal - addresses #16010
- [ ] SoftwareAutomationsModal
## Checklist for submitter
- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality
---------
Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
Co-authored-by: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
This PR brings the style changes made in the "Align Fleet UI colors with Figma components"
#615 and "Align Fleet UI with Figma (spacing and fonts)" #628 PRs into the master branch.
The goal of this PR was to insert new colors, remove legacy colors, and update only the styles accordingly. The Nunito Sans Italic font was also added.
Later PRs will include layout, copy, and style change to individual components. These later changes will more exactly resemble the current mockups.
- Replace uses of deprecated Bourbon helpers with raw CSS
- Add autoprefixer into the build chain to prefix the now removed helpers
This process was achieved by running through each of the deprecation warnings and using the following bash function to replace it in all files:
```
function bourbon-deprecate() {
grep -rl "@include $1" ./frontend --exclude-dir=.git | xargs sed -i '' -E "s/@include $1[(](.*)[)]/$1: \1/g"
}
```
For some helpers, this did not result in valid CSS, so manual modifications were made.
Closes#1189#1274
