Use sliced MaterialSymbolsRounded font (#16994)

GitOrigin-RevId: 51158acccc9967794b2192791961561d43274979
This commit is contained in:
Alf Eaton
2024-02-15 09:43:16 +00:00
committed by Copybot
parent f2fc90ccf9
commit c6ce781fdb
10 changed files with 19 additions and 36 deletions

View File

@@ -1,10 +1,13 @@
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 100 700;
font-weight: 400;
font-display: block;
src: url('material-symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2')
format('woff2');
/*
Generated from MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2 with specific values:
'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20
*/
src: url('material-symbols/MaterialSymbolsRoundedSlice.woff2') format('woff2');
}
.material-symbols {
@@ -12,6 +15,7 @@
font-weight: normal;
font-style: normal;
font-size: 20px;
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
line-height: 1;
letter-spacing: normal;
text-transform: none;
@@ -23,10 +27,6 @@
-webkit-font-smoothing: antialiased;
}
.material-symbols.material-symbols-rounded {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.material-symbols-xl {
font-size: 56px;
}

View File

@@ -9,11 +9,7 @@ export default function ManagedUserStatus({ user }: ManagedUserStatusProps) {
const { t } = useTranslation()
const managedUserInvite = (
<span className="security-state-invite-pending">
<MaterialIcon
type="schedule"
category="outlined"
accessibilityLabel={t('pending_invite')}
/>
<MaterialIcon type="schedule" accessibilityLabel={t('pending_invite')} />
&nbsp;
{t('managed')}
</span>

View File

@@ -23,11 +23,7 @@ function PendingInvite() {
const { t } = useTranslation()
return (
<span className="security-state-invite-pending">
<MaterialIcon
type="schedule"
category="outlined"
accessibilityLabel={t('pending_invite')}
/>
<MaterialIcon type="schedule" accessibilityLabel={t('pending_invite')} />
&nbsp; {t('sso')}
</span>
)

View File

@@ -164,7 +164,7 @@ function AllHistoryList() {
// eslint-disable-next-line react/jsx-key
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon-inverted"
className="history-dropdown-icon-inverted"
/>,
<a href="https://www.overleaf.com/learn/latex/Using_the_History_feature" />, // eslint-disable-line jsx-a11y/anchor-has-content, react/jsx-key
]}

View File

@@ -42,7 +42,7 @@ function CompareVersionDropdownContentAllHistory({
icon={
<MaterialIcon
type="align_start"
className="material-symbols-rounded history-dropdown-icon p-1"
className="history-dropdown-icon p-1"
/>
}
/>
@@ -58,7 +58,7 @@ function CompareVersionDropdownContentAllHistory({
icon={
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon p-1"
className="history-dropdown-icon p-1"
/>
}
/>
@@ -102,7 +102,7 @@ function CompareVersionDropdownContentLabelsList({
icon={
<MaterialIcon
type="align_start"
className="material-symbols-rounded history-dropdown-icon p-1"
className="history-dropdown-icon p-1"
/>
}
/>
@@ -118,7 +118,7 @@ function CompareVersionDropdownContentLabelsList({
icon={
<MaterialIcon
type="align_end"
className="material-symbols-rounded history-dropdown-icon p-1"
className="history-dropdown-icon p-1"
/>
}
/>

View File

@@ -1,27 +1,18 @@
import classNames from 'classnames'
import React from 'react'
type IconOwnProps = {
type IconProps = React.ComponentProps<'i'> & {
type: string
category?: 'rounded' | 'outlined'
accessibilityLabel?: string
}
type IconProps = IconOwnProps &
Omit<React.ComponentProps<'i'>, keyof IconOwnProps>
function MaterialIcon({
type,
category = 'rounded',
className,
accessibilityLabel,
...rest
}: IconProps) {
const iconClassName = classNames(
'material-symbols',
`material-symbols-${category}`,
className
)
const iconClassName = classNames('material-symbols', className)
return (
<>

View File

@@ -380,7 +380,7 @@ history-root {
background-color: @neutral-10;
}
span.material-symbols-rounded {
span.material-symbols {
vertical-align: middle;
font-size: inherit;
}

View File

@@ -597,7 +597,7 @@
}
}
i.material-symbols-rounded {
i.material-symbols {
vertical-align: middle;
text-decoration: none;
}
@@ -869,7 +869,7 @@
font-family: 'DM Mono', monospace;
font-weight: 500;
i.material-symbols-rounded {
i.material-symbols {
vertical-align: middle;
padding-bottom: 3px;
font-size: 24px;