removed dash line and weird border radius in sidebar sections (#13266)

datahub-web-react/src/alchemy-components/theme/foundations/colors.ts

@@ -15,7 +15,7 @@ const colors = {
         700: '#2F3657', // should be deprecated
         800: '#272D48', // should be deprecated
         900: '#231A58', // should be deprecated
-        1000: '#F1F3FD', // grays violet 0
+        1000: '#F1F3FD', // violet 0
         1100: '#F1FBFE', // blue 0
         1200: '#FBF3EF', // red 0
         1300: '#F7FBF4', // green 0

datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx

@@ -1,3 +1,4 @@
+import { colors } from '@components';
 import DraftsOutlinedIcon from '@mui/icons-material/DraftsOutlined';
 import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
 import { Row } from 'antd';
@@ -46,7 +47,6 @@ export const SideBarSubSection = styled.div`
     }
     &::-webkit-scrollbar-thumb {
         background: #d6d6d6;
-        -webkit-border-radius: 1ex;
         -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
     }
 `;
@@ -233,8 +233,8 @@ export const Content = styled.div`
         padding-bottom: 12px;
         width: 100%;
         &:not(:last-child) {
-            border-bottom: 1px dashed;
-            border-color: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid;
+            border-color: ${colors.gray[100]};
         }
     }
 `;

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx

@@ -1,14 +1,12 @@
+import { colors } from '@components';
 import { Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
-import { REDESIGN_COLORS } from '@app/entityV2/shared/constants';
-
 const EmptyContentMessage = styled(Typography.Text)`
     font-size: 12px;
     font-weight: 400;
-    color: ${REDESIGN_COLORS.DARK_GREY};
-    opacity: 0.5;
+    color: ${colors.gray[1700]};
 `;
 
 type Props = {

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntitySidebar.tsx

@@ -1,3 +1,4 @@
+import { colors } from '@components';
 import React from 'react';
 import styled from 'styled-components/macro';
 
@@ -6,7 +7,7 @@ import { EntitySidebarSection, TabContextType, TabRenderType } from '@app/entity
 import { ENTITY_PROFILE_V2_SIDEBAR_ID } from '@app/onboarding/config/EntityProfileOnboardingConfig';
 
 const Container = styled.div`
-    padding: 0px 18px 18px 18px;
+    padding: 0 12px 0 12px;
 `;
 
 const Content = styled.div`
@@ -14,10 +15,12 @@ const Content = styled.div`
 
     & > div {
         padding-top: 12px;
+
         padding-bottom: 12px;
         &:not(:last-child) {
-            border-bottom: 1px dashed;
-            border-color: rgba(0, 0, 0, 0.3);
+            border-bottom: 1px solid;
+            border-color: ${colors.gray[100]};
+            border-radius: 0px;
         }
     }
     &::-webkit-scrollbar {
@@ -27,7 +30,6 @@ const Content = styled.div`
     }
     &::-webkit-scrollbar-thumb {
         background: #cccccc;
-        -webkit-border-radius: 1ex;
         -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
     }
 `;

datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/SidebarSection.tsx

@@ -1,10 +1,10 @@
-import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
+import { colors } from '@components';
+import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import { Collapse, Typography } from 'antd';
 import React from 'react';
 import styled from 'styled-components';
 
 import { CountStyle } from '@app/entityV2/shared/SidebarStyledComponents';
-import { REDESIGN_COLORS } from '@app/entityV2/shared/constants';
 
 const Container = styled.div`
     margin-left: 7px;
@@ -42,6 +42,14 @@ const StyledCollapse = styled(Collapse)`
     .ant-collapse-header-text {
         max-width: calc(100% - 50px);
     }
+
+    &.ant-collapse {
+        border-radius: 0 !important;
+    }
+
+    .ant-collapse-item {
+        border-radius: 0 !important;
+    }
 `;
 
 const SectionHeader = styled.span<{ collapsible?: boolean }>`
@@ -54,19 +62,18 @@ const Title = styled(Typography.Text)`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${REDESIGN_COLORS.DARK_GREY};
+    color: ${colors.gray[600]};
     font-weight: 700;
-    line-height: 20px;
     font-size: 14px;
+    display: flex;
+    align-items: center;
 `;
 
 const StyledIcon = styled.div`
     svg {
-        height: 18px;
-        width: 18px;
-        color: ${REDESIGN_COLORS.SECONDARY_LIGHT_GREY};
-        stroke: ${REDESIGN_COLORS.SECONDARY_LIGHT_GREY};
-        stroke-width: 1px;
+        height: 16px;
+        width: 16px;
+        color: ${colors.gray[1800]};
     }
 `;
 
@@ -94,9 +101,7 @@ export const SidebarSection = ({
     return (
         <StyledCollapse
             ghost
-            expandIcon={({ isActive }) => (
-                <StyledIcon>{isActive ? <KeyboardArrowDown /> : <KeyboardArrowRight />} </StyledIcon>
-            )}
+            expandIcon={({ isActive }) => <StyledIcon>{isActive ? <CaretDown /> : <CaretRight />} </StyledIcon>}
             defaultActiveKey={expandedByDefault ? title : ''}
         >
             <Collapse.Panel