addressing visual design feedback and adjusting copy

elastic · Jul 20, 2021 · de62a94 · de62a94
1 parent 6f84077
commit de62a94
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 50 deletions.
diff --git a/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/apps/main/components/layout/discover_layout.tsx
@@ -291,6 +291,7 @@ export function DiscoverLayout({
                 hasShadow={false}
                 className={classNames('dscPageContent', {
                   'dscPageContent--centered': contentCentered,
+                  'dscPageContent--emptyPrompt': resultState === 'none',
                 })}
               >
                 {resultState === 'none' && (

diff --git a/src/plugins/discover/public/application/apps/main/components/no_results/_no_results.scss b/src/plugins/discover/public/application/apps/main/components/no_results/_no_results.scss
@@ -1,3 +1,8 @@
 .dscNoResults {
-  padding: $euiSize;
+  padding: $euiSizeL;
 }
+
+.dscPageContent--emptyPrompt {
+  // override EUI specificity
+  max-width: $euiSizeXXL * 19 !important; // sass-lint:disable-line no-important
+}
diff --git a/...er/public/application/apps/main/components/no_results/assets/no_results_illustration.scss b/...er/public/application/apps/main/components/no_results/assets/no_results_illustration.scss
@@ -5,3 +5,15 @@
 .dscNoResultsIllustration__fly {
   fill: lightOrDarkTheme(#294492, #E6EBF2);
 }
+
+@include euiBreakpoint('xs', 's') {
+  .dscNoResults__illustration > svg {
+    width: $euiSize * 12;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  .dscNoResults__title {
+    text-align: center;
+  }
+}
diff --git a/...ver/public/application/apps/main/components/no_results/assets/no_results_illustration.tsx b/...ver/public/application/apps/main/components/no_results/assets/no_results_illustration.tsx
diff --git a/src/plugins/discover/public/application/apps/main/components/no_results/no_results.tsx b/src/plugins/discover/public/application/apps/main/components/no_results/no_results.tsx
@@ -40,21 +40,21 @@ export function DiscoverNoResults({
 }: DiscoverNoResultsProps) {
   const callOut = !error ? (
     <EuiFlexItem grow={false} className="dscNoResults">
+      <EuiTitle className="dscNoResults__title">
+        <h2 data-test-subj="discoverNoResults">
+          <FormattedMessage
+            id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
+            defaultMessage="No results match your search criteria"
+          />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="m" />
       <EuiFlexGroup gutterSize="xl" alignItems="center" direction="rowReverse" wrap>
-        <EuiFlexItem grow={1}>
+        <EuiFlexItem className="dscNoResults__illustration" grow={1}>
           <NoResultsIllustration />
         </EuiFlexItem>
         <EuiFlexItem grow={2}>
-          <EuiTitle>
-            <h2 data-test-subj="discoverNoResults">
-              <FormattedMessage
-                id="discover.noResults.searchExamples.noResultsMatchSearchCriteriaTitle"
-                defaultMessage="No results match your search criteria"
-              />
-            </h2>
-          </EuiTitle>
           {!!timeFieldName && getTimeFieldMessage()}
-          {timeFieldName && (hasFilters || hasQuery) && <EuiSpacer size="m" />}
           {(hasFilters || hasQuery) && (
             <AdjustSearch
               hasFilters={hasFilters}

diff --git a/...plugins/discover/public/application/apps/main/components/no_results/no_results_helper.tsx b/...plugins/discover/public/application/apps/main/components/no_results/no_results_helper.tsx
@@ -19,7 +19,7 @@ import {
 export function getTimeFieldMessage() {
   return (
     <Fragment>
-      <EuiDescriptionList>
+      <EuiDescriptionList compressed>
         <EuiDescriptionListTitle data-test-subj="discoverNoResultsTimefilter">
           <FormattedMessage
             id="discover.noResults.expandYourTimeRangeTitle"
@@ -29,7 +29,7 @@ export function getTimeFieldMessage() {
         <EuiDescriptionListDescription>
           <FormattedMessage
             id="discover.noResults.queryMayNotMatchTitle"
-            defaultMessage="You are searching time series data and no matches were found in the specified time range. Try searching over a larger period of time."
+            defaultMessage="Try searching over a larger period of time."
           />
         </EuiDescriptionListDescription>
       </EuiDescriptionList>
@@ -48,8 +48,8 @@ export function AdjustSearch({ hasFilters, hasQuery, onDisableFilters }: AdjustS
     <Fragment>
       {hasQuery && (
         <>
-          <EuiSpacer size="m" />
-          <EuiDescriptionList>
+          <EuiSpacer size="s" />
+          <EuiDescriptionList compressed>
             <EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustSearch">
               <FormattedMessage
                 id="discover.noResults.adjustSearch"
@@ -64,8 +64,8 @@ export function AdjustSearch({ hasFilters, hasQuery, onDisableFilters }: AdjustS
       )}
       {hasFilters && (
         <>
-          <EuiSpacer size="m" />
-          <EuiDescriptionList>
+          <EuiSpacer size="s" />
+          <EuiDescriptionList compressed>
             <EuiDescriptionListTitle data-test-subj="discoverNoResultsAdjustFilters">
               <FormattedMessage
                 id="discover.noResults.adjustFilters"