-
);
diff --git a/frontend/components/WarningBanner/WarningBanner.jsx b/frontend/components/WarningBanner/WarningBanner.jsx
index 95bf7ba0e..7f0dc6bb9 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 efcc3e4cb..96cfe6d6d 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 c6f57e730..ff03d73d0 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 bdd5ed01f..ad9aee3e7 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 9cf09fc97..b24a22d91 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 badc4a1c8..d5fd89cc3 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 6324b0571..000000000 --- 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 000000000..aa943bcc0 --- /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 3f9a28491..290cc99ac 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; } };