Fleet UI: Update create team name suggestions (#8073)

changes/issue-7533-change-create-teams-suggestion

@@ -0,0 +1 @@
+* Create teams modal has better team name suggestions

frontend/components/InfoBanner/InfoBanner.tests.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { render, screen } from "@testing-library/react";
+
+import InfoBanner from "./InfoBanner";
+
+describe("InfoBanner - component", () => {
+  it("info banner renders text", () => {
+    render(<InfoBanner>Info banner testing text</InfoBanner>);
+
+    const title = screen.getByText("Info banner testing text");
+
+    expect(title).toBeInTheDocument();
+  });
+});

frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx

@@ -62,19 +62,14 @@ const CreateTeamModal = ({
           name="name"
           onChange={onInputChange}
           label="Team name"
-          placeholder="Team name"
+          placeholder="Workstations"
           value={name}
           error={errors.name}
         />
         <InfoBanner className={`${baseClass}__sandbox-info`}>
-          <p className={`${baseClass}__info-header`}>
-            Need to test queries and configurations before deploying?
-          </p>
-          <p>
-            A popular pattern is to end a team’s name with “- Sandbox”, then you
-            can use this to test new queries and configuration with staging
-            hosts or volunteers acting as canaries.
-          </p>
+          To organize your hosts, create a team, like
+          &ldquo;Workstations,&rdquo; &ldquo;Servers,&rdquo; or &ldquo;Servers
+          (canary)&rdquo;.
         </InfoBanner>
         <div className="modal-cta-wrap">
           <Button

frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/_styles.scss

@@ -3,7 +3,11 @@
     margin-top: $pad-medium;
   }
 
-  &__info-header {
-    font-weight: $bold;
+  .form-field {
+    margin: 38px 0 $pad-medium;
+  }
+
+  .modal-cta-wrap {
+    margin-top: $pad-xxlarge;
   }
 }