From c3cf5e084e86703ba4a132e2ed60b89bdbda6bc2 Mon Sep 17 00:00:00 2001
From: mmelko <mmelko@redhat.com>
Date: Tue, 10 Sep 2024 17:02:19 +0200
Subject: [PATCH] refactor(Viz-Sidebar): Change panels style to flat and add
 rounded edges.

---
 packages/ui/src/components/Form/CustomAutoFields.tsx        | 2 +-
 .../ui/src/components/Form/customField/CustomNestField.scss | 2 ++
 .../ui/src/components/Form/customField/CustomNestField.tsx  | 2 +-
 packages/ui/src/components/Visualization/Canvas/Canvas.scss | 6 ++++++
 packages/ui/src/components/Visualization/Canvas/Canvas.tsx  | 1 +
 .../src/components/Visualization/Canvas/CanvasSideBar.scss  | 4 ++++
 .../components/Visualization/Canvas/Form/CanvasForm.scss    | 1 +
 .../src/components/Visualization/Canvas/Form/CanvasForm.tsx | 2 +-
 .../Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap      | 6 +++---
 .../Canvas/__snapshots__/CanvasSideBar.test.tsx.snap        | 2 +-
 10 files changed, 21 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/components/Visualization/Canvas/Canvas.scss

diff --git a/packages/ui/src/components/Form/CustomAutoFields.tsx b/packages/ui/src/components/Form/CustomAutoFields.tsx
index 9a1559192..c4a9cfae1 100644
--- a/packages/ui/src/components/Form/CustomAutoFields.tsx
+++ b/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} />
diff --git a/packages/ui/src/components/Form/customField/CustomNestField.scss b/packages/ui/src/components/Form/customField/CustomNestField.scss
index 212f494c3..7ba1eaf52 100644
--- a/packages/ui/src/components/Form/customField/CustomNestField.scss
+++ b/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;
diff --git a/packages/ui/src/components/Form/customField/CustomNestField.tsx b/packages/ui/src/components/Form/customField/CustomNestField.tsx
index 2204dd92f..54e1faaa0 100644
--- a/packages/ui/src/components/Form/customField/CustomNestField.tsx
+++ b/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>
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.scss b/packages/ui/src/components/Visualization/Canvas/Canvas.scss
new file mode 100644
index 000000000..0a14e61c2
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx b/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
index 6d965c2ba..a8b79dc10 100644
--- a/packages/ui/src/components/Visualization/Canvas/Canvas.tsx
+++ b/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;
diff --git a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss b/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss
index 6608d876e..b423cbc9b 100644
--- a/packages/ui/src/components/Visualization/Canvas/CanvasSideBar.scss
+++ b/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;
+}
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss
index f67eca2ff..be17d9a1d 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss
+++ b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.scss
@@ -1,5 +1,6 @@
 .canvas-form {
   height: 100%;
+  border-radius: 15px;
 
   &__body {
     overflow: auto;
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx b/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
index bc0c8c7c7..8a2273a5b 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/CanvasForm.tsx
+++ b/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>
diff --git a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
index 6534639ec..a14c36fa9 100644
--- a/packages/ui/src/components/Visualization/Canvas/Form/__snapshots__/CanvasForm.test.tsx.snap
+++ b/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"
diff --git a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap b/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
index 54e596878..e422245b1 100644
--- a/packages/ui/src/components/Visualization/Canvas/__snapshots__/CanvasSideBar.test.tsx.snap
+++ b/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"