diff --git a/Approvals.zip b/Approvals.zip index 695d3b4..81d8a57 100644 Binary files a/Approvals.zip and b/Approvals.zip differ diff --git a/search/src/modules/searchResults/components/searchTabs.component.tsx b/search/src/modules/searchResults/components/searchTabs.component.tsx index 414446b..c037a66 100644 --- a/search/src/modules/searchResults/components/searchTabs.component.tsx +++ b/search/src/modules/searchResults/components/searchTabs.component.tsx @@ -1,23 +1,24 @@ import React, {useState} from 'react'; import {SearchResultsComponent} from "./searchResults.compoment.tsx"; -import {Badge, Box, Tab, Tabs} from "@mui/material"; +import {Badge, Box, Tab, Tabs, Typography} from "@mui/material"; import {Actions} from "../../actions/components/actions.component.tsx"; import {getActionIndex, getActionName} from "../../search/types/search.types.ts"; import {compare, Mechanism, MechanismActions, SearchResults, SelectedFilters} from '@approvals/service' const styles = { tabs:{ - p: '16px 0px' + p: '8px 0px 12px', }, tab:{ - overflow: 'visible', - width: { - lg: '160px', - md: '140px', - sm: '120px', - xs: '90px' - }, - textAlign: 'center', + borderBottom: '3px solid lightgray', + }, + tabCount:{ + verticalAlign: 'super', + fontSize: '12px', + backgroundColor: '#2c6693', + color: 'white', + borderRadius: '10px', + padding: '4px' }, badge: { // paddingRight: 2, @@ -48,13 +49,8 @@ function getTabOffset(count:number):number{ } } -function getBadgeStyles(count:number){ - return { - ...styles.badge, - '& .MuiBadge-badge': { - right: getTabOffset(count), - } - } +function getTabStyle(count:number){ + return {...styles.tab, borderColor: count>0?'lightgray':'rgb(235,235,235)'} } export function SearchTabs({selectedFilters, searchResults}:{ @@ -79,12 +75,10 @@ export function SearchTabs({selectedFilters, searchResults}:{ disabled={!compare(selectedFilters, searchResults.selectedFilters)} /> - - {operations.map(({name, count})=> - {name} - - } key={name} sx={styles.tab} disabled={count===0}/>)} + + {operations.map(({name, count})=> + {name} {count>0&&{count}} + } key={name} sx={getTabStyle(count)} disabled={count===0}/>)} { options.headers = {Authorization: `Basic ${auth}`} }, diff --git a/view/src/modules/preview/components/mechanismTabs.component.tsx b/view/src/modules/preview/components/mechanismTabs.component.tsx index 3a61310..08e420a 100644 --- a/view/src/modules/preview/components/mechanismTabs.component.tsx +++ b/view/src/modules/preview/components/mechanismTabs.component.tsx @@ -40,7 +40,7 @@ export function MechanismTabs({selectedMechanism, mechanisms, onMechanismSelect} variant="scrollable" > {mechanisms.length>1&&} - {mechanismSubset.map(({info:{mechanismName}, identifiers:{applicationId}})=>)} + {mechanismSubset.map(({info:{mechanismName}, identifiers:{applicationId}})=>)} {mechanismSubset.length>30&&Mechanism preview is limited to 30 mechanisms only}/>} } \ No newline at end of file