Visualization's look and feel tweaks

packages/ui/src/components/Form/CustomAutoFields.tsx

@@ -69,7 +69,7 @@ export function CustomAutoFields({
           groupName={CatalogKind.Processor + ' ' + groupName}
           isGroupExpanded={isGroupExpanded}
         >
-          <Card className="nest-field-card">
+          <Card isFlat className="nest-field-card">
             <CardBody className="nest-field-card-body">
               {groupFields.map((field) => (
                 <AutoField key={field} name={field} />

packages/ui/src/components/Form/customField/CustomNestField.scss

@@ -1,4 +1,6 @@
 .custom-nest-field {
+  border-radius: 15px;
+
   /* stylelint-disable-next-line selector-class-pattern */
   .pf-v5-c-card__body {
     display: grid;

packages/ui/src/components/Form/customField/CustomNestField.tsx

@@ -56,7 +56,7 @@ export const CustomNestField = connectField(
     if (propertiesArray.common.length === 0 && Object.keys(propertiesArray.groups).length === 0) return null;
 
     return (
-      <Card className="custom-nest-field" data-testid={'nest-field'} {...filterDOMProps(props)}>
+      <Card isFlat className="custom-nest-field" data-testid={'nest-field'} {...filterDOMProps(props)}>
         <CardHeader>
           <CardTitle>{label}</CardTitle>
         </CardHeader>

packages/ui/src/components/Visualization/Canvas/Canvas.scss

@@ -0,0 +1,6 @@
+#topology-resize-panel {
+  /* stylelint-disable-next-line selector-class-pattern */
+  .pf-v5-c-drawer__splitter::after {
+    border: none;
+  }
+}

packages/ui/src/components/Visualization/Canvas/Canvas.tsx

@@ -36,6 +36,7 @@ import { CanvasDefaults } from './canvas.defaults';
 import { CanvasEdge, CanvasNode, LayoutType } from './canvas.models';
 import { ControllerService } from './controller.service';
 import { FlowService } from './flow.service';
+import './Canvas.scss';
 
 interface CanvasProps {
   contextToolbar?: ReactNode;

packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss

@@ -3,3 +3,7 @@
   position: absolute;
   height: 100%;
 }
+/* stylelint-disable-next-line selector-class-pattern */
+.pf-v5-c-drawer__splitter pf-m-vertical {
+  border: none;
+}

packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss

@@ -1,5 +1,6 @@
 .canvas-form {
   height: 100%;
+  border-radius: 15px;
 
   &__body {
     overflow: auto;

packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx

@@ -43,7 +43,7 @@ export const CanvasForm: FunctionComponent<CanvasFormProps> = ({ selectedNode, o
 
   return (
     <ErrorBoundary key={selectedNode.id} fallback={<p>This node cannot be configured yet</p>}>
-      <Card className="canvas-form">
+      <Card isFlat className="canvas-form">
         <CardHeader>
           <CanvasFormHeader nodeId={selectedNode.id} title={title} onClose={onCloseFn} nodeIcon={vizNode?.data?.icon} />
         </CardHeader>

packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`CanvasForm should render 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-1"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"
@@ -286,7 +286,7 @@ exports[`CanvasForm should render 1`] = `
 exports[`CanvasForm should render nothing if no schema and no definition is available 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-4"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"
@@ -551,7 +551,7 @@ exports[`CanvasForm should render nothing if no schema and no definition is avai
 exports[`CanvasForm should render nothing if no schema is available 1`] = `
 <div>
   <div
-    class="pf-v5-c-card canvas-form"
+    class="pf-v5-c-card pf-m-flat canvas-form"
     data-ouia-component-id="OUIA-Generated-Card-2"
     data-ouia-component-type="PF5/Card"
     data-ouia-safe="true"

packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`CanvasSideBar displays selected node information 1`] = `
     role="dialog"
   >
     <div
-      class="pf-v5-c-card canvas-form"
+      class="pf-v5-c-card pf-m-flat canvas-form"
       data-ouia-component-id="OUIA-Generated-Card-1"
       data-ouia-component-type="PF5/Card"
       data-ouia-safe="true"

packages/ui/src/components/Visualization/Custom/Group/CollapseButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import { CompressArrowsAltIcon, ExpandArrowsAltIcon } from '@patternfly/react-icons';
 import { CollapsibleGroupProps } from '@patternfly/react-topology';
 import { FunctionComponent, MouseEventHandler } from 'react';
@@ -15,20 +15,20 @@ export const CollapseButton: FunctionComponent<CollapseButtonProps> = ({
   ['data-testid']: dataTestId,
   onCollapseChange,
 }) => {
-  const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+  const onClick: MouseEventHandler<HTMLButtonElement> & MouseEventHandler<HTMLDivElement> = (event) => {
     event.stopPropagation();
     onCollapseChange?.(element, !element.isCollapsed());
   };
 
   return (
     <Tooltip content={element.isCollapsed() ? 'Expand' : 'Collapse'}>
-      <Button className="container-controls" variant="control" onClick={onClick} data-testid={dataTestId}>
+      <button className="container-controls" id="collapse-button-control" onClick={onClick} data-testid={dataTestId}>
         {element.isCollapsed() ? (
           <ExpandArrowsAltIcon data-testid="expand-icon" />
         ) : (
           <CompressArrowsAltIcon data-testid="collapse-icon" />
         )}
-      </Button>
+      </button>
     </Tooltip>
   );
 };

packages/ui/src/components/Visualization/Custom/Group/ContextMenuButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import { EllipsisVIcon } from '@patternfly/react-icons';
 import { ContextMenu, PointIface } from '@patternfly/react-topology';
 import { FunctionComponent, MouseEventHandler, useRef, useState } from 'react';
@@ -26,9 +26,14 @@ export const ContextMenuButton: FunctionComponent<ContextMenuButtonProps> = ({
   return (
     <>
       <Tooltip content="Contextual menu">
-        <Button className="container-controls" variant="control" onClick={onClick} data-testid={dataTestId}>
+        <button
+          className="container-controls"
+          id="container-controls-contextual-menu"
+          onClick={onClick}
+          data-testid={dataTestId}
+        >
           <EllipsisVIcon />
-        </Button>
+        </button>
       </Tooltip>
       <ContextMenu
         reference={reference.current}

packages/ui/src/components/Visualization/Custom/Group/CustomGroup.scss

@@ -8,30 +8,51 @@
 }
 
 .container-controls {
-  padding: var(--pf-v5-global--BorderWidth--xl);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pf-v5-global--Color--200);
+  width: calc(var(--custom-group-TitleHeight) * 0.8);
+  height: calc(var(--custom-group-TitleHeight) * 0.8);
+  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-400);
+  background-color: var(--pf-v5-global--palette--white);
+  border-radius: 50px;
+  cursor: pointer;
+  margin-right: 5px;
+
+  &:hover {
+    border-color: var(--pf-v5-global--primary-color--light-100);
+    background-color: var(--pf-v5-global--BackgroundColor--200);
+  }
 }
 
 .custom-group {
   --custom-group--BorderColor: var(--pf-v5-global--palette--black-400);
   --custom-group--BorderSize: var(--pf-v5-global--BorderWidth--md);
+  --custom-group--BorderRadius: 15px;
   --custom-group--Background: var(--pf-v5-global--palette--white);
   --custom-group-TitleHeight: 32px;
+  --custom-group-TitleBackground: var(--pf-v5-global--palette--blue-200);
+  --custom-group-TitleColor: var(--pf-v5-global--palette--black-900);
 
   display: flex;
   flex-flow: column;
   height: 100%;
   width: 100%;
   background-color: var(--custom-group--Background);
-  border-radius: var(--pf-v5-global--BorderWidth--xl);
+  color: var(--pf-v5-global--Color--100);
+  border-radius: var(--custom-group--BorderRadius);
   border: var(--custom-group--BorderSize) solid var(--custom-group--BorderColor);
 
   &__title {
     display: flex;
     align-items: center;
     font-size: var(--pf-v5-global--FontSize--md);
     font-weight: bold;
-    color: var(--pf-v5-global--palette--black-900);
-    background-color: var(--pf-v5-global--palette--light-blue-400);
+    color: var(--custom-group-TitleColor);
+    border-top-left-radius: calc(var(--custom-group--BorderRadius) - 2px);
+    border-top-right-radius: calc(var(--custom-group--BorderRadius) - 2px);
+    background-color: var(--custom-group-TitleBackground);
     height: var(--custom-group-TitleHeight);
 
     &__img-circle {
@@ -41,7 +62,7 @@
       justify-content: center;
       width: calc(var(--custom-group-TitleHeight) * 0.9);
       height: calc(var(--custom-group-TitleHeight) * 0.9);
-      border: var(--custom-group--BorderSize) solid var(--custom-group--BorderColor);
+      border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--palette--black-400);
       background-color: var(--pf-v5-global--palette--white);
       border-radius: 50px;
 
@@ -65,12 +86,14 @@
   }
 
   &--selected {
-    --custom-group--BorderColor: var(--pf-v5-global--palette--light-blue-400);
+    --custom-group--BorderColor: var(--pf-v5-global--palette--blue-200);
     --custom-group--Background: var(--pf-v5-global--palette--blue-50);
-    --custom-group--BorderSize: var(--pf-v5-global--BorderWidth--lg);
+    --custom-group--BorderSize: var(--pf-v5-global--BorderWidth--md);
+    --custom-group-TitleBackground: var(--pf-v5-global--palette--blue-300);
+    --custom-group-TitleColor: var(--pf-v5-global--palette--white);
 
     &:hover {
-      --custom-group--BorderColor: var(--pf-v5-global--palette--light-blue-400);
+      --custom-group--BorderColor: var(--pf-v5-global--palette--blue-200);
       --custom-group--Background: var(--pf-v5-global--palette--blue-50);
     }
   }

packages/ui/src/components/Visualization/Custom/Group/__snapshots__/CollapseButton.test.tsx.snap

@@ -2,13 +2,9 @@
 
 exports[`CollapseButton should render the collapse button 1`] = `
 <button
-  aria-disabled="false"
-  class="pf-v5-c-button pf-m-control container-controls"
-  data-ouia-component-id="OUIA-Generated-Button-control-1"
-  data-ouia-component-type="PF5/Button"
-  data-ouia-safe="true"
+  class="container-controls"
   data-testid="collapseButton-test"
-  type="button"
+  id="collapse-button-control"
 >
   <svg
     aria-hidden="true"

packages/ui/src/components/Visualization/Custom/Group/__snapshots__/ContextMenuButton.test.tsx.snap

@@ -2,13 +2,9 @@
 
 exports[`ContextMenuButton should render the button 1`] = `
 <button
-  aria-disabled="false"
-  class="pf-v5-c-button pf-m-control container-controls"
-  data-ouia-component-id="OUIA-Generated-Button-control-1"
-  data-ouia-component-type="PF5/Button"
-  data-ouia-safe="true"
+  class="container-controls"
   data-testid="contextualMenu-test"
-  type="button"
+  id="container-controls-contextual-menu"
 >
   <svg
     aria-hidden="true"

packages/ui/src/components/Visualization/Visualization.scss

@@ -1,6 +1,10 @@
 .canvas-surface {
   display: flex;
   flex-flow: column;
+
+  .pf-topology-content {
+    border-radius: 15px;
+  }
 }
 
 // Override for the default patternfly class