Improvements #6701 : Styling improvements and minor bug fixes. (#6765)

* 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

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>

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() && (

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"
     />
   );
 };

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>

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}>

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">

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;

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"

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"

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"

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',

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"

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

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');

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;
+}

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);
+}

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);