From 1b131bd9db0f6ec309bf82d8a4971c25c4337d80 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 3 Jun 2021 16:50:13 -0400
Subject: [PATCH] Packs page: action icons (#935)

* Render packs page new icons: Enable, disable, delete, search
---
 assets/images/icon-action-check-16x15@2x.png  | Bin 0 -> 650 bytes
 assets/images/icon-action-close-16x15@2x.png  | Bin 0 -> 477 bytes
 assets/images/icon-action-delete-14x14@2x.png | Bin 0 -> 564 bytes
 .../buttons/DropdownButton/DropdownButton.jsx |   1 -
 .../ConfigurePackQueryForm.jsx                |   1 -
 .../admin/AppConfigForm/AppConfigForm.jsx     |   1 -
 .../TargetOption/TargetOption.jsx             |   1 -
 .../components/packs/PacksList/Row/Row.jsx    |   1 -
 .../HostSidePanel/HostSidePanel.jsx           |   1 -
 .../pages/packs/AllPacksPage/AllPacksPage.jsx |  20 ++++----
 .../pages/packs/AllPacksPage/_styles.scss     |  43 +++++++++++-------
 .../queries/ManageQueriesPage/_styles.scss    |   3 +-
 12 files changed, 38 insertions(+), 34 deletions(-)
 create mode 100644 assets/images/icon-action-check-16x15@2x.png
 create mode 100644 assets/images/icon-action-close-16x15@2x.png
 create mode 100644 assets/images/icon-action-delete-14x14@2x.png

diff --git a/assets/images/icon-action-check-16x15@2x.png b/assets/images/icon-action-check-16x15@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..3211203c47ca6e4dca7b5d3d538f80a69b48b025
GIT binary patch
literal 650
zcmV;50(Jd~P)<h;3K|Lk000e1NJLTq001BW0015c1^@s6O$r<-00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0v}04K~#7F?N(b-
z+b|TpS57m-AKd}$fbJm83K}-hl$nA_KbmF%C0Rk;AKNiAg&mX?Kv)6U0oeh3@eDp(
zWkPTq`4MnnhT;6k(zSGsq@yblz2lX^^a8MLR21+>KGz7`b_4Fbn1CPK_=*tw(YEpu
ze{>u^*WZd32orf63lpH1-9!$e-oxw{CP2tnREYnk7?{6B>xB!@<P02%yOw8yK*#ra
z5N#^dgv}<FZ!U#gyM31ZuiLen@zz3D;Q9i4W^x*s$Tdn-5E@&W9A6BfLCE|$sb3*0
z(6F&1<aJZ*HXPRC`(CJk5joH{2E}x{yXAgb|A`6h@58!MyauSA7w`e)A>YDJVR4ek
z-N0&R4Dl$Su^FC?TjcogetC(0MH5CG8CkCHcGV}!fl^G)`0S#7b4e9B(^aXQ${tRB
z+1?zIvaGt0?<I_RDyFMZPE0%iMe)5_ksIt#%2g3EY8aQbL~_uXkXO@8mneV<$A)-Z
z#43~emoylxaAO|wDFNjx<;V=q(?qZ?O(}N7j*jP*a+x=ZsZ`vs@7i)(?3f8eTmreQ
z&5_qtReA!Z@__4)j?D>~rJ83hrjr|PgPw?)L?k9!*Jh%8fMmM$dG|e4fF2AK>KP%c
zGk{iBrkh)Uh8L6$pwOap_Kp`=4m}fzcY){0;0*nGjjsgqrrA8me301oZH3AD&7g`@
k`yt=8eE&m_-tks&4>82+ZIIZEp8x;=07*qoM6N<$f=eVLE&u=k

literal 0
HcmV?d00001

diff --git a/assets/images/icon-action-close-16x15@2x.png b/assets/images/icon-action-close-16x15@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..e574603fc53d46a01677b0e46ad6b75881e0a1b5
GIT binary patch
literal 477
zcmV<30V4j1P)<h;3K|Lk000e1NJLTq001BW0015c1^@s6O$r<-00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0dh%1K~#7F?Uqqa
z!axv)XG-g{NAL)}ieA8#1RCH4FM{|Y5fWNX;8E}f9zmZ~9B0>%6f?3j%cK3DV7oit
z*LJ#DfG+<%C=Ct<?`4tYHUBJ$aK2dLEhJ=8(H#*vro4T8eO|6sXV1UqWYWSs%bz?v
z7$Qx_)vg9(#ue2BG-dcX|Gg-%5Nn76NMTWX#91Uf9DwiquxJTd0iL`O22~OwJcRD0
z`C<?FjE1`g5wC?p&BJ5w1`KfSgUw>ub0z_+L<&4App{64s{~>aKW&r-R|_1M5VVwV
zlYmyj0yhi9B&=|s42(g{=<jPlV6CT}$er%zuH{Xp9p9MH=PyJhqY}`=?GjOeV{m@w
zO(=rsQYG*dI5%9_h`2H9R0%v4zE7%z_!Ufya34Rme<g<rQtQ!>P%XfjS>Q^E8E6H<
zNyZ3|N$|<afmVRCO@T)wUO_9s2gp8m%nLsXUPN;Xye;9^0)*Xh%Qdf{OBW&EJa7qd
Tf%JpW00000NkvXXu0mjf4Kcl(

literal 0
HcmV?d00001

diff --git a/assets/images/icon-action-delete-14x14@2x.png b/assets/images/icon-action-delete-14x14@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..8e8817091857176e56ee1ce81b07011fe5ef92a0
GIT binary patch
literal 564
zcmV-40?Yl0P)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0m(^3K~#7Fy;j{#
z!$1tSuMsLw{7ewB02LE-gJy$@2WSfqNNmsv8u8KqLTWcC6R<*=AQ1}?9*_`f&N!k8
zO$@pdy7ZGyZG1j|KA+D%fGq=U6)#8Br;I{gv0s~tiS+gK&Rf{nu_7D}$yY=%5TvAF
zSuvoY!&dfocJVL_F*Vupzy?{?1*Mpe#?z=3mX4gQSO%vG)x+m|7O-e$GKFF%8T8og
zgH1Uh9<yS=#urHRY&(}jD>aKEOax(0#tWWU;DcMl9PX1M+^S^OS*HQA9R51oP$47|
z+1CgZYy+zGTKugf&FFj;xZWuuq_%go5r~UF8t53@fu^_WXj3505ILlIww8mxN$c_2
zyS1DizelOZa~O)XAdg27634vuy^QX?8Q;-)A=9YBeEcZUoRDtnWsi{>37du_L`c99
zxZEXRBy1SJC5^GgI3*;aH*f^b+{8%OG-OE8VMs~87ztt9XV^3Zp(aYe4fqKpZCUN`
zVvt!sCruEqwtCVqQ<r}x{8;K0tXx+oc^N5t4Pu{VT&S^IF}Bfo|0E>UN_lbJjVr7=
z5!4!+pX=0ZX<UgrEkfG<;EGQmJo^WdcH66W5BLI>!KV&LJ%&L50000<MNUMnLSTXh
Cs_6y*

literal 0
HcmV?d00001

diff --git a/frontend/components/buttons/DropdownButton/DropdownButton.jsx b/frontend/components/buttons/DropdownButton/DropdownButton.jsx
index db81ffe59b..6df26c13ed 100644
--- a/frontend/components/buttons/DropdownButton/DropdownButton.jsx
+++ b/frontend/components/buttons/DropdownButton/DropdownButton.jsx
@@ -4,7 +4,6 @@ import { noop } from "lodash";
 import classnames from "classnames";
 
 import ClickOutside from "components/ClickOutside";
-import KolideIcon from "components/icons/KolideIcon";
 import Button from "components/buttons/Button";
 
 const baseClass = "dropdown-button";
diff --git a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
index ab88edbd2b..4eba9b9f0c 100644
--- a/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
+++ b/frontend/components/forms/ConfigurePackQueryForm/ConfigurePackQueryForm.jsx
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { pull } from "lodash";
 
-import KolideIcon from "components/icons/KolideIcon";
 import Button from "components/buttons/Button";
 import Dropdown from "components/forms/fields/Dropdown";
 import Form from "components/forms/Form";
diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
index 7b007e9739..ad2b5a08b8 100644
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
@@ -8,7 +8,6 @@ import Form from "components/forms/Form";
 import formFieldInterface from "interfaces/form_field";
 import enrollSecretInterface from "interfaces/enroll_secret";
 import EnrollSecretTable from "components/config/EnrollSecretTable";
-import KolideIcon from "components/icons/KolideIcon";
 import InputField from "components/forms/fields/InputField";
 import OrgLogoIcon from "components/icons/OrgLogoIcon";
 import Slider from "components/forms/fields/Slider";
diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
index fff755afe4..ae553f97b7 100644
--- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/TargetOption.jsx
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 
-import KolideIcon from "components/icons/KolideIcon";
 import targetInterface from "interfaces/target";
 import TargetIcon from "./TargetIcon";
 
diff --git a/frontend/components/packs/PacksList/Row/Row.jsx b/frontend/components/packs/PacksList/Row/Row.jsx
index a7ae62b006..b9a33b3001 100644
--- a/frontend/components/packs/PacksList/Row/Row.jsx
+++ b/frontend/components/packs/PacksList/Row/Row.jsx
@@ -6,7 +6,6 @@ import moment from "moment";
 
 import Checkbox from "components/forms/fields/Checkbox";
 import ClickableTableRow from "components/ClickableTableRow";
-import KolideIcon from "components/icons/KolideIcon";
 import packInterface from "interfaces/pack";
 
 const baseClass = "packs-list-row";
diff --git a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
index 50231fc2f0..099c4a0d74 100644
--- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
+++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { filter } from "lodash";
 
-import KolideIcon from "components/icons/KolideIcon";
 import Button from "components/buttons/Button";
 import InputField from "components/forms/fields/InputField";
 import labelInterface from "interfaces/label";
diff --git a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
index 4d92200cb3..bafdc55588 100644
--- a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
+++ b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
@@ -6,7 +6,6 @@ import { push } from "react-router-redux";
 
 import Button from "components/buttons/Button";
 import entityGetter from "redux/utilities/entityGetter";
-import KolideIcon from "components/icons/KolideIcon";
 import InputField from "components/forms/fields/InputField";
 import Modal from "components/modals/Modal";
 import packActions from "redux/nodes/entities/packs/actions";
@@ -225,29 +224,29 @@ export class AllPacksPage extends Component {
 
       return (
         <div>
-          <p className={`${baseClass}__pack-count`}>
-            {checkedPackCount} {packText} Selected
-          </p>
+          <span className={`${baseClass}__pack-count`}>
+            <strong>{checkedPackCount}</strong> selected
+          </span>
           <Button
             className={`${btnClass} ${btnClass}--disable`}
             onClick={onBulkAction("disable")}
-            variant="unstyled"
+            variant="text-icon"
           >
-            <KolideIcon name="offline" /> Disable
+            Disable
           </Button>
           <Button
             className={`${btnClass} ${btnClass}--enable`}
             onClick={onBulkAction("enable")}
             variant="unstyled"
           >
-            <KolideIcon name="success-check" /> Enable
+            Enable
           </Button>
           <Button
             className={`${btnClass} ${btnClass}--delete`}
             onClick={onToggleModal}
             variant="unstyled"
           >
-            <KolideIcon name="trash" /> Delete
+            Delete
           </Button>
         </div>
       );
@@ -337,9 +336,10 @@ export class AllPacksPage extends Component {
               placeholder="Filter packs"
               value={packFilter}
             />
-            <KolideIcon name="search" />
           </div>
-          <p className={`${baseClass}__pack-count`}>{packsTotalDisplay}</p>
+          <p className={`${baseClass}__pack-count`}>
+            <strong>{packsTotalDisplay}</strong>
+          </p>
           <PacksList
             allPacksChecked={allPacksChecked}
             checkedPackIDs={checkedPackIDs}
diff --git a/frontend/pages/packs/AllPacksPage/_styles.scss b/frontend/pages/packs/AllPacksPage/_styles.scss
index dc1540df5c..fb5da39380 100644
--- a/frontend/pages/packs/AllPacksPage/_styles.scss
+++ b/frontend/pages/packs/AllPacksPage/_styles.scss
@@ -1,27 +1,32 @@
 .all-packs-page {
+  font-size: $x-small;
+
   &__bulk-action-btn {
-    color: $core-fleet-purple;
-    font-size: 15px;
+    color: $core-fleet-black;
+    font-size: $x-small;
     font-weight: $regular;
     margin-left: $pad-large;
+    position: relative;
+    bottom: 0;
 
     &--disable {
-      margin-left: 0;
-
-      i {
-        color: $ui-error;
+      &::before {
+        content: url("../assets/images/icon-action-close-16x15@2x.png");
+        transform: scale(0.5);
       }
     }
 
     &--enable {
-      i {
-        color: $ui-success;
+      &::before {
+        content: url("../assets/images/icon-action-check-16x15@2x.png");
+        transform: scale(0.5);
       }
     }
 
     &--delete {
-      i {
-        color: $core-fleet-blue;
+      &::before {
+        content: url("../assets/images/icon-action-delete-14x14@2x.png");
+        transform: scale(0.5);
       }
     }
   }
@@ -35,8 +40,10 @@
   &__pack-count {
     color: $core-fleet-black;
     font-size: $x-small;
-    font-weight: $bold;
+    line-height: 35px;
     margin: 0;
+    position: relative;
+    top: -$pad-small;
   }
 
   &__search-create-section {
@@ -50,17 +57,19 @@
       }
     }
 
-    .kolidecon {
+    &::before {
+      display: inline-block;
       position: absolute;
-      top: 36px;
-      left: 9px;
-      font-size: 18px;
-      color: $ui-gray;
+      padding: 5px 0 0 0;
+      content: url(../assets/images/icon-search-fleet-black-16x16@2x.png);
+      transform: scale(0.5);
+      top: 22px;
+      left: 8px;
     }
   }
 
   &__title {
-    margin: 0 0 15px;
+    margin: 0 0 $pad-medium;
   }
 
   &__wrapper {
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index 1a084090fd..7889ee976f 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@@ -7,6 +7,7 @@
   &__header-wrap {
     display: flex;
     justify-content: space-between;
+    align-items: center;
   }
 
   &__ctas {
@@ -55,7 +56,7 @@
   }
 
   &__title {
-    margin: 0 0 12px;
+    margin: 0 0 $pad-medium;
   }
 
   &__wrapper {