Make the steps diagram honor the theme (#1538)

Signed-off-by: Miki <miki@amazon.com> Co-authored-by: Craig Perkins <cwperx@amazon.com> Co-authored-by: Ryan Liang <109499885+RyanL1997@users.noreply.github.com> (cherry picked from commit 20ba268)
opensearch-project · Aug 10, 2023 · 6dbcd1c · 6dbcd1c
1 parent a5e35e3
commit 6dbcd1c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 105 deletions.
diff --git a/public/apps/configuration/_index.scss b/public/apps/configuration/_index.scss
@@ -41,3 +41,45 @@
 .limit-width-input {
   max-width: 400px;
 }
+
+.security-steps-diagram {
+  height: 114px;
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  &::before {
+    mask: url("../../assets/get_started_layer_1.svg") center / contain no-repeat;
+    background: $euiColorDarkestShade;
+  }
+
+  &::after {
+    mask: url("../../assets/get_started_layer_2.svg") center / contain no-repeat;
+    background: $euiColorPrimary;
+  }
+
+  @supports not (mask: center / contain no-repeat) {
+    /* stylelint-disable property-no-vendor-prefix */
+    &::before,
+    &::after {
+      -webkit-mask-repeat: no-repeat;
+      -webkit-mask-size: contain;
+      -webkit-mask-position: center;
+    }
+
+    &::before {
+      -webkit-mask-image: url("../../assets/get_started_layer_1.svg");
+    }
+
+    &::after {
+      -webkit-mask-image: url("../../assets/get_started_layer_2.svg");
+    }
+    /* stylelint-enable property-no-vendor-prefix */
+  }
+}
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
@@ -18,7 +18,6 @@ import {
   EuiCode,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiImage,
   EuiPageHeader,
   EuiPanel,
   EuiSpacer,
@@ -31,7 +30,6 @@ import { FormattedMessage } from '@osd/i18n/react';
 import { flow } from 'lodash';
 import { HashRouter as Router, Route } from 'react-router-dom';
 import { AppDependencies } from '../../types';
-import securityStepsDiagram from '../../../assets/get_started.svg';
 import { buildHashUrl, buildUrl } from '../utils/url-builder';
 import { Action, ResourceType, RouteItem } from '../types';
 import { API_ENDPOINT_CACHE, DocLinks } from '../constants';
@@ -189,16 +187,7 @@ export function GetStarted(props: AppDependencies) {
           </EuiText>
 
           <EuiSpacer size="l" />
-          {props.config.ui.backend_configurable && (
-            <div className="text-center">
-              <EuiImage
-                size="xl"
-                alt="Three steps to set up your security"
-                url={securityStepsDiagram}
-                style={{ maxWidth: '100%', height: 'auto', width: 'auto' }}
-              />
-            </div>
-          )}
+          {props.config.ui.backend_configurable && <div className={'security-steps-diagram'} />}
 
           <EuiSpacer size="l" />
 

diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -279,21 +279,8 @@ exports[`Get started (landing page) renders when backend configuration is enable
         size="l"
       />
       <div
-        className="text-center"
-      >
-        <EuiImage
-          alt="Three steps to set up your security"
-          size="xl"
-          style={
-            Object {
-              "height": "auto",
-              "maxWidth": "100%",
-              "width": "auto",
-            }
-          }
-          url="test-file-stub"
-        />
-      </div>
+        className="security-steps-diagram"
+      />
       <EuiSpacer
         size="l"
       />