Work towards example design change

frontend/pages/policies/ManagePoliciesPage/components/ExamplePayload/ExamplePayload.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 import { syntaxHighlight } from "utilities/helpers";
 
-import CustomLink from "components/CustomLink";
 import { AppContext } from "context/app";
 import { IPolicyWebhookPreviewPayload } from "interfaces/policy";
 
@@ -55,14 +54,10 @@ const ExamplePayload = (): JSX.Element => {
   }
 
   return (
-    <div className={`${baseClass}__preview`}>
-      <div className={`${baseClass}__payload-request-preview`}>
-        <pre>POST https://server.com/example</pre>
-      </div>
-      <div className={`${baseClass}__payload-webhook-preview`}>
-        <pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
-      </div>
-    </div>
+    <>
+      <pre>POST https://server.com/example</pre>
+      <pre dangerouslySetInnerHTML={{ __html: syntaxHighlight(json) }} />
+    </>
   );
 };
 

frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/ExampleTicket.tsx

@@ -37,8 +37,8 @@ const ExampleTicket = ({
     );
 
   return (
-    <Card className={`${baseClass}`}>
-      <div className={`${baseClass}__example`}>{screenshot}</div>
+    <Card className={baseClass} color="gray">
+      {screenshot}
     </Card>
   );
 };

frontend/pages/policies/ManagePoliciesPage/components/ExampleTicket/_styles.scss

@@ -1,2 +1,9 @@
 .example-ticket {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &__screenshot {
+    max-width: 400px;
+  }
 }

frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/OtherWorkflowsModal.tsx

@@ -297,15 +297,17 @@ const OtherWorkflowsModal = ({
           placeholder="https://server.com/example"
           tooltip="Provide a URL to deliver a webhook request to."
         />
-        <RevealButton
-          isShowing={showExamplePayload}
-          className={baseClass}
-          hideText={"Hide example payload"}
-          showText={"Show example payload"}
-          caretPosition="after"
-          onClick={() => setShowExamplePayload(!showExamplePayload)}
-        />
-        {showExamplePayload && <ExamplePayload />}
+        <div className={`${baseClass}__example`}>
+          <RevealButton
+            isShowing={showExamplePayload}
+            className={baseClass}
+            hideText={"Hide example payload"}
+            showText={"Show example payload"}
+            caretPosition="after"
+            onClick={() => setShowExamplePayload(!showExamplePayload)}
+          />
+          {showExamplePayload && <ExamplePayload />}
+        </div>
       </>
     );
   };
@@ -328,7 +330,7 @@ const OtherWorkflowsModal = ({
               "For each policy, Fleet will create a ticket with a list of the failing hosts."
             }
           />
-        </div>{" "}
+        </div>
         <RevealButton
           isShowing={showExampleTicket}
           className={baseClass}
@@ -429,11 +431,11 @@ const OtherWorkflowsModal = ({
               </>
             )}
           </div>
-          <p>
-            Want to learn more about how automations in Fleet work?{" "}
+          <p className={`${baseClass}__info`}>
+            The workflow will be triggered when hosts fail these policies.{" "}
             <CustomLink
               url="https://fleetdm.com/docs/using-fleet/automations"
-              text="Check out the Fleet documentation"
+              text="Learn more"
               newTab
             />
           </p>

frontend/pages/policies/ManagePoliciesPage/components/OtherWorkflowsModal/_styles.scss

@@ -19,4 +19,8 @@
   &__no-integrations a {
     display: block;
   }
+
+  &__info {
+    font-size: $xx-small;
+  }
 }