Skip to content

Fix: Update Trustlab UI, Remove links to single page in Research #1356

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Nov 21, 2025
Merged

Fix: Update Trustlab UI, Remove links to single page in Research #1356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4b1254d
refactor: Update layout and styling in ReportCard and ReportFilters c…
Nov 19, 2025
dd2ecfc
refactor: Simplify ReportsList component rendering logic and update s…
Nov 19, 2025
a0fe313
refactor: Add grayscale effect on images in ReportCard and ResearchCa…
Nov 19, 2025
a13f7d3
Remove unused research category logic and simplify report link genera…
Nov 20, 2025
60b245b
refactor: Update import statements for consistency and improve format…
Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/trustlab/src/components/PageOverview/PageOverview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,9 @@ const PostImageOverview = forwardRef(function PostImageOverview(
ImageProps={{
alt,
src: url,
sx: {
objectPosition: { xs: "left top", sm: "center top" },
},
}}
sx={{
height: { xs: "260px", sm: "300px", md: "366px" },
Expand All @@ -144,6 +147,7 @@ const PostImageOverview = forwardRef(function PostImageOverview(
width: { xs: "220px", sm: "100%" },
maxWidth: { sm: "280px", md: "360px" },
mx: { xs: 0, sm: "auto" },

"& span img": {
objectPosition: { xs: "left top", sm: "center top" },
},
Expand Down
21 changes: 17 additions & 4 deletions apps/trustlab/src/components/ReportCard/ReportCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
CardMedia,
Divider,
Typography,
CardActions, // added
CardActions,
} from "@mui/material";
import { forwardRef } from "react";

Expand All @@ -30,6 +30,12 @@ const ReportCard = forwardRef(function ReportCard(props, ref) {
sx={[
{
borderRadius: "5px",
img: {
filter: "grayscale(100%)",
},
"&:hover img": {
filter: "grayscale(0%)",
},
},
...(Array.isArray(sx) ? sx : [sx]),
]}
Expand Down Expand Up @@ -61,7 +67,14 @@ const ReportCard = forwardRef(function ReportCard(props, ref) {
<CardContent
sx={{ pb: "0px !important", px: image?.src && !condensed ? 0 : 2 }}
>
<Typography variant="h3" gutterBottom>
<Typography
variant="h3"
sx={{
whiteSpace: "nowrap",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{title}
</Typography>

Expand All @@ -70,7 +83,7 @@ const ReportCard = forwardRef(function ReportCard(props, ref) {
component="div"
sx={{
color: "#828499",
my: 2,
my: 1.25,
}}
>
{date}
Expand Down Expand Up @@ -132,11 +145,11 @@ const ReportCard = forwardRef(function ReportCard(props, ref) {
<Box
href={file?.url}
component={file?.url ? Link : "div"}
download={file?.url ? file.url : undefined}
sx={{
textDecoration: "none",
lineHeight: "16px",
cursor: file?.url ? "pointer" : "default",
mt: condensed ? 1 : 0,
}}
>
<Typography
Expand Down
32 changes: 16 additions & 16 deletions apps/trustlab/src/components/ReportCard/ReportCard.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<ReportCard /> renders in condensed mode 1`] = `
<div
class="MuiBox-root css-nx089"
class="MuiBox-root css-ztm1u"
>
<div
class="MuiBox-root css-15ooa9"
Expand All @@ -15,12 +15,12 @@ exports[`<ReportCard /> renders in condensed mode 1`] = `
class="MuiCardContent-root css-3p3r5n-MuiCardContent-root"
>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
class="MuiTypography-root MuiTypography-h3 css-isx17q-MuiTypography-root"
>
Test Report
</h3>
<div
class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
class="MuiTypography-root MuiTypography-caption css-1i6wbmn-MuiTypography-root"
/>
<div
class="MuiBox-root css-w7thh7"
Expand All @@ -42,7 +42,7 @@ exports[`<ReportCard /> renders in condensed mode 1`] = `
class="MuiCardActions-root MuiCardActions-spacing css-11bzvph-MuiCardActions-root"
>
<div
class="MuiBox-root css-1u1lzaw"
class="MuiBox-root css-ropfi3"
>
<span
class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
Expand All @@ -56,7 +56,7 @@ exports[`<ReportCard /> renders in condensed mode 1`] = `

exports[`<ReportCard /> renders unchanged 1`] = `
<div
class="MuiBox-root css-nx089"
class="MuiBox-root css-ztm1u"
>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiBox-root css-1fhreme-MuiTypography-root-MuiLink-root"
Expand All @@ -75,12 +75,12 @@ exports[`<ReportCard /> renders unchanged 1`] = `
class="MuiCardContent-root css-9bakwa-MuiCardContent-root"
>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
class="MuiTypography-root MuiTypography-h3 css-isx17q-MuiTypography-root"
>
Test Report
</h3>
<div
class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
class="MuiTypography-root MuiTypography-caption css-1i6wbmn-MuiTypography-root"
/>
<div
class="MuiBox-root css-bo3k24"
Expand All @@ -105,7 +105,7 @@ exports[`<ReportCard /> renders unchanged 1`] = `
class="MuiCardActions-root MuiCardActions-spacing css-brej4a-MuiCardActions-root"
>
<div
class="MuiBox-root css-1u1lzaw"
class="MuiBox-root css-1rwwe69"
>
<span
class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
Expand All @@ -119,7 +119,7 @@ exports[`<ReportCard /> renders unchanged 1`] = `

exports[`<ReportCard /> renders without image 1`] = `
<div
class="MuiBox-root css-nx089"
class="MuiBox-root css-ztm1u"
>
<div
class="MuiBox-root css-15ooa9"
Expand All @@ -132,12 +132,12 @@ exports[`<ReportCard /> renders without image 1`] = `
class="MuiCardContent-root css-3p3r5n-MuiCardContent-root"
>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
class="MuiTypography-root MuiTypography-h3 css-isx17q-MuiTypography-root"
>
Test Report
</h3>
<div
class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
class="MuiTypography-root MuiTypography-caption css-1i6wbmn-MuiTypography-root"
/>
<div
class="MuiBox-root css-bo3k24"
Expand All @@ -162,7 +162,7 @@ exports[`<ReportCard /> renders without image 1`] = `
class="MuiCardActions-root MuiCardActions-spacing css-11bzvph-MuiCardActions-root"
>
<div
class="MuiBox-root css-1u1lzaw"
class="MuiBox-root css-1rwwe69"
>
<span
class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
Expand All @@ -176,7 +176,7 @@ exports[`<ReportCard /> renders without image 1`] = `

exports[`<ReportCard /> renders without link 1`] = `
<div
class="MuiBox-root css-nx089"
class="MuiBox-root css-ztm1u"
>
<div
class="MuiBox-root css-15ooa9"
Expand All @@ -194,12 +194,12 @@ exports[`<ReportCard /> renders without link 1`] = `
class="MuiCardContent-root css-9bakwa-MuiCardContent-root"
>
<h3
class="MuiTypography-root MuiTypography-h3 MuiTypography-gutterBottom css-geacmp-MuiTypography-root"
class="MuiTypography-root MuiTypography-h3 css-isx17q-MuiTypography-root"
>
Test Report
</h3>
<div
class="MuiTypography-root MuiTypography-caption css-uzvwmk-MuiTypography-root"
class="MuiTypography-root MuiTypography-caption css-1i6wbmn-MuiTypography-root"
/>
<div
class="MuiBox-root css-bo3k24"
Expand All @@ -224,7 +224,7 @@ exports[`<ReportCard /> renders without link 1`] = `
class="MuiCardActions-root MuiCardActions-spacing css-brej4a-MuiCardActions-root"
>
<div
class="MuiBox-root css-1u1lzaw"
class="MuiBox-root css-1rwwe69"
>
<span
class="MuiTypography-root MuiTypography-caption css-1p9k16f-MuiTypography-root"
Expand Down
2 changes: 1 addition & 1 deletion apps/trustlab/src/components/ReportFilters/ReportFilters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ const ReportFilters = React.forwardRef(function ReportFilters(
<Box ref={ref} display="flex" flexDirection="column" gap={2} {...rest}>
{/* Row 1: Filter By Label */}
{filterByLabel && (
<Typography variant="subtitle1" fontWeight={500}>
<Typography variant="subtitle1" fontWeight={700}>
{filterByLabel}
</Typography>
)}
Expand Down
2 changes: 1 addition & 1 deletion apps/trustlab/src/components/ReportFilters/ReportFilters.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ReportFilters renders unchanged 1`] = `
class="MuiBox-root css-yd8sa2"
>
<h6
class="MuiTypography-root MuiTypography-subtitle1 css-fupvoa-MuiTypography-root"
class="MuiTypography-root MuiTypography-subtitle1 css-1dte1p5-MuiTypography-root"
>
Filter By
</h6>
Expand Down
58 changes: 30 additions & 28 deletions apps/trustlab/src/components/ReportsList/ReportsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,42 +97,44 @@ const ReportsList = forwardRef(function ReportsList(props, ref) {
return (
<Box>
{hasFilters ? (
<Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
<Section sx={{ py: 2.5, px: { xs: 2.5, md: 0 } }}>
<ReportFilters
{...other}
onApply={(filterParams) => handleApplyFilters(filterParams)}
/>
</Section>
) : null}
<Box sx={{ background: "#fff" }}>
<Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
<Grid container spacing={3} ref={ref} {...other}>
{reports.map((report, index) => (
<Grid key={report.id ?? index} size={{ xs: 12, sm: 4 }}>
<ReportCard
condensed={condensed}
actionLabel={cardActionLabel}
{...report}
sx={
condensed && {
background: index % 2 === 0 ? "#E7E9FF" : "#F0F0F5",
{reports.length ? (
<Box sx={{ background: "#fff" }}>
<Section sx={{ py: 8, px: { xs: 2.5, md: 0 } }}>
<Grid container spacing={3} ref={ref} {...other}>
{reports.map((report, index) => (
<Grid key={report.id ?? index} size={{ xs: 12, sm: 4 }}>
<ReportCard
condensed={condensed}
actionLabel={cardActionLabel}
{...report}
sx={
condensed && {
background: index % 2 === 0 ? "#E7E9FF" : "#F0F0F5",
}
}
}
/>
</Grid>
))}
</Grid>
{hasPagination ? (
<Box display="flex" justifyContent="flex-end" mt={4}>
<ReportsPagination
page={pagination?.page ?? 1}
count={pagination?.count ?? 1}
onChange={handlePageChange}
/>
</Grid>
))}
</Grid>
{hasPagination ? (
<Box display="flex" justifyContent="flex-end" mt={4}>
<ReportsPagination
page={pagination?.page ?? 1}
count={pagination?.count ?? 1}
onChange={handlePageChange}
/>
</Box>
) : null}
</Section>
</Box>
</Box>
) : null}
</Section>
</Box>
) : null}
</Box>
);
});
Expand Down
15 changes: 1 addition & 14 deletions apps/trustlab/src/components/ReportsList/ReportsList.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,5 @@
exports[`<ReportsList /> renders unchanged 1`] = `
<div
class="MuiBox-root css-0"
>
<div
class="MuiBox-root css-c3vlm2"
>
<div
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1be4fpk-MuiContainer-root"
>
<div
categories="[object Object],[object Object],[object Object]"
class="MuiGrid2-root MuiGrid2-container MuiGrid2-direction-xs-row MuiGrid2-spacing-xs-3 css-ipzchf-MuiGrid2-root"
/>
</div>
</div>
</div>
/>
`;
11 changes: 10 additions & 1 deletion apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,16 @@ const ResearchCategoryCard = forwardRef(
ref={ref}
elevation={0}
href={link?.href}
sx={{ textDecoration: "none", backgroundColor: "transparent" }}
sx={{
textDecoration: "none",
backgroundColor: "transparent",
img: {
filter: "grayscale(100%)",
},
"&:hover img": {
filter: "grayscale(0%)",
},
}}
{...other}
>
{image?.src && (
Expand Down
6 changes: 3 additions & 3 deletions apps/trustlab/src/components/ResearchCategoryCard/ResearchCategoryCard.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`<ResearchCategoryCard /> renders unchanged 1`] = `
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-10ccbxm-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
href="/test-link"
style="--Paper-shadow: none;"
>
Expand Down Expand Up @@ -49,7 +49,7 @@ exports[`<ResearchCategoryCard /> renders unchanged 1`] = `

exports[`<ResearchCategoryCard /> renders without image 1`] = `
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-ezhwr5-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"
style="--Paper-shadow: none;"
>
<div
Expand Down Expand Up @@ -79,7 +79,7 @@ exports[`<ResearchCategoryCard /> renders without image 1`] = `

exports[`<ResearchCategoryCard /> renders without link 1`] = `
<div
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-ezhwr5-MuiPaper-root-MuiCard-root"
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-167r1gz-MuiPaper-root-MuiCard-root"
style="--Paper-shadow: none;"
>
<img
Expand Down
6 changes: 3 additions & 3 deletions apps/trustlab/src/components/ResearchCategoryList/ResearchCategoryList.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ exports[`<ResearchCategoryList /> renders unchanged 1`] = `
class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-10ccbxm-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
href="/category-1"
id="1"
style="--Paper-shadow: none;"
Expand Down Expand Up @@ -60,7 +60,7 @@ exports[`<ResearchCategoryList /> renders unchanged 1`] = `
class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-10ccbxm-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
href="/category-2"
id="2"
style="--Paper-shadow: none;"
Expand Down Expand Up @@ -109,7 +109,7 @@ exports[`<ResearchCategoryList /> renders unchanged 1`] = `
class="MuiGrid2-root MuiGrid2-direction-xs-row MuiGrid2-grid-xs-12 MuiGrid2-grid-sm-4 css-8o12w-MuiGrid2-root"
>
<a
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-10ccbxm-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-neeamg-MuiTypography-root-MuiLink-root-MuiPaper-root-MuiCard-root"
href="/category-3"
id="3"
style="--Paper-shadow: none;"
Expand Down
Loading
Loading