pr styles changes

elastic · Sep 10, 2024 · 639f044 · 639f044
1 parent b100d3a
commit 639f044
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 82 deletions.
diff --git a/.../common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.styles.ts b/.../common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.styles.ts
@@ -5,78 +5,52 @@
  * 2.0.
  */
 
-import { useMemo } from 'react';
 import { COLOR_MODES_STANDARD, useEuiTheme } from '@elastic/eui';
 import { css } from '@emotion/css';
 
 export const useCardStyles = () => {
   const { euiTheme, colorMode } = useEuiTheme();
   const isDarkMode = colorMode === COLOR_MODES_STANDARD.dark;
 
-  const cardBodyStyle = useMemo(() => {
-    const cardBaseStyle = {
-      minWidth: '315px',
-      ':hover': {
-        '.css-g3povl-euiCard__text-left-interactive': {
-          textDecoration: 'none',
-        },
-        '.euiButtonEmpty': {
-          textDecoration: 'underline',
-        },
-        '.euiLink': {
-          textDecoration: 'underline',
-        },
-      },
-    };
-    return isDarkMode
-      ? css({
-          ...cardBaseStyle,
-          backgroundColor: `${euiTheme.colors.lightestShade}`,
-          boxShadow: 'none',
-          border: `1px solid ${euiTheme.colors.mediumShade}`,
-        })
-      : css(cardBaseStyle);
-  }, [isDarkMode, euiTheme]);
+  return css`
+    min-width: 315px;
+    &.headerCard:hover {
+      *:not(.headerCardContent) {
+        text-decoration: none;
+      }
+      .headerCardContent,
+      .headerCardContent * {
+        text-decoration: underline;
+        text-decoration-color: ${euiTheme.colors.primaryText};
+      }
+    }
 
-  const cardStyles = useMemo(() => {
-    return {
-      cardBodyStyle,
-      cardTitleStyle: css({
-        fontSize: `${euiTheme.base * 0.875}px`,
-        fontWeight: euiTheme.font.weight.semiBold,
-        lineHeight: euiTheme.size.l,
-        color: euiTheme.colors.title,
-        textDecoration: 'none',
-      }),
-      cardDescriptionStyle: css({
-        fontSize: '12.25px',
-        fontWeight: euiTheme.font.weight.regular,
-        lineHeight: `${euiTheme.base * 1.25}px`,
-        color: euiTheme.colors.darkestShade,
-      }),
-      cardButtonStyle: css({
-        padding: '0px',
-        height: 'auto',
-        fontSize: euiTheme.size.m,
-        fontWeight: euiTheme.font.weight.medium,
-        lineHeight: euiTheme.size.base,
-        ':focus': {
-          backgroundColor: 'transparent',
-        },
-      }),
-    };
-  }, [
-    cardBodyStyle,
-    euiTheme.base,
-    euiTheme.colors.darkestShade,
-    euiTheme.colors.title,
-    euiTheme.font.weight.medium,
-    euiTheme.font.weight.regular,
-    euiTheme.font.weight.semiBold,
-    euiTheme.size.base,
-    euiTheme.size.l,
-    euiTheme.size.m,
-  ]);
+    ${isDarkMode
+      ? `
+          background-color: ${euiTheme.colors.lightestShade};
+          box-shadow: none;
+          border: 1px solid ${euiTheme.colors.mediumShade};
+        `
+      : ''}
 
-  return cardStyles;
+    .headerCardTitle {
+      font-size: ${euiTheme.base * 0.875}px;
+      font-weight: ${euiTheme.font.weight.semiBold};
+      line-height: ${euiTheme.size.l};
+      color: ${euiTheme.colors.title};
+      text-decoration: none;
+    }
+
+    .headerCardImage {
+      width: 64px;
+      height: 64px;
+    }
+
+    .headerCardDescription {
+      font-size: 12.25px;
+      font-weight: ${euiTheme.font.weight.regular};
+      line-height: ${euiTheme.base * 1.25}px;
+      color: ${euiTheme.colors.darkestShade};
+    }
+  `;
 };
diff --git a/...public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.tsx b/...public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.tsx
@@ -9,6 +9,7 @@ import type { ReactNode } from 'react';
 import React from 'react';
 import type { EuiCardProps } from '@elastic/eui';
 import { EuiCard, EuiTitle } from '@elastic/eui';
+import classNames from 'classnames';
 import { useCardStyles } from './card.styles';
 
 interface CardProps {
@@ -21,16 +22,15 @@ interface CardProps {
   target?: EuiCardProps['target'];
 }
 
-const IMAGE_WIDTH = 64;
-
 export const Card: React.FC<CardProps> = React.memo((props) => {
   const { icon, title, description, children, onClick, href, target } = props;
 
-  const { cardBodyStyle, cardTitleStyle, cardDescriptionStyle } = useCardStyles();
+  const cardStyles = useCardStyles();
+  const cardClassName = classNames(cardStyles, 'headerCard');
 
   return (
     <EuiCard
-      className={cardBodyStyle}
+      className={cardClassName}
       onClick={onClick}
       href={href}
       target={target}
@@ -40,20 +40,19 @@ export const Card: React.FC<CardProps> = React.memo((props) => {
       icon={
         <img
           data-test-subj="data-ingestion-header-card-icon"
+          className="headerCardImage"
           src={icon}
           alt={title}
-          height={IMAGE_WIDTH}
-          width={IMAGE_WIDTH}
         />
       }
       title={
-        <EuiTitle>
-          <h3 className={cardTitleStyle}>{title}</h3>
+        <EuiTitle className="headerCardTitle">
+          <h3>{title}</h3>
         </EuiTitle>
       }
-      description={<p className={cardDescriptionStyle}>{description}</p>}
+      description={<p className="headerCardDescription">{description}</p>}
     >
-      {children}
+      <div className="headerCardContent">{children}</div>
     </EuiCard>
   );
 });

diff --git a/...ponents/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_card.tsx b/...ponents/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_card.tsx
@@ -7,11 +7,10 @@
 
 import React, { useState } from 'react';
 import { useLocalStorage } from 'react-use';
-import { EuiButtonEmpty } from '@elastic/eui';
+import { EuiLink, EuiText } from '@elastic/eui';
 import { Card } from '../card';
 import { DataIngestionHubVideoModal } from './video_modal';
 import * as i18n from '../../translations';
-import { useCardStyles } from '../card.styles';
 
 interface VideoCardProps {
   icon: string;
@@ -31,8 +30,6 @@ const IS_ONBOARDING_HUB_VISITED_LOCAL_STORAGE_KEY = 'secutirySolution.isOnboardi
 
 export const VideoCard: React.FC<VideoCardProps> = React.memo((props) => {
   const { icon, title, description, spaceId } = props;
-
-  const { cardButtonStyle } = useCardStyles();
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const isOnboardingHubVisitedStorageKey = getStorageKeyBySpace(
@@ -59,9 +56,11 @@ export const VideoCard: React.FC<VideoCardProps> = React.memo((props) => {
   return (
     <>
       <Card onClick={showVideoModal} icon={icon} title={title} description={description}>
-        <EuiButtonEmpty color="primary" onClick={showVideoModal} className={cardButtonStyle}>
-          {i18n.DATA_INGESTION_HUB_HEADER_VIDEO_LINK_TITLE}
-        </EuiButtonEmpty>
+        <EuiText size="xs">
+          <EuiLink onClick={showVideoModal}>
+            {i18n.DATA_INGESTION_HUB_HEADER_VIDEO_LINK_TITLE}
+          </EuiLink>
+        </EuiText>
       </Card>
       {isModalVisible && (
         <DataIngestionHubVideoModal