kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-08 07:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Medium

Browse Source
This commit is contained in:
Manav Rathi 2025-01-09 09:13:50 +05:30
parent bd7e300959
commit e47accb866
No known key found for this signature in database
20 changed files with 66 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/apps/photos/src/components/Collections/AllCollections/index.tsx
View File

@ -115,7 +115,11 @@ const AllCollectionsHeader = ({
</Typography>
<Typography
variant="small"
sx={{ fontWeight: "normal", color: "text.muted" }}
sx={{
color: "text.muted",
// Undo the effects of DialogTitle.
fontWeight: "normal",
}}
>
{t("albums_count", { count: collectionCount })}
</Typography>

3
web/apps/photos/src/components/Collections/CollectionShare.tsx
View File

@ -981,7 +981,6 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
))}
<EnteMenuItem
startIcon={<AddIcon />}
fontWeight={"bold"}
onClick={openAddViewer}
label={
viewers?.length
@ -1894,7 +1893,7 @@ function PublicLinkSetPassword({
<Stack sx={{ gap: 3, p: 1.5 }}>
<Typography
variant="h3"
sx={{ fontWeight: "bold", px: 1, py: 0.5 }}
sx={{ fontWeight: "medium", px: 1, py: 0.5 }}
>
{t("password_lock")}
</Typography>

2
web/apps/photos/src/components/Export.tsx
View File

@ -178,7 +178,7 @@ export const Export: React.FC<ExportProps> = ({
return (
<Dialog {...{ open, onClose }} maxWidth="xs" fullWidth>
<SpaceBetweenFlex sx={{ p: "12px 4px 0px 0px" }}>
<DialogTitle variant="h3" fontWeight={"bold"}>
<DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
{t("export_data")}
</DialogTitle>
<DialogCloseIconButton {...{ onClose }} />

4
web/apps/photos/src/components/Notification.tsx
View File

@ -92,12 +92,12 @@ export default function Notification({
</EllipsizedTypography>
)}
{attributes.message && (
<EllipsizedTypography fontWeight="bold">
<EllipsizedTypography sx={{ fontWeight: "medium" }}>
{attributes.message}
</EllipsizedTypography>
)}
{attributes.title && (
<EllipsizedTypography fontWeight="bold">
<EllipsizedTypography sx={{ fontWeight: "medium" }}>
{attributes.title}
</EllipsizedTypography>
)}

6
web/apps/photos/src/components/PhotoViewer/FileInfo.tsx
View File

@ -249,7 +249,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
href={openStreetMapLink(location)}
target="_blank"
rel="noopener"
sx={{ fontWeight: "bold" }}
sx={{ fontWeight: "medium" }}
>
{t("view_on_map")}
</Link>
@ -261,7 +261,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
sx={{
textDecoration: "none",
color: "text.muted",
fontWeight: "bold",
fontWeight: "medium",
}}
>
{t("disable_map")}
@ -301,7 +301,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
sx={{
textDecoration: "none",
color: "text.muted",
fontWeight: "bold",
fontWeight: "medium",
}}
>
{t("view_exif")}

2
web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx
View File

@ -543,7 +543,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
alignItems: "center",
}}
>
<Typography variant="h2" sx={{ fontWeight: "bold" }}>
<Typography variant="h2" sx={{ fontWeight: "medium" }}>
{t("photo_editor")}
</Typography>
<IconButton

10
web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
View File

@ -151,9 +151,9 @@ const StorageSection: React.FC<StorageSectionProps> = ({ usage, storage }) => {
<DefaultBox>
<Typography
sx={{
fontWeight: "bold",
fontSize: "24px",
lineHeight: "30px",
fontWeight: "medium",
}}
>
{`${formattedStorageByteSize(usage, { round: true })} ${t(
@ -164,9 +164,9 @@ const StorageSection: React.FC<StorageSectionProps> = ({ usage, storage }) => {
<MobileSmallBox>
<Typography
sx={{
fontWeight: "bold",
fontSize: "24px",
lineHeight: "30px",
fontWeight: "medium",
}}
>
{`${bytesInGB(usage)} / ${bytesInGB(storage)} ${t("storage_unit.gb")} ${t("used")}`}
@ -205,7 +205,7 @@ const IndividualUsageSection: React.FC<IndividualUsageSectionProps> = ({
<Typography variant="mini">{`${formattedStorageByteSize(
storage - usage,
)} ${t("free")}`}</Typography>
<Typography variant="mini" sx={{ fontWeight: "bold" }}>
<Typography variant="mini" sx={{ fontWeight: "medium" }}>
{t("photos_count", { count: fileCount ?? 0 })}
</Typography>
</SpaceBetweenFlex>
@ -262,7 +262,7 @@ const FamilyUsageSection: React.FC<FamilyUsageSectionProps> = ({
<Legend label={t("you")} color="text.base" />
<Legend label={t("family")} color="text.muted" />
</Stack>
<Typography variant="mini" sx={{ fontWeight: "bold" }}>
<Typography variant="mini" sx={{ fontWeight: "medium" }}>
{t("photos_count", { count: fileCount ?? 0 })}
</Typography>
</SpaceBetweenFlex>
@ -332,7 +332,7 @@ interface LegendProps {
const Legend: React.FC<LegendProps> = ({ label, color }) => (
<Stack direction="row" sx={{ alignItems: "center" }}>
<LegendDot sx={{ color }} />
<Typography variant="mini" sx={{ fontWeight: "bold" }}>
<Typography variant="mini" sx={{ fontWeight: "medium" }}>
{label}
</Typography>
</Stack>

7
web/apps/photos/src/components/Sidebar/index.tsx
View File

@ -349,12 +349,7 @@ function MemberSubscriptionManage({ open, userDetails, onClose }) {
<Dialog {...{ open, onClose, fullScreen }} maxWidth="xs" fullWidth>
<SpaceBetweenFlex sx={{ p: "20px 8px 12px 16px" }}>
<Stack>
<Typography
variant="h3"
sx={{
fontWeight: "bold",
}}
>
<Typography variant="h3" sx={{ fontWeight: "medium" }}>
{t("subscription")}
</Typography>
<Typography sx={{ color: "text.muted" }}>

4
web/apps/photos/src/components/WatchFolder.tsx
View File

@ -120,7 +120,7 @@ export const WatchFolder: React.FC<ModalVisibilityProps> = ({
PaperProps={{ sx: { height: "448px", maxWidth: "414px" } }}
>
<SpaceBetweenFlex sx={{ p: "16px 8px 8px 8px" }}>
<DialogTitle variant="h3" fontWeight={"bold"}>
<DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
{t("watched_folders")}
</DialogTitle>
<DialogCloseIconButton {...{ onClose }} />
@ -183,7 +183,7 @@ const NoWatches: React.FC = () => {
return (
<NoWatchesContainer>
<Stack spacing={1}>
<Typography variant="large" sx={{ fontWeight: "bold" }}>
<Typography variant="h6">
{t("no_folders_added")}
</Typography>
<Typography

2
web/packages/accounts/components/RecoveryKey.tsx
View File

@ -75,7 +75,7 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
fullWidth
>
<SpaceBetweenFlex sx={{ p: "8px 4px 8px 0" }}>
<DialogTitle variant="h3" fontWeight={"bold"}>
<DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
{t("recovery_key")}
</DialogTitle>
<DialogCloseIconButton {...{ onClose }} />

2
web/packages/base/components/OverflowMenu.tsx
View File

@ -148,7 +148,7 @@ export const OverflowMenuOption: React.FC<
}}
>
{startIcon}
<Typography sx={{ flex: 1, fontWeight: "bold" }}>
<Typography sx={{ flex: 1, fontWeight: "medium" }}>
{children}
</Typography>
{endIcon}

2
web/packages/base/components/Titlebar.tsx
View File

@ -46,7 +46,7 @@ export const Titlebar: React.FC<TitlebarProps> = ({
</Stack>
</FlexWrapper>
<Box sx={{ py: 0.5, px: 2 }}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
<Typography variant="h3" sx={{ fontWeight: "medium" }}>
{title}
</Typography>
<Typography

2
web/packages/base/components/mui/SidebarDrawer.tsx
View File

@ -126,7 +126,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
</Stack>
</SpaceBetweenFlex>
<Box sx={{ px: "16px", py: "4px" }}>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
<Typography variant="h3" sx={{ fontWeight: "medium" }}>
{title}
</Typography>
<Typography

15
web/packages/base/components/utils/mui-theme.d.ts vendored
View File

@ -44,14 +44,7 @@ declare module "@mui/material/styles" {
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
large: true;
body: true;
small: true;
mini: true;
tiny: true;
h4: true;
h5: true;
h6: true;
// Turn off MUI provided variants we don't use.
subtitle1: false;
subtitle2: false;
body1: false;
@ -59,6 +52,12 @@ declare module "@mui/material/Typography" {
caption: false;
button: false;
overline: false;
// Add our custom variants.
large: true;
body: true;
small: true;
mini: true;
tiny: true;
}
}

70
web/packages/base/components/utils/theme.ts
View File

@ -296,87 +296,73 @@ const typography: TypographyOptions = {
//
// We only use three font weights:
//
// - 500 regular
// - 600 bold
// - 700 strong
// - 500 (sx "regular", CSS "normal")
// - 600 (sx "medium")
// - 700 (sx "bold", CSS "bold")
//
// Regular and bold are specified as typography overrides, while 700 for
// strong is specified in the CSS baseline reset below.
//
// While the sx prop allows us to use keywords "regular" and "bold",
// which we do elsewhere in the code, within this file those keywords
// cannot be used in all contexts because they instead map to the CSS
// keywords (which MUI can't and doesn't remap). To avoid any confusion,
// While the sx prop allows us to use keywords "regular", "medium" and
// "bold", which we do elsewhere in the code, within this file those
// keywords cannot be used in all contexts because they instead map to the
// CSS keywords (which MUI can't and doesn't remap). To avoid any confusion,
// within this file we only use the numeric values.
//
// ---
//
// Details:
//
// (This was true as of MUI v6)
//
// MUI uses the following font weights by default:
// MUI (as of v6) uses the following font weights by default:
// - fontWeightLight 300
// - fontWeightRegular 400
// - fontWeightMedium 500
// - fontWeightBold 700
//
// fontWeightLight is only used as the default font weight for the h1
// and h2 variants, but we override their font weight in our theme. Thus
// we don't need to bother with the light variant (though for
// consistency of specifying every value, we alias it the same weight as
// regular, 500).
// The browser default (CSS keyword "normal"), is also 400.
//
// For Inter (the font we're using), 400 is too light, and to improve
// However for Inter, the font that we use, 400 is too light, and to improve
// legibility we change fontWeightRegular to 500.
//
// We also change fontWeightBold to 600 (and load inter-600).
// Correspondingly, we shift fontWeightMedium to 600. fontWeightBold then
// ends up mapping back to 700, which also nicely coincides with the CSS
// keyword "bold".
//
// That leaves fontWeightMedium. We don't use it anywhere in our own
// code. MUI uses it for:
// - h6, but we already specify our custom font weight in our theme.
// - Tooltip
// - A handful other places in components we don't use.
//
// Since we don't anyways have a need for a medium font in our current
// design, we just alias it to the same font weight as our bold, i.e. we
// set fontWeightMedium to 600 (same as fontWeightBold).
// MUI uses fontWeightLight only as the default font weight for the h1 and
// h2 variants, but we override their font weight in our theme. Thus we
// don't need to bother with the light variant (though for consistency of
// specifying every value, we alias it the same weight as regular, 500).
fontFamily: "Inter Variable, sans-serif",
fontWeightLight: 500,
fontWeightRegular: 500,
fontWeightRegular: 500 /* CSS baseline reset sets this as the default */,
fontWeightMedium: 600,
fontWeightBold: 600,
fontWeightBold: 700,
h1: {
fontSize: "48px",
lineHeight: "58px",
fontWeight: 600,
fontWeight: 600 /* medium */,
},
h2: {
fontSize: "32px",
lineHeight: "39px",
fontWeight: 500,
fontWeight: 500 /* Reset to regular to override MUI's default theme */,
},
h3: {
fontSize: "24px",
lineHeight: "29px",
fontWeight: 500,
fontWeight: 500 /* Reset to regular to override MUI's default theme */,
},
h4: {
fontSize: "22px",
lineHeight: "27px",
fontWeight: 500,
fontWeight: 500 /* Reset to regular to override MUI's default theme */,
},
h5: {
fontSize: "20px",
lineHeight: "25px",
fontWeight: 600,
fontWeight: 600 /* medium */,
},
// h6 is the default variant used by MUI's DialogTitle.
h6: {
// The font size and line height below is the same as large.
fontSize: "18px",
lineHeight: "22px",
fontWeight: 600,
fontWeight: 600 /* medium */,
},
large: {
fontSize: "18px",
@ -415,8 +401,6 @@ const getComponents = (
// reasonable value that works for our font.
letterSpacing: "-0.011em",
},
// See: [Note: Font weights].
strong: { fontWeight: 700 },
},
},
@ -523,12 +507,12 @@ const getComponents = (
styleOverrides: {
// We don't use the size prop for the MUI button, or rather it
// cannot be used, since we have fixed the paddings and font sizes
// unconditionally here (which are all that the size prop changes).
// unconditionally here (which is all that the size prop changes).
root: {
padding: "12px 16px",
borderRadius: "4px",
textTransform: "none",
// Body, but bold.
// Body, but medium.
fontSize: typography.body?.fontSize,
lineHeight: typography.body?.lineHeight,
fontWeight: 600,

2
web/packages/new/photos/components/CollectionSelector.tsx
View File

@ -168,7 +168,7 @@ export const CollectionSelector: React.FC<CollectionSelectorProps> = ({
PaperProps={{ sx: { maxWidth: "490px" } }}
>
<SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
<DialogTitle variant="h3" fontWeight={"bold"}>
<DialogTitle variant="h3" fontWeight={"medium"}>
{titleForAction(action)}
</DialogTitle>
<DialogCloseIconButton onClose={handleClose} />

6
web/packages/new/photos/components/PlanSelector.tsx
View File

@ -309,7 +309,7 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
children,
}) => (
<>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
<Typography variant="h3" sx={{ fontWeight: "medium" }}>
{t("choose_plan")}
</Typography>
<Box>
@ -365,7 +365,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
<Box sx={{ pl: 1.5, py: 0.5 }}>
<SpaceBetweenFlex>
<Box>
<Typography variant="h3" sx={{ fontWeight: "bold" }}>
<Typography variant="h3" sx={{ fontWeight: "medium" }}>
{t("subscription")}
</Typography>
<Typography variant="small" sx={{ color: "text.muted" }}>
@ -380,7 +380,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
</Box>
<Box sx={{ px: 1.5 }}>
<Typography sx={{ color: "text.muted", fontWeight: "bold" }}>
<Typography sx={{ color: "text.muted", fontWeight: "medium" }}>
<Trans
i18nKey="current_usage"
values={{

2
web/packages/new/photos/components/SearchBar.tsx
View File

@ -468,7 +468,7 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => (
>
<Box>
<Typography
sx={{ fontWeight: "bold", wordBreak: "break-word" }}
sx={{ fontWeight: "medium", wordBreak: "break-word" }}
>
{option.suggestion.label}
</Typography>

2
web/packages/new/photos/components/gallery/PeopleHeader.tsx
View File

@ -356,7 +356,7 @@ const AddPersonDialog: React.FC<AddPersonDialogProps> = ({
PaperProps={{ sx: { maxWidth: "490px" } }}
>
<SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
<DialogTitle variant="h3" fontWeight={"bold"}>
<DialogTitle variant="h3" fontWeight={"medium"}>
{t("add_name")}
</DialogTitle>
<DialogCloseIconButton {...{ onClose }} />

2
web/packages/shared/components/Menu/EnteMenuItem.tsx
View File

@ -41,7 +41,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
subIcon,
checked,
variant = "primary",
fontWeight = "bold",
fontWeight = "medium",
labelComponent,
disabled = false,
}) => {