diff --git a/assets/images/icon-edit-columns-16x12@2x.png b/assets/images/icon-edit-columns-16x12@2x.png deleted file mode 100644 index 3e285a0931..0000000000 Binary files a/assets/images/icon-edit-columns-16x12@2x.png and /dev/null differ diff --git a/assets/images/icon-edit-columns-16x16@2x.png b/assets/images/icon-edit-columns-16x16@2x.png new file mode 100644 index 0000000000..b6e88ad63c Binary files /dev/null and b/assets/images/icon-edit-columns-16x16@2x.png differ diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx index 73754615b2..3aaec9b15a 100644 --- a/frontend/components/TableContainer/TableContainer.tsx +++ b/frontend/components/TableContainer/TableContainer.tsx @@ -219,13 +219,13 @@ const TableContainer = ({ className={`${baseClass}__table-action-button`} > <> + {actionButtonText} {actionButtonIcon && ( {`${actionButtonText} )} - {actionButtonText} )} diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index 26b2ab34ff..11a4d2433f 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -149,21 +149,20 @@ $base-class: "button"; &--text-icon { @include button-variant(transparent); + padding: 0; border: 0; box-shadow: none; - color: $core-fleet-black; + color: $core-vibrant-blue; font-size: $x-small; - font-weight: $regular; + font-weight: $bold; cursor: pointer; img { - height: 14px; - width: 14px; - margin-right: $pad-small; + transform: scale(0.5); } &:active { - box-shadow: none; + color: $core-vibrant-blue-down; } &:focus { @@ -171,9 +170,7 @@ $base-class: "button"; } &:hover { - background-color: transparent; - box-shadow: none; - text-decoration: underline; + color: $core-vibrant-blue-over; } } diff --git a/frontend/components/loaders/Spinner/Spinner.tsx b/frontend/components/loaders/Spinner/Spinner.tsx index e0aec481c8..320a6bf40b 100644 --- a/frontend/components/loaders/Spinner/Spinner.tsx +++ b/frontend/components/loaders/Spinner/Spinner.tsx @@ -1,9 +1,16 @@ import React from "react"; -const baseClass = "kolide-spinner"; - const Spinner = (): JSX.Element => { - return
; + return ( +
+
+
+
+
+
+
+
+ ); }; export default Spinner; diff --git a/frontend/components/loaders/Spinner/_styles.scss b/frontend/components/loaders/Spinner/_styles.scss index 58e5d151a4..cc2ceffa99 100644 --- a/frontend/components/loaders/Spinner/_styles.scss +++ b/frontend/components/loaders/Spinner/_styles.scss @@ -1,39 +1,50 @@ -.kolide-spinner { - @include size(64px); - animation: sk-rotateplane 2.4s infinite ease-in-out; - background-color: #ae6ddf; - border-radius: 5px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); - margin: 30px auto; +.card { + margin: 120px auto; + display: flex; + align-items: center; + justify-content: center; + background-color: $core-white; + width: 48px; + height: 48px; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); + border-radius: 8px; } -@keyframes sk-rotateplane { +.ring { + box-sizing: border-box; + display: inline-block; + position: relative; + width: 32px; + height: 32px; + border-radius: 100%; + border: 4px solid $core-vibrant-blue; +} +.ring div { + box-sizing: border-box; + display: block; + position: absolute; + width: 32px; + height: 32px; + margin: -4px; + border: 4px solid $core-white; + border-radius: 50%; + animation: ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; + border-color: $ui-vibrant-blue-25 transparent transparent transparent; +} +.ring div:nth-child(1) { + animation-delay: -0.45s; +} +.ring div:nth-child(2) { + animation-delay: -0.3s; +} +.ring div:nth-child(3) { + animation-delay: -0.15s; +} +@keyframes ring { 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); + transform: rotate(0deg); } - - 20% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - background: #ff5850; - } - - 40% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - background: #ffad00; - } - - 60% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - background: #4fd061; - } - - 80% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - background: #4a90e2; - } - 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - background: #ae6ddf; + transform: rotate(360deg); } } diff --git a/frontend/components/side_panels/SiteNavSidePanel/index.js b/frontend/components/side_panels/SiteNavSidePanel/index.js deleted file mode 100644 index 77b19d90ab..0000000000 --- a/frontend/components/side_panels/SiteNavSidePanel/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./SiteNavSidePanel"; diff --git a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx b/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx similarity index 93% rename from frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx rename to frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx index 58b01c35ca..d802e31fc5 100644 --- a/frontend/components/side_panels/SiteNavSidePanel/SiteNavSidePanel.jsx +++ b/frontend/components/side_panels/SiteTopNav/SiteTopNav.jsx @@ -14,7 +14,7 @@ import QueriesIcon from "../../../../assets/images/icon-main-queries@2x-16x16@2x import PacksIcon from "../../../../assets/images/icon-main-packs@2x-16x16@2x.png"; import AdminIcon from "../../../../assets/images/icon-main-settings@2x-16x16@2x.png"; -class SiteNavSidePanel extends Component { +class SiteTopNav extends Component { static propTypes = { onLogoutUser: PropTypes.func, onNavItemClick: PropTypes.func, @@ -86,7 +86,12 @@ class SiteNavSidePanel extends Component { onClick={onNavItemClick(navItem.location.pathname)} > {icon} - {name} + + {name} + ); @@ -119,4 +124,4 @@ class SiteNavSidePanel extends Component { } } -export default SiteNavSidePanel; +export default SiteTopNav; diff --git a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss b/frontend/components/side_panels/SiteTopNav/_styles.scss similarity index 78% rename from frontend/components/side_panels/SiteNavSidePanel/_styles.scss rename to frontend/components/side_panels/SiteTopNav/_styles.scss index 77691495a4..07a859c893 100644 --- a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss +++ b/frontend/components/side_panels/SiteTopNav/_styles.scss @@ -40,10 +40,25 @@ } &__name { + display: inline-flex; + flex-direction: column; + align-items: center; text-decoration: none; vertical-align: middle; font-weight: $regular; font-size: $x-small; + + // Bolding text when the button is active causes a layout shift + // so we add a hidden pseudo element with the same text string + &:before { + content: attr(data-text); + height: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; + font-weight: $bold; + } } a { diff --git a/frontend/components/side_panels/SiteTopNav/index.js b/frontend/components/side_panels/SiteTopNav/index.js new file mode 100644 index 0000000000..59baf2c4bf --- /dev/null +++ b/frontend/components/side_panels/SiteTopNav/index.js @@ -0,0 +1 @@ +export { default } from "./SiteTopNav"; diff --git a/frontend/components/side_panels/SiteNavSidePanel/navItems.js b/frontend/components/side_panels/SiteTopNav/navItems.js similarity index 100% rename from frontend/components/side_panels/SiteNavSidePanel/navItems.js rename to frontend/components/side_panels/SiteTopNav/navItems.js diff --git a/frontend/layouts/CoreLayout/CoreLayout.jsx b/frontend/layouts/CoreLayout/CoreLayout.jsx index 203065de9b..3644049c20 100644 --- a/frontend/layouts/CoreLayout/CoreLayout.jsx +++ b/frontend/layouts/CoreLayout/CoreLayout.jsx @@ -7,7 +7,7 @@ import { push } from "react-router-redux"; import configInterface from "interfaces/config"; import FlashMessage from "components/flash_messages/FlashMessage"; import PersistentFlash from "components/flash_messages/PersistentFlash"; -import SiteNavSidePanel from "components/side_panels/SiteNavSidePanel"; +import SiteTopNav from "components/side_panels/SiteTopNav"; import userInterface from "interfaces/user"; import notificationInterface from "interfaces/notification"; import { hideFlash } from "redux/nodes/notifications/actions"; @@ -92,7 +92,7 @@ export class CoreLayout extends Component { return (