-
);
diff --git a/frontend/components/WarningBanner/WarningBanner.jsx b/frontend/components/WarningBanner/WarningBanner.jsx
index 95bf7ba0e3..7f0dc6bb99 100644
--- a/frontend/components/WarningBanner/WarningBanner.jsx
+++ b/frontend/components/WarningBanner/WarningBanner.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import Button from 'components/buttons/Button';
-import Icon from 'components/icons/Icon';
+import KolideIcon from 'components/icons/KolideIcon';
const baseClass = 'warning-banner';
@@ -19,7 +19,7 @@ const WarningBanner = ({ className, message, labelText, shouldShowWarning, onDis
return (
-
{message}
diff --git a/frontend/components/WarningBanner/WarningBanner.tests.jsx b/frontend/components/WarningBanner/WarningBanner.tests.jsx
index efcc3e4cb7..96cfe6d6dc 100644
--- a/frontend/components/WarningBanner/WarningBanner.tests.jsx
+++ b/frontend/components/WarningBanner/WarningBanner.tests.jsx
@@ -8,7 +8,7 @@ describe('WarningBanner - component', () => {
const props = { shouldShowWarning: true, message: 'message' };
const component = shallow(-
diff --git a/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx b/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx
index c6f57e7308..ff03d73d0b 100644
--- a/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx
+++ b/frontend/components/config/EnrollSecretTable/EnrollSecretTable.jsx
@@ -5,7 +5,7 @@ import FileSaver from 'file-saver';
import Button from 'components/buttons/Button';
import enrollSecretInterface from 'interfaces/enroll_secret';
import InputField from 'components/forms/fields/InputField';
-import Icon from 'components/icons/Icon';
+import KolideIcon from 'components/icons/KolideIcon';
import { stringToClipboard } from 'utilities/copy_text';
import EyeIcon from '../../../../assets/images/icon-eye-16x16@2x.png';
import DownloadIcon from '../../../../assets/images/icon-download-12x12@2x.png';
@@ -76,7 +76,7 @@ class EnrollSecretRow extends Component {
className={`${baseClass}__secret-copy-icon`}
onClick={onCopySecret}
>
-
-
-
diff --git a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
index bdd5ed01fa..ad9aee3e78 100644
--- a/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
+++ b/frontend/pages/admin/AppSettingsPage/AppSettingsPage.tests.jsx
@@ -40,7 +40,7 @@ describe('AppSettingsPage - component', () => {
const smtpWarning = page.find('WarningBanner');
expect(smtpWarning.length).toEqual(1);
- expect(smtpWarning.find('Icon').length).toEqual(1);
+ expect(smtpWarning.find('KolideIcon').length).toEqual(1);
expect(smtpWarning.text()).toContain('Warning:SMTP is not currently configured in Fleet. The "Add new user" feature requires that SMTP is configured in order to send invitation emails. Users may also be added with "fleetctl user create".');
});
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index 9cf09fc971..b24a22d91a 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@@ -5,16 +5,9 @@
display: flex;
align-items: center;
justify-content: space-between;
- // We set this equal to the max-width of the host-container to preserve visual consistency
- max-width: 1206px;
margin-bottom: 16px;
}
- .ace-kolide {
- // We set this equal to the max-width of the host-container to preserve visual consistency
- max-width: 1206px;
- }
-
&__header {
display: flex;
align-items: center;
diff --git a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
index badc4a1c8b..d5fd89cc34 100644
--- a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
+++ b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
@@ -6,7 +6,7 @@ import { push } from 'react-router-redux';
import Button from 'components/buttons/Button';
import entityGetter from 'redux/utilities/entityGetter';
-import Icon from 'components/icons/Icon';
+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';
@@ -227,21 +227,21 @@ export class AllPacksPage extends Component {
onClick={onBulkAction('disable')}
variant="unstyled"
>
-
);
@@ -329,7 +329,7 @@ export class AllPacksPage extends Component {
placeholder="Filter packs"
value={packFilter}
/>
- {packsTotalDisplay}
{queriesTotalDisplay}
diff --git a/frontend/utilities/icon_class_for_label.js b/frontend/utilities/icon_class_for_label.js deleted file mode 100644 index 6324b0571f..0000000000 --- a/frontend/utilities/icon_class_for_label.js +++ /dev/null @@ -1,17 +0,0 @@ -export const iconClassForLabel = (label) => { - const lowerType = label.type && label.type.toLowerCase(); - const lowerDisplayText = label.display_text && label.display_text.toLowerCase(); - - if (lowerType === 'all') return 'hosts'; - - switch (lowerDisplayText || label) { - case 'offline': return 'offline'; - case 'online': return 'success-check'; - case 'mia': return 'mia'; - case 'new': return 'clock'; - case 'unknown': return 'single-host'; - default: return 'label'; - } -}; - -export default iconClassForLabel; diff --git a/frontend/utilities/icon_name.js b/frontend/utilities/icon_name.js new file mode 100644 index 0000000000..aa943bcc00 --- /dev/null +++ b/frontend/utilities/icon_name.js @@ -0,0 +1,38 @@ +export const iconNameForLabel = (label) => { + const lowerType = label.type && label.type.toLowerCase(); + const lowerDisplayText = label.display_text && label.display_text.toLowerCase(); + + if (lowerType === 'all') return 'hosts-3'; + + switch (lowerDisplayText || label) { + case 'offline': return 'offline'; + case 'online': return 'online'; + case 'mia': return 'mia'; + case 'new': return 'new'; + case 'unknown': return 'hosts-2'; + default: return 'label'; + } +}; + +export const iconNameForPlatform = (platform = '') => { + if (!platform.name) return false; + + const lowerPlatform = platform.name.toLowerCase(); + + switch (lowerPlatform) { + case 'macos': return 'apple-dark'; + case 'mac os x': return 'apple-dark'; + case 'mac osx': return 'apple-dark'; + case 'mac os': return 'apple-dark'; + case 'darwin': return 'apple-dark'; + case 'apple': return 'apple-dark'; + case 'centos': return 'centos-dark'; + case 'centos linux': return 'centos-dark'; + case 'ubuntu': return 'ubuntu-dark'; + case 'ubuntu linux': return 'ubuntu-dark'; + case 'linux': return 'linux-dark'; + case 'windows': return 'windows-dark'; + case 'ms windows': return 'windows-dark'; + default: return false; + } +}; diff --git a/frontend/utilities/platform_icon_class.js b/frontend/utilities/platform_icon_class.js index 3f9a28491e..290cc99acc 100644 --- a/frontend/utilities/platform_icon_class.js +++ b/frontend/utilities/platform_icon_class.js @@ -4,19 +4,19 @@ export const platformIconClass = (platform = '') => { const lowerPlatform = platform.toLowerCase(); switch (lowerPlatform) { - case 'macos': return 'apple'; - case 'mac os x': return 'apple'; - case 'mac osx': return 'apple'; - case 'mac os': return 'apple'; - case 'darwin': return 'apple'; - case 'apple': return 'apple'; - case 'centos': return 'centos'; - case 'centos linux': return 'centos'; - case 'ubuntu': return 'ubuntu'; - case 'ubuntu linux': return 'ubuntu'; - case 'linux': return 'linux'; - case 'windows': return 'windows'; - case 'ms windows': return 'windows'; + case 'macos': return 'icon-apple-dark-20x20@2x.png'; + case 'mac os x': return 'icon-apple-dark-20x20@2x.png'; + case 'mac osx': return 'icon-apple-dark-20x20@2x.png'; + case 'mac os': return 'icon-apple-dark-20x20@2x.png'; + case 'darwin': return 'icon-apple-dark-20x20@2x.png'; + case 'apple': return 'icon-apple-dark-20x20@2x.png'; + case 'centos': return 'icon-centos-dark-20x20@2x.png'; + case 'centos linux': return 'icon-centos-dark-20x20@2x.png'; + case 'ubuntu': return 'icon-ubuntu-dark-20x20@2x.png'; + case 'ubuntu linux': return 'icon-ubuntu-dark-20x20@2x.png'; + case 'linux': return 'icon-linux-dark-20x20@2x.png'; + case 'windows': return 'icon-windows-dark-20x20@2x.png'; + case 'ms windows': return 'icon-windows-dark-20x20@2x.png'; default: return false; } };