diff --git a/web/src/components/atoms/Icon/icons.ts b/web/src/components/atoms/Icon/icons.ts index ba1edb677e..78223bb232 100644 --- a/web/src/components/atoms/Icon/icons.ts +++ b/web/src/components/atoms/Icon/icons.ts @@ -51,6 +51,7 @@ import { ReloadOutlined, SortAscendingOutlined, FilterOutlined, + CommentOutlined, } from "@ant-design/icons"; import ArrowSquareOut from "./Icons/arrowSquareOut.svg"; @@ -177,4 +178,5 @@ export default { editorCopy: EditorCopy, circle: Circle, rectangle: Rectangle, + comment: CommentOutlined, }; diff --git a/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx b/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx index 023bbcfcd4..ba11e35ff9 100644 --- a/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx +++ b/web/src/components/molecules/Asset/Asset/AssetBody/Asset.tsx @@ -223,6 +223,7 @@ const BodyContainer = styled.div` flex-direction: row; width: 100%; height: calc(100% - 72px); + border-top: 1px solid #00000008; .ant-tree-show-line .ant-tree-switcher { background-color: transparent; } @@ -239,6 +240,7 @@ const BodyWrapper = styled.div` const SideBarWrapper = styled.div` padding: 8px; width: 272px; + background-color: #fafafa; `; const StyledButton = styled(Button)` diff --git a/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx b/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx index 92ae23e3ac..342b7a5558 100644 --- a/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx +++ b/web/src/components/molecules/Asset/Asset/AssetBody/sideBarCard.tsx @@ -1,15 +1,14 @@ import styled from "@emotion/styled"; -import { CSSProperties, ReactNode } from "react"; +import { ReactNode } from "react"; type Props = { title: string; children?: ReactNode; - style?: CSSProperties; }; -const SideBarCard: React.FC = ({ title, children, style }) => { +const SideBarCard: React.FC = ({ title, children }) => { return ( - + {title} {children} @@ -23,6 +22,7 @@ const SideBarCardWrapper = styled.div` display: flex; flex-direction: column; box-shadow: 0 4px 4px 0 #00000025; + background-color: #fff; `; const CardTitle = styled.span` diff --git a/web/src/components/molecules/Asset/AssetList/index.tsx b/web/src/components/molecules/Asset/AssetList/index.tsx index ecf86b3438..cdf466f1fc 100644 --- a/web/src/components/molecules/Asset/AssetList/index.tsx +++ b/web/src/components/molecules/Asset/AssetList/index.tsx @@ -179,5 +179,5 @@ const Wrapper = styled.div` `; const StyledPageHeader = styled(PageHeader)` - margin: 0 8px; + border-bottom: 1px solid #00000008; `; diff --git a/web/src/components/molecules/Common/CommentsPanel/index.tsx b/web/src/components/molecules/Common/CommentsPanel/index.tsx index c747eebc3d..e78befcf26 100644 --- a/web/src/components/molecules/Common/CommentsPanel/index.tsx +++ b/web/src/components/molecules/Common/CommentsPanel/index.tsx @@ -42,7 +42,7 @@ const CommentsPanel: React.FC = ({ trigger={}> {collapsed ? ( - onCollapse(false)} /> + onCollapse(false)} /> ) : ( <> @@ -72,7 +72,8 @@ const CommentsPanel: React.FC = ({ export default CommentsPanel; const StyledIcon = styled(Icon)` - padding: 12px 20px; + padding-top: 12px; + justify-content: center; `; const ThreadWrapper = styled.div` @@ -81,7 +82,8 @@ const ThreadWrapper = styled.div` `; const Title = styled.h3` - font-size: 18px; + font-size: 16px; + line-height: 1.5; cursor: pointer; `; diff --git a/web/src/components/molecules/Content/Table/DropdownRender/index.tsx b/web/src/components/molecules/Content/Table/DropdownRender/index.tsx index 50f267e6cc..b6b4f7accd 100644 --- a/web/src/components/molecules/Content/Table/DropdownRender/index.tsx +++ b/web/src/components/molecules/Content/Table/DropdownRender/index.tsx @@ -156,6 +156,10 @@ const StyledFormItem = styled(Form.Item)` const TextWrapper = styled.span` min-width: 137px; + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; text-align: left; `; diff --git a/web/src/components/molecules/Content/Table/filterDropdown.tsx b/web/src/components/molecules/Content/Table/filterDropdown.tsx index 9446bf7082..c33672d0d7 100644 --- a/web/src/components/molecules/Content/Table/filterDropdown.tsx +++ b/web/src/components/molecules/Content/Table/filterDropdown.tsx @@ -77,7 +77,7 @@ const FilterDropdown: React.FC = ({ - {filter.title} + {filter.title}
@@ -95,6 +95,13 @@ const StyledButton = styled(Button)` background-color: #f8f8f8; `; +const Title = styled.div` + max-width: 300px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + const StyledIcon = styled(Icon)` color: rgba(0, 0, 0, 0.45); :hover { diff --git a/web/src/components/molecules/Content/Table/index.tsx b/web/src/components/molecules/Content/Table/index.tsx index 9f1ae87b4e..7be4e5e916 100644 --- a/web/src/components/molecules/Content/Table/index.tsx +++ b/web/src/components/molecules/Content/Table/index.tsx @@ -526,7 +526,7 @@ const ContentTable: React.FC = ({ const sharedProps = useMemo( () => ({ menu: { items }, - dropdownRender: (menu: React.ReactNode): React.ReactNode => ( + dropdownRender: (menu: React.ReactNode) => ( = ({ onChange={handleChange} /> - {React.cloneElement(menu as React.ReactElement, { style: menuStyle })} + {React.cloneElement(menu as React.ReactElement)} ), arrow: false, @@ -710,7 +710,7 @@ const ContentTable: React.FC = ({ currentView.columns?.forEach((col, index) => { const colKey = (metaColumn as readonly string[]).includes(col.field.type) ? col.field.type - : col.field.id ?? ""; + : (col.field.id ?? ""); cols[colKey] = { show: col.visible, order: index, fixed: col.fixed }; }); return cols; @@ -880,10 +880,15 @@ const Wrapper = styled.div` 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + .ant-dropdown-menu { + box-shadow: none; + overflow-y: auto; + max-height: 256px; + max-width: 332px; + .ant-dropdown-menu-title-content { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } `; - -const menuStyle: React.CSSProperties = { - boxShadow: "none", - overflowY: "auto", - maxHeight: "256px", -}; diff --git a/web/src/components/molecules/Request/List/index.tsx b/web/src/components/molecules/Request/List/index.tsx index a0c25a033f..c0bbdcd35f 100644 --- a/web/src/components/molecules/Request/List/index.tsx +++ b/web/src/components/molecules/Request/List/index.tsx @@ -108,7 +108,7 @@ const Content = styled.div` `; const StyledPageHeader = styled(PageHeader)` - margin: 0 8px; + border-bottom: 1px solid #00000008; `; export default RequestListMolecule;