From a4c628963b48aebe96fb44372a0d5bc7606f6cad Mon Sep 17 00:00:00 2001
From: Mike Thomas <78363703+mike-j-thomas@users.noreply.github.com>
Date: Wed, 19 Oct 2022 00:07:36 +0900
Subject: [PATCH] Update evented table badge (#8283)

I updated the styling of the evented table badge and label.
Fixes https://github.com/fleetdm/fleet/issues/8270
---
 .../assets/images/icon-evented-12x12@2x.png   | Bin 0 -> 531 bytes
 .../assets/images/icon-evented-14x14@2x.png   | Bin 716 -> 0 bytes
 .../styles/pages/osquery-table-details.less   |  35 +++++++++---------
 website/views/pages/osquery-table-details.ejs |   4 +-
 4 files changed, 20 insertions(+), 19 deletions(-)
 create mode 100644 website/assets/images/icon-evented-12x12@2x.png
 delete mode 100644 website/assets/images/icon-evented-14x14@2x.png

diff --git a/website/assets/images/icon-evented-12x12@2x.png b/website/assets/images/icon-evented-12x12@2x.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0fd13dec1544b26c93431fb6e1f320fd842a0e9
GIT binary patch
literal 531
zcmV+u0_^>XP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0jNntK~#7Fy_GRf
z!cY*$@7gMkjE-d^adCBnZ_r|5*_2NJ1c;+B8f?;UpcA2sbaaEwQA`}%=+_|9p1qcm
zn3VF0lwb1F$9u2$@7=vS020uR&VmOBQZsrJ9!Yyj@++u927G`^+_Hz7)+%B_Vf6|e
z5CnShmtI@JGuZ+<tZ{|_?}86k6(GC~7jRW_#+J)--RKfOC-xJH7}Jd20>kseQuw>x
zQjrwSVMU4$#m3kAZZyP@z@H=dvm{%INuJnd2{Q0%oBFmrjKh%^66DM#M4|~5C63JT
zJjhB^pz;UL(=Nr{9!Q0gXOWh&mq6{N`#?Y%*9xImO*@+!qPU|HDphCv=<@v9=rn`o
z)(_WZNq0u3ySG3D24%mRYW4dnNPf}x$O?@Uw4Kp#zU%E&0d^lrp2i~Jg@VC44IJCF
zK!DU7a8HS1%zX*fPzca*#%3P`*_q_OBINqZp9W+=s1DZMF;fGK*?7Q(13ADR%z*zG
zPL*cx9Kb)}4`o~H7ClF;-l-tr6mo!wbou-1-7Q~SeFitAj0op&0EnZ4)CjKf+b?rB
Vq7?7(fs+6L002ovPDHLkV1jpH>Kgz6

literal 0
HcmV?d00001

diff --git a/website/assets/images/icon-evented-14x14@2x.png b/website/assets/images/icon-evented-14x14@2x.png
deleted file mode 100644
index 8a5fec826c656319edf198f8899dc47bceb006f8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 716
zcmV;-0yF)IP)<h;3K|Lk000e1NJLTq000~S000~a1^@s6at+^<00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0%1u+K~#7F#a2;r
z5<w7sJpp5tA995C1mX?g1THBnQ2wAN2qfei@-0d51i?Sh57raN5y%PT2w3HZW$kX;
zJ!Aow6wC&UuL^c{XL{aD_nV#u9vQT$)32U32z0^}m4iWV3J3VL({~gfobc~w<sj(H
z()|V-S7TnwzX#+zxFV(!h>Ljovv~iU=@t5o0`hqe%mp&ImJvmc(3GwT96$$X%cHcg
zA({nWK1|jKmB<|C+6*+Xckq;BQ&HjtVWoD~2UA^|GccyI6!pKlr6BK<yLXq#JsXCl
z&3q1-mnnQ@3H@5bBhG!d!zp}`2&7VNeS^A(AfoAxUFiJdvpx~kS8a}}=OYID9P`Jy
zXu^dk#;a;%#9!@>5l-O>;)$$!vT74^{K+;9dAUut!SJdlj~+7MUYnR^IIx0wo+d1b
z8yWu)29J#N4#%Tmw~Rf*f72?-`BVY^{~bOE{@e2+g}7nE&27hLXF_|1qj)4K%o90!
z+s5zgQp5S{d1m3;U~tvnIvzXV=(yF^3}SPoiF_9uCqhl^>bk$aN!%oTb+pZlrt5v_
zL`a9Zk>*<6ktIvwreuVR;PYhwM>vT_bE;g%n#4Oosw_p;TS4PCyzC$YoOY=BQFmg=
zg*0p2G80<TLAR5TTH*|Gdl2E0G=8tYEOA>!I);U91}<l94TcMPImtEj<L&|ulOo4U
z%YPq`Vl0XEcv(bAO+&V((SnCBz-EeF!KOfY5mqv<)VE8Q{)!rSl6xsRu}Fq)uouKu
y*3be<MK<hB*XvTPoY~Z|C&&@H1x39?(SHCWU=DLe-3ieE0000<MNUMnLSTaPnm@__

diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less
index 83cc55255c..ae45ed5f52 100644
--- a/website/assets/styles/pages/osquery-table-details.less
+++ b/website/assets/styles/pages/osquery-table-details.less
@@ -115,15 +115,15 @@
   }
   [purpose='evented-table-icon'] {
     margin-left: 4px;
-    padding: 4px 8px;
+    padding: 3px 6px 4px;
     background-color: @core-vibrant-blue-15;
     border-radius: 4px;
     display: inline-block;
-    line-height: 14px;
+    line-height: 12px;
     vertical-align: middle;
     img {
-      height: 14px;
-      width: 14px;
+      height: 12px;
+      width: 12px;
       display: inline-block;
     }
   }
@@ -292,27 +292,28 @@
       position: relative;
       display: inline-block;
       top: 0px;
-      right: -16px;
-      line-height: 14px;
-      padding: 4px 8px 4px 18px;
+      right: -12px;
+      line-height: 8px;
+      padding: 4px 6px;
       background-color: @core-vibrant-blue-15;
-      border-radius: 6px;
-      width: 120px;
+      border-radius: 4px;
+      width: 100px;
       span {
         vertical-align: middle;
-        font-weight: 700;
-        font-size: 10px;
+        font-weight: 600;
+        font-size: 9px;
         line-height: 14px;
+        color: @core-fleet-black-75;
       }
       span::before {
-        background-image: url('/images/icon-evented-14x14@2x.png');
-        background-size: 14px 14px;
+        background-image: url('/images/icon-evented-12x12@2x.png');
+        background-size: 12px 12px;
         display: inline-block;
         position: relative;
-        top: 1px;
-        left: -8px;
-        width: 14px;
-        height: 14px;
+        top: 2px;
+        margin-right: 4px;
+        width: 12px;
+        height: 12px;
         content: '';
       }
     }
diff --git a/website/views/pages/osquery-table-details.ejs b/website/views/pages/osquery-table-details.ejs
index fc10582777..40119005a8 100644
--- a/website/views/pages/osquery-table-details.ejs
+++ b/website/views/pages/osquery-table-details.ejs
@@ -41,7 +41,7 @@
         </div>
         <div class="d-flex d-lg-none pt-3" v-if="showTableNav">
           <div purpose="mobile-table-of-contents">
-            <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
+            <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
           </div>
         </div>
       </div>
@@ -59,7 +59,7 @@
           </div>
           <div style="position: relative;">
             <div purpose="table-of-contents">
-              <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-14x14@2x.png" ></span></a>
+              <a class="d-block" :class="[tableToDisplay.title === table.title ? 'active' : '']" :href="table.url" v-for="table in filteredTables">{{table.title}} <span purpose="evented-table-icon" v-if="table.evented"><img alt="evented table" src="/images/icon-evented-12x12@2x.png" ></span></a>
             </div>
             <div purpose="overflow-shadow" class="d-none d-lg-block"></div>
           </div>