UI - 2 small fixes (#14935)

- 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>

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>

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;
     }

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}

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>