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; } };