From 83cae05f067edfb79381e08cb7556c8175073a32 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:42:55 +0530
Subject: [PATCH] Improvements #6701 : Styling improvements and minor bug
 fixes. (#6765)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Improvements #6701 : Changes made :
- Moved “Teams, User and Admins” to new category "Members"

- Reduced table column height

- Update edit icon

- Resolved the issue with search bar shrinking.

- Changed order of links on navbar

- Switch button styling changed as per mocks

* Used variable to store color values in less file

* Search bar width made responsive to avoid overlapping with settings button
---
 .../resources/ui/src/assets/svg/ic-edit.svg   |  8 ++--
 .../EntityTable/EntityTable.component.tsx     |  2 +-
 .../components/TeamDetails/TeamHierarchy.tsx  |  2 +-
 .../ui/src/components/TeamDetails/Teams.tsx   |  6 +--
 .../ui/src/components/UserList/UserListV1.tsx |  2 +-
 .../src/components/Users/Users.component.tsx  | 13 ++++--
 .../ui/src/components/Webhooks/webhookV1.less |  2 +-
 .../EntitySummaryDetails.tsx                  | 15 ++++---
 .../common/description/Description.tsx        |  2 +-
 .../ui/src/components/nav-bar/NavBar.tsx      | 21 +++++-----
 .../constants/globalSettings.constants.tsx    | 11 ++++-
 .../pages/BotsPageV1/BotsPageV1.component.tsx |  4 +-
 .../ui/src/router/GlobalSettingRouter.tsx     |  8 ++--
 .../resources/ui/src/styles/antd-master.less  |  1 +
 .../src/styles/components/toggle-switch.less  | 41 +++++++++++++++++++
 .../main/resources/ui/src/styles/x-master.css | 28 +++----------
 .../resources/ui/src/utils/RouterUtils.ts     |  2 +-
 17 files changed, 102 insertions(+), 66 deletions(-)
 create mode 100644 openmetadata-ui/src/main/resources/ui/src/styles/components/toggle-switch.less

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-edit.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-edit.svg
index 74890e78208..872f66d8db6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-edit.svg
+++ b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-edit.svg
@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.977552 15.5C0.852621 15.5 0.730552 15.4504 0.639953 15.3608C0.52742 15.2482 0.47783 15.0861 0.509301 14.9297L1.18354 11.5572C1.20262 11.4646 1.24649 11.3798 1.3142 11.314L11.4297 1.19744C12.3596 0.267521 13.8721 0.267521 14.801 1.19744C15.252 1.64761 15.5 2.24657 15.5 2.88368C15.5 3.52079 15.252 4.11975 14.8019 4.56993L4.68636 14.6864C4.62056 14.7532 4.53568 14.798 4.44223 14.8171L1.07101 15.4905C1.04049 15.4971 1.00902 15.5 0.977552 15.5V15.5ZM2.09143 11.8862L1.58599 14.4156L4.11416 13.9101L14.1267 3.89562C14.3976 3.62475 14.5463 3.26614 14.5463 2.88368C14.5463 2.50122 14.3976 2.14261 14.1277 1.87174C13.5707 1.31379 12.6619 1.31379 12.1049 1.87174L2.09143 11.8862ZM4.34972 14.3488H4.35926H4.34972Z" fill="#37352F" stroke="#37352F" stroke-width="0.1"/>
-<path d="M13.1158 6.05876C12.9937 6.05876 12.8717 6.01202 12.7782 5.91951L10.0812 3.22133C9.89528 3.03534 9.89528 2.733 10.0812 2.54702C10.2672 2.36104 10.5695 2.36104 10.7555 2.54702L13.4524 5.2452C13.6384 5.43118 13.6384 5.73353 13.4524 5.91951C13.3599 6.01202 13.2379 6.05876 13.1158 6.05876Z" fill="#37352F" stroke="#37352F" stroke-width="0.1"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<path d="M13.0465 6.70756C12.7823 6.70756 12.568 6.92179 12.568 7.18605V13.8372C12.568 14.2402 12.2402 14.568 11.8372 14.568H2.16279C1.75984 14.568 1.43198 14.2402 1.43198 13.8372V4.16279C1.43198 3.75984 1.75984 3.43198 2.16279 3.43198H8.81395C9.07821 3.43198 9.29244 3.21774 9.29244 2.95349C9.29244 2.68923 9.07821 2.475 8.81395 2.475H2.16279C1.23212 2.475 0.475 3.23212 0.475 4.16279V13.8372C0.475 14.7679 1.23212 15.525 2.16279 15.525H11.8372C12.7679 15.525 13.525 14.7679 13.525 13.8372V7.18605C13.525 6.92179 13.3108 6.70756 13.0465 6.70756Z" fill="#37352F" stroke="#37352F" stroke-width="0.05"/>
+<path d="M15.1814 1.70377L14.2975 0.819838C13.8711 0.393387 13.1772 0.393387 12.7507 0.819838L5.67941 7.89112C5.61397 7.95656 5.56937 8.03991 5.55118 8.13066L5.1092 10.3404C5.07848 10.4941 5.12658 10.653 5.23742 10.7638C5.32621 10.8526 5.4458 10.9012 5.56887 10.9012C5.59947 10.9012 5.63022 10.8982 5.66078 10.8921L7.87057 10.4501C7.96132 10.4319 8.04467 10.3873 8.11011 10.3219L15.1814 3.2506C15.1814 3.2506 15.1815 3.2506 15.1815 3.25057C15.6079 2.82415 15.6079 2.13025 15.1814 1.70377ZM7.54756 9.55858L6.16645 9.83484L6.44271 8.45373L12.1982 2.69815L13.3031 3.80306L7.54756 9.55858ZM14.5185 2.58767L13.966 3.14013L12.8611 2.03522L13.4136 1.4828C13.4745 1.42186 13.5736 1.42183 13.6346 1.48277L14.5185 2.3667C14.5794 2.42761 14.5794 2.52677 14.5185 2.58767Z" fill="#37352F"/>
+</svg>
\ No newline at end of file
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
index aef4ce6aeb9..71a16a156a8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityTable/EntityTable.component.tsx
@@ -733,7 +733,7 @@ const EntityTable = ({
                                   </span>
                                 )}
                               </div>
-                              <div className="tw-flex tw--mt-1.5">
+                              <div className="tw-flex tw--mt-2">
                                 {!isReadOnly ? (
                                   <Fragment>
                                     {checkPermission() && (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
index 545ccf51ad2..675e3441668 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamHierarchy.tsx
@@ -70,7 +70,7 @@ const TeamHierarchy: FC<TeamHierarchyProps> = ({ data }) => {
       columns={columns}
       dataSource={data}
       pagination={false}
-      size="middle"
+      size="small"
     />
   );
 };
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx
index e7f21532c86..49a8d938bbc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Teams.tsx
@@ -58,14 +58,14 @@ const Teams: FC<TeamsProps> = ({
     <Row className="team-list-container" gutter={[16, 16]}>
       <Col span={24}>
         <Space align="center" className="tw-w-full tw-justify-end" size={16}>
-          <span>
+          <Space align="end" size={5}>
             <Switch
               checked={showDeletedTeam}
               size="small"
               onClick={onShowDeletedTeamChange}
             />
-            <span className="tw-ml-2">Deleted Teams</span>
-          </span>
+            <span>Deleted Teams</span>
+          </Space>
           <Button type="primary" onClick={() => onAddTeamClick(true)}>
             Add Team
           </Button>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
index d44416dbd42..3b48117796d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx
@@ -215,7 +215,7 @@ const UserListV1: FC<UserListV1Props> = ({
             indicator: <Loader size="small" />,
           }}
           pagination={false}
-          size="middle"
+          size="small"
         />
       </Col>
       <Col span={24}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index 6d23fc7c2f1..15cd67d6d62 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -698,10 +698,15 @@ const Users = ({
             )}
           </div>
           {isTaskType ? (
-            <div className="tw-flex tw-justify-end">
-              <Switch onChange={onSwitchChange} />
-              <span className="tw-ml-1">Closed Tasks</span>
-            </div>
+            <Space
+              align="center"
+              className="tw-w-full tw-justify-end"
+              size={16}>
+              <Space align="end" size={5}>
+                <Switch onChange={onSwitchChange} />
+                <span className="tw-ml-1">Closed Tasks</span>
+              </Space>
+            </Space>
           ) : null}
         </div>
         <div className="tw-mt-3.5">
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/webhookV1.less b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/webhookV1.less
index edfee92f7e9..80bf1716f57 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/webhookV1.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/webhookV1.less
@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-@import '../../styles/antd-master.less';
+@primary-color: #7147e8;
 
 .webhook-right-panel {
   max-width: 290px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
index d8f4f6d5883..435996ad5ef 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx
@@ -55,6 +55,7 @@ const EntitySummaryDetails = ({
                 {updateOwner ? (
                   <SVGIcons
                     alt="edit"
+                    className="tw-ml-2 tw-mb-1"
                     icon={Icons.EDIT}
                     title="Edit"
                     width="15px"
@@ -80,12 +81,11 @@ const EntitySummaryDetails = ({
                   />
                 }
                 trigger={['click']}>
-                <span
-                  data-testid={`edit-${data.key}-icon`}
-                  style={{ marginLeft: '5px' }}>
+                <span data-testid={`edit-${data.key}-icon`}>
                   {updateTier ? (
                     <SVGIcons
                       alt="edit"
+                      className="tw-ml-2 tw-mb-1"
                       icon={Icons.EDIT}
                       title="Edit"
                       width="15px"
@@ -153,10 +153,10 @@ const EntitySummaryDetails = ({
               </a>
               <span
                 data-testid={`edit-${data.key}-icon`}
-                style={{ marginLeft: '5px' }}
                 onClick={() => setshow(true)}>
                 <SVGIcons
                   alt="edit"
+                  className="tw-ml-2 tw-mb-1"
                   icon={Icons.EDIT}
                   title="Edit"
                   width="15px"
@@ -183,11 +183,11 @@ const EntitySummaryDetails = ({
                     </Button>
                     <span
                       data-testid={`edit-${data.key}-icon`}
-                      style={{ marginLeft: '5px' }}
                       onClick={() => setshow(true)}>
                       {updateOwner ? (
                         <SVGIcons
                           alt="edit"
+                          className="tw-ml-2 tw-mb-1"
                           icon={Icons.EDIT}
                           title="Edit"
                           width="15px"
@@ -223,12 +223,11 @@ const EntitySummaryDetails = ({
                               />
                             }
                             trigger={['click']}>
-                            <span
-                              data-testid={`edit-${data.key}-icon`}
-                              style={{ marginLeft: '5px' }}>
+                            <span data-testid={`edit-${data.key}-icon`}>
                               {updateTier ? (
                                 <SVGIcons
                                   alt="edit"
+                                  className="tw-ml-2 tw-mb-1"
                                   icon={Icons.EDIT}
                                   title="Edit"
                                   width="15px"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
index 09ba2f73311..63ae83439fd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/description/Description.tsx
@@ -179,7 +179,7 @@ const Description: FC<DescriptionProps> = ({
 
   const DescriptionActions = () => {
     return !isReadOnly ? (
-      <div className={classNames('tw-w-5 tw-min-w-max tw-flex tw--mt-0.5')}>
+      <div className={classNames('tw-w-5 tw-min-w-max tw-flex tw--mt-1')}>
         {checkPermission() && (
           <button
             className="tw-w-7 tw-h-8 tw-flex-none focus:tw-outline-none"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
index 1bc2e79db6e..3a04b0e99a3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx
@@ -217,15 +217,6 @@ const NavBar = ({
                 }}>
                 Explore
               </NavLink>
-              <NavLink
-                className="focus:tw-no-underline"
-                data-testid="appbar-item-settings"
-                style={navStyle(pathname.startsWith('/settings'))}
-                to={{
-                  pathname: ROUTES.SETTINGS,
-                }}>
-                Settings
-              </NavLink>
 
               <NavLink
                 className="focus:tw-no-underline"
@@ -246,10 +237,20 @@ const NavBar = ({
                 }}>
                 Tags
               </NavLink>
+
+              <NavLink
+                className="focus:tw-no-underline"
+                data-testid="appbar-item-settings"
+                style={navStyle(pathname.startsWith('/settings'))}
+                to={{
+                  pathname: ROUTES.SETTINGS,
+                }}>
+                Settings
+              </NavLink>
             </Space>
           </div>
           <div
-            className="tw-flex-none tw-relative tw-justify-items-center tw-ml-auto"
+            className="tw-flex-none tw-relative tw-justify-items-center tw-ml-16"
             data-testid="appbar-item">
             <Input
               autoComplete="off"
diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.tsx b/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.tsx
index d9bd1034a10..7e3d8761132 100644
--- a/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/constants/globalSettings.constants.tsx
@@ -18,7 +18,7 @@ import { ReactComponent as RolesIcon } from '../../src/assets/svg/icon-role-grey
 import { ReactComponent as MlModelIcon } from '../../src/assets/svg/mlmodal.svg';
 import { ReactComponent as PipelineIcon } from '../../src/assets/svg/pipeline-grey.svg';
 import { ReactComponent as PoliciesIcon } from '../../src/assets/svg/policies.svg';
-import { ReactComponent as SlackIcon } from '../../src/assets/svg/slack-grey.svg';
+import { ReactComponent as SlackIcon } from '../../src/assets/svg/slack.svg';
 import { ReactComponent as TableIcon } from '../../src/assets/svg/table-grey.svg';
 import { ReactComponent as TeamsIcon } from '../../src/assets/svg/teams-grey.svg';
 import { ReactComponent as TopicIcon } from '../../src/assets/svg/topic-grey.svg';
@@ -27,7 +27,7 @@ import { ReactComponent as WebhookIcon } from '../../src/assets/svg/webhook-grey
 
 export const GLOBAL_SETTINGS_MENU = [
   {
-    category: 'Access',
+    category: 'Members',
     isProtected: false,
     items: [
       {
@@ -45,6 +45,12 @@ export const GLOBAL_SETTINGS_MENU = [
         isProtected: true,
         icon: <UsersIcon className="side-panel-icons" />,
       },
+    ],
+  },
+  {
+    category: 'Access',
+    isProtected: false,
+    items: [
       {
         label: 'Roles',
         isProtected: true,
@@ -151,6 +157,7 @@ export const customAttributesPath = {
 };
 
 export enum GlobalSettingsMenuCategory {
+  MEMBERS = 'members',
   ACCESS = 'access',
   SERVICES = 'services',
   CUSTOM_ATTRIBUTES = 'customAttributes',
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/BotsPageV1/BotsPageV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/BotsPageV1/BotsPageV1.component.tsx
index 067a2f0ba88..457327a77ba 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/BotsPageV1/BotsPageV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/BotsPageV1/BotsPageV1.component.tsx
@@ -33,8 +33,8 @@ export const BotsPageV1 = () => {
     <Row gutter={[16, 16]}>
       <Col flex={1} />
       <Col>
-        <Space size={24}>
-          <Space align="center">
+        <Space size={16}>
+          <Space align="end" size={5}>
             <Switch
               checked={showDeleted}
               id="switch-deleted"
diff --git a/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx
index f73c69bd566..059987192e1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/router/GlobalSettingRouter.tsx
@@ -74,7 +74,7 @@ const GlobalSettingRouter = () => {
       <Route exact path={getSettingPath()}>
         <Redirect
           to={getSettingPath(
-            GlobalSettingsMenuCategory.ACCESS,
+            GlobalSettingsMenuCategory.MEMBERS,
             GlobalSettingOptions.TEAMS
           )}
         />
@@ -83,7 +83,7 @@ const GlobalSettingRouter = () => {
         exact
         component={TeamsPage}
         path={getSettingPath(
-          GlobalSettingsMenuCategory.ACCESS,
+          GlobalSettingsMenuCategory.MEMBERS,
           GlobalSettingOptions.TEAMS
         )}
       />
@@ -91,7 +91,7 @@ const GlobalSettingRouter = () => {
         exact
         component={TeamsPage}
         path={getSettingPath(
-          GlobalSettingsMenuCategory.ACCESS,
+          GlobalSettingsMenuCategory.MEMBERS,
           GlobalSettingOptions.TEAMS,
           true
         )}
@@ -145,7 +145,7 @@ const GlobalSettingRouter = () => {
       <AdminProtectedRoute
         exact
         component={UserListPageV1}
-        path={getSettingCategoryPath(GlobalSettingsMenuCategory.ACCESS)}
+        path={getSettingCategoryPath(GlobalSettingsMenuCategory.MEMBERS)}
       />
 
       <AdminProtectedRoute
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
index cecacb87478..e7c3c465cba 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/antd-master.less
@@ -28,3 +28,4 @@
 @border-radius-base: 4px;
 
 @import url('./components/table.less');
+@import url('./components/toggle-switch.less');
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/toggle-switch.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/toggle-switch.less
new file mode 100644
index 00000000000..940fccfb599
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/toggle-switch.less
@@ -0,0 +1,41 @@
+/*
+ *  Copyright 2021 Collate
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+@primary-color: #7147e8;
+@switch-bg-color-primary: rgb(107 114 128 / 15%);
+@switch-bg-color-active: rgb(244, 240, 253);
+@switch-border-color: rgba(107, 114, 128, 1);
+
+.ant-switch {
+  padding: 1px;
+  background-image: none;
+  background-color: @switch-bg-color-primary;
+  border: 2px solid @switch-border-color;
+}
+
+.ant-switch-handle::before {
+  background-color: @switch-border-color;
+}
+
+.ant-switch-checked {
+  background: @switch-bg-color-active;
+  border-color: @primary-color;
+  .ant-switch-handle::before {
+    background-color: @primary-color;
+  }
+}
+
+.ant-switch-small {
+  height: 20px;
+  width: 36px;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
index f527d38594d..a05e416bbfe 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
@@ -177,35 +177,13 @@ pre {
   box-shadow: none;
 }
 .search-grey {
-  width: 600px;
+  width: calc(100vw - 800px);
   background: #f8f9fa;
 }
 .search-grey::placeholder {
   color: #6b7280;
 }
 
-.search-grey.has-search {
-  padding: 18px 20px;
-  padding-left: 12px;
-}
-.search-grey.has-search .form-control.search {
-  padding-left: 2.375rem;
-  background: #f3f3f3;
-  border-radius: 20px;
-  border: none;
-}
-.search-grey.has-search .search-icon {
-  position: absolute;
-  z-index: 2;
-  display: block;
-  width: 2.375rem;
-  height: 1.95rem;
-  line-height: 1.95rem;
-  text-align: center;
-  pointer-events: none;
-  color: #aaa;
-}
-
 /* Breadcrumb */
 .breadcrumb {
   padding: 0;
@@ -1348,3 +1326,7 @@ div.ant-typography-ellipsis-custom {
   white-space: pre-wrap; /* Since CSS 2.1 */
 }
 /* Feed text pre tag CSS */
+
+.ant-switch-checked {
+  background: rgb(244, 240, 253);
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
index 041ec8d1aa4..54d8b8490ac 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/RouterUtils.ts
@@ -233,7 +233,7 @@ export const getTeamsWithFqnPath = (fqn: string) => {
   let path = ROUTES.SETTINGS_WITH_TAB_FQN;
 
   path = path
-    .replace(PLACEHOLDER_SETTING_CATEGORY, GlobalSettingsMenuCategory.ACCESS)
+    .replace(PLACEHOLDER_SETTING_CATEGORY, GlobalSettingsMenuCategory.MEMBERS)
     .replace(PLACEHOLDER_ROUTE_TAB, GlobalSettingOptions.TEAMS)
     .replace(PLACEHOLDER_ROUTE_FQN, fqn);