From 58445ede82550cb574775a83ae4cf5433f325a7e Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Mon, 10 May 2021 16:00:34 -0400 Subject: [PATCH] Replace icons (#747) * Replaces dropdown icon, close icon, carat icon, collapse icon, add icon Co-authored-by: Sarah Gillespie --- ...icon-accordion-collapse-black-16x16@2x.png | Bin 0 -> 682 bytes .../icon-accordion-collapse-blue-16x16@2x.png | Bin 0 -> 682 bytes assets/images/icon-chevron-black-16x16@2x.png | Bin 0 -> 460 bytes assets/images/icon-chevron-black-9x6@2x.png | Bin 0 -> 397 bytes assets/images/icon-chevron-blue-16x16@2x.png | Bin 0 -> 383 bytes assets/images/icon-chevron-blue-9x6@2x.png | Bin 0 -> 331 bytes assets/images/icon-chevron-white-16x16@2x.png | Bin 0 -> 248 bytes assets/images/icon-close-8x8@2x.png | Bin 0 -> 363 bytes .../images/icon-close-fleet-blue-16x16@2x.png | Bin 0 -> 442 bytes .../icon-close-vibrant-blue-16x16@2x.png | Bin 0 -> 409 bytes .../images/icon-collapse-black-16x16@2x.png | Bin 0 -> 682 bytes assets/images/icon-collapse-blue-16x16@2x.png | Bin 0 -> 682 bytes assets/images/icon-plus-circle-16x16@2x.png | Bin 0 -> 1009 bytes .../buttons/DropdownButton/DropdownButton.jsx | 3 +- .../buttons/DropdownButton/_styles.scss | 12 +++ .../admin/AppConfigForm/AppConfigForm.jsx | 6 +- .../forms/admin/AppConfigForm/_styles.scss | 18 ++++ .../forms/fields/Dropdown/_styles.scss | 58 +++++++++---- .../TargetOption/TargetOption.jsx | 4 +- .../TargetOption/_styles.scss | 9 +- .../fields/SelectTargetsDropdown/_styles.scss | 77 +++++++++++------- frontend/components/modals/Modal/Modal.jsx | 6 +- frontend/components/modals/Modal/_styles.scss | 17 ++-- 23 files changed, 146 insertions(+), 64 deletions(-) create mode 100644 assets/images/icon-accordion-collapse-black-16x16@2x.png create mode 100644 assets/images/icon-accordion-collapse-blue-16x16@2x.png create mode 100644 assets/images/icon-chevron-black-16x16@2x.png create mode 100644 assets/images/icon-chevron-black-9x6@2x.png create mode 100644 assets/images/icon-chevron-blue-16x16@2x.png create mode 100644 assets/images/icon-chevron-blue-9x6@2x.png create mode 100644 assets/images/icon-chevron-white-16x16@2x.png create mode 100644 assets/images/icon-close-8x8@2x.png create mode 100644 assets/images/icon-close-fleet-blue-16x16@2x.png create mode 100644 assets/images/icon-close-vibrant-blue-16x16@2x.png create mode 100644 assets/images/icon-collapse-black-16x16@2x.png create mode 100644 assets/images/icon-collapse-blue-16x16@2x.png create mode 100644 assets/images/icon-plus-circle-16x16@2x.png diff --git a/assets/images/icon-accordion-collapse-black-16x16@2x.png b/assets/images/icon-accordion-collapse-black-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d89ec4e6524ca399f41b4ce9ef06c0b4f7d53da5 GIT binary patch literal 682 zcmV;b0#*HqP)G;u^?V5h&>1fQtPR0qMlNU5fSuH_d&Gn$z4DU>CoXiYX@c7IKAlK?K?o>CJ(>nJfsi1ml%_}pnfiJM{k#V#JOg~p zHH6IWH4u-tV)kJkFP}X?Jk|=o_%=|;kKknYaU45(1ck{F_{Eoj!ej=0r%zP+(!QI| zzz>@?AmSGWdK=<{=X-sb*pz|X*wuB#w_+j^YwO51Gcj}h60Qvo*2GpHR0Hto*>jtG7sc#n=lGH%Mk;?VHC@n{6i!kmSz4v zkT~@CFZQ+UcqaJCS$wFbIITuXHC~)74|IaIr)E%m()fOJvfsEoU#uSc2WOYuDG;u^?V5h&>1fQtPR0qMlNU5fSuH_d&Gn$z4DU>CoXiYX@c7IKAlK?K?o>CJ(>nJfsi1ml%_}pnfiJM{k#V#JOg~p zHH6IWH4u-tV)kJkFP}X?Jk|=o_%=|;kKknYaU45(1ck{F_{Eoj!ej=0r%zP+(!QI| zzz>@?AmSGWdK=<{=X-sb*pz|X*wuB#w_+j^YwO51Gcj}h60Qvo*2GpHR0Hto*>jtG7sc#n=lGH%Mk;?VHC@n{6i!kmSz4v zkT~@CFZQ+UcqaJCS$wFbIITuXHC~)74|IaIr)E%m()fOJvfsEoU#uSc2WOYuDn+e&OUu1i2Sakd?cSW8|G(!y1yCpy3dKLOAyRZ;ogNuGm1kqO>QCQBPeR|=XLZA@ z47bd(`yNdEygKAIV&VjGz)H>NOf_uyW9J??;)Gy#aST2wIeGOS9M^hWhUBtY%)vY(X~E@fbq2_^-<5swi14P&A>woUsG z5R>`qOkDp_NTK6#TZ*8`;O#B)Ikv6c(#9Z8IfCN%IkY>Mp-ecpw zSaj;YOx#P5qyT?llZ4F>ixzu%@Ik{SC=?3CI`RcCS%~A<(G5ue0000pgoP+z zLUAT!n zm}#LRh!uB}*5;`Qt_X1d$1@Ob1Ffkm=h3Sh;;HEdHXUZb+)erh@{*48tl~V_KO}5r r^?(X=S$!B78;`5X;nysB%B%eYRNi~aEcj$c00000NkvXXu0mjfy6d9< literal 0 HcmV?d00001 diff --git a/assets/images/icon-chevron-blue-16x16@2x.png b/assets/images/icon-chevron-blue-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..121e004fcf03cdb1f52f6e6845869390799fa4f3 GIT binary patch literal 383 zcmV-_0f7FAP)l)~9y4<3FbFtT^oJ|Lv| zPWEVa-nX-Wq9}@TW5}kd-;bXf6s*Xn;ZH~ln=_vS?r_TEO}c%a&6@wHDsT$VI@|jL z9(7F;$ME^_cU>mo!9c?cmZxw*21|ftxX{jKtcv=L0wBJ+t*llyldnsS6CPj9V4k38 zJS_NlPex$+%9Srxn}4da@b78lk5EUzBq1MF!kq-lB*6Pg&f(4i!r(2L6H%wUizm}x ze+Ubl1xymmya*$|3ri{q6iK*-*Ah5Lq)Q^a9K!JzM&2tN2~dMpOue|pkJ&BO%?Ij1 dQ55AK*#RxLhiI?vqWAy+002ovPDHLkV1h;Jo1Fjv literal 0 HcmV?d00001 diff --git a/assets/images/icon-chevron-blue-9x6@2x.png b/assets/images/icon-chevron-blue-9x6@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a633a5ec4bde8ca627d20acbb6e9f1186aba45d7 GIT binary patch literal 331 zcmeAS@N?(olHy`uVBq!ia0vp^LO{&J!3HGrh2HJ~Qk(@Ik;M!QVyYm_=ozH)0Vv2= z9OUlAu*1)CfMSRYikOGS6--e?S4 z(Aj6tDcd3IpwKhHf%OKXZUomxE^Y2RJj^meI~a?%+t|Ge>#!I7vGMj^v0xt|34?sO zMTYY8`nN2c^QQb?B-_C^oUI~H_DoUTwts^Z=j+^4Gv=J~TqB^zS5TmG$W*__g)89s z`QeTTyB4;ig;siF+iRDmv5R+c~u+ zM=fD4l>Hvb;b8qHs_@S4L^JCb-Mon|B9;3#=6w+q)uK^Ypt$lFyCS>hpZ(L%@BY2_jw<7i$rE-tPjKO=n6`R* z&dsf-^z{zbO^|yU5HM$XM#s(=ou?(tOkVaOe4hncf{trW;EChgla^rb;m@UFGqG=v zqnI20cGcTCYINo3QDWdcbru4J^{S+&UJ z@_|D-mjo`X{AxN;jeBELOoCd=6Gr7X0UOLDZm&^)l(&5O!Q3cEJ^^i>ScMSbr)O+< zf6acubg^}ARr(9Ai;oiSO`oyT!DGwvVAOFsx#wJ=K zM4WSyK0n?8K{1-tiQVD|MKh0cEVS{e0T%6_ysIXD#oLq+YJd{T{(kH>A&3JZy?{bb z3x03bpEra19q)tmB$VC`9=5y9`pY5yv|8qcrlD@ahT&v3Me0~fgemOndl4djNMS@Y z(ScRGq6bEl

t{GGH;`D_)U+C%8uvV<5*Qy#9c++mC2f$G;jdhzFT4Re@ILbrPXO zExp6}2V94Y^{@&uU_If^F`-uhw_uleL-nm$lJ*2{%L-oI&{gMxi8Hz()XBE|P+AX} kBNK;t)X`BRk;pai19|wzOEGs9DF6Tf07*qoM6N<$f(9?Np#T5? literal 0 HcmV?d00001 diff --git a/assets/images/icon-close-vibrant-blue-16x16@2x.png b/assets/images/icon-close-vibrant-blue-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..fdaaae88d28b81d0d819590356af27dc90c7f3b1 GIT binary patch literal 409 zcmV;K0cQS*P)sfVi7KtAJDhYwYB;%?IHz=V`Pv5G3var{VD2GxR=YBZ$pAI*@-_2ZIP)!l;f!8M$O8~`YT-l)~wWcBG;u^?V5h&>1fQtPR0qMlNU5fSuH_d&Gn$z4DU>CoXiYX@c7IKAlK?K?o>CJ(>nJfsi1ml%_}pnfiJM{k#V#JOg~p zHH6IWH4u-tV)kJkFP}X?Jk|=o_%=|;kKknYaU45(1ck{F_{Eoj!ej=0r%zP+(!QI| zzz>@?AmSGWdK=<{=X-sb*pz|X*wuB#w_+j^YwO51Gcj}h60Qvo*2GpHR0Hto*>jtG7sc#n=lGH%Mk;?VHC@n{6i!kmSz4v zkT~@CFZQ+UcqaJCS$wFbIITuXHC~)74|IaIr)E%m()fOJvfsEoU#uSc2WOYuDG;u^?V5h&>1fQtPR0qMlNU5fSuH_d&Gn$z4DU>CoXiYX@c7IKAlK?K?o>CJ(>nJfsi1ml%_}pnfiJM{k#V#JOg~p zHH6IWH4u-tV)kJkFP}X?Jk|=o_%=|;kKknYaU45(1ck{F_{Eoj!ej=0r%zP+(!QI| zzz>@?AmSGWdK=<{=X-sb*pz|X*wuB#w_+j^YwO51Gcj}h60Qvo*2GpHR0Hto*>jtG7sc#n=lGH%Mk;?VHC@n{6i!kmSz4v zkT~@CFZQ+UcqaJCS$wFbIITuXHC~)74|IaIr)E%m()fOJvfsEoU#uSc2WOYuD=UdMixb#c)I$Dx8naH0ejrvftpI}!&q*WK_^XU+S-8jl~KN0{O{p;9DM36B;ZG zW}y^XzvZ>#AB+=7(OhW|e0JTnJIDaX@r!~)HF+KLB&H|8cb+Vq8cM_Mtilcu1zsK)Z+wP{#D<1`QCF&$P#x}%Pp|3y?RAc{mxealawy5KbcM!!jKhBr& zPTJhuP_N}h#{}iHa-ve?`%pn93Y4{lku0za)5Q=AX;b++*oe(hJkWMGSPS-I^S!1r zB6wkFBW5>#!sbYab`{&rsdNLYf{1yAk}VL(2o5rkU04w$$U9?zfP_RB}a?lbF-q>ML`jsa(lmPj^QZL4msXUel-F_dtX`{O{P&7L%q zsuf4z&DS9XB4(Lzd`$16eG;;POf)8b{PaZso3y?7qd0_NbQ701(6gQ5Rk zy?%xLR!bk@j22FbiUR3!vH^M8Y%g}*LEcwJXFUxNdO{NYh)z;|xdSVL%8+KvLFg$j z5O?OF8M9v&_{r=B_aZ-rZahLQitWq5DfvZ+W!qfd>I$7Uk*=a2gk@bubM|wgW4;iv zgoho@H#!?i6mcU9bM|~#z85x?9eHU}leh*mW`64pxGs8e_JT;2@*&OL1Sc02X!e;4 zy5HurrLsc_%$gb@Et`fD_R-NgeUI;S5v`tw6k6{w#S7QVOiDq@TJs`Xnr0(rJAw?P zbfzv~>bxfGYe=pMJOu0pfq%nEE7Zbq9tz;w1tDye+Lgx16_huY{{F>9&PaCuUtz*v zqntylmq1AClWW9G#VJa8rZU?BWW}U{x{^4mFI}9*q093@u!j

    diff --git a/frontend/components/buttons/DropdownButton/_styles.scss b/frontend/components/buttons/DropdownButton/_styles.scss index 8221835232..0b448932bb 100644 --- a/frontend/components/buttons/DropdownButton/_styles.scss +++ b/frontend/components/buttons/DropdownButton/_styles.scss @@ -52,3 +52,15 @@ } } } + +.downcarat { + &::after { + content: url("../assets/images/icon-chevron-white-16x16@2x.png"); + transform: scale(0.5); + width: 16px; + border-radius: 0px; + padding: 0px; + padding-left: 2px; + margin-top: 2px; + } +} diff --git a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx index 62f1b3565d..7b007e9739 100644 --- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx +++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx @@ -56,7 +56,11 @@ const formFields = [ ]; const Header = ({ showAdvancedOptions }) => { const CaratIcon = ( - + + /> ); } diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss index 7c9a44f418..8d6e45ef32 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/TargetOption/_styles.scss @@ -26,10 +26,11 @@ } &__add-btn { - transition: color 0ms; - color: $core-vibrant-blue; - - font-size: $medium; + content: url("../assets/images/icon-plus-circle-16x16@2x.png"); + height: 16px; + width: 16px; + margin-top: 8px; + border: none; } &__target-content { diff --git a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss index ffbe37c68b..2b6f9a3066 100644 --- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss +++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss @@ -31,12 +31,30 @@ } .Select-arrow { - border-width: 8px 8px 2.5px; + content: url("../assets/images/icon-chevron-black-16x16@2x.png"); + height: 16px; + width: 16px; + margin-top: 6px; + margin-left: 6px; + border: none; + + &:hover { + content: url("../assets/images/icon-chevron-blue-16x16@2x.png"); + } } &.is-open { .Select-arrow { - border-width: 2.5px 8px 8px; + content: url("../assets/images/icon-collapse-black-16x16@2x.png"); + height: 16px; + width: 16px; + margin-top: 11px; + margin-left: 6px; + border: none; + + &:hover { + content: url("../assets/images/icon-collapse-blue-16x16@2x.png"); + } } .Select-arrow-zone { @@ -67,7 +85,7 @@ } .Select-arrow-zone { - padding-right: 19px; + padding-right: 30px; } &.Select--multi { @@ -139,32 +157,20 @@ border: solid 1px $ui-fleet-blue-15; .Select-value-icon { - border: 0; - float: right; - position: relative; - line-height: 34px; - width: 25px; - padding: 0; - margin: 0 5px; - text-indent: -999em; + height: 100%; &::after { - @extend %kolidecon; - transition: color 150ms ease-in-out; - transform: translate(-50%, -50%); - content: "\2715"; // hex code for multiplication cross - position: absolute; - top: 50%; - left: 50%; - visibility: visible; - color: $core-fleet-black; - display: block; - text-indent: 0; + content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png"); + transform: scale(0.5); + border-radius: 0px; + margin-top: -15px; + margin-left: -15px; } &:hover { &::after { - color: $ui-error; + content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png"); + transform: scale(0.5); } } } @@ -179,17 +185,32 @@ } .Select-clear { - font-size: $x-large; - margin-right: 10px; - color: $core-fleet-black; + content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png"); + width: 16px; + height: 16px; + border-radius: 0px; + margin-left: -4px; + margin-top: 6px; &:hover { - color: $ui-error; + content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png"); + width: 16px; + height: 16px; + border-radius: 0px; } } + .Select-clear-zone { + width: 30px; + } + + .Select-arrow-zone { + width: 30px; + margin-right: 5px; + } + .Select-loading-zone { - padding-right: 10px; + margin-right: 10px; } &.is-empty { diff --git a/frontend/components/modals/Modal/Modal.jsx b/frontend/components/modals/Modal/Modal.jsx index 971f9da3da..56d839ba2d 100644 --- a/frontend/components/modals/Modal/Modal.jsx +++ b/frontend/components/modals/Modal/Modal.jsx @@ -2,8 +2,6 @@ import React, { Component } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; -import KolideIcon from "components/icons/KolideIcon"; - const baseClass = "modal"; class Modal extends Component { @@ -27,9 +25,7 @@ class Modal extends Component {
    {title}
    - +
    {children}
    diff --git a/frontend/components/modals/Modal/_styles.scss b/frontend/components/modals/Modal/_styles.scss index 182e15c262..4470d73d48 100644 --- a/frontend/components/modals/Modal/_styles.scss +++ b/frontend/components/modals/Modal/_styles.scss @@ -21,14 +21,17 @@ text-decoration: none; .button { - @include size(30px); - line-height: 30px; - color: $core-fleet-black; - font-size: $x-large; + content: url("../assets/images/icon-close-fleet-blue-16x16@2x.png"); + width: 17px; + height: 17px; + border-radius: 0px; + } - &:hover { - color: $ui-error; - } + .button:hover { + content: url("../assets/images/icon-close-vibrant-blue-16x16@2x.png"); + width: 17px; + height: 17px; + border-radius: 0px; } }