(fix) In the Sing-in flow config section, the predefined flows pane…

…l can only be opened using the icons
Achintha444 · Nov 17, 2023 · bfe2c37 · bfe2c37
1 parent df59b11
commit bfe2c37
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/...tion-flow-builder/components/predefined-flows-side-panel/predefined-flows-side-panel.scss b/...tion-flow-builder/components/predefined-flows-side-panel/predefined-flows-side-panel.scss
@@ -35,6 +35,7 @@
 
     .toolbar-container {
         border-bottom: 1px solid var(--oxygen-palette-divider);
+        border-left: 1px solid var(--oxygen-palette-divider);
 
         .oxygen-typography {
             font-weight: 500;

diff --git a/apps/console/src/features/authentication-flow-builder/components/side-panel-drawer.scss b/apps/console/src/features/authentication-flow-builder/components/side-panel-drawer.scss
@@ -80,7 +80,7 @@
             @include open;
         }
 
-        .side-panel-drawer-panel .side-panel-drawer-panel-controls .side-panel-drawer-panel-controls-chevron .MuiButtonBase-root svg {
+        .side-panel-drawer-panel .side-panel-drawer-panel-controls .side-panel-drawer-panel-controls-chevron svg {
             transform: rotate(180deg);
         }
     }
@@ -95,20 +95,16 @@
 
     .side-panel-drawer-panel-controls {
         display: flex;
-        background-color: var(--oxygen-palette-common-white);
+        background-color: var(--asg-auth-flow-builder-side-panel-drawer-content-background);
         flex-direction: column;
 
         .side-panel-drawer-panel-controls-chevron {
             height: calc(var(--asg-auth-flow-builder-side-panel-toolbar-height) + 4px);
             display: flex;
-            border-bottom: 1px solid var(--oxygen-palette-divider);
-
-            .MuiButtonBase-root {
-                border-radius: 0;
-
-                svg {
-                    transition: transform 0.3s ease;
-                }
+            padding: 8px;
+            align-items: center;
+            svg {
+                transition: transform 0.3s ease;
             }
         }
 
@@ -128,6 +124,11 @@
         }
     }
 
+    .side-panel-drawer-panel-controls:hover {
+        cursor: pointer;
+        background-color: rgba(var(--oxygen-palette-action-activeChannel) / var(--oxygen-palette-action-hoverOpacity));
+    }
+
     .side-panel-drawer-panel-content {
         background-color: var(--asg-auth-flow-builder-side-panel-drawer-content-background);
         height: 100%;

diff --git a/apps/console/src/features/authentication-flow-builder/components/side-panel-drawer.tsx b/apps/console/src/features/authentication-flow-builder/components/side-panel-drawer.tsx
@@ -18,7 +18,6 @@
 
 import Box from "@oxygen-ui/react/Box";
 import Drawer, { DrawerProps } from "@oxygen-ui/react/Drawer";
-import IconButton from "@oxygen-ui/react/IconButton";
 import Typography from "@oxygen-ui/react/Typography";
 import { IdentifiableComponentInterface } from "@wso2is/core/models";
 import classNames from "classnames";
@@ -84,7 +83,7 @@ const SidePanelDrawer = (props: PropsWithChildren<SidePanelDrawerPropsInterface>
      *
      * @param event - Click event.
      */
-    const handleDrawerOpen = (event: MouseEvent<HTMLButtonElement>): void => {
+    const handleDrawerOpen = (event: MouseEvent<HTMLDivElement>): void => {
         if (!isDrawerOpen) {
             setIsDrawerOpen(true);
 
@@ -119,11 +118,9 @@ const SidePanelDrawer = (props: PropsWithChildren<SidePanelDrawerPropsInterface>
                     { ...rest }
                 >
                     <div className="side-panel-drawer-panel">
-                        <div className="side-panel-drawer-panel-controls">
+                        <div className="side-panel-drawer-panel-controls" onClick={ handleDrawerOpen }>
                             <div className="side-panel-drawer-panel-controls-chevron">
-                                <IconButton onClick={ handleDrawerOpen } aria-label="nav item icon">
-                                    { drawerIcon || <ChevronsLeft height={ 16 } width={ 16 } /> }
-                                </IconButton>
+                                { drawerIcon || <ChevronsLeft height={ 16 } width={ 16 } /> }
                             </div>
                             { panelControlsLabel && (
                                 <div className="side-panel-drawer-panel-controls-label">