From 5eb23cf07de7dffbd3c9c111ccab7da40e646feb Mon Sep 17 00:00:00 2001 From: Noah Talerman <47070608+noahtalerman@users.noreply.github.com> Date: Tue, 14 Jul 2026 17:32:04 -0700 Subject: [PATCH] Fix enroll page and Add hosts modal styling issues (#48968) For the following bug: - #48967 - [x] QA'd all new/changed functionality manually --- changes/fix-enroll-page-styling | 1 + .../PlatformWrapper/AndroidPanel/_styles.scss | 2 +- .../IosIpadosPanel/_styles.scss | 2 +- .../PlatformWrapper/_styles.scss | 2 +- frontend/templates/enroll-ota.html | 46 ++++++++++++------- website/config/routes.js | 1 + 6 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 changes/fix-enroll-page-styling diff --git a/changes/fix-enroll-page-styling b/changes/fix-enroll-page-styling new file mode 100644 index 0000000000..35e5409be4 --- /dev/null +++ b/changes/fix-enroll-page-styling @@ -0,0 +1 @@ +- Fixed several styling issues on the end user enrollment page (BYOD info banner icon, active tab color, banner border, uneven QR code spacing) and added a "Learn more" link to the BYOD info banner. Also fixed enroll secret text incorrectly rendering in blue instead of black in the Add hosts modal. diff --git a/frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/_styles.scss b/frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/_styles.scss index 795d9bf5f7..685586a527 100644 --- a/frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/_styles.scss +++ b/frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/_styles.scss @@ -1,6 +1,6 @@ .android-panel { &__enroll-link input { font-family: "SourceCodePro", $monospace; - color: $core-fleet-blue; + color: $core-fleet-black; } } diff --git a/frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/_styles.scss b/frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/_styles.scss index 1777418509..ec59ebd3c9 100644 --- a/frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/_styles.scss +++ b/frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/_styles.scss @@ -7,6 +7,6 @@ } &__enroll-link input { font-family: "SourceCodePro", $monospace; - color: $core-fleet-blue; + color: $core-fleet-black; } } diff --git a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss index 76d77bbf39..baa763d113 100644 --- a/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss +++ b/frontend/components/AddHostsModal/PlatformWrapper/_styles.scss @@ -16,7 +16,7 @@ &__textarea { font-family: "SourceCodePro", $monospace; - color: $core-fleet-blue; + color: $core-fleet-black; line-height: $line-height; line-break: anywhere; padding: 12px $pad-xlarge 12px $pad-medium; diff --git a/frontend/templates/enroll-ota.html b/frontend/templates/enroll-ota.html index 6bd3b5807b..3acb0c3834 100644 --- a/frontend/templates/enroll-ota.html +++ b/frontend/templates/enroll-ota.html @@ -157,7 +157,7 @@ margin-top: 8px; } - .qr-container .qr-code { + .qr-container .qr-code:not(:first-child) { margin-top: 24px; } @@ -172,12 +172,6 @@ border-radius: 8px; } - .fully-managed-instructions .qr-container { - padding: 8px; - border-radius: 4px; - background-color: #fff; - } - .device-enroll-message { margin-top: 48px; display: flex; @@ -217,7 +211,7 @@ } .byod-tab.active { - background-color: #f1f0ff; + background-color: #f9fafc; color: #25234a; font-weight: 600; } @@ -228,6 +222,7 @@ gap: 16px; padding: 16px; background-color: #f9fafc; + border: 1px solid #e2e4ea; border-radius: 8px; font-size: 14px; margin-bottom: 24px; @@ -238,6 +233,27 @@ margin-top: 2px; } + .byod-learn-more { + color: #515774; + font-weight: 400; + text-decoration: underline; + text-underline-offset: 4px; + text-decoration-color: #c5c7d1; + border-bottom: none; + white-space: nowrap; + } + + .byod-learn-more:hover { + color: #192147; + text-decoration-color: #192147; + } + + .byod-learn-more-icon { + margin-left: 3px; + vertical-align: -1px; + color: inherit; + } + @media screen and (max-width: 1344px) and (pointer: coarse) { .device-instructions-content { gap: 24px; @@ -368,13 +384,12 @@
- + Your organization can see and delete all device information.
@@ -441,13 +456,12 @@
- + Your organization can see and delete all device information.
diff --git a/website/config/routes.js b/website/config/routes.js index d061e0eda2..2a6712aaf8 100644 --- a/website/config/routes.js +++ b/website/config/routes.js @@ -1310,6 +1310,7 @@ module.exports.routes = { 'GET /learn-more-about/okta-conditional-access': '/guides/okta-conditional-access-integration', 'GET /learn-more-about/organization-logo-size': '/docs/configuration/yaml-files#org-info', 'GET /learn-more-about/byod-hosts-vpp-install': 'https://github.com/fleetdm/fleet/issues/31138', + 'GET /learn-more-about/byod-transparency': '/better', 'GET /learn-more-about/install-google-play-apps': 'https://github.com/fleetdm/fleet/issues/25595', 'GET /learn-more-about/arch-linux-rolling-release': 'https://wiki.archlinux.org/title/Arch_Linux', 'GET /learn-more-about/google-play-store': 'https://play.google.com/store/apps',