From 13632eed926b337366e66ed4e20eadf0504054a3 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 3 Nov 2023 13:13:08 -0700
Subject: [PATCH] UI - 2 small fixes (#14935)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- restore circle to Apple icon on dashboard
<img width="602" alt="Screenshot 2023-11-03 at 12 49 03 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/ae2f0799-6284-430c-92c2-2ece4a8474a8">



- resolve DOM nesting issue from`p` > `div`
<img width="2548" alt="Screenshot 2023-11-03 at 12 50 25 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/fa6b2c84-b267-4160-b7ec-aff6cb5f9c73">


- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../ActivityFeed/ActivityItem/ActivityItem.tsx   |  6 +++---
 .../cards/ActivityFeed/ActivityItem/_styles.scss |  4 ++--
 .../cards/HostsSummary/HostsSummary.tsx          |  1 +
 .../DeleteHostModal/DeleteHostModal.tsx          | 16 +++++++++++-----
 4 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tsx
index 2acb4dcf07..e01cd5af88 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/ActivityItem.tsx
@@ -753,8 +753,8 @@ const ActivityItem = ({
         size="small"
         hasWhiteBackground
       />
-      <div className={`${baseClass}__details`}>
-        <p>
+      <div className={`${baseClass}__details-wrapper`}>
+        <div className={"activity-details"}>
           {indicatePremiumFeature && <PremiumFeatureIconWithTooltip />}
           <span className={`${baseClass}__details-topline`}>
             {activity.type === ActivityType.UserLoggedIn ? (
@@ -784,7 +784,7 @@ const ActivityItem = ({
           >
             {internationalTimeFormat(activityCreatedAt)}
           </ReactTooltip>
-        </p>
+        </div>
       </div>
       <div className={`${baseClass}__dash`} />
     </div>
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
index f6042f1980..f1cd27ed84 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityItem/_styles.scss
@@ -16,7 +16,7 @@
     grid-row-end: 3;
   }
 
-  &__details {
+  &__details-wrapper {
     grid-column-start: 3;
     grid-row-start: 1;
     grid-row-end: 3;
@@ -29,7 +29,7 @@
       padding-right: $pad-xsmall;
     }
 
-    p {
+    .activity-details {
       margin: 0;
       line-height: 16px;
     }
diff --git a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx
index 686be3cd8e..625f291964 100644
--- a/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx
+++ b/frontend/pages/DashboardPage/cards/HostsSummary/HostsSummary.tsx
@@ -51,6 +51,7 @@ const HostsSummary = ({
   const renderMacCount = (teamId?: number) => (
     <SummaryTile
       iconName="darwin"
+      circledIcon
       count={macCount}
       isLoading={isLoadingHostsSummary}
       showUI={showHostsUI}
diff --git a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
index 4f00b2c11a..46a2796d96 100644
--- a/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
+++ b/frontend/pages/hosts/components/DeleteHostModal/DeleteHostModal.tsx
@@ -38,11 +38,16 @@ const DeleteHostModal = ({
     return hostName;
   };
   const largeVolumeText = (): string => {
-    if (selectedHostIds && isAllMatchingHostsSelected && hostsCount && hostsCount >= 500) {
-      return " When deleting a large volume of hosts, it may take some time for this change to be reflected in the UI."
+    if (
+      selectedHostIds &&
+      isAllMatchingHostsSelected &&
+      hostsCount &&
+      hostsCount >= 500
+    ) {
+      return " When deleting a large volume of hosts, it may take some time for this change to be reflected in the UI.";
     }
-    return ""
-  }
+    return "";
+  };
 
   return (
     <Modal
@@ -53,7 +58,8 @@ const DeleteHostModal = ({
     >
       <form className={`${baseClass}__form`}>
         <p>
-          This action will delete <b>{hostText()}</b> from your Fleet instance.{largeVolumeText()}
+          This action will delete <b>{hostText()}</b> from your Fleet instance.
+          {largeVolumeText()}
         </p>
         <p>If the hosts come back online, they will automatically re-enroll.</p>
         <p>