Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-24 01:18:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 59

Website: update website header & mobile navigation menu (#17718)

Browse source 
Closes: #17708

Changes:
- Updated the website's header navigation to match the latest Figma
wireframes.
- Updated the padding of the mobile navigation menu to keep padding
consistent when the menu is opened/closed
This commit is contained in:
Eric 2024-03-20 21:08:01 -05:00 committed by GitHub
parent 4f7ebe2fcb
commit 1226af3504
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 197 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

213
website/assets/styles/layout.less vendored
View file

@ -57,7 +57,9 @@ html, body {
[purpose='page-header'] {
max-width: 1200px;
padding: 19px 64px;
height: 80px;
color: @core-fleet-black;
[purpose='header-logo'] {
max-width: 118px;
img {
@ -99,23 +101,20 @@ html, body {
[purpose='mobile-nav-toggle-btn'] {
color: #192147;
cursor: unset;
cursor: pointer;
font-size: 16px;
text-decoration: none;
font-family: @navigation-font;
font-weight: @bold;
height: 100%;
padding-left: 24px;
user-select: none;
img {
margin-left: 8px;
width: 16px;
}
}
[purpose='mobile-nav'] {
[purpose='mobile-header-logo'] {
img {
height: 92px;
width: 162px;
}
}
position: fixed;
min-height: 100vh;
top: 0;
@ -124,52 +123,79 @@ html, body {
bottom: 0;
pointer-events: none;
background-color: #ffffff;
a:not(.btn) {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 4px;
font-weight: 700;
color: #212529;
cursor: pointer;
}
hr {
margin-top: 4px;
margin-bottom: 8px;
}
[purpose='mobile-nav-header'] {
padding: 19px 40px;
height: 80px;
}
[purpose='mobile-nav-container'] {
padding: 8px 40px 0px 40px;
}
[purpose='mobile-header-logo'] {
img {
height: 41px;
width: 118px;
}
}
[purpose='mobile-nav-close-btn'] {
font-size: 16px;
padding-left: 24px;
cursor: pointer;
text-decoration: none;
user-select: none;
img {
width: 16px;
}
}
[purpose='mobile-dropdown-toggle'] {
[purpose='mobile-dropdown-link'] {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 8px;
font-weight: 700;
cursor: pointer;
color: @core-fleet-black;
&:hover {
color: @core-vibrant-blue;
text-decoration: none;
}
}
[purpose='mobile-dropdown-toggle'] {
width: 100%;
padding: 8px 24px 8px 0px;
margin-bottom: 4px;
font-weight: 700;
cursor: pointer;
color: @core-fleet-black;
margin-bottom: 0px;
&[aria-expanded='true'] {
color: #6a67fe;
outline: none;
margin-bottom: 4px;
}
&:hover {
color: #6a67fe;
}
}
[purpose='mobile-nav-btn'] {
text-decoration: none;
font-weight: 700;
color: @core-fleet-black;
&:hover {
color: @core-vibrant-blue;
}
}
[purpose='mobile-dropdown'] {
[purpose='beta-label'] {
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
display: inline-block;
padding: 1px 6px;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-left: 8px;
vertical-align: middle;
cursor: pointer;
display: flex;
flex-direction: column;
&.collapse {
display: none;
}
&.collapse.show {
display: flex;
}
span {
display: inline-flex;
@ -192,16 +218,13 @@ html, body {
color: #6a67fe;
text-decoration: none;
}
[purpose='beta-label'] {
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-bottom: 0px;
[purpose='indented-mobile-links'] {
padding-left: 16px;
}
}
}
[purpose='header-nav'] {
[purpose='glass-header-btn'] {
color: #FFFFFF;
height: 32px;
@ -213,11 +236,12 @@ html, body {
border-radius: 4px;
background-color: @core-vibrant-red;
text-decoration: none;
white-space: nowrap;
}
[purpose='header-nav-btn'][aria-expanded='true'] {
font-weight: 700;
outline: none;
color: #192147;
color: @core-fleet-black-75;;
}
[purpose='header-nav-btn']:before {
display: block;
@ -227,11 +251,22 @@ html, body {
overflow: hidden;
visibility: hidden;
}
[purpose='log-out-button'] {
padding-left: 16px;
color: @core-fleet-black-75;
white-space: nowrap;
&:hover {
color: @core-fleet-black-75;
font-weight: 700;
text-decoration: none;
}
}
[purpose='header-nav-btn'] {
color: #192147;
color: @core-fleet-black-75;
font-weight: 400;
cursor: pointer;
display: inline-block;
padding: 6px 16px;
}
[purpose='header-nav-btn']:hover {
font-weight: 700;
@ -248,13 +283,9 @@ html, body {
}
}
}
[purpose='logout-btn'] {
color: @core-fleet-black;
text-decoration: none;
line-height: 23px;
}
&:hover {
font-weight: 700;
[purpose='gh-button'] {
margin-left: 24px;
margin-right: 24px;
}
[purpose='header-dropdown'] {
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.4);
@ -263,41 +294,32 @@ html, body {
color: @core-fleet-black;
font-weight: 400;
line-height: 20px;
&:not(:last-of-type) {
margin-bottom: 4px;
}
}
a:hover {
color: #6a67fe;
text-decoration: none;
}
[purpose='beta-label'] {
background: linear-gradient(90deg, #FF5C83 0%, #6A67FE 100%);
display: inline-block;
padding: 1px 6px;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
font-size: 11px;
line-height: 20px;
margin-left: 8px;
vertical-align: middle;
}
}
[purpose='admin-nav'] {
justify-content: center;
a {
margin-left: 30px;
margin-right: 30px;
color: @core-fleet-black-75;
&:hover {
color: @core-fleet-black;
}
}
}
}
[purpose='admin-nav'] {
justify-content: center;
a {
margin-left: 30px;
margin-right: 30px;
color: @core-fleet-black-75;
&:hover {
span {
color: @core-fleet-black;
font-weight: 600;
margin-right: 30px;
}
}
span {
color: @core-fleet-black;
font-weight: 600;
margin-right: 30px;
}
}
// Footer styles
@ -411,8 +433,6 @@ html, body {
}
}
body.detected-mobile {
// Above and beyond the media queries below, this selector (which relies on
// `parasails` automatically attaching this class, if appropriate) contains
@ -421,9 +441,9 @@ body.detected-mobile {
// devices (like the iPad) as well as handset devices (like the iPhone).
// …
}
@media (max-width: 992px) {
.homepage-cta-banner+.homepage-header-top {
top: 72px;
@media (max-width: 991px) {
[purpose='page-header'] {
padding: 19px 40px;
}
[purpose='page-wrap'] {
padding-bottom: 460px;
@ -432,13 +452,23 @@ body.detected-mobile {
padding: 64px 40px;
height: 460px;
}
[purpose='footer-socials'] {
margin-bottom: 32px;
}
}
@media (max-width: 767px) {
[purpose='page-header'] {
padding: 19px 32px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 32px;
}
[purpose='mobile-nav-container'] {
padding: 8px 32px 0px 32px;
}
}
}
[purpose='page-wrap'] {
padding-bottom: 701px;
}
@ -451,11 +481,6 @@ body.detected-mobile {
}
}
@media (max-width: 605px) {
.homepage-cta-banner + .homepage-header-top {
top: 92px;
}
}
@media (max-width: 575px) {
[purpose='page-wrap'] {
padding-bottom: 925px;
@ -463,6 +488,17 @@ body.detected-mobile {
[purpose='page-wrap'].reduced-footer-links {
padding-bottom: 97px;
}
[purpose='page-header'] {
padding: 19px 24px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 24px;
}
[purpose='mobile-nav-container'] {
padding: 8px 24px 0px 24px;
}
}
}
[purpose='reduced-nav-footer'] {
height: 97px;
}
@ -490,14 +526,17 @@ body.detected-mobile {
}
}
@media (max-width: 393px) {
.homepage-cta-banner + .homepage-header-top {
top: 112px;
}
}
@media (max-width: 330px) {
.homepage-cta-banner + .homepage-header-top {
top: 132px;
@media (max-width: 375px) {
[purpose='page-header'] {
padding: 19px 16px;
[purpose='mobile-nav'] {
[purpose='mobile-nav-header'] {
padding: 19px 16px;
}
[purpose='mobile-nav-container'] {
padding: 8px 16px 0px 16px;
}
}
}
}

145
website/views/layouts/layout.ejs vendored
View file

@ -145,147 +145,144 @@
<div class="header" purpose="header-container" data-nosnippet>
<div purpose="header-background">
<% if(!hideHeaderLinks) { %>
<div purpose="page-header" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
<div purpose="page-header" class="container-fluid d-flex justify-content-between align-items-center">
<a purpose="header-logo" href="/">
<img alt="Fleet logo" src="/images/logo-blue-118x41@2x.png"/>
</a>
<%/* Mobile Navigation menu */%>
<div class="d-flex d-lg-none align-items-center">
<button purpose="mobile-nav-toggle-btn" class="btn btn-link d-flex flex-row align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span class="mr-2">Menu</span>
<a purpose="mobile-nav-toggle-btn" class="d-flex flex-row align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<span>Menu</span>
<img class="align-self-center" alt="An icon indicating that interacting with this button will open the navigation menu." src="/images/icon-hamburger-blue-16x14@2x.png"/>
</button>
</a>
</div>
<div purpose="mobile-nav" class="collapse px-4 px-sm-5" id="navbarToggleExternalContent">
<div class="d-flex justify-content-between">
<div purpose="mobile-nav" class="collapse" id="navbarToggleExternalContent">
<div purpose="mobile-nav-header" class="d-flex justify-content-between align-items-center">
<a purpose="mobile-header-logo" href="/">
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="" class="mt-3"/>
<img purpose="mobile-nav-logo" alt="Fleet logo" src="/images/logo-blue-118x41@2x.png" />
</a>
<button purpose="mobile-nav-close-btn" class="btn btn-link d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<a purpose="mobile-nav-close-btn" class="d-flex align-items-center" data-toggle="collapse" data-target="#navbarToggleExternalContent">
<img alt="An 'X' icon indicating that this can be interacted with to close the navigation menu." src="/images/icon-close-16x16@2x.png"/>
</button>
</a>
</div>
<div id="mobileDropdowns" class="py-2">
<div purpose="mobile-nav-container" id="mobileDropdowns">
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleUseCases" aria-haspopup="true" aria-expanded="false">Platform</a>
<div class="d-block">
<div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
<a href="/endpoint-ops">Endpoint operations</a>
<a href="/device-management">Device management (MDM)</a>
<a href="/vulnerability-management">Vulnerability management</a>
<a href="/integrations">Integrations</a>
</div>
<div id="mobileNavbarToggleUseCases" purpose="mobile-dropdown" class="collapse align-items-start" data-parent="#mobileDropdowns">
<a purpose="mobile-dropdown-link" href="/endpoint-ops">Endpoint operations</a>
<a purpose="mobile-dropdown-link" href="/device-management">Device management (MDM)</a>
<a purpose="mobile-dropdown-link" href="/vulnerability-management">Vulnerability management</a>
<a purpose="mobile-dropdown-link" href="/integrations">Integrations</a>
</div>
<hr>
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleDocumentation" aria-haspopup="true" aria-expanded="false">Documentation</a>
<div class="d-block">
<div id="mobileNavbarToggleDocumentation" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a href="/docs">Docs</a>
<a href="/docs/rest-api">REST API</a>
<a href="/queries">Built-in queries</a>
<a href="/tables">Data tables</a>
<span>SUPPORT</span>
<a class="pl-3" href="/support">Chat</a>
<a class="pl-3" href="/docs/deploy/introduction">Hosting</a>
<a class="pl-3" href="/releases">Release notes</a>
<a class="pl-3" href="/customers/register">Get your license</a>
<a class="pl-3" href="/contribute">Contribute</a>
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleDocumentation" aria-haspopup="true" aria-expanded="false">Documentation</a>
<div id="mobileNavbarToggleDocumentation" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a purpose="mobile-dropdown-link" href="/docs">Docs</a>
<a purpose="mobile-dropdown-link" href="/docs/rest-api">REST API</a>
<a purpose="mobile-dropdown-link" href="/queries">Built-in queries</a>
<a purpose="mobile-dropdown-link" href="/tables">Data tables</a>
<span>SUPPORT</span>
<div purpose="indented-mobile-links">
<a purpose="mobile-dropdown-link" href="/support">Chat</a>
<a purpose="mobile-dropdown-link" href="/docs/deploy/introduction">Hosting</a>
<a purpose="mobile-dropdown-link" href="/releases">Release notes</a>
<a purpose="mobile-dropdown-link" href="/customers/register">Get your license</a>
<a purpose="mobile-dropdown-link" href="/contribute">Contribute</a>
</div>
</div>
<hr>
<a purpose="mobile-dropdown-toggle" class="d-flex align-items-center mr-4 collapsed" data-toggle="collapse" data-target="#mobileNavbarToggleCommunity">Community</a>
<div class="d-block">
<div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a href="/support">Chat</a>
<a href="/announcements">News</a>
<a href="/podcasts">Podcasts</a>
<a href="/articles">Articles</a>
<span>COMPANY</span>
<a class="pl-3" href="/handbook">Handbook</a>
<a class="pl-3" href="/logos">Logos & artwork</a>
<a class="pl-3" href="/handbook/company/why-this-way#why-open-source">Why open source?</a>
<div id="mobileNavbarToggleCommunity" purpose="mobile-dropdown" class="collapse" data-parent="#mobileDropdowns">
<a purpose="mobile-dropdown-link" href="/support">Chat</a>
<a purpose="mobile-dropdown-link" href="/announcements">News</a>
<a purpose="mobile-dropdown-link" href="/podcasts">Podcasts</a>
<a purpose="mobile-dropdown-link" href="/articles">Articles</a>
<span>COMPANY</span>
<div purpose="indented-mobile-links">
<a purpose="mobile-dropdown-link" href="/handbook">Handbook</a>
<a purpose="mobile-dropdown-link" href="/logos">Logos & artwork</a>
<a purpose="mobile-dropdown-link" href="/handbook/company/why-this-way#why-open-source">Why open source?</a>
</div>
</div>
<hr>
<a purpose="mobile-nav-btn" href="/pricing" class="d-flex align-items-center">Pricing</a>
<a purpose="mobile-dropdown-link" href="/pricing" class="d-flex align-items-center">Pricing</a>
<% if(_.has(me, 'id')) {%>
<hr>
<a purpose="mobile-nav-btn" href="/logout" class="d-flex mt-2 text-decoration-none">Log out</a>
<% }%>
<a purpose="glass-header-btn" style="padding: 4px 16px; line-height: 24px; width: 100px" class="btn btn-sm btn-primary align-items-center d-flex mt-4" href="/contact">Talk to us</a>
<a purpose="glass-header-btn" style="padding: 4px 16px; line-height: 24px; width: 100px" class="btn btn-sm btn-primary align-items-center d-flex mt-4" href="/contact">Talk to us</a>
</div>
</div>
<%/* Desktop Navigation bar */%>
<div purpose="header-nav" class="d-none d-lg-flex align-items-center justify-content-around">
<div purpose="dropdown-button" class="btn-group">
<a purpose="header-nav-btn" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Platform</a>
<a purpose="header-nav-btn" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'platform' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Platform</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/endpoint-ops">Endpoint operations</a>
<a class="dropdown-item mb-1" href="/device-management">Device management (MDM)</a>
<a class="dropdown-item mb-1" href="/vulnerability-management">Vulnerability management</a>
<a class="dropdown-item mb-1" href="/integrations">Integrations</a>
<a class="dropdown-item" href="/endpoint-ops">Endpoint operations</a>
<a class="dropdown-item" href="/device-management">Device management (MDM)</a>
<a class="dropdown-item" href="/vulnerability-management">Vulnerability management</a>
<a class="dropdown-item" href="/integrations">Integrations</a>
</div>
</div>
<div purpose="dropdown-button" class="btn-group">
<a purpose="header-nav-btn" button-text="Documentation" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'documentation' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documentation</a>
<a purpose="header-nav-btn" button-text="Documentation" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'documentation' ? 'current-section' : '' %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Documentation</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/docs">Docs</a>
<a class="dropdown-item mb-1" href="/docs/rest-api">REST API</a>
<a class="dropdown-item mb-1" href="/queries">Built-in queries</a>
<a class="dropdown-item mb-1" href="/tables">Data tables</a>
<a class="dropdown-item" href="/docs">Docs</a>
<a class="dropdown-item" href="/docs/rest-api">REST API</a>
<a class="dropdown-item" href="/queries">Built-in queries</a>
<a class="dropdown-item" href="/tables">Data tables</a>
<span class="muted dropdown-header">SUPPORT</span>
<a class="dropdown-item mb-1" href="/support">Chat</a>
<a class="dropdown-item mb-1" href="/docs/deploy/introduction">Hosting</a>
<a class="dropdown-item mb-1" href="/releases">Release notes</a>
<a class="dropdown-item mb-1" href="/customers/register">Get your license</a>
<a class="dropdown-item mb-1" href="/contribute">Contribute</a>
<a class="dropdown-item" href="/support">Chat</a>
<a class="dropdown-item" href="/docs/deploy/introduction">Hosting</a>
<a class="dropdown-item" href="/releases">Release notes</a>
<a class="dropdown-item" href="/customers/register">Get your license</a>
<a class="dropdown-item" href="/contribute">Contribute</a>
</div>
</div>
<div purpose="dropdown-button" class="btn-group">
<a purpose="header-nav-btn" button-text="Community" class="dropdown-toggle d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" data-toggle="dropdown">Community</a>
<a purpose="header-nav-btn" button-text="Community" class="dropdown-toggle align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'community' ? 'current-section' : '' %>" data-toggle="dropdown">Community</a>
<div purpose="header-dropdown" class="dropdown-menu">
<a class="dropdown-item mb-1" href="/support">Chat</a>
<a class="dropdown-item mb-1" href="/announcements">News</a>
<a class="dropdown-item mb-1" href="/podcasts">Podcasts</a>
<a class="dropdown-item mb-1" href="/articles">Articles</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/support">Chat</a>
<a class="dropdown-item" href="/announcements">News</a>
<a class="dropdown-item" href="/podcasts">Podcasts</a>
<a class="dropdown-item" href="/articles">Articles</a>
<span class="muted dropdown-header">COMPANY</span>
<a class="dropdown-item mb-1" href="/handbook">Handbook</a>
<a class="dropdown-item" href="/handbook">Handbook</a>
<a class="dropdown-item" href="/logos">Logos/artwork</a>
<a class="dropdown-item" href="/handbook/company/why-this-way#why-open-source">Why open source?</a>
</div>
</div>
<a purpose="header-nav-btn" button-text="Pricing" href="/pricing" class="d-inline-block align-items-center py-2 px-3 <%= typeof currentSection !== 'undefined' && currentSection === 'pricing' ? 'current-section' : '' %>" style="text-decoration: none; line-height: 23px;">Pricing</a>
<span class="d-flex align-items-center px-3">
<a purpose="header-nav-btn" button-text="Pricing" href="/pricing" class=" align-items-center <%= typeof currentSection !== 'undefined' && currentSection === 'pricing' ? 'current-section' : '' %>" style="text-decoration: none; line-height: 23px;">Pricing</a>
<span purpose="gh-button" class="d-flex align-items-center">
<iframe src="//ghbtns.com/github-btn.html?user=fleetdm&amp;repo=fleet&amp;type=watch&amp;count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
</span>
<a purpose="glass-header-btn" class="align-items-center d-flex" href="/contact">Talk to us</a>
<% if(_.has(me, 'id')) {%>
<a purpose="header-nav-btn" href="/logout" class="justify-content-end pl-4 py-2 text-decoration-none">Log out</a>
<a purpose="log-out-button" href="/logout" class="justify-content-end text-decoration-none">Log out</a>
<% }%>
</div>
</div>
<% } else {%>
<div purpose="page-header" class="container-fluid d-flex align-items-center justify-content-between pt-3 pb-3 px-3 px-md-4">
<div purpose="page-header" class="container-fluid d-flex align-items-center justify-content-between">
<a purpose="header-logo" href="/">
<img alt="Fleet logo" src="/images/logo-blue-118x41@2x.png"/>
</a>
<div purpose="header-nav">
<% if(_.has(me, 'id')) {%>
<a purpose="header-nav-btn" href="/logout" class="justify-content-end pl-4 py-2 text-decoration-none">Log out</a>
<a purpose="header-nav-btn" href="/logout" class="justify-content-end text-decoration-none">Log out</a>
<% }%>
</div>
</div>
<% } %>
<%if(me && me.isSuperAdmin && showAdminLinks) {%>
<div purpose="admin-nav" class="d-flex flex-row align-items-center px-5">
<div class=" justif-self-start">
<div purpose="admin-nav" class="d-flex flex-row align-items-center py-2 px-1">
<div class="justify-self-start">
<span>Admin pages</span>
</div>
<div class="d-flex flex-row align-self-end">
<a class="px-3 py-2" style="text-decoration: none; line-height: 23px;" href="/admin/generate-license">License generator</a>
<a class="px-3 py-2" style="text-decoration: none; line-height: 23px;" href="/admin/email-preview">HTML Email preview tool</a>
<a class="px-3 py-2" style="text-decoration: none; line-height: 23px;" href="/admin/sandbox-waitlist">Manage Fleet Sandbox waitlist</a>
<a style="text-decoration: none; line-height: 23px;" href="/admin/generate-license">License generator</a>
<a style="text-decoration: none; line-height: 23px;" href="/admin/email-preview">HTML Email preview tool</a>
<a style="text-decoration: none; line-height: 23px;" href="/admin/sandbox-waitlist">Manage Fleet Sandbox waitlist</a>
</div>
</div>
<%} %>