refactor(ui): Updated Sidebar for Glossary and Domains to have same styling and fixed count badge (#13018)

datahub-web-react/src/app/domainV2/nestedDomains/DomainsSidebarHeader.tsx

@@ -1,15 +1,11 @@
 import { useApolloClient } from '@apollo/client';
-import { PlusCircleOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
-import { Tooltip } from '@components';
+import { Tooltip, Button } from '@components';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import CreateDomainModal from '../CreateDomainModal';
 import { updateListDomainsCache } from '../utils';
-import { REDESIGN_COLORS } from '../../entityV2/shared/constants';
 
 const Wrapper = styled.div`
-    color: ${REDESIGN_COLORS.TITLE_PURPLE};
     font-size: 20px;
     display: flex;
     align-items: center;
@@ -17,20 +13,21 @@ const Wrapper = styled.div`
     width: 100%;
 `;
 
-const StyledButton = styled(Button)`
-    padding: 0px 8px;
-    border: none;
-    box-shadow: none;
-    color: inherit;
-    font-size: inherit;
-`;
-
 const DomainTitle = styled.div`
     font-size: 16px;
     font-weight: bold;
     color: #374066;
 `;
 
+const StyledButton = styled(Button)`
+    padding: 2px;
+    margin-right: 4px;
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+`;
+
 export default function DomainsSidebarHeader() {
     const [isCreatingDomain, setIsCreatingDomain] = useState(false);
     const client = useApolloClient();
@@ -39,9 +36,14 @@ export default function DomainsSidebarHeader() {
         <Wrapper>
             <DomainTitle>Domains</DomainTitle>
             <Tooltip showArrow={false} title="Create new Domain" placement="right">
-                <StyledButton onClick={() => setIsCreatingDomain(true)}>
-                    <PlusCircleOutlined style={{ fontSize: 'inherit' }} />
-                </StyledButton>
+                <StyledButton
+                    variant="filled"
+                    color="violet"
+                    isCircle
+                    icon="Plus"
+                    iconSource="phosphor"
+                    onClick={() => setIsCreatingDomain(true)}
+                />
             </Tooltip>
             {isCreatingDomain && (
                 <CreateDomainModal

datahub-web-react/src/app/domainV2/nestedDomains/ManageDomainsSidebar.tsx

@@ -1,14 +1,12 @@
 import React, { useCallback, useState } from 'react';
-import { Button, Divider } from 'antd';
-import { Tooltip } from '@components';
 import styled from 'styled-components';
+import { Divider } from 'antd';
+import { Button } from '@components';
 import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign';
 import useSidebarWidth from '../../sharedV2/sidebar/useSidebarWidth';
 import DomainsSidebarHeader from './DomainsSidebarHeader';
 import DomainNavigator from './domainNavigator/DomainNavigator';
 import DomainSearch from '../DomainSearch';
-import { ANTD_GRAY } from '../../entity/shared/constants';
-import SidebarBackArrow from '../../../images/sidebarBackArrow.svg?react';
 
 const PLATFORM_BROWSE_TRANSITION_MS = 300;
 
@@ -44,32 +42,16 @@ const Controls = styled.div<{ isCollapsed: boolean }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) => (props.isCollapsed ? 'center' : 'space-between')};
-    padding: 15px 16px 10px 12px;
+    padding: 12px;
     overflow: hidden;
     height: 50px;
 `;
 
-const CloseButton = styled(Button)<{ $isActive }>`
-    margin: 0px;
-    padding: 2px 0px;
-    display: flex;
-    align-items: center;
-    transition: transform ${PLATFORM_BROWSE_TRANSITION_MS}ms ease;
-    && {
-        color: ${(props) => (props.$isActive ? ANTD_GRAY[9] : '#8088a3')};
-    }
-`;
-
 const ThinDivider = styled(Divider)`
     margin: 0px;
     padding: 0px;
 `;
 
-const StyledSidebarBackArrow = styled(SidebarBackArrow)<{ direction: 'left' | 'right' }>`
-    cursor: pointer;
-    ${(props) => (props.direction === 'right' && 'transform: scaleX(-1);') || undefined}
-`;
-
 const StyledSidebar = styled.div`
     overflow: auto;
     height: 100%;
@@ -100,17 +82,16 @@ export default function ManageDomainsSidebarV2({ isEntityProfile }: Props) {
         >
             <Controls isCollapsed={isClosed}>
                 {!isClosed && <DomainsSidebarHeader />}
-                <Tooltip
-                    placement="left"
-                    showArrow={false}
-                    title={!isClosed ? 'Close navigator' : 'Open navigator'}
-                    mouseEnterDelay={0.7}
-                    mouseLeaveDelay={0}
-                >
-                    <CloseButton $isActive={!isClosed} type="link" onClick={() => setIsClosed(!isClosed)}>
-                        <StyledSidebarBackArrow direction={isClosed ? 'left' : 'right'} />
-                    </CloseButton>
-                </Tooltip>
+                <Button
+                    variant="text"
+                    color="gray"
+                    size="lg"
+                    isCircle
+                    icon={isClosed ? 'ArrowLineRight' : 'ArrowLineLeft'}
+                    iconSource="phosphor"
+                    isActive={!isClosed}
+                    onClick={() => setIsClosed(!isClosed)}
+                />
             </Controls>
             <ThinDivider />
             <StyledSidebar>

datahub-web-react/src/app/domainV2/nestedDomains/domainNavigator/DomainNode.tsx

@@ -1,5 +1,5 @@
 import { Typography } from 'antd';
-import { Tooltip } from '@components';
+import { colors, Tooltip } from '@components';
 import React, { useEffect, useMemo } from 'react';
 import { useHistory } from 'react-router';
 import styled from 'styled-components';
@@ -14,20 +14,18 @@ import { DomainColoredIcon } from '../../../entityV2/shared/links/DomainColoredI
 import { REDESIGN_COLORS, SEARCH_COLORS } from '../../../entityV2/shared/constants';
 
 const Count = styled.div`
-    color: ${REDESIGN_COLORS.BLACK};
+    color: ${colors.gray[1700]};
     font-size: 12px;
-    padding-left: 8px;
-    padding-right: 8px;
+    padding: 0 8px;
     margin-left: 8px;
-    border-radius: 11px;
-    background-color: ${REDESIGN_COLORS.SIDE_BAR};
-    width: 20%;
+    border-radius: 20px;
+    background-color: ${colors.gray[100]};
     height: 22px;
-    display: flex;
+    min-width: 28px;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    max-width: 32px;
-    transition: opacity 0.3s ease; /* add a smooth transition effect */
+    flex-shrink: 0;
 `;
 
 const NameWrapper = styled(Typography.Text)<{ $isSelected: boolean; $addLeftPadding: boolean }>`

datahub-web-react/src/app/glossaryV2/GlossaryBrowser/NodeItem.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
+import { colors } from '@components';
 import { KeyboardArrowDownRounded, KeyboardArrowRightRounded } from '@mui/icons-material';
 import styled from 'styled-components/macro';
 import { Entity, EntityType, GlossaryNode, GlossaryTerm } from '../../../types.generated';
@@ -83,15 +84,18 @@ const LoadingWrapper = styled.div`
 `;
 
 const ChildrenCount = styled.div`
-    padding: 1px 8px;
-    display: flex;
+    padding: 0 8px;
+    display: inline-flex;
+    align-items: center;
     justify-content: center;
-    border-radius: 10px;
-    background-color: #eeecfa;
-    color: #434863;
-    font-size: 10px;
+    border-radius: 20px;
+    background-color: ${colors.gray[100]};
+    color: ${colors.gray[1700]};
+    font-size: 12px;
+    height: 22px;
+    min-width: 28px;
     font-weight: 400;
-    margin-right: 13px;
+    margin-right: 12px;
 `;
 
 const StyledDivider = styled.div<{ depth: number }>`

datahub-web-react/src/app/glossaryV2/GlossarySidebar.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from 'antd';
-import { Tooltip } from '@components';
-import { PlusCircleOutlined } from '@ant-design/icons';
+import { Tooltip, Button } from '@components';
 import styled from 'styled-components/macro';
 import { REDESIGN_COLORS } from '../entityV2/shared/constants';
 import useSidebarWidth from '../sharedV2/sidebar/useSidebarWidth';
@@ -26,28 +24,26 @@ const SidebarTitleWrapper = styled.div`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 15px 12px 10px 12px;
+    padding: 12px;
     border-bottom: 1px solid ${REDESIGN_COLORS.BORDER_3};
     height: 50px;
-
-    color: ${REDESIGN_COLORS.TITLE_PURPLE};
     font-size: 20px;
 `;
 
-const StyledButton = styled(Button)`
-    padding: 0;
-    border: none;
-    box-shadow: none;
-    color: inherit;
-    font-size: inherit;
-`;
-
 const GlossaryTitle = styled.div`
     font-size: 16px;
     font-weight: bold;
     color: #374066;
 `;
 
+const StyledButton = styled(Button)`
+    padding: 2px;
+    svg {
+        width: 20px;
+        height: 20px;
+    }
+`;
+
 type Props = {
     isEntityProfile?: boolean;
 };
@@ -74,9 +70,14 @@ export default function GlossarySidebar({ isEntityProfile }: Props) {
                 <SidebarTitleWrapper>
                     <GlossaryTitle>Business Glossary</GlossaryTitle>
                     <Tooltip title="Create Glossary" placement="left" showArrow={false}>
-                        <StyledButton onClick={() => setIsCreateNodeModalVisible(true)}>
-                            <PlusCircleOutlined style={{ fontSize: 'inherit' }} />
-                        </StyledButton>
+                        <StyledButton
+                            variant="filled"
+                            color="violet"
+                            isCircle
+                            icon="Plus"
+                            iconSource="phosphor"
+                            onClick={() => setIsCreateNodeModalVisible(true)}
+                        />
                     </Tooltip>
                 </SidebarTitleWrapper>
                 <GlossarySearch />

datahub-web-react/src/app/searchV2/sidebar/BrowseSidebar.tsx

@@ -1,14 +1,12 @@
 import React, { useCallback, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Divider, Typography } from 'antd';
-import { Tooltip } from '@components';
+import { Divider, Typography } from 'antd';
+import { colors, Button } from '@components';
 import { ProfileSidebarResizer } from '@src/app/entityV2/shared/containers/profile/sidebar/ProfileSidebarResizer';
 import { useShowNavBarRedesign } from '@src/app/useShowNavBarRedesign';
 import EntityBrowse from './EntityBrowse';
 import PlatformBrowse from './PlatformBrowse';
 import { useIsPlatformBrowseMode } from './BrowseContext';
-import { ANTD_GRAY } from '../../entityV2/shared/constants';
-import SidebarBackArrow from '../../../images/sidebarBackArrow.svg?react';
 import { SEARCH_RESULTS_BROWSE_SIDEBAR_ID } from '../../onboarding/config/SearchOnboardingConfig';
 
 const PLATFORM_BROWSE_TRANSITION_MS = 200;
@@ -61,31 +59,21 @@ const Controls = styled.div<{ isCollapsed: boolean }>`
     display: flex;
     align-items: center;
     justify-content: ${(props) => (props.isCollapsed ? 'center' : 'space-between')};
-    height: 40px;
-    padding: 8px;
+    height: 52px;
+    padding: 16px 12px;
     overflow: hidden;
 `;
 
 const NavigateTitle = styled(Typography.Title)<{ isClosed: boolean }>`
     && {
-        padding: 0px;
-        margin: 4px 0px 4px 8px;
+        padding: 0;
+        margin: 0;
         min-width: 140px;
-        opacity: ${(props) => (props.isClosed ? '0' : '1')};
-    }
-`;
-
-const CloseButton = styled(Button)<{ $isActive }>`
-    margin: 0px;
-    padding: 2px 6px;
-    display: flex;
-    align-items: center;
-
-    transform: ${(props) => (props.$isActive ? 'translateX(0)' : 'translateX(-75px)')};
-    transition: transform ${PLATFORM_BROWSE_TRANSITION_MS}ms ease;
-
-    && {
-        color: ${(props) => (props.$isActive ? ANTD_GRAY[9] : ANTD_GRAY[8])};
+        display: ${(props) => (props.isClosed ? 'none' : 'block')};
+        font-size: 14px;
+        line-height: 20px;
+        font-weight: bold;
+        color: ${colors.gray[1700]};
     }
 `;
 
@@ -95,7 +83,7 @@ const ThinDivider = styled(Divider)`
 `;
 
 const SidebarBody = styled.div`
-    height: calc(100% - 47px);
+    height: calc(100% - 53px);
     overflow: auto;
     white-space: nowrap;
     /* Hide scrollbar altoghether for Chrome, Safari, and Opera */
@@ -107,11 +95,6 @@ const SidebarBody = styled.div`
     -webkit-scrollbar-gutter: stable;
 `;
 
-const StyledSidebarBackArrow = styled(SidebarBackArrow)<{ direction: 'left' | 'right' }>`
-    cursor: pointer;
-    ${(props) => (props.direction === 'right' && 'transform: scaleX(-1);') || undefined}
-`;
-
 type Props = {
     visible: boolean;
 };
@@ -141,20 +124,21 @@ const BrowseSidebar = ({ visible }: Props) => {
                 id="browse-v2"
             >
                 <Controls isCollapsed={isClosed}>
-                    <NavigateTitle level={5} isClosed={isClosed}>
-                        Navigate
-                    </NavigateTitle>
-                    <Tooltip
-                        placement="left"
-                        showArrow={false}
-                        title={!isClosed ? 'Close navigator' : 'Open navigator'}
-                        mouseEnterDelay={0.7}
-                        mouseLeaveDelay={0}
-                    >
-                        <CloseButton $isActive={!isClosed} type="link" onClick={() => setIsClosed(!isClosed)}>
-                            <StyledSidebarBackArrow direction={isClosed ? 'left' : 'right'} />
-                        </CloseButton>
-                    </Tooltip>
+                    {!isClosed ? (
+                        <NavigateTitle level={5} isClosed={isClosed}>
+                            Navigate
+                        </NavigateTitle>
+                    ) : null}
+                    <Button
+                        variant="text"
+                        color="gray"
+                        size="lg"
+                        isCircle
+                        icon={isClosed ? 'ArrowLineRight' : 'ArrowLineLeft'}
+                        iconSource="phosphor"
+                        isActive={!isClosed}
+                        onClick={() => setIsClosed(!isClosed)}
+                    />
                 </Controls>
                 <StyledSidebar id={SEARCH_RESULTS_BROWSE_SIDEBAR_ID}>
                     <ThinDivider />