feat(kiali): update dark theme

plugins/kiali/src/components/BreadcrumbView/BreadcrumbView.tsx

@@ -5,7 +5,7 @@ import { Breadcrumbs } from '@material-ui/core';
 
 import { HistoryManager } from '../../app/History';
 import { isMultiCluster, Paths } from '../../config';
-import { kialiStyle, linkStyle } from '../../styles/StyleUtils';
+import { kialiStyle, useLinkStyle } from '../../styles/StyleUtils';
 import { dicIstioType } from '../../types/IstioConfigList';
 import { FilterSelected } from '../Filters/StatefulFilters';
 
@@ -83,6 +83,7 @@ export const BreadcrumbView = () => {
   const item = path ? path.item : '';
   const istioType = path ? path.istioType : '';
   const pathItem = path ? path.pathItem : '';
+  const linkStyle = useLinkStyle();
 
   const isIstio = isIstioF();
   const linkItem = isIstio ? (
@@ -97,6 +98,7 @@ export const BreadcrumbView = () => {
     // @ts-ignore
     dicIstioType[path?.istioType || '']
   }`;
+
   return (
     <div className={breadcrumStyle}>
       <Breadcrumbs>

plugins/kiali/src/components/Charts/SparklineChart.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { useTheme } from '@material-ui/core/styles';
 import {
   Chart,
   ChartArea,
@@ -32,10 +33,6 @@ type Props = ChartProps & {
   thresholds?: VCLines<RichDataPoint>;
 };
 
-const axisStyle = {
-  tickLabels: { fill: PFColors.Color100 },
-};
-
 export const INTERPOLATION_STRATEGY = 'monotoneX';
 
 export const SparklineChart = (props: Props) => {
@@ -45,6 +42,13 @@ export const SparklineChart = (props: Props) => {
   );
   const containerRef: React.RefObject<HTMLDivElement> | undefined =
     props.width === undefined ? React.createRef<HTMLDivElement>() : undefined;
+  const theme = useTheme();
+  const axisStyle = {
+    tickLabels: { fill: theme.palette.type === 'dark' ? '#dcdcdc' : '#000' },
+  };
+  const labelStyle = {
+    fill: theme.palette.type === 'dark' ? '#dcdcdc' : '#000',
+  };
 
   const handleResize = () => {
     if (containerRef?.current) {
@@ -156,7 +160,7 @@ export const SparklineChart = (props: Props) => {
                 x={15}
                 angle={0}
                 renderInPortal
-                style={{ fill: PFColors.Color100 }}
+                style={labelStyle}
               />
             }
             tickCount={2}

plugins/kiali/src/components/Overview/TLSInfo.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 
 import { Chip, Tooltip } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 
 import { KialiIcon } from '../../config/KialiIcon';
 import { infoStyle } from '../../pages/Overview/OverviewCard/OverviewCardControlPlaneNamespace';
-import { kialiStyle } from '../../styles/StyleUtils';
+import { getChipStyle, kialiStyle } from '../../styles/StyleUtils';
 import { CertsInfo } from '../../types/CertsInfo';
 
 type Props = {
@@ -60,6 +61,9 @@ function LockIcon(props: Props) {
 }
 
 export const TLSInfo = (props: Props) => {
+  const theme = useTheme();
+  const chipStyle = getChipStyle(theme);
+
   return (
     <div style={{ textAlign: 'left' }}>
       <div>
@@ -75,7 +79,7 @@ export const TLSInfo = (props: Props) => {
 
         <Chip
           size="small"
-          style={{ backgroundColor: '#e7f1fa' }}
+          style={chipStyle}
           data-test="label-TLS"
           label={
             <div style={{ display: '-webkit-box' }}>

plugins/kiali/src/components/VirtualList/Config.tsx

@@ -22,6 +22,7 @@ export type Renderer<R extends RenderResource> = (
   health?: Health,
   statefulFilter?: React.RefObject<StatefulFilters>,
   view?: string,
+  linkColor?: string,
 ) => JSX.Element | undefined;
 
 export type ResourceType<R extends RenderResource> = {

plugins/kiali/src/components/VirtualList/Renderers.tsx

@@ -8,7 +8,6 @@ import { isWaypoint } from '../../helpers/LabelFilterHelper';
 import { infoStyle } from '../../pages/Overview/OverviewCard/CanaryUpgradeProgress';
 import { ControlPlaneBadge } from '../../pages/Overview/OverviewCard/ControlPlaneBadge';
 import { OverviewCardSparklineCharts } from '../../pages/Overview/OverviewCard/OverviewCardSparklineCharts';
-import { linkStyle } from '../../styles/StyleUtils';
 import { Health } from '../../types/Health';
 import { IstioConfigItem } from '../../types/IstioConfigList';
 import { ValidationStatus } from '../../types/IstioObjects';
@@ -93,9 +92,11 @@ export const item: Renderer<TResource> = (
   _?: Health,
   __?: React.RefObject<StatefulFilters>,
   view?: string,
-) => {
+  linkColor?: string,
+): React.ReactElement => {
   const key = `link_definition_${config.name}_${resource.namespace}_${resource.name}`;
   let serviceBadge = badge;
+
   if ('serviceRegistry' in resource && resource.serviceRegistry) {
     switch (resource.serviceRegistry) {
       case 'External':
@@ -119,7 +120,7 @@ export const item: Renderer<TResource> = (
       {view !== ENTITY && (
         <PFBadge badge={serviceBadge} position={topPosition} />
       )}
-      <Link key={key} to={getLink(resource, config)} className={linkStyle}>
+      <Link key={key} to={getLink(resource, config)} className={linkColor}>
         {resource.name}
       </Link>
     </TableCell>

plugins/kiali/src/components/VirtualList/VirtualItem.tsx

@@ -3,6 +3,7 @@ import { CSSProperties } from 'react';
 
 import { TableRow } from '@material-ui/core';
 
+import { useLinkStyle } from '../../styles/StyleUtils';
 import { hasHealth, Health } from '../../types/Health';
 import { StatefulFiltersProps } from '../Filters/StatefulFilters';
 import { PFBadgeType } from '../Pf/PfBadges';
@@ -41,6 +42,8 @@ export const VirtualItem = (props: VirtualItemProps) => {
       : IstioTypes[istioType].badge;
   };
 
+  const linkColor = useLinkStyle();
+
   const renderDetails = (
     item: RenderResource,
     health?: Health,
@@ -55,6 +58,7 @@ export const VirtualItem = (props: VirtualItemProps) => {
           health,
           props.statefulFilterProps,
           props.view,
+          linkColor,
         ),
       );
   };

plugins/kiali/src/pages/AppDetails/AppDescription.tsx

@@ -1,13 +1,6 @@
 import * as React from 'react';
 
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  Title,
-  TitleSizes,
-  TooltipPosition,
-} from '@patternfly/react-core';
+import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
 
 import { DetailDescription } from '../../components/DetailDescription/DetailDescription';
 import { HealthIndicator } from '../../components/Health/HealthIndicator';
@@ -44,29 +37,25 @@ export const AppDescription: React.FC<AppDescriptionProps> = (
   return props.app ? (
     <Card id="AppDescriptionCard" data-test="app-description-card">
       <CardHeader>
-        <Title headingLevel="h5" size={TitleSizes.lg}>
+        <Typography variant="h6" style={{ margin: '10px' }}>
           <div key="service-icon" className={iconStyle}>
-            <PFBadge badge={PFBadges.App} position={TooltipPosition.top} />
+            <PFBadge badge={PFBadges.App} />
           </div>
 
           {props.app.name}
 
           <span className={healthIconStyle}>
             <HealthIndicator id={props.app.name} health={props.health} />
           </span>
-        </Title>
+        </Typography>
 
         {props.app.cluster && isMultiCluster && (
           <div key="cluster-icon" style={{ paddingBottom: '0.5rem' }}>
-            <PFBadge
-              badge={PFBadges.Cluster}
-              position={TooltipPosition.right}
-            />{' '}
-            {props.app.cluster}
+            <PFBadge badge={PFBadges.Cluster} /> {props.app.cluster}
           </div>
         )}
       </CardHeader>
-      <CardBody>
+      <CardContent>
         <Labels
           labels={appLabels}
           tooltipMessage={`Workloads and Services grouped by ${serverConfig.istioLabels.appLabelName} label`}
@@ -79,7 +68,7 @@ export const AppDescription: React.FC<AppDescriptionProps> = (
           health={props.health}
           cluster={props.app?.cluster}
         />
-      </CardBody>
+      </CardContent>
     </Card>
   ) : (
     <>Loading</>

plugins/kiali/src/pages/Overview/OverviewCard/CanaryUpgradeProgress.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
-import { Tooltip } from '@material-ui/core';
+import { Tooltip, useTheme } from '@material-ui/core';
 import {
   ChartDonutUtilization,
+  ChartLabel,
   ChartThemeColor,
 } from '@patternfly/react-charts';
 
@@ -26,6 +27,7 @@ export const CanaryUpgradeProgress = (props: Props) => {
     total > 0
       ? (props.canaryUpgradeStatus.migratedNamespaces.length * 100) / total
       : 0;
+  const theme = useTheme().palette.type;
   return (
     <div
       style={{ textAlign: 'center', paddingTop: '10px' }}
@@ -56,6 +58,14 @@ export const CanaryUpgradeProgress = (props: Props) => {
             title={`${migrated.toFixed(2)}%`}
             height={170}
             themeColor={ChartThemeColor.green}
+            titleComponent={
+              <ChartLabel
+                style={{
+                  fill: theme === 'dark' ? '#fff' : '#151515',
+                  fontSize: 24,
+                }}
+              />
+            }
           />
         </div>
         <div>