Align design to adv settings, copy updates

cqliu1 · Apr 13, 2021 · e6c9310 · e6c9310
1 parent 7b4ff15
commit e6c9310
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 12 deletions.
diff --git a/src/plugins/presentation_util/public/components/labs/labs_flyout.tsx b/src/plugins/presentation_util/public/components/labs/labs_flyout.tsx
@@ -105,9 +105,18 @@ export const LabsFlyout = (props: Props) => {
 
   footer = (
     <EuiFlyoutFooter>
-      <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
-        <EuiFlexItem grow={false}>{resetButton}</EuiFlexItem>
-        <EuiFlexItem grow={false}>{refreshButton}</EuiFlexItem>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiButtonEmpty iconType="cross" onClick={() => onClose()} flush="left">
+            Close
+          </EuiButtonEmpty>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
+            <EuiFlexItem grow={false}>{resetButton}</EuiFlexItem>
+            <EuiFlexItem grow={false}>{refreshButton}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
   );

diff --git a/src/plugins/presentation_util/public/components/labs/project_list_item.scss b/src/plugins/presentation_util/public/components/labs/project_list_item.scss
@@ -10,7 +10,7 @@
     left: 4px;
     bottom: $euiSizeL;
     width: 4px;
-    background: $euiColorPrimary;
+    background: $euiColorSecondary;
     content: '';
   }
 
@@ -37,10 +37,18 @@
   }
 
   &--isOverridden:before {
-    left: -12px;
+    left: -$euiSizeS;
   }
 
   &--isOverridden:first-child:before {
     top: 0;
   }
 }
+
+.projectListItem__titlePendingChangesIndicator {
+  margin-left: $euiSizeS;
+}
+
+.projectListItem__solutions {
+  text-transform: capitalize;
+}
diff --git a/src/plugins/presentation_util/public/components/labs/project_list_item.tsx b/src/plugins/presentation_util/public/components/labs/project_list_item.tsx
@@ -15,6 +15,8 @@ import {
   EuiText,
   EuiFormFieldset,
   EuiScreenReaderOnly,
+  EuiSpacer,
+  EuiIconTip,
 } from '@elastic/eui';
 import classnames from 'classnames';
 
@@ -47,8 +49,20 @@ export const ProjectListItem = ({ project, onStatusChange }: Props) => {
         <EuiFlexItem>
           <EuiFlexGroup direction="column" gutterSize="xs" responsive={false}>
             <EuiFlexItem grow={false}>
-              <EuiTitle className="projectListItem__title" size="s">
-                <h2>{name}</h2>
+              <EuiTitle className="projectListItem__title" size="xs">
+                <h2>
+                  {name}
+                  {isOverride ? (
+                    <span className="projectListItem__titlePendingChangesIndicator">
+                      <EuiIconTip
+                        content="Default overridden"
+                        position="top"
+                        type="dot"
+                        color="secondary"
+                      />
+                    </span>
+                  ) : null}
+                </h2>
               </EuiTitle>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
@@ -59,10 +73,14 @@ export const ProjectListItem = ({ project, onStatusChange }: Props) => {
               </div>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiText size="s">{description}</EuiText>
+              <EuiSpacer size="s" />
+              <EuiText size="s" color="subdued">
+                {description}
+              </EuiText>
             </EuiFlexItem>
             <EuiFlexItem>
-              <EuiText size="s" color="subdued">
+              <EuiSpacer size="xs" />
+              <EuiText size="xs" color="subdued">
                 {isActive ? strings.getEnabledStatusMessage() : strings.getDisabledStatusMessage()}
               </EuiText>
             </EuiFlexItem>

diff --git a/src/plugins/presentation_util/public/i18n/labs.tsx b/src/plugins/presentation_util/public/i18n/labs.tsx
@@ -9,6 +9,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiCode } from '@elastic/eui';
 
 export const LabsStrings = {
   Components: {
@@ -18,7 +19,8 @@ export const LabsStrings = {
           defaultMessage: 'Kibana',
         }),
         help: i18n.translate('presentationUtil.labs.components.kibanaSwitchHelp', {
-          defaultMessage: 'Sets the corresponding Advanced Setting for this lab project in Kibana',
+          defaultMessage:
+            'Sets the corresponding Advanced Setting for this lab project; affects all Kibana users',
         }),
       }),
       getBrowserSwitchText: () => ({
@@ -64,9 +66,9 @@ export const LabsStrings = {
       getDisabledStatusMessage: () => (
         <FormattedMessage
           id="presentationUtil.labs.components.defaultStatusMessage"
-          defaultMessage="{status} by default"
+          defaultMessage="Default: {status}"
           values={{
-            status: <strong>Disabled</strong>,
+            status: <EuiCode>Disabled</EuiCode>,
           }}
           description="Displays the current status of a lab project"
         />