mirror of
https://github.com/fleetdm/fleet
synced 2026-04-21 21:47:20 +00:00
67c45d5417
## 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>
17 lines
306 B
SCSS
17 lines
306 B
SCSS
.auth-form-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
flex-grow: 1;
|
|
padding: $pad-medium 0;
|
|
gap: 2.5rem;
|
|
align-items: center;
|
|
|
|
&__logo {
|
|
width: 120px;
|
|
}
|
|
|
|
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
height: 100vh;
|
|
}
|
|
}
|