From 69ee2bd4c1eeef8f941ce98372394614fcc63027 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 4 Oct 2022 13:35:15 -0400
Subject: [PATCH] Fleet UI: Update create team name suggestions (#8073)

---
 changes/issue-7533-change-create-teams-suggestion |  1 +
 .../components/InfoBanner/InfoBanner.tests.tsx    | 15 +++++++++++++++
 .../CreateTeamModal/CreateTeamModal.tsx           | 13 ++++---------
 .../components/CreateTeamModal/_styles.scss       |  8 ++++++--
 4 files changed, 26 insertions(+), 11 deletions(-)
 create mode 100644 changes/issue-7533-change-create-teams-suggestion
 create mode 100644 frontend/components/InfoBanner/InfoBanner.tests.tsx

diff --git a/changes/issue-7533-change-create-teams-suggestion b/changes/issue-7533-change-create-teams-suggestion
new file mode 100644
index 0000000000..8df1b8078a
--- /dev/null
+++ b/changes/issue-7533-change-create-teams-suggestion
@@ -0,0 +1 @@
+* Create teams modal has better team name suggestions
\ No newline at end of file
diff --git a/frontend/components/InfoBanner/InfoBanner.tests.tsx b/frontend/components/InfoBanner/InfoBanner.tests.tsx
new file mode 100644
index 0000000000..f73a01c773
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx b/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx
index 35fe247739..32129e4671 100644
--- a/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/CreateTeamModal.tsx
+++ b/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
diff --git a/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/_styles.scss b/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/_styles.scss
index a87b22f66e..18dbed6f65 100644
--- a/frontend/pages/admin/TeamManagementPage/components/CreateTeamModal/_styles.scss
+++ b/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;
   }
 }