Fleet UI: Improvements to Sandbox mode styling (#12195)

2023-06-07 12:00:02 -04:00
parent 1f66aaaf2d
commit 95e7b9eda3
5 changed files with 12 additions and 13 deletions
@@ -0,0 +1 @@
+- Improvements to styling in Sandbox mode
@@ -17,8 +17,11 @@ const PremiumFeatureMessage = ({ className }: IPremiumFeatureMessage) => {
        <Icon name="premium-feature" />
        <p>This feature is included in Fleet Premium.</p>
        <div className="external-link-and-icon">
-          <CustomLink url="https://fleetdm.com/upgrade" text="Learn more" />
-          <Icon name="external-link" />
+          <CustomLink
+            url="https://fleetdm.com/upgrade"
+            text="Learn more"
+            newTab
+          />
        </div>
      </div>
    </div>
@@ -10,6 +10,8 @@
  font-size: $x-small;
  color: $core-fleet-black;
  font-weight: $regular;
+  position: relative; // Position in front of settings sticky header space
+  z-index: 9; // Position in front of settings sticky header space

  p {
    margin: 0;
@@ -22,17 +22,6 @@
    }
  }

-  // These styles are here to make the sticky header and nav work correctly
-  // with the sandbox mode expiry message.
-  &.sandbox-mode {
-    h1 {
-      &::before {
-        height: 0;
-        top: 0;
-      }
-    }
-  }
-
  .component__tabs-wrapper {
    top: $pad-xxlarge; // for sticky
    z-index: 3;
@@ -108,6 +108,10 @@
        }
      }
    }
+
+    .empty-table__container {
+      max-width: 465px; // Fixes wider font causing orphaned word on all teams empty state
+    }
  }

  .no-team-schedule {