Replace SCSS with Emotion in solution_nav_avatar

elastic · Dec 17, 2024 · d4c9f09 · d4c9f09
1 parent a7cdf2a
commit d4c9f09
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_avatar.scss b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_avatar.scss
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_avatar.tsx b/src/plugins/kibana_react/public/page_template/solution_nav/solution_nav_avatar.tsx
@@ -7,12 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './solution_nav_avatar.scss';
-
+import { css } from '@emotion/css';
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { DistributiveOmit, EuiAvatar, EuiAvatarProps } from '@elastic/eui';
+import {
+  DistributiveOmit,
+  EuiAvatar,
+  EuiAvatarProps,
+  useEuiTheme,
+  useEuiShadow,
+} from '@elastic/eui';
 
 export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit<EuiAvatarProps, 'size'> & {
   /**
@@ -27,13 +32,30 @@ export type KibanaPageTemplateSolutionNavAvatarProps = DistributiveOmit<EuiAvata
 export const KibanaPageTemplateSolutionNavAvatar: FunctionComponent<
   KibanaPageTemplateSolutionNavAvatarProps
 > = ({ className, size, ...rest }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const pageTemplateSolutionNavAvatarStyles = {
+    base: css`
+      ${css(useEuiShadow('s'))};
+    `,
+    xxl: css`
+      ${useEuiShadow('m')};
+      line-height: 100px;
+      border-radius: 100px;
+      display: inline-block;
+      background: ${euiTheme.colors.backgroundBasePlain} url('../../assets/texture.svg') no-repeat;
+      background-size: cover, 125%;
+      text-align: center;
+    `,
+  };
+
   return (
-    // @ts-ignore Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
+    // @ts-expect-error Complains about ExclusiveUnion between `iconSize` and `iconType`, but works fine
     <EuiAvatar
       className={classNames(
-        'kbnPageTemplateSolutionNavAvatar',
+        pageTemplateSolutionNavAvatarStyles.base,
         {
-          [`kbnPageTemplateSolutionNavAvatar--${size}`]: size,
+          [pageTemplateSolutionNavAvatarStyles.xxl]: size === 'xxl',
         },
         className
       )}