From 34feb0f3f11a3cab8d5b88183beb5af12b3700b1 Mon Sep 17 00:00:00 2001 From: Anna Everhart <149417426+annadoesdesign@users.noreply.github.com> Date: Thu, 24 Apr 2025 10:23:40 -0700 Subject: [PATCH] removed dash line and weird border radius in sidebar sections (#13266) --- .../theme/foundations/colors.ts | 2 +- .../shared/SidebarStyledComponents.tsx | 6 ++-- .../profile/sidebar/EmptySectionText.tsx | 6 ++-- .../profile/sidebar/EntitySidebar.tsx | 10 ++++--- .../profile/sidebar/SidebarSection.tsx | 29 +++++++++++-------- 5 files changed, 29 insertions(+), 24 deletions(-) diff --git a/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts b/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts index de447a023b..5c487c034d 100644 --- a/datahub-web-react/src/alchemy-components/theme/foundations/colors.ts +++ b/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 diff --git a/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx b/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx index aacc8d1aa0..d0fbdaaf45 100644 --- a/datahub-web-react/src/app/entityV2/shared/SidebarStyledComponents.tsx +++ b/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]}; } } `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx index dc9a9d92bf..d04960b36a 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EmptySectionText.tsx +++ b/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 = { diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntitySidebar.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntitySidebar.tsx index 33eaaafce0..3d854e85f9 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/EntitySidebar.tsx +++ b/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); } `; diff --git a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/SidebarSection.tsx b/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/SidebarSection.tsx index 00726b84a8..84d9c4c97c 100644 --- a/datahub-web-react/src/app/entityV2/shared/containers/profile/sidebar/SidebarSection.tsx +++ b/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 ( ( - {isActive ? : } - )} + expandIcon={({ isActive }) => {isActive ? : } } defaultActiveKey={expandedByDefault ? title : ''} >