Fixes to new pack page (#857)

- Fix "Query pack title" and "Description" input fields so they fill the full width of their container - Replace "New Pack" with "New pack" in the page header (sentence casing) - Input titles should have the font weight set to $bold - Remove the folder icon from the title - Remove bold sections from paragraphs including the "(interval = 3600s)," "targets," "individual hosts," and "labels." - Change bullet and link colors to $fleet-core-vibrant-blue - Replace differential and snapshot kolidecons with png images included in the Figma page.
2021-05-25 17:03:03 -04:00
parent a6e921c7b8
commit 09cd3622da
7 changed files with 55 additions and 36 deletions
@@ -68,7 +68,7 @@ class SelectTargetsInput extends Component {
        onOpen={onOpen}
        onFocus={onFocus}
        onInputChange={handleInputChange}
-        placeholder="Label Name, Host Name, IP Address, etc."
+        placeholder="Label name, host name, IP address, etc."
        resetValue={[]}
        scrollMenuIntoView={false}
        tabSelectsValue={false}
@@ -40,7 +40,7 @@ class PackForm extends Component {

    return (
      <form className={packFormClass} onSubmit={handleSubmit}>
-        <h1>New Pack</h1>
+        <h1>New pack</h1>
        {baseError && <div className="form__base-error">{baseError}</div>}
        <InputField
          {...fields.name}
@@ -52,7 +52,7 @@ class PackForm extends Component {
          {...fields.description}
          inputWrapperClass={`${baseClass}__pack-description`}
          label="Query pack description"
-          placeholder="Add a description of your pack"
+          placeholder="Add a description of your query"
          type="textarea"
        />
        <div className={`${baseClass}__pack-targets`}>
@@ -3,15 +3,25 @@
    margin: 0 0 20px;
  }

+  label {
+    font-weight: $bold;
+  }
+
  &__pack-title {
    .input-field {
-      width: 50%;
+      width: 100%;
    }
  }

  &__pack-description {
    .input-field {
-      width: 75%;
+      width: 100%;
+    }
+  }
+
+  &__pack-targets {
+    .target-select__label {
+      font-weight: $bold;
    }
  }

@@ -1,53 +1,49 @@
 import React from "react";

-import KolideIcon from "components/icons/KolideIcon";
 import SecondarySidePanelContainer from "../SecondarySidePanelContainer";
+import DifferentialIcon from "../../../../assets/images/icon-plus-minus-black-16x16@2x.png";
+import SnapshotIcon from "../../../../assets/images/icon-snapshot-black-16x14@2x.png";

 const baseClass = "pack-info-side-panel";

 const PackInfoSidePanel = () => {
  return (
    <SecondarySidePanelContainer className={baseClass}>
-      <h3 className={`${baseClass}__title`}>
-        <KolideIcon name="packs" />
-        &nbsp; What&apos;s a query pack?
-      </h3>
+      <h3 className={`${baseClass}__title`}>What&apos;s a query pack?</h3>
      <p>
-        Osquery supports grouping of queries (called <b>query packs</b>) which
-        run on a scheduled basis and log the results to a configurable
-        destination.
+        Osquery supports grouping of queries (called query packs) which run on a
+        scheduled basis and log the results to a configurable destination.
      </p>
      <p>
        Query Packs are useful for monitoring specific attributes of hosts over
        time and can be used for alerting and incident response investigations.
-        By default, queries added to packs run every hour (
-        <b>interval = 3600s</b>).
+        By default, queries added to packs run every hour (interval = 3600s).
      </p>

      <p>Queries can be run in two modes:</p>

      <dl>
        <dt>
-          <KolideIcon name="plus-minus" /> <span>Differential</span>
+          <img src={DifferentialIcon} alt="plus-minus" />
+          <span>Differential</span>
        </dt>
-        <dd>Only record data that has changed.</dd>

        <dt>
-          <KolideIcon name="camera" /> <span>Snapshot</span>
+          <img src={SnapshotIcon} alt="snapshot" />
+          <span>Snapshot</span>
        </dt>
-        <dd>Record full query result each time.</dd>
      </dl>

      <h4 className={`${baseClass}__subtitle`}>Where do I find results?</h4>
      <p>
-        Packs are distributed to specified <b>targets</b>. Targets may be{" "}
-        <b>individual hosts</b> or groups of hosts called <b>labels.</b>
+        Packs are distributed to specified targets. Targets may be individual
+        hosts or groups of hosts called labels.
      </p>
      <p>
        The results of queries run via query packs are stored in log files for
-        your convenience. We recommend forwarding this logs to a log aggregation
-        tool or other actionable tool for further analysis. These logs can be
-        found in the following locations:
+        your convenience. We recommend forwarding these logs to a log
+        aggregation tool or other actionable tool for further analysis. These
+        logs can be found in the following locations:
      </p>
      <ul>
        <li>
@@ -12,15 +12,18 @@
    color: $core-fleet-black;
    border-bottom: 1px solid $ui-fleet-blue-15;
    padding-bottom: 8px;
-    margin: 0 0 $pad-xsmall;
+    margin: 0 0 7px;
  }

  &__subtitle {
    font-size: $small;
-    font-weight: $regular;
+    font-weight: $bold;
    color: $core-fleet-black;
-    margin: 0 0 10px;
-    padding-top: 15px;
+  }
+
+  a {
+    color: $core-vibrant-blue;
+    text-decoration: none;
  }

  p,
@@ -29,15 +32,30 @@
    color: $core-fleet-black;
  }

+  p {
+    margin: 24px 0 24px 0;
+  }
+
+  ul {
+    margin-left: 16px;
+    padding-left: 0px;
+  }
+
+  li::marker {
+    color: $core-vibrant-blue;
+  }
+
  dl {
    dt {
      font-weight: $bold;
      font-size: $x-small;
      color: $core-fleet-black;
+      margin-bottom: 24px;

-      .kolidecon {
-        font-size: $medium;
-        margin-right: 5px;
+      img {
+        height: 16px;
+        width: auto;
+        margin-right: 8px;
      }

      span {
@@ -45,10 +63,5 @@
      }
    }

-    dd {
-      font-size: 13px;
-      color: $core-fleet-black;
-      margin-left: 30px;
-    }
  }
 }