starred/Thingport
1
0 Fork 0
mirror of https://github.com/TautvydasDerzinskas/Thingport.git synced 2026-10-18 20:59:55 -05:00
Code Issues Packages Projects Releases 8 Wiki Activity

fix: minor adjustments to dark theme

Browse Source
This commit is contained in:
Tautvydas Derzinskas committed 2026-09-12 02:37:21 +02:00
1 parent c40639fe6e
commit e9ac4f9776
11 files changed
+105 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Layout/Sidebar/index.tsx
+16 -6
View File
@@ -42,12 +42,22 @@ function navRowSx(selected: boolean) {
return {
color,
"& .MuiListItemIcon-root": { color },
...(selected && {
background: (theme: Theme) => theme.thingport.selectedNavBackground,
"&.Mui-selected, &.Mui-selected:hover": {
background: (theme: Theme) => theme.thingport.selectedNavBackground,
},
}),
...(selected
? {
background: (theme: Theme) => theme.thingport.selectedNavBackground,
"&.Mui-selected, &.Mui-selected:hover": {
background: (theme: Theme) => theme.thingport.selectedNavBackground,
},
}
: {
// Dark mode only: hovering an inactive row shouldn't tint its background (unlike
// MUI's own default hover overlay, which light mode still gets, unchanged) -- just
// brighten the label/icon to white. Returning {} for light leaves that default alone.
"&:hover": (theme: Theme) =>
theme.palette.mode === "dark"
? { backgroundColor: "transparent", color: "#fff", "& .MuiListItemIcon-root": { color: "#fff" } }
: {},
}),
};
}
frontend/src/pages/DashboardPage/AuthorListCard.tsx
+5 -2
View File
@@ -51,10 +51,13 @@ export default function AuthorListCard({ authors }: Props) {
const modelCountLabel = (count: number) => t("dashboard.topAuthors.modelCount", { count });
return (
<Paper variant="outlined" sx={{ p: 2.5, display: "flex", flexDirection: "column" }}>
<Paper
variant="outlined"
sx={{ p: 2.5, display: "flex", flexDirection: "column", borderColor: (theme) => (theme.palette.mode === "dark" ? "transparent" : "divider") }}
>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1, color: "primary.main" }}>
<StarIcon />
<Typography variant="h6" fontWeight={700} color="text.primary">{t("dashboard.topAuthors.title")}</Typography>
<Typography variant="h6" fontWeight={700} sx={{ color: (theme) => theme.thingport.headingText }}>{t("dashboard.topAuthors.title")}</Typography>
</Box>
{authors.length === 0 ? (
frontend/src/pages/DashboardPage/CountCard.tsx
+2 -1
View File
@@ -25,6 +25,7 @@ export default function CountCard({ icon, count, label, onClick }: Props) {
justifyContent: "center",
gap: 1,
minHeight: 140,
borderColor: (theme) => (theme.palette.mode === "dark" ? "transparent" : "divider"),
...(onClick && {
cursor: "pointer",
transition: (theme) => theme.transitions.create("background-color", { duration: theme.transitions.duration.shortest }),
@@ -33,7 +34,7 @@ export default function CountCard({ icon, count, label, onClick }: Props) {
}}
>
<Typography component="div" sx={{ color: "primary.main", display: "flex" }}>{icon}</Typography>
<Typography variant="h3" fontWeight={700}>{count}</Typography>
<Typography variant="h3" fontWeight={700} sx={{ color: (theme) => theme.thingport.headingText }}>{count}</Typography>
<Typography variant="body2" color="text.secondary">{label}</Typography>
</Paper>
);
frontend/src/pages/DashboardPage/ModelListCard.tsx
+5 -2
View File
@@ -55,10 +55,13 @@ export default function ModelListCard({ icon, title, models, valueOf, valueLabel
const [dialogOpen, setDialogOpen] = React.useState(false);
return (
<Paper variant="outlined" sx={{ p: 2.5, display: "flex", flexDirection: "column" }}>
<Paper
variant="outlined"
sx={{ p: 2.5, display: "flex", flexDirection: "column", borderColor: (theme) => (theme.palette.mode === "dark" ? "transparent" : "divider") }}
>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1, color: "primary.main" }}>
{icon}
<Typography variant="h6" fontWeight={700} color="text.primary">{title}</Typography>
<Typography variant="h6" fontWeight={700} sx={{ color: (theme) => theme.thingport.headingText }}>{title}</Typography>
</Box>
{models.length === 0 ? (
frontend/src/pages/DashboardPage/ProviderListCard.tsx
+5 -2
View File
@@ -34,10 +34,13 @@ export default function ProviderListCard({ providers }: Props) {
const { t } = useTranslation("app");
return (
<Paper variant="outlined" sx={{ p: 2.5, display: "flex", flexDirection: "column" }}>
<Paper
variant="outlined"
sx={{ p: 2.5, display: "flex", flexDirection: "column", borderColor: (theme) => (theme.palette.mode === "dark" ? "transparent" : "divider") }}
>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1, color: "primary.main" }}>
<PublicIcon />
<Typography variant="h6" fontWeight={700} color="text.primary">{t("dashboard.topProviders.title")}</Typography>
<Typography variant="h6" fontWeight={700} sx={{ color: (theme) => theme.thingport.headingText }}>{t("dashboard.topProviders.title")}</Typography>
</Box>
{providers.length === 0 ? (
frontend/src/pages/DashboardPage/RecentlyAddedCard.tsx
+5 -2
View File
@@ -38,10 +38,13 @@ export default function RecentlyAddedCard({ models }: Props) {
const navigate = useNavigate();
return (
<Paper variant="outlined" sx={{ p: 2.5, display: "flex", flexDirection: "column" }}>
<Paper
variant="outlined"
sx={{ p: 2.5, display: "flex", flexDirection: "column", borderColor: (theme) => (theme.palette.mode === "dark" ? "transparent" : "divider") }}
>
<Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1, color: "primary.main" }}>
<NewReleasesIcon />
<Typography variant="h6" fontWeight={700} color="text.primary">{t("dashboard.recentlyAdded.title")}</Typography>
<Typography variant="h6" fontWeight={700} sx={{ color: (theme) => theme.thingport.headingText }}>{t("dashboard.recentlyAdded.title")}</Typography>
</Box>
{models.length === 0 ? (
frontend/src/pages/ModelDetailPage/index.tsx
+23 -3
View File
@@ -231,13 +231,33 @@ export default function ModelDetailPage({ theme, onSelectCategory, onUnauthorize
</Box>
)}
<Paper variant="outlined" sx={{ mt: 3, p: 2, borderRadius: "12px" }}>
<Typography variant="subtitle1" fontWeight={700} sx={{ mb: 1 }}>{t("models:detail.description")}</Typography>
<Paper
variant="outlined"
sx={{
mt: 3,
p: 2,
borderRadius: "12px",
borderColor: (muiTheme) => (muiTheme.palette.mode === "dark" ? "transparent" : "divider"),
}}
>
<Typography
variant="subtitle1"
fontWeight={700}
sx={{ mb: 1, color: (muiTheme) => muiTheme.thingport.headingText }}
>
{t("models:detail.description")}
</Typography>
<Typography variant="body2" sx={{ whiteSpace: "pre-wrap", color: print.notes ? "text.primary" : "text.disabled" }}>
{print.notes || t("models:detail.noDescription")}
</Typography>
<Typography variant="subtitle1" fontWeight={700} sx={{ mt: 2.5, mb: 1 }}>{t("models:detail.tags")}</Typography>
<Typography
variant="subtitle1"
fontWeight={700}
sx={{ mt: 2.5, mb: 1, color: (muiTheme) => muiTheme.thingport.headingText }}
>
{t("models:detail.tags")}
</Typography>
{print.tags.length ? (
<Stack direction="row" flexWrap="wrap" useFlexGap spacing={1}>
{print.tags.map(tag => (
frontend/src/pages/ModelsPage/CategoriesPanel.tsx
+11 -1
View File
@@ -40,7 +40,17 @@ function rowSx(active: boolean) {
borderRadius: 1.5,
mb: 0.25,
background: (theme: Theme) => (active ? theme.thingport.selectedNavBackground : "transparent"),
"&:hover": { bgcolor: "action.hover" },
...(active
? { "&:hover": { background: (theme: Theme) => theme.thingport.selectedNavBackground } }
: {
// Dark mode only: hovering an inactive row shouldn't tint its background -- just
// brighten its label (and chevron, for a root row) to white. Light mode keeps the
// existing action.hover tint.
"&:hover": (theme: Theme) =>
theme.palette.mode === "dark"
? { backgroundColor: "transparent", "& .MuiListItemText-primary, & .MuiSvgIcon-root": { color: "#fff" } }
: { bgcolor: "action.hover" },
}),
};
}
function rowTextSx(active: boolean, extra?: object) {
frontend/src/pages/ModelsPage/CategoryBanner.tsx
+11 -3
View File
@@ -26,12 +26,20 @@ export default function CategoryBanner({ category }: Props) {
borderRadius: 2,
px: 2.5,
py: 2,
bgcolor: (theme) => alpha(theme.palette.primary.main, 0.08),
background: (theme) =>
theme.palette.mode === "dark"
? "linear-gradient(45deg, #5061ff 0%, #31ceff 100%)"
: alpha(theme.palette.primary.main, 0.08),
}}
>
<Typography variant="h6">{display.metaTitle}</Typography>
<Typography variant="h6" sx={{ color: (theme) => (theme.palette.mode === "dark" ? "#fff" : undefined) }}>
{display.metaTitle}
</Typography>
{display.metaDescription && (
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
<Typography
variant="body2"
sx={{ mt: 0.5, color: (theme) => (theme.palette.mode === "dark" ? "#fff" : "text.secondary") }}
>
{display.metaDescription}
</Typography>
)}
frontend/src/pages/ModelsPage/ModelCard.tsx
+7 -1
View File
@@ -177,7 +177,13 @@ export default function ModelCard({
/>
</Stack>
<Box sx={{ p: 1.5 }}>
<Typography variant="body2" fontWeight={600} noWrap title={item.title || item.name}>
<Typography
variant="body2"
fontWeight={600}
noWrap
title={item.title || item.name}
sx={{ color: (muiTheme) => muiTheme.thingport.headingText }}
>
{item.title || item.name}
</Typography>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{ mt: 0.75 }}>
frontend/src/theme.ts
+15 -1
View File
@@ -37,6 +37,10 @@ declare module "@mui/material/styles" {
/** Selected nav row label/icon color -- the brand accent in dark mode, unchanged
* (inherited) text color in light mode. */
selectedNavText: string;
/** Heading/emphasis text (dashboard stat numbers and pane headers, a model card's title,
* the model detail page's "Description"/"Tags" headlines, etc.) -- plain white in dark
* mode for contrast against those panes' backgrounds, unchanged (text.primary) in light. */
headingText: string;
};
}
interface ThemeOptions {
@@ -48,6 +52,7 @@ declare module "@mui/material/styles" {
navInactiveText: string;
selectedNavBackground: string;
selectedNavText: string;
headingText: string;
};
}
}
@@ -73,6 +78,7 @@ type ThemeDef = {
navInactiveText: string;
selectedNavBackground: string;
selectedNavText: string;
headingText: string;
};
// Values ported 1:1 from the original CSS custom properties so the visual identity of each
@@ -100,6 +106,7 @@ const THEME_DEFS: Record<ResolvedTheme, ThemeDef> = {
selectedNavBackground: alpha("#5be584", 0.2),
// Matches the pre-existing collapsed-rail icon treatment (selected -> primary.main).
selectedNavText: "#00b800",
headingText: "#1f1f1f", // == text above; unused in light mode's actual styling either way
},
dark: {
mode: "dark",
@@ -122,6 +129,7 @@ const THEME_DEFS: Record<ResolvedTheme, ThemeDef> = {
navInactiveText: "#969ba0",
selectedNavBackground: "linear-gradient(to right, rgb(24, 31, 57) 0%, rgba(49, 206, 255, 0) 100%)",
selectedNavText: "#00b800",
headingText: "#ffffff",
},
};
@@ -160,7 +168,12 @@ export function buildTheme(id: ResolvedTheme): Theme {
// of an !important global rule reaches all of them; MuiCssBaseline's styleOverrides is
// exactly the escape hatch for page-level CSS the theme needs to own like this.
...(d.mode === "dark"
? { MuiCssBaseline: { styleOverrides: "*, *::before, *::after { border-radius: 0 !important; }" } }
? {
MuiCssBaseline: { styleOverrides: "*, *::before, *::after { border-radius: 0 !important; }" },
// A success toast (see ToastProvider) should read as "this worked" in the brand
// green, not MUI's own default success palette -- e.g. favoriting a model.
MuiAlert: { styleOverrides: { filledSuccess: { backgroundColor: d.accent, color: d.accentContrast } } },
}
: {}),
},
thingport: {
@@ -171,6 +184,7 @@ export function buildTheme(id: ResolvedTheme): Theme {
navInactiveText: d.navInactiveText,
selectedNavBackground: d.selectedNavBackground,
selectedNavText: d.selectedNavText,
headingText: d.headingText,
},
};
return createTheme(options);