diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css index db28706b6..2d0823863 100644 --- a/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css +++ b/lib/static/new-ui/features/suites/components/SuitesPage/index.module.css @@ -4,83 +4,3 @@ height: 28px; margin-top: var(--g-spacing-2); } - -.tree-view { - margin-top: var(--g-spacing-2); -} - .tree-view__container { - height: 100%; - width: 100%; - overflow-y: auto; - contain: strict; - } - - .tree-view__total-size-wrapper { - width: 100%; - position: relative; - } - - .tree-view__visible-window { - position: absolute; - top: 0; - left: 0; - width: 100%; - } - - .tree-view__item { - --g-text-subheader-1-font-size: 18px; - --g-text-subheader-1-line-height: 22px; - --g-text-subheader-font-weight: normal; - - --g-text-body-1-font-size: 18px; - --g-text-body-1-line-height: 22px; - --g-text-body-font-weight: normal; - - padding: 4px 0; - font-size: 18px; - - user-select: none; - } - - .tree-view__item svg { - flex-shrink: 0; - } - - .tree-view__item > div > div { - align-items: start !important; - } - - .tree-item--current { - background: #a28aff !important; - color: #fff; - } - - .tree-item--current:hover { - background: #af9aff !important; - } - - .tree-item--current svg { - color: #fff; - } - - .tree-item--browser { - padding-left: 8px; - } - - .tree-item--error { - background: var(--g-color-private-red-100); - color: var(--g-color-private-red-600-solid); - } - - .tree-item--error:hover { - background: var(--g-color-private-red-50) !important; - } - - .tree-item--error svg { - color: var(--g-color-private-red-600-solid); - } - - - .tree-view :global(.g-text_ellipsis) { - white-space: normal; - } diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css new file mode 100644 index 000000000..0c2ed773b --- /dev/null +++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.module.css @@ -0,0 +1,80 @@ +.tree-view { + margin-top: var(--g-spacing-2); +} + + .tree-view :global(.g-text_ellipsis) { + white-space: normal; + } + + .tree-view__container { + height: 100%; + width: 100%; + overflow-y: auto; + contain: strict; + } + + .tree-view__total-size-wrapper { + width: 100%; + position: relative; + } + + .tree-view__visible-window { + position: absolute; + top: 0; + left: 0; + width: 100%; + } + + .tree-view__item { + --g-text-subheader-1-font-size: 18px; + --g-text-subheader-1-line-height: 22px; + --g-text-subheader-font-weight: normal; + + --g-text-body-1-font-size: 18px; + --g-text-body-1-line-height: 22px; + --g-text-body-font-weight: normal; + + padding: 4px 0; + font-size: 18px; + + user-select: none; + } + + .tree-view__item svg { + flex-shrink: 0; + } + + .tree-view__item > div > div { + align-items: start !important; + } + + .tree-view__item--current { + background: #a28aff !important; + color: #fff; + } + + .tree-view__item--current:hover { + background: #af9aff !important; + } + + .tree-view__item--current svg { + color: #fff; + } + + .tree-view__item--browser { + padding-left: 8px; + } + + .tree-view__item--error { + background: var(--g-color-private-red-100); + color: var(--g-color-private-red-600-solid); + } + + .tree-view__item--error:hover { + background: var(--g-color-private-red-50) !important; + } + + + .tree-view__item--error svg { + color: var(--g-color-private-red-600-solid); + } diff --git a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx index f133d2ebd..68c3dd789 100644 --- a/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx +++ b/lib/static/new-ui/features/suites/components/SuitesTreeView/index.tsx @@ -11,7 +11,6 @@ import {useNavigate, useParams} from 'react-router-dom'; import {bindActionCreators} from 'redux'; import * as actions from '@/static/modules/actions'; -import styles from '@/static/new-ui/features/suites/components/SuitesPage/index.module.css'; import { TreeViewBrowserData, TreeViewItem, @@ -26,6 +25,7 @@ import { getTreeViewExpandedById, getTreeViewItems } from '@/static/new-ui/features/suites/components/SuitesTreeView/selectors'; +import styles from './index.module.css'; interface SuitesTreeViewProps { treeViewItems: TreeViewItem[]; @@ -109,12 +109,12 @@ function SuitesTreeViewInternal(props: SuitesTreeViewProps): ReactNode { const item = list.structure.itemsById[virtualRow.key]; const classes = [styles['tree-view__item']]; if (item.fullTitle === props.currentSuiteId) { - classes.push(styles['tree-item--current']); + classes.push(styles['tree-view__item--current']); } else if ((item.status === 'fail' || item.status === 'error') && item.type === TreeViewItemType.Browser) { - classes.push(styles['tree-item--error']); + classes.push(styles['tree-view__item--error']); } if (item.type === TreeViewItemType.Browser) { - classes.push(styles['tree-item--browser']); + classes.push(styles['tree-view__item--browser']); } return * { - margin-left: var(--g-spacing-2); - } - - .controls-row > *:first-child { - margin-left: 0; - } - -.status-switcher__option { - align-items: center; - display: flex; - justify-content: center; -} - - .status-switcher__option > *:first-child { - margin-right: 2px; - } - -.g-radio-button__option-text { - margin: 0 4px !important; -} - .icon-fail { color: var(--g-color-private-red-600-solid); }