Additional resolutions from design review

opendatahub-io · Dec 17, 2024 · 36264b6 · 36264b6
1 parent c5f677c
commit 36264b6
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 6 deletions.
diff --git a/frontend/src/components/table/TableRowTitleDescription.tsx b/frontend/src/components/table/TableRowTitleDescription.tsx
@@ -19,7 +19,7 @@ type TableRowTitleDescriptionProps = {
 
 const TableRowTitleDescription: React.FC<TableRowTitleDescriptionProps> = ({
   title,
-  boldTitle = true,
+  boldTitle = false,
   titleIcon,
   description,
   resource,

diff --git a/frontend/src/concepts/dashboard/DashboardPopupIconButton.tsx b/frontend/src/concepts/dashboard/DashboardPopupIconButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonProps, Icon } from '@patternfly/react-core';
+import { Button, ButtonProps } from '@patternfly/react-core';
 
 type DashboardPopupIconButtonProps = Omit<ButtonProps, 'variant' | 'isInline'> & {
   icon: React.ReactNode;
@@ -12,7 +12,7 @@ const DashboardPopupIconButton = ({
   icon,
   ...props
 }: DashboardPopupIconButtonProps): React.JSX.Element => (
-  <Button icon={<Icon isInline>{icon}</Icon>} variant="plain" isInline {...props} />
+  <Button icon={icon} variant="plain" isInline {...props} />
 );
 
 export default DashboardPopupIconButton;
diff --git a/frontend/src/pages/distributedWorkloads/global/projectMetrics/sections/DWSectionCard.tsx b/frontend/src/pages/distributedWorkloads/global/projectMetrics/sections/DWSectionCard.tsx
@@ -11,7 +11,7 @@ export const DWSectionCard: React.FC<{
   <Card isFullHeight>
     <CardHeader>
       <CardTitle>
-        <Flex gap={{ default: 'gapMd' }}>
+        <Flex gap={{ default: 'gapSm' }}>
           {title} {helpTooltip ? <DashboardHelpTooltip content={helpTooltip} /> : null}
         </Flex>
       </CardTitle>

diff --git a/frontend/src/pages/distributedWorkloads/global/workloadStatus/DWStatusOverviewDonutChart.tsx b/frontend/src/pages/distributedWorkloads/global/workloadStatus/DWStatusOverviewDonutChart.tsx
@@ -39,7 +39,8 @@ export const DWStatusOverviewDonutChart: React.FC = () => {
     );
   }
   return (
-    <div style={{ height: '250px', minWidth: '620px' }}>
+    // maxWidth matches what the chart's svg width value would be without the default "width: 100%" coming from PF Charts
+    <div style={{ maxWidth: '530px' }}>
       <ChartDonut
         ariaDesc="Distributed workload status overview"
         ariaTitle="Status overview donut chart"

diff --git a/frontend/src/pages/storageClasses/StorageClassesTableRow.tsx b/frontend/src/pages/storageClasses/StorageClassesTableRow.tsx
@@ -168,7 +168,7 @@ export const StorageClassesTableRow: React.FC<StorageClassesTableRowProps> = ({
       </Td>
 
       <Td dataLabel={ColumnLabel.OpenshiftStorageClass}>
-        <Flex spaceItems={{ default: 'spaceItemsSm' }} alignItems={{ default: 'alignItemsCenter' }}>
+        <Flex spaceItems={{ default: 'spaceItemsSm' }}>
           <FlexItem>{metadata.name}</FlexItem>
 
           <FlexItem>
@@ -191,6 +191,7 @@ export const StorageClassesTableRow: React.FC<StorageClassesTableRowProps> = ({
               <DashboardPopupIconButton
                 icon={<OutlinedQuestionCircleIcon />}
                 aria-label="Storage class info popover"
+                hasNoPadding
               />
             </Popover>
           </FlexItem>