Fleet UI: Normalize team header styling (#25182)

frontend/components/MainContent/MainContent.tsx

@@ -1,12 +1,9 @@
 import React, { ReactNode, useContext } from "react";
 import classnames from "classnames";
-import { formatDistanceToNow } from "date-fns";
-import { hasLicenseExpired, willExpireWithinXDays } from "utilities/helpers";
+import { hasLicenseExpired } from "utilities/helpers";
 
-import SandboxExpiryMessage from "components/Sandbox/SandboxExpiryMessage";
 import AppleBMTermsMessage from "components/MDM/AppleBMTermsMessage";
 
-import SandboxGate from "components/Sandbox/SandboxGate";
 import { AppContext } from "context/app";
 import LicenseExpirationBanner from "components/LicenseExpirationBanner";
 import ApplePNCertRenewalMessage from "components/MDM/ApplePNCertRenewalMessage";
@@ -33,10 +30,8 @@ const MainContent = ({
 }: IMainContentProps): JSX.Element => {
   const classes = classnames(baseClass, className);
   const {
-    sandboxExpiry,
     config,
     isPremiumTier,
-    noSandboxHosts,
     isApplePnsExpired,
     isAppleBmExpired,
     isVppExpired,
@@ -46,11 +41,6 @@ const MainContent = ({
     willVppExpire,
   } = useContext(AppContext);
 
-  const sandboxExpiryTime =
-    sandboxExpiry === undefined
-      ? "..."
-      : formatDistanceToNow(new Date(sandboxExpiry));
-
   const renderAppWideBanner = () => {
     const isFleetLicenseExpired = hasLicenseExpired(
       config?.license.expiration || ""
@@ -73,24 +63,18 @@ const MainContent = ({
     }
 
     if (banner) {
-      return <div className={`${baseClass}__warning-banner`}>{banner}</div>;
+      return (
+        <div className={`${baseClass}--animation-disabled`}>
+          <div className={`${baseClass}__warning-banner`}>{banner}</div>
+        </div>
+      );
     }
 
     return null;
   };
   return (
     <div className={classes}>
-      <div className={`${baseClass}--animation-disabled`}>
-        {renderAppWideBanner()}
-        <SandboxGate
-          fallbackComponent={() => (
-            <SandboxExpiryMessage
-              expiry={sandboxExpiryTime}
-              noSandboxHosts={noSandboxHosts}
-            />
-          )}
-        />
-      </div>
+      {renderAppWideBanner()}
       {children}
     </div>
   );

frontend/pages/DashboardPage/_styles.scss

@@ -24,10 +24,7 @@
   }
 
   &__header {
-    height: 38px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    @include normalize-team-header;
     margin-bottom: $pad-large;
 
     .Select-control {

frontend/pages/ManageControlsPage/_styles.scss

@@ -1,9 +1,6 @@
 .manage-controls-page {
   &__header-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
+    @include normalize-team-header;
 
     .button-wrap {
       display: flex;

frontend/pages/SoftwarePage/SoftwareOSDetailsPage/_styles.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   gap: $pad-medium;
 
+  .team-dropdown-wrapper {
+    @include normalize-team-header;
+  }
+
   h2 {
     font-size: $small;
   }

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/_styles.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   gap: $pad-medium;
 
+  .team-dropdown-wrapper {
+    @include normalize-team-header;
+  }
+
   h2 {
     font-size: $small;
   }

frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/_styles.scss

@@ -4,6 +4,10 @@
   flex-direction: column;
   gap: $pad-medium;
 
+  .team-dropdown-wrapper {
+    @include normalize-team-header;
+  }
+
   h2 {
     font-size: $small;
   }

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/_styles.scss

@@ -2,6 +2,10 @@
   background-color: $ui-off-white;
   @include page;
 
+  .team-dropdown-wrapper {
+    @include normalize-team-header;
+  }
+
   .card {
     display: flex;
     flex-direction: column;

frontend/pages/SoftwarePage/_styles.scss

@@ -1,9 +1,6 @@
 .software-page {
   &__header-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
+    @include normalize-team-header;
 
     .button-wrap {
       display: flex;

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -1,10 +1,7 @@
 .manage-hosts {
   .header-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    @include normalize-team-header;
     margin-bottom: $pad-medium;
-    height: 38px;
 
     .button-wrap {
       display: flex;

frontend/pages/policies/ManagePoliciesPage/_styles.scss

@@ -1,9 +1,6 @@
 .manage-policies-page {
   &__header-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 38px;
+    @include normalize-team-header;
 
     .button-wrap {
       display: flex;

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -1,9 +1,6 @@
 .manage-queries-page {
   &__header-wrap {
-    height: 38px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+    @include normalize-team-header;
   }
 
   &__header {

frontend/styles/var/mixins.scss

@@ -25,6 +25,14 @@ $max-width: 2560px;
   }
 }
 
+// Used to normalize styling of team header wrapper on various pages
+@mixin normalize-team-header {
+  display: flex;
+  align-items: center;
+  height: 38px;
+  justify-content: space-between;
+}
+
 //  Used to keep the settings description sticky under the main nav and sub nav.
 // TODO: figure out how to calculate these values with variables. Will be tedious to change otherwise
 @mixin sticky-settings-description {