Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 18 Packages Projects Releases Wiki Activity

Fix enroll page and Add hosts modal styling issues (#48968)

Browse Source 
For the following bug:
- #48967

- [x] QA'd all new/changed functionality manually
This commit is contained in:
Noah Talerman
2026-07-14 17:32:04 -07:00
committed by GitHub
parent 044d568b7c
commit 5eb23cf07d
6 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
changes/fix-enroll-page-styling
+1
View File
@@ -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.
frontend/components/AddHostsModal/PlatformWrapper/AndroidPanel/_styles.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.android-panel {
&__enroll-link input {
font-family: "SourceCodePro", $monospace;
color: $core-fleet-blue;
color: $core-fleet-black;
}
}
frontend/components/AddHostsModal/PlatformWrapper/IosIpadosPanel/_styles.scss
+1 -1
View File
@@ -7,6 +7,6 @@
}
&__enroll-link input {
font-family: "SourceCodePro", $monospace;
color: $core-fleet-blue;
color: $core-fleet-black;
}
}
frontend/components/AddHostsModal/PlatformWrapper/_styles.scss
+1 -1
View File
@@ -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;
frontend/templates/enroll-ota.html
+30 -16
View File
@@ -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 @@
</div>
<div class="byod-info-banner">
<span class="byod-info-banner-icon" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" stroke="#515774"/>
<path d="M8 7v4M8 5v.5" stroke="#515774" stroke-linecap="round" stroke-width="1.5"/>
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 14.5C11.8137 14.5 14.5 11.8137 14.5 8.5C14.5 5.18629 11.8137 2.5 8.5 2.5C5.18629 2.5 2.5 5.18629 2.5 8.5C2.5 11.8137 5.18629 14.5 8.5 14.5ZM8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5ZM8.5 12.5C7.94772 12.5 7.5 12.0523 7.5 11.5L7.5 8.5C7.5 7.94772 7.94771 7.5 8.5 7.5C9.05228 7.5 9.5 7.94772 9.5 8.5V11.5C9.5 12.0523 9.05229 12.5 8.5 12.5ZM8.5 4.5C7.94772 4.5 7.5 4.94772 7.5 5.5C7.5 6.05228 7.94772 6.5 8.5 6.5C9.05229 6.5 9.5 6.05228 9.5 5.5C9.5 4.94772 9.05228 4.5 8.5 4.5Z" fill="#515774"/>
</svg>
</span>
<span class="byod-info-banner-text">
<span data-byod-content="personal" hidden>Your organization can only remotely remove work data and settings. They cannot wipe your device or lock you out.</span>
<span data-byod-content="personal" hidden>Your organization can only remotely remove work data and settings. They cannot wipe your device or lock you out. <a class="byod-learn-more" href="https://fleetdm.com/learn-more-about/byod-transparency" target="_blank" rel="noopener noreferrer">Learn more<svg class="byod-learn-more-icon" width="9" height="9" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="8" height="8" x="1" y="1" fill="none" stroke="currentColor" rx="2"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 3.333h2.667m0 0V6m0-2.667L3.333 6.668"/></svg></a></span>
<span data-byod-content="company">Your organization can see and delete all device information.</span>
</span>
</div>
@@ -441,13 +456,12 @@
</div>
<div class="byod-info-banner">
<span class="byod-info-banner-icon" aria-hidden="true">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="8" cy="8" r="7.5" stroke="#515774"/>
<path d="M8 7v4M8 5v.5" stroke="#515774" stroke-linecap="round" stroke-width="1.5"/>
<svg width="16" height="16" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 14.5C11.8137 14.5 14.5 11.8137 14.5 8.5C14.5 5.18629 11.8137 2.5 8.5 2.5C5.18629 2.5 2.5 5.18629 2.5 8.5C2.5 11.8137 5.18629 14.5 8.5 14.5ZM8.5 16.5C12.9183 16.5 16.5 12.9183 16.5 8.5C16.5 4.08172 12.9183 0.5 8.5 0.5C4.08172 0.5 0.5 4.08172 0.5 8.5C0.5 12.9183 4.08172 16.5 8.5 16.5ZM8.5 12.5C7.94772 12.5 7.5 12.0523 7.5 11.5L7.5 8.5C7.5 7.94772 7.94771 7.5 8.5 7.5C9.05228 7.5 9.5 7.94772 9.5 8.5V11.5C9.5 12.0523 9.05229 12.5 8.5 12.5ZM8.5 4.5C7.94772 4.5 7.5 4.94772 7.5 5.5C7.5 6.05228 7.94772 6.5 8.5 6.5C9.05229 6.5 9.5 6.05228 9.5 5.5C9.5 4.94772 9.05228 4.5 8.5 4.5Z" fill="#515774"/>
</svg>
</span>
<span class="byod-info-banner-text">
<span data-byod-content="personal" hidden>Your organization can only remotely remove work data and settings. They cannot wipe your device or lock you out.</span>
<span data-byod-content="personal" hidden>Your organization can only remotely remove work data and settings. They cannot wipe your device or lock you out. <a class="byod-learn-more" href="https://fleetdm.com/learn-more-about/byod-transparency" target="_blank" rel="noopener noreferrer">Learn more<svg class="byod-learn-more-icon" width="9" height="9" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><rect width="8" height="8" x="1" y="1" fill="none" stroke="currentColor" rx="2"/><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M4 3.333h2.667m0 0V6m0-2.667L3.333 6.668"/></svg></a></span>
<span data-byod-content="company">Your organization can see and delete all device information.</span>
</span>
</div>
website/config/routes.js
Vendored
+1
View File
@@ -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',