From 59d956df3ad7ed68c968b8f1dfba8c4e49faa4b0 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Thu, 7 Nov 2024 18:03:12 -0600
Subject: [PATCH] Website: Update hover state on articles sidebar CTA, fix
 alignment of newsletter banner (#23638)

Changes:
- Added a hover state to the swag request CTA on the device-management
page
- Made the entire sidebar cta on article pages clickable.
- Updated the alignment of the newsletter banner on the homepage.
---
 .../assets/js/pages/articles/basic-article.page.js  |  3 +++
 .../assets/styles/pages/articles/basic-article.less |  1 +
 website/assets/styles/pages/device-management.less  |  3 +++
 website/assets/styles/pages/homepage.less           |  5 +++++
 website/views/pages/articles/basic-article.ejs      |  2 +-
 website/views/pages/homepage.ejs                    | 13 +++++++++----
 6 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/website/assets/js/pages/articles/basic-article.page.js b/website/assets/js/pages/articles/basic-article.page.js
index e3fc6d7a81..0d70d984f4 100644
--- a/website/assets/js/pages/articles/basic-article.page.js
+++ b/website/assets/js/pages/articles/basic-article.page.js
@@ -75,6 +75,9 @@ parasails.registerPage('basic-article', {
         window.open('https://fleetdm.com/rss/'+articleCategory, '_blank');
       }
     },
+    clickGotoStart: function() {
+      this.goto('/register');
+    },
     handleScrollingInArticle: function () {
       let rightNavBar = document.querySelector('div[purpose="right-sidebar"]');
       let scrollTop = window.pageYOffset;
diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less
index 1beaf7f1b7..37028ceb3d 100644
--- a/website/assets/styles/pages/articles/basic-article.less
+++ b/website/assets/styles/pages/articles/basic-article.less
@@ -288,6 +288,7 @@
     background: #FFF;
     min-height: 290px;
     text-align: center;
+    cursor: pointer;
     margin-top: 24px;
     margin-bottom: 8px;
     max-width: 256px;
diff --git a/website/assets/styles/pages/device-management.less b/website/assets/styles/pages/device-management.less
index 7401aa4e03..8ff5b92377 100644
--- a/website/assets/styles/pages/device-management.less
+++ b/website/assets/styles/pages/device-management.less
@@ -136,6 +136,9 @@
     border-radius: 8px;
     border: 1px solid #E2E4EA;
     background: #F9FAFC;
+    &:hover {
+      box-shadow: 0px 0px 0px 3px rgba(0, 0, 0, 0.03);
+    }
     img {
       margin-right: 16px;
     }
diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less
index 12f09a1e93..f78273205c 100644
--- a/website/assets/styles/pages/homepage.less
+++ b/website/assets/styles/pages/homepage.less
@@ -762,6 +762,11 @@
     [purpose='newsletter-form-input']::placeholder {
       font-size: 14px;
     }
+    [parasails-component='ajax-button'] {
+      .button-loader {
+        margin: 0;
+      }
+    }
   }
   [purpose='video-modal'] {
     [purpose='modal-dialog'] {
diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs
index 936223128d..43af2b45c1 100644
--- a/website/views/pages/articles/basic-article.ejs
+++ b/website/views/pages/articles/basic-article.ejs
@@ -65,7 +65,7 @@
             <div purpose="edit-link">
               <a purpose="sidebar-link" :href="'https://github.com/fleetdm/fleet/edit/main/articles/'+thisPage.sectionRelativeRepoPath"> <img src="/images/icon-edit-16x16@2x.png" alt="Suggest an edit">Suggest an edit</a>
             </div>
-            <div purpose="sidebar-cta">
+            <div purpose="sidebar-cta" @click="clickGotoStart()">
               <a href="<% if(typeof me === 'undefined') {%>/register<% } else { %>/start<% } %>">
               <div purpose="cta-image"></div>
               <div purpose="cta-text">
diff --git a/website/views/pages/homepage.ejs b/website/views/pages/homepage.ejs
index 2f3e08c6bf..1cf45ea645 100644
--- a/website/views/pages/homepage.ejs
+++ b/website/views/pages/homepage.ejs
@@ -407,11 +407,16 @@
   <parallax-city></parallax-city>
   <div purpose="homepage-content" class="container py-4 my-0 my-md-2">
     <div purpose="newsletter-banner">
-       <div class="d-flex flex-md-row flex-column justify-content-between">
+       <div class="d-flex flex-md-row flex-column justify-content-between align-items-md-center">
          <div purpose="newletter-form-text" class="d-flex flex-row align-items-center">
-           <p v-if="formErrors.emailAddress || cloudError" class="text-danger" focus-first>Please enter a valid work email</p>
-           <p v-else-if="cloudSuccess">Thanks for subscribing!</p>
-           <p v-else><strong>Curious?</strong> Get product updates and news</p>
+            <p v-if="formErrors.emailAddress || cloudError" class="text-danger" focus-first>
+              Please enter a valid work email
+            </p>
+            <p v-else-if="cloudSuccess">
+              Thanks for subscribing!</p>
+            <p v-else>
+              <strong>Curious?</strong> Get product updates and news
+            </p>
          </div>
          <ajax-form class="d-flex flex-md-row flex-column" action="createOrUpdateOneNewsletterSubscription" :form-errors.sync="formErrors" :form-data="formData" :form-rules="formRules" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedNewsletterForm()">
            <div class="d-flex flex-column w-100">