[index management] Borealis theme improvements v2 (elastic#204484)

## Summary Some simple theme updates outlined in elastic#199715
JoseLuisGJ · Dec 19, 2024 · 30ac6be · 30ac6be
1 parent b3b4646
commit 30ac6be
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 18 deletions.
diff --git a/...plication/sections/home/index_list/details_page/details_page_overview/aliases_details.tsx b/...plication/sections/home/index_list/details_page/details_page_overview/aliases_details.tsx
@@ -7,7 +7,6 @@
 
 import React, { FunctionComponent, useState } from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { i18n } from '@kbn/i18n';
 import {
   EuiBadge,
@@ -23,6 +22,7 @@ import {
   EuiText,
   EuiTextColor,
   EuiTitle,
+  useEuiFontSize,
 } from '@elastic/eui';
 
 import { Index } from '../../../../../../../common';
@@ -31,6 +31,7 @@ import { OverviewCard } from './overview_card';
 const MAX_VISIBLE_ALIASES = 3;
 
 export const AliasesDetails: FunctionComponent<{ aliases: Index['aliases'] }> = ({ aliases }) => {
+  const largeFontSize = useEuiFontSize('l').fontSize;
   const [isShowingAliases, setIsShowingAliases] = useState<boolean>(false);
   if (!Array.isArray(aliases)) {
     return null;
@@ -58,7 +59,7 @@ export const AliasesDetails: FunctionComponent<{ aliases: Index['aliases'] }> =
               <EuiFlexItem grow={false}>
                 <EuiText
                   css={css`
-                    font-size: ${euiThemeVars.euiFontSizeL};
+                    font-size: ${largeFontSize};
                   `}
                 >
                   {aliases.length}

diff --git a/...ation/sections/home/index_list/details_page/details_page_overview/data_stream_details.tsx b/...ation/sections/home/index_list/details_page/details_page_overview/data_stream_details.tsx
@@ -7,9 +7,16 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  useEuiFontSize,
+} from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -22,6 +29,7 @@ import { OverviewCard } from './overview_card';
 export const DataStreamDetails: FunctionComponent<{ dataStreamName: string }> = ({
   dataStreamName,
 }) => {
+  const largeFontSize = useEuiFontSize('l').fontSize;
   const { error, data: dataStream, isLoading, resendRequest } = useLoadDataStream(dataStreamName);
   const {
     core: { getUrlForApp },
@@ -32,7 +40,7 @@ export const DataStreamDetails: FunctionComponent<{ dataStreamName: string }> =
       <EuiFlexItem grow={false}>
         <EuiText
           css={css`
-            font-size: ${euiThemeVars.euiFontSizeL};
+            font-size: ${largeFontSize};
           `}
         >
           {dataStream?.generation}

diff --git a/...application/sections/home/index_list/details_page/details_page_overview/overview_card.tsx b/...application/sections/home/index_list/details_page/details_page_overview/overview_card.tsx
@@ -7,8 +7,14 @@
 
 import React, { FunctionComponent, ReactNode } from 'react';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiSplitPanel, EuiTitle } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiSplitPanel,
+  EuiTitle,
+  useEuiTheme,
+} from '@elastic/eui';
 
 interface Props {
   title: string;
@@ -29,6 +35,7 @@ export const OverviewCard: FunctionComponent<Props> = ({
   footer: { left: footerLeft, right: footerRight } = {},
   'data-test-subj': dataTestSubj,
 }) => {
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiFlexItem>
       <EuiSplitPanel.Outer grow hasBorder={true} data-test-subj={dataTestSubj}>
@@ -43,7 +50,7 @@ export const OverviewCard: FunctionComponent<Props> = ({
             wrap={true}
             alignItems="center"
             css={css`
-              min-height: ${euiThemeVars.euiButtonHeightSmall};
+              min-height: ${euiTheme.size.xl};
             `}
           >
             <EuiFlexItem grow={false}>{contentLeft}</EuiFlexItem>

diff --git a/...on/sections/home/index_list/details_page/details_page_overview/size_doc_count_details.tsx b/...on/sections/home/index_list/details_page/details_page_overview/size_doc_count_details.tsx
@@ -7,9 +7,15 @@
 
 import React, { FunctionComponent } from 'react';
 import { css } from '@emotion/react';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  useEuiFontSize,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { Index } from '../../../../../../../common';
 import { useAppContext } from '../../../../../app_context';
 import { OverviewCard } from './overview_card';
@@ -18,6 +24,7 @@ export const SizeDocCountDetails: FunctionComponent<{
   size: Index['size'];
   documents: Index['documents'];
 }> = ({ size, documents }) => {
+  const largeFontSize = useEuiFontSize('l').fontSize;
   const { config } = useAppContext();
   if (!config.enableSizeAndDocCount) {
     return null;
@@ -34,7 +41,7 @@ export const SizeDocCountDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiThemeVars.euiFontSizeL};
+                  font-size: ${largeFontSize};
                 `}
               >
                 {size}

diff --git a/...pplication/sections/home/index_list/details_page/details_page_overview/status_details.tsx b/...pplication/sections/home/index_list/details_page/details_page_overview/status_details.tsx
@@ -15,9 +15,9 @@ import {
   EuiText,
   EuiTextColor,
   EuiBadgeProps,
+  useEuiFontSize,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
-import { euiThemeVars } from '@kbn/ui-theme';
 
 import { useAppContext } from '../../../../../app_context';
 import { Index } from '../../../../../../../common';
@@ -54,6 +54,7 @@ export const StatusDetails: FunctionComponent<{
   status: Index['status'];
   health: Index['health'];
 }> = ({ documents, documentsDeleted, status, health }) => {
+  const largeFontSize = useEuiFontSize('l').fontSize;
   const { config } = useAppContext();
   if (!config.enableIndexStats || !health) {
     return null;
@@ -72,7 +73,7 @@ export const StatusDetails: FunctionComponent<{
           <EuiText
             color={status === 'close' ? 'danger' : 'success'}
             css={css`
-              font-size: ${euiThemeVars.euiFontSizeL};
+              font-size: ${largeFontSize};
             `}
           >
             {status === 'close'

diff --git a/...plication/sections/home/index_list/details_page/details_page_overview/storage_details.tsx b/...plication/sections/home/index_list/details_page/details_page_overview/storage_details.tsx
@@ -8,8 +8,14 @@
 import React, { FunctionComponent } from 'react';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { euiThemeVars } from '@kbn/ui-theme';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiTextColor } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiText,
+  EuiTextColor,
+  useEuiFontSize,
+} from '@elastic/eui';
 
 import { useAppContext } from '../../../../../app_context';
 import { Index } from '../../../../../../../common';
@@ -21,6 +27,7 @@ export const StorageDetails: FunctionComponent<{
   primary: Index['primary'];
   replica: Index['replica'];
 }> = ({ primarySize, size, primary, replica }) => {
+  const largeFontSize = useEuiFontSize('l').fontSize;
   const { config } = useAppContext();
   if (!config.enableIndexStats) {
     return null;
@@ -37,7 +44,7 @@ export const StorageDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiThemeVars.euiFontSizeL};
+                  font-size: ${largeFontSize};
                 `}
               >
                 {primarySize}
@@ -57,7 +64,7 @@ export const StorageDetails: FunctionComponent<{
             <EuiFlexItem grow={false}>
               <EuiText
                 css={css`
-                  font-size: ${euiThemeVars.euiFontSizeL};
+                  font-size: ${largeFontSize};
                 `}
               >
                 {size}

diff --git a/x-pack/plugins/index_management/tsconfig.json b/x-pack/plugins/index_management/tsconfig.json
@@ -40,7 +40,6 @@
     "@kbn/core-http-browser",
     "@kbn/search-api-panels",
     "@kbn/cloud-plugin",
-    "@kbn/ui-theme",
     "@kbn/code-editor",
     "@kbn/monaco",
     "@kbn/console-plugin",