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 0000000000..d89ec4e652 Binary files /dev/null and b/assets/images/icon-accordion-collapse-black-16x16@2x.png differ diff --git a/assets/images/icon-accordion-collapse-blue-16x16@2x.png b/assets/images/icon-accordion-collapse-blue-16x16@2x.png new file mode 100644 index 0000000000..d89ec4e652 Binary files /dev/null and b/assets/images/icon-accordion-collapse-blue-16x16@2x.png differ diff --git a/assets/images/icon-chevron-black-16x16@2x.png b/assets/images/icon-chevron-black-16x16@2x.png new file mode 100644 index 0000000000..bc37f8848b Binary files /dev/null and b/assets/images/icon-chevron-black-16x16@2x.png differ diff --git a/assets/images/icon-chevron-black-9x6@2x.png b/assets/images/icon-chevron-black-9x6@2x.png new file mode 100644 index 0000000000..58e9f47f74 Binary files /dev/null and b/assets/images/icon-chevron-black-9x6@2x.png differ 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 0000000000..121e004fcf Binary files /dev/null and b/assets/images/icon-chevron-blue-16x16@2x.png differ 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 0000000000..a633a5ec4b Binary files /dev/null and b/assets/images/icon-chevron-blue-9x6@2x.png differ diff --git a/assets/images/icon-chevron-white-16x16@2x.png b/assets/images/icon-chevron-white-16x16@2x.png new file mode 100644 index 0000000000..1f6b4cfe43 Binary files /dev/null and b/assets/images/icon-chevron-white-16x16@2x.png differ diff --git a/assets/images/icon-close-8x8@2x.png b/assets/images/icon-close-8x8@2x.png new file mode 100644 index 0000000000..22fc241309 Binary files /dev/null and b/assets/images/icon-close-8x8@2x.png differ diff --git a/assets/images/icon-close-fleet-blue-16x16@2x.png b/assets/images/icon-close-fleet-blue-16x16@2x.png new file mode 100644 index 0000000000..2e5c63aef2 Binary files /dev/null and b/assets/images/icon-close-fleet-blue-16x16@2x.png differ 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 0000000000..fdaaae88d2 Binary files /dev/null and b/assets/images/icon-close-vibrant-blue-16x16@2x.png differ diff --git a/assets/images/icon-collapse-black-16x16@2x.png b/assets/images/icon-collapse-black-16x16@2x.png new file mode 100644 index 0000000000..d89ec4e652 Binary files /dev/null and b/assets/images/icon-collapse-black-16x16@2x.png differ diff --git a/assets/images/icon-collapse-blue-16x16@2x.png b/assets/images/icon-collapse-blue-16x16@2x.png new file mode 100644 index 0000000000..d89ec4e652 Binary files /dev/null and b/assets/images/icon-collapse-blue-16x16@2x.png differ diff --git a/assets/images/icon-plus-circle-16x16@2x.png b/assets/images/icon-plus-circle-16x16@2x.png new file mode 100644 index 0000000000..8f1b4475f6 Binary files /dev/null and b/assets/images/icon-plus-circle-16x16@2x.png differ diff --git a/frontend/components/buttons/DropdownButton/DropdownButton.jsx b/frontend/components/buttons/DropdownButton/DropdownButton.jsx index 82b06dcf43..db81ffe59b 100644 --- a/frontend/components/buttons/DropdownButton/DropdownButton.jsx +++ b/frontend/components/buttons/DropdownButton/DropdownButton.jsx @@ -93,7 +93,7 @@ export class DropdownButton extends Component { return (
); } 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; } }