Design Edits

x-pack/plugins/security/public/components/_index.scss

@@ -0,0 +1 @@
+@import './management/users/index';

x-pack/plugins/security/public/components/management/users/_index.scss

@@ -0,0 +1 @@
+@import './users';

x-pack/plugins/security/public/components/management/users/_users.scss

@@ -0,0 +1,16 @@
+// HACK -- Fix for background color full-height of browser
+.secUsersEditPage,
+.secUsersListingPage {
+  min-height: calc(100vh - 70px);
+}
+
+.secUsersListingPage__content {
+  flex-grow: 0;
+}
+
+.secUsersEditPage__content {
+  max-width: $secFormWidth;
+  margin-left: auto;
+  margin-right: auto;
+  flex-grow: 0;
+}

x-pack/plugins/security/public/components/management/users/edit_user.js

@@ -386,9 +386,9 @@ class EditUserUI extends Component {
     }
 
     return (
-      <EuiPage className="mgtUsersEditPage">
+      <EuiPage className="secUsersEditPage">
         <EuiPageBody>
-          <EuiPageContent className="mgtUsersEditPage__content">
+          <EuiPageContent className="secUsersEditPage__content">
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle>

x-pack/plugins/security/public/components/management/users/users.js

@@ -93,7 +93,7 @@ class UsersUI extends Component {
     const { apiClient, intl } = this.props;
     if (permissionDenied) {
       return (
-        <EuiPage className="mgtUsersListingPage">
+        <EuiPage className="secUsersListingPage">
           <EuiPageBody>
             <EuiPageContent horizontalPosition="center">
               <EuiEmptyPrompt
@@ -222,9 +222,9 @@ class UsersUI extends Component {
         return normalized.indexOf(normalizedQuery) !== -1;
       }) : users;
     return (
-      <EuiPage className="mgtUsersListingPage">
+      <EuiPage className="secUsersListingPage">
         <EuiPageBody>
-          <EuiPageContent className="mgtUsersListingPage__content">
+          <EuiPageContent className="secUsersListingPage__content">
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle>

x-pack/plugins/security/public/index.scss

@@ -1,10 +1,17 @@
 @import 'ui/public/styles/styling_constants';
 
-// Logged out styles
-@import './views/logged_out/index';
+// Prefix all styles with "kbn" to avoid conflicts.
+// Examples
+//   secChart
+//   secChart__legend
+//   secChart__legend--small
+//   secChart__legend-isLoading
 
-// Login styles
-@import './views/login/index';
+$secFormWidth: 460px;
+
+// Public components
+@import './components/index';
+
+// Public views
+@import './views/index';
 
-// Management styles
-@import './views/management/index';

x-pack/plugins/security/public/views/_index.scss

@@ -0,0 +1,8 @@
+// Public views
+@import './logged_out/index';
+
+// Login styles
+@import './login/index';
+
+// Management styles
+@import './management/index';

x-pack/plugins/security/public/views/management/_index.scss

@@ -0,0 +1,2 @@
+@import './change_password_form/index';
+@import './edit_role/index';

x-pack/plugins/security/public/views/management/change_password_form/_change_password_form.scss

@@ -0,0 +1,17 @@
+.secChangePasswordForm__panel {
+  max-width: $secFormWidth;
+}
+
+.secChangePasswordForm__subLabel {
+  margin-bottom: $euiSizeS;
+}
+
+.secChangePasswordForm__footer {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  .kuiButton + .kuiButton {
+    margin-left: $euiSizeS;
+  }
+}

x-pack/plugins/security/public/views/management/change_password_form/_index.scss

@@ -0,0 +1 @@
+@import './change_password_form';

x-pack/plugins/security/public/views/management/change_password_form/change_password_form.html

@@ -21,13 +21,13 @@
     <!-- Changing password -->
     <div
       ng-show="changePasswordController.isFormVisible"
-      class="kuiFormPanel mgtForm__panel"
+      class="kuiFormPanel secChangePasswordForm__panel"
     >
       <!-- Current password -->
       <div class="kuiFormSection" ng-if="requireCurrentPassword">
         <label
           for="password"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.currentPasswordLabel"
           i18n-default-message="Current password"
         ></label>
@@ -54,7 +54,7 @@
       <div class="kuiFormSection">
         <label
           for="newPassword"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.newPasswordLabel"
           i18n-default-message="New password"
         ></label>
@@ -82,9 +82,9 @@
       <div class="kuiFormSection">
         <label
           for="confirmPassword"
-          class="kuiFormSubLabel mgtForm__subLabel"
+          class="kuiFormSubLabel secChangePasswordForm__subLabel"
           i18n-id="xpack.security.management.changePasswordForm.confirmPasswordLabel"
-          i18n-default-message="Confirm password"  
+          i18n-default-message="Confirm password"
         ></label>
         <input
           type="password"
@@ -112,12 +112,12 @@
           <span
             i18n-id="xpack.security.management.changePasswordForm.updateAndRestartKibanaDescription"
             i18n-default-message="After you change the password for the kibana user, you must update the kibana.yml file and restart Kibana"
-          ></span>          
+          ></span>
         </div>
       </div>
 
       <!-- Form actions -->
-      <div class="kuiFormFooter mgtForm__footer">
+      <div class="kuiFormFooter secChangePasswordForm__footer">
         <button
           type="button"
           data-test-subj="saveChangesButton"

x-pack/plugins/security/public/views/management/edit_role/_index.scss

@@ -0,0 +1 @@
+@import './components/index';

x-pack/plugins/security/public/views/management/edit_role/components/_index.scss

@@ -0,0 +1,7 @@
+@import './collapsible_panel/collapsible_panel';
+@import './privileges/kibana/space_aware_privilege_section/index';
+
+.secPrivilegeFeatureIcon {
+  flex-shrink: 0;
+  margin-right: $euiSizeS;
+}

x-pack/plugins/security/public/views/management/edit_role/components/privileges/es/elasticsearch_privileges.tsx

@@ -169,7 +169,7 @@ class ElasticsearchPrivilegesUI extends Component<Props, {}> {
         <EuiHorizontalRule />
 
         {this.props.editable && (
-          <EuiButton size={'s'} iconType={'plusInCircle'} onClick={this.addIndexPrivilege}>
+          <EuiButton iconType={'plusInCircleFilled'} onClick={this.addIndexPrivilege}>
             <FormattedMessage
               id="xpack.security.management.editRoles.elasticSearchPrivileges.addIndexPrivilegesButtonLabel"
               defaultMessage="Add index privilege"

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/feature_table/feature_table.tsx

@@ -6,15 +6,14 @@
 
 import {
   EuiIcon,
+  // @ts-ignore
   EuiIconTip,
   // @ts-ignore
   EuiInMemoryTable,
   // @ts-ignore
   EuiSuperSelect,
   EuiText,
-  EuiTextProps,
 } from '@elastic/eui';
-import { EuiIconProps } from '@elastic/eui/src/components/icon/icon';
 import { InjectedIntl } from '@kbn/i18n/react';
 import _ from 'lodash';
 import React, { Component } from 'react';
@@ -74,7 +73,7 @@ export class FeatureTable extends Component<Props, {}> {
       role,
     }));
 
-    return <EuiInMemoryTable columns={this.getColumns()} items={items} />;
+    return <EuiInMemoryTable responsive={false} columns={this.getColumns()} items={items} />;
   }
 
   public onChange = (featureId: string) => (privilege: string) => {
@@ -120,22 +119,23 @@ export class FeatureTable extends Component<Props, {}> {
             </EuiText>
           );
           tooltipElement = (
-            <EuiIconTip type={'iInCircle'} color={'primary'} content={tooltipContent} />
+            <EuiIconTip
+              // TODO: Waiting on update from EUI
+              // iconProps={{
+              //   className: 'eui-alignTop',
+              // }}
+              type={'iInCircle'}
+              color={'subdued'}
+              content={tooltipContent}
+            />
           );
         }
 
-        const textProps: EuiTextProps = {};
-        const iconProps: EuiIconProps = {};
-        if (!feature.hasAnyPrivilegeAssigned) {
-          textProps.color = 'subdued';
-          iconProps.color = 'subdued';
-        }
-
         return (
-          <EuiText {...textProps}>
-            <EuiIcon {...iconProps} type={feature.icon} />
-            &ensp; {feature.name} {tooltipElement}
-          </EuiText>
+          <span>
+            <EuiIcon size="m" type={feature.icon} className="secPrivilegeFeatureIcon" />
+            {feature.name} {tooltipElement}
+          </span>
         );
       },
     },

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/_index.scss

@@ -0,0 +1 @@
+@import './privilege_matrix';

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/_privilege_matrix.scss

@@ -0,0 +1,5 @@
+.secPrivilegeMatrix__row--isBasePrivilege,
+.secPrivilegeMatrix__cell--isGlobalPrivilege,
+.secPrivilegeTable__row--isGlobalSpace, {
+  background-color: $euiColorLightestShade;
+}

x-pack/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/privilege_display.tsx

@@ -36,7 +36,7 @@ export const SupercededPrivilegeDisplay: SFC<SupercededProps> = (props: Superced
   return (
     <PrivilegeDisplay
       {...rest}
-      iconType={'questionInCircle'}
+      iconType={'lock'}
       tooltipContent={
         <FormattedMessage
           id="foo"
@@ -62,11 +62,7 @@ function getDisplayValue(privilege: string | string[], styleMissingPrivilege?: b
     privileges.length === 0 || (privileges.length === 1 && privileges.includes(NO_PRIVILEGE_VALUE));
 
   if (isPrivilegeMissing && styleMissingPrivilege) {
-    displayValue = (
-      <EuiText>
-        <EuiIcon size={'s'} type={'minusInCircle'} /> none
-      </EuiText>
-    );
+    displayValue = <EuiIcon color="subdued" type={'minusInCircle'} />;
   } else {
     displayValue = privileges.map(p => _.capitalize(p)).join(', ');
   }
@@ -79,7 +75,17 @@ function getIconTip(iconType?: IconType, tooltipContent?: ReactNode) {
     return null;
   }
 
-  return <EuiIconTip type={iconType} content={tooltipContent} size={'s'} />;
+  return (
+    <EuiIconTip
+      // TODO: Waiting on update from EUI
+      // iconProps={{
+      //   className: 'eui-alignTop',
+      // }}
+      type={iconType}
+      content={tooltipContent}
+      size={'s'}
+    />
+  );
 }
 
 function coerceToArray(privilege: string | string[]): string[] {