Style changes for UI layout changes (#415)

This PR includes additional style changes included in the UI layout changes project #360 Changes include: - Moving the <FlashMessage /> component below the new horizontal nav - Editing the "Save options" button on the Osquery options page - Adding a pseudo-element to <SettingsWrapper /> to prevent bold text from shifting the layout - Add sentence case for tabs in <SettingsWrapper /> - Adding $horizontal-gradient to colors.scss
2024-11-06 08:55:24 +00:00 · 2021-03-09 07:48:35 -08:00 · 2021-03-09 07:48:35 -08:00 · ba131153b7
commit ba131153b7
parent e38a020050
18 changed files with 85 additions and 64 deletions
--- a/frontend/components/flash_messages/FlashMessage/_styles.scss
+++ b/frontend/components/flash_messages/FlashMessage/_styles.scss
@ -9,13 +9,13 @@
 }

 .flash-message {
-  @include position(fixed, 0 0 null $nav-width);
+  @include position(fixed, 52px 0 null 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: $white;
  padding: $pad-half;
-  z-index: 2;
+  z-index: 3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: #3d4758;
  min-width: $min-width;
--- a/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx
+++ b/frontend/components/forms/admin/OsqueryOptionsForm/OsqueryOptionsForm.jsx
@ -40,18 +40,20 @@ class OsqueryOptionsForm extends Component {

    return (
      <form onSubmit={handleSubmit} className={baseClass}>
+        <div className={`${baseClass}__btn-wrap`}>
+          <p>YAML</p>
+          <Button
+            type="submit"
+            variant="brand"
+          >
+            Save options
+          </Button>
+        </div>
        <YamlAce
          {...fields.osquery_options}
          error={fields.osquery_options.error}
          wrapperClassName={`${baseClass}__text-editor-wrapper`}
-          label="YAML"
        />
-        <Button
-          type="submit"
-          variant="brand"
-        >
-          Update options
-        </Button>
      </form>
    );
  }
--- a/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss
+++ b/frontend/components/forms/admin/OsqueryOptionsForm/_styles.scss
@ -4,16 +4,14 @@
  align-items: flex-end;
  width: 100%;

-  &__button-wrap {
-    text-align: right;
+  &__btn-wrap {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;

-    .query-form__run-query-btn,
-    .query-form__stop-query-btn {
-      margin-left: $pad-xsmall;
-    }
-
-    .kolide-timer {
-      display: block;
+    p {
+      font-size: $x-small;
+      font-weight: $bold;
    }
  }

@ -21,4 +19,8 @@
    width: 100%;
    margin-bottom: 16px;
  }
+
+  .yaml-ace__label {
+    min-height: 0;
+  }
 }
--- a/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
@ -1,6 +1,6 @@
 .scheduled-queries-list-wrapper {
  flex-grow: 1;
-  padding: 50px 30px;
+  padding: 40px 30px;
  margin-bottom: $pad-base;

  &__query-count {
--- a/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
+++ b/frontend/components/side_panels/SiteNavSidePanel/_styles.scss
@ -2,6 +2,7 @@
  position: relative;
  transition: color 200ms ease-in-out;
  cursor: pointer;
+  border-bottom: 3px solid transparent;

  &:hover {
    background-color: $core-black-over;
--- a/frontend/components/side_panels/UserMenu/UserMenu.jsx
+++ b/frontend/components/side_panels/UserMenu/UserMenu.jsx
@ -28,7 +28,7 @@ class UserMenu extends Component {
    const accountNavigate = props.onNavItemClick(PATHS.USER_SETTINGS);
    this.dropdownItems = [
      {
-        label: 'My Account',
+        label: 'My account',
        onClick: accountNavigate,
      },
      {
@ -36,7 +36,7 @@ class UserMenu extends Component {
        onClick: () => window.open('https://github.com/fleetdm/fleet/blob/master/docs/README.md', '_blank'),
      },
      {
-        label: 'Sign Out',
+        label: 'Sign out',
        onClick: props.onLogout,
      },
    ];
--- a/frontend/layouts/CoreLayout/_styles.scss
+++ b/frontend/layouts/CoreLayout/_styles.scss
@ -13,7 +13,7 @@
 }

 .site-nav {
-  background: $core-gradient;
+  background: $core-gradient-horizontal;
  box-sizing: border-box;
  display: flex;
  top: 0;
--- a/frontend/pages/admin/AppSettingsPage/_styles.scss
+++ b/frontend/pages/admin/AppSettingsPage/_styles.scss
@ -1,8 +1,10 @@
 .app-settings {
-  padding: 50px 30px;
+  padding: 40px 30px;

  &__page-description {
-    font-size: $small;
+    font-size: $x-small;
+    color: $core-dark-blue-grey;
+    margin: 40px 0 54px 0;
  }

  h2 {
--- a/frontend/pages/admin/OsqueryOptionsPage/_styles.scss
+++ b/frontend/pages/admin/OsqueryOptionsPage/_styles.scss
@ -1,5 +1,5 @@
 .osquery-options {
-  padding: 50px 30px;
+  padding: 40px 30px;
  flex-grow: 1;

  &__page-wrap {
@ -8,7 +8,9 @@
  }

  &__page-description {
-    font-size: $small;
+    font-size: $x-small;
+    color: $core-dark-blue-grey;
+    margin: 40px 0 16px 0;
  }

  &__info-banner {
--- a/frontend/pages/admin/SettingsWrapper/SettingsWrapper.tsx
+++ b/frontend/pages/admin/SettingsWrapper/SettingsWrapper.tsx
@ -12,7 +12,7 @@ interface ISettingSubNavItem {

 const settingsSubNav: ISettingSubNavItem[] = [
  {
-    name: 'Organization Settings',
+    name: 'Organization settings',
    pathname: PATHS.ADMIN_SETTINGS,
  },
  {
@ -20,7 +20,7 @@ const settingsSubNav: ISettingSubNavItem[] = [
    pathname: PATHS.ADMIN_USERS,
  },
  {
-    name: 'Osquery Options',
+    name: 'Osquery options',
    pathname: PATHS.ADMIN_OSQUERY,
  },
 ];
@ -56,7 +56,9 @@ const SettingsWrapper = (props: ISettingsWrapperProp): JSX.Element => {
        <Tabs selectedIndex={getTabIndex(pathname)} onSelect={i => navigateToNav(i)}>
          <TabList>
            {settingsSubNav.map((navItem) => {
-              return <Tab key={navItem.name}>{navItem.name}</Tab>;
+              // Bolding text when the tab is active causes a layout shift
+              // so we add a hidden pseudo element with the same text string
+              return <Tab key={navItem.name} data-text={navItem.name}>{navItem.name}</Tab>;
            })}
          </TabList>
        </Tabs>
--- a/frontend/pages/admin/SettingsWrapper/_styles.scss
+++ b/frontend/pages/admin/SettingsWrapper/_styles.scss
@ -4,7 +4,7 @@
  padding: 25px 30px 50px; // different to pad sticky subnav properly

  &__nav-header {
-    padding-top: 25px;
+    padding-top: 15px;
    position: sticky;
    top: 0;
    background-color: $white;
@ -21,31 +21,47 @@

  .react-tabs {
    .react-tabs__tab-list {
-      border-bottom: 2px solid $ui-medium-grey;
+      border-bottom: 1px solid $ui-medium-grey;
    }

    &__tab {
+      font-size: $x-small;
      border: none;
-      bottom: -2px;
-      padding-bottom: $pad-base;
+      padding: 0 0 $pad-base 0;
+      margin-left: 40px;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;

      &:focus {
        box-shadow: none;
        outline: auto;
      }

+      // Bolding text when the tab 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;
+      }
+
      &:after {
        background-color: transparent;
      }

      &:first-child {
-        padding-left: 0;
+        margin-left: 0;
      }
    }

    &__tab--selected, &__tab--selected:focus {
      font-weight: $bold;
-      border-bottom: 2px solid $core-purple;
+      border-bottom: 1px solid $core-blue;
    }
  }
 }
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.jsx
@ -300,20 +300,20 @@ export class UserManagementPage extends Component {
    return (
      <div className={`${baseClass} body-wrap`}>
        <div className={`${baseClass}__heading-wrapper`}>
-          <div className={`${baseClass}__add-user-wrap`}>
-            <p className={`${baseClass}__page-description`}>Invite new users, customize user permissions, and disable users in Fleet.</p>
-            <Button
-              className={`${baseClass}__add-user-btn button button--brand`}
-              disabled={!config.configured}
-              onClick={toggleInviteUserModal}
-              title={config.configured ? 'Add User' : 'Email must be configured to add users'}
-            >
-              Add new user
-            </Button>
-          </div>
+          <p className={`${baseClass}__page-description`}>Invite new users, customize user permissions, and disable users in Fleet.</p>
        </div>
        {renderSmtpWarning()}
-        <p className={`${baseClass}__user-count`}>{resourcesCount} users</p>
+        <div className={`${baseClass}__add-user-wrap`}>
+          <p className={`${baseClass}__user-count`}>{resourcesCount} users</p>
+          <Button
+            className={'button button--brand'}
+            disabled={!config.configured}
+            onClick={toggleInviteUserModal}
+            title={config.configured ? 'Add User' : 'Email must be configured to add users'}
+          >
+            Invite user
+          </Button>
+        </div>
        {renderUserTable()}
        {renderModal()}
      </div>
--- a/frontend/pages/admin/UserManagementPage/UserManagementPage.tests.jsx
+++ b/frontend/pages/admin/UserManagementPage/UserManagementPage.tests.jsx
@ -104,7 +104,7 @@ describe('UserManagementPage - component', () => {
    });

    it(
-      'displays a disabled "Add User" button if email is not configured',
+      'displays a disabled "Invite user" button if email is not configured',
      () => {
        const notConfiguredStore = { ...store, app: { config: { configured: false } } };
        const notConfiguredMockStore = reduxMockStore(notConfiguredStore);
@ -118,7 +118,7 @@ describe('UserManagementPage - component', () => {
          mockStore: configuredMockStore,
        }));

-        expect(notConfiguredPage.find('Button').first().prop('disabled')).toEqual(true);
+        expect(notConfiguredPage.find('Button').at(1).prop('disabled')).toEqual(true);
        expect(configuredPage.find('Button').first().prop('disabled')).toEqual(false);
      },
    );
--- a/frontend/pages/admin/UserManagementPage/_styles.scss
+++ b/frontend/pages/admin/UserManagementPage/_styles.scss
@ -3,7 +3,9 @@
  padding: 30px;

  &__page-description {
-    font-size: $small;
+    font-size: $x-small;
+    color: $core-dark-blue-grey;
+    margin: 40px 0 20px 0;
  }

  &__wrapper {
@ -70,22 +72,13 @@
    font-size: $x-small;
    font-weight: $bold;
    color: $core-black;
-    margin-top: 34px;
+    margin: 0;
  }

  &__add-user-wrap {
    display: flex;
    justify-content: space-between;
-    align-items: flex-start;
-  }
-
-  &__add-user-btn {
-    height: 38px;
-    letter-spacing: normal;
-    margin-top: 0;
-    margin-left: $pad-half;
-    padding: 0;
-    width: 145px;
+    align-items: center;
  }

  &__users {
--- a/frontend/pages/packs/AllPacksPage/_styles.scss
+++ b/frontend/pages/packs/AllPacksPage/_styles.scss
@ -64,7 +64,7 @@
  }

  &__wrapper {
-    padding: 50px 30px;
+    padding: 40px 30px;
    min-height: 90vh;
  }

--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@ -60,7 +60,7 @@
  }

  &__wrapper {
-    padding: 50px 30px;
+    padding: 40px 30px;
    min-height: 90vh;
  }

--- a/frontend/styles/global/_global.scss
+++ b/frontend/styles/global/_global.scss
@ -52,7 +52,7 @@ a {
 }

 .body-wrap {
-  padding: 50px 30px 0;
+  padding: 40px 30px 0;
  border-radius: 3px;
  background-color: $white;
  border: solid 1px $white;
--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@ -2,6 +2,7 @@
 $white: #fff;
 $black: #000;
 $core-gradient: linear-gradient(360deg, #201e43 0%, #353d62 100%);
+$core-gradient-horizontal: linear-gradient(270deg, #201E43 0%, #353D62 100%);
 $core-black: #192147;
 $core-blue: #6a67fe;
 $core-blue-selected: rgba(106, 103, 254, 0.2);