ZF/jitsi-meet
1
0
Fork 0
mirror of https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git synced 2025-12-30 03:12:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

ref(Theme): Changes typography values to rem (#16021)

Browse Source 
Replaces hard-coded pixel values with relative rem units across UI components to improve typography responsiveness and maintainability.

Co-authored-by: Hristo Terezov <hristo@jitsi.org>
This commit is contained in:
raduanastase8x8
2025-08-07 03:07:27 +03:00
committed by GitHub
parent b5ad984dab
commit d2e52d2c2a
110 changed files with 502 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/_variables.scss
View File

@@ -90,7 +90,7 @@ $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
$welcomePageHeaderTextTitleMarginBottom: 0;
$welcomePageHeaderTextTitleFontSize: 2.625rem;
$welcomePageHeaderTextTitleFontWeight: normal;
$welcomePageHeaderTextTitleLineHeight: 50px;
$welcomePageHeaderTextTitleLineHeight: 3.125rem;
$welcomePageHeaderTextTitleOpacity: 1;
$welcomePageEnterRoomDisplay: flex;

7
react/features/base/avatar/components/web/StatelessAvatar.tsx
View File

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { pixelsToRem } from '../../../ui/functions.any';
import { isIcon } from '../../functions';
import { IAvatarProps } from '../../types';
import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
@@ -50,9 +50,8 @@ const useStyles = makeStyles()(theme => {
avatar: {
backgroundColor: '#AAA',
borderRadius: '50%',
fontWeight: '600',
color: theme.palette?.text01 || '#fff',
...withPixelLineHeight(theme.typography?.heading1 ?? {}),
...(theme.typography?.heading1 ?? {}),
fontSize: 'inherit',
objectFit: 'cover',
textAlign: 'center',
@@ -137,7 +136,7 @@ const StatelessAvatar = ({
const _getAvatarStyle = (backgroundColor?: string) => {
return {
background: backgroundColor || undefined,
fontSize: size ? size * 0.4 : '180%',
fontSize: size ? pixelsToRem(size * 0.4) : '180%',
height: size || '100%',
width: size || '100%'
};

3
react/features/base/buttons/CopyButton.web.tsx
View File

@@ -4,13 +4,12 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../icons/components/Icon';
import { IconCheck, IconCopy } from '../icons/svg';
import { withPixelLineHeight } from '../styles/functions.web';
import { copyText } from '../util/copyText.web';
const useStyles = makeStyles()(theme => {
return {
copyButton: {
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
borderRadius: theme.shape.borderRadius,
display: 'flex',
justifyContent: 'flex-start',

3
react/features/base/label/components/web/Label.tsx
View File

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { COLORS } from '../../constants';
interface IProps {
@@ -55,7 +54,7 @@ interface IProps {
const useStyles = makeStyles()(theme => {
return {
label: {
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
alignItems: 'center',
background: theme.palette.ui04,
borderRadius: '4px',

7
react/features/base/premeeting/components/web/ActionButton.tsx
View File

@@ -3,7 +3,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { IconArrowDown } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface IProps {
@@ -82,7 +81,7 @@ interface IProps {
const useStyles = makeStyles()(theme => {
return {
actionButton: {
...withPixelLineHeight(theme.typography.bodyLongBold),
...theme.typography.bodyLongBold,
borderRadius: theme.shape.borderRadius,
boxSizing: 'border-box',
color: theme.palette.text01,
@@ -115,7 +114,7 @@ const useStyles = makeStyles()(theme => {
'&.text': {
width: 'auto',
fontSize: '13px',
fontSize: '0.875rem',
margin: '0',
padding: '0'
},
@@ -135,7 +134,7 @@ const useStyles = makeStyles()(theme => {
[theme.breakpoints.down(400)]: {
fontSize: 16,
fontSize: '1rem',
marginBottom: 8,
padding: '11px 16px'
}

3
react/features/base/premeeting/components/web/ConnectionStatus.tsx
View File

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { IconArrowDown, IconCloseCircle, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
import Spinner from '../../../ui/components/web/Spinner';
import { runPreCallTest } from '../../actions.web';
@@ -16,7 +15,7 @@ const useStyles = makeStyles()(theme => {
return {
connectionStatus: {
color: '#fff',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
position: 'absolute',
width: '100%',

5
react/features/base/premeeting/components/web/PreMeetingScreen.tsx
View File

@@ -10,7 +10,6 @@ import Toolbox from '../../../../toolbox/components/web/Toolbox';
import { isButtonEnabled } from '../../../../toolbox/functions.web';
import { getConferenceName } from '../../../conference/functions';
import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
import { withPixelLineHeight } from '../../../styles/functions.web';
import Tooltip from '../../../tooltip/components/Tooltip';
import { isPreCallTestEnabled } from '../../functions';
@@ -152,7 +151,7 @@ const useStyles = makeStyles()(theme => {
width: '100%'
},
title: {
...withPixelLineHeight(theme.typography.heading4),
...theme.typography.heading4,
color: `${theme.palette.text01}!important`,
marginBottom: theme.spacing(3),
textAlign: 'center',
@@ -168,7 +167,7 @@ const useStyles = makeStyles()(theme => {
},
roomName: {
...withPixelLineHeight(theme.typography.heading5),
...theme.typography.heading5,
color: theme.palette.text01,
display: 'inline-block',
overflow: 'hidden',

4
react/features/base/premeeting/components/web/RecordingWarning.tsx
View File

@@ -2,8 +2,6 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../styles/functions.web';
const useStyles = makeStyles()(theme => {
return {
warning: {
@@ -11,7 +9,7 @@ const useStyles = makeStyles()(theme => {
color: theme.palette.text03,
display: 'flex',
justifyContent: 'center',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
marginBottom: theme.spacing(3),
marginTop: theme.spacing(2),
paddingLeft: theme.spacing(3),

3
react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx
View File

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../app/types';
import { withPixelLineHeight } from '../../../styles/functions.web';
import Checkbox from '../../../ui/components/web/Checkbox';
import getUnsafeRoomText from '../../../util/getUnsafeRoomText.web';
import { setUnsafeRoomConsent } from '../../actions.web';
@@ -14,7 +13,7 @@ const useStyles = makeStyles()(theme => {
warning: {
backgroundColor: theme.palette.warning01,
color: theme.palette.text04,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
padding: theme.spacing(3),
borderRadius: theme.shape.borderRadius,
marginBottom: theme.spacing(3)

7
react/features/base/react/components/web/BaseIndicator.tsx
View File

@@ -6,6 +6,7 @@ import { translate } from '../../../i18n/functions';
import Icon from '../../../icons/components/Icon';
import Tooltip from '../../../tooltip/components/Tooltip';
import { TOOLTIP_POSITION } from '../../../ui/constants.any';
import { pixelsToRem } from '../../../ui/functions.any';
/**
* The type of the React {@code Component} props of {@link BaseIndicator}.
@@ -40,7 +41,7 @@ interface IProps extends WithTranslation {
/**
* The font size for the icon.
*/
iconSize: string | number;
iconSize: number;
/**
* The ID attribute to set on the root element of the component.
@@ -88,10 +89,10 @@ const BaseIndicator = ({
tooltipPosition = 'top'
}: IProps) => {
const { classes: styles } = useStyles();
const style: { fontSize?: string | number; } = {};
const style: { fontSize?: string; } = {};
if (iconSize) {
style.fontSize = iconSize;
style.fontSize = pixelsToRem(iconSize);
}
return (

3
react/features/base/react/components/web/InlineDialogFailure.tsx
View File

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../styles/functions.web';
import Button from '../../../ui/components/web/Button';
import { getSupportUrl } from '../../functions';
@@ -15,7 +14,7 @@ const useStyles = makeStyles()(theme => {
borderRadius: `${Number(theme.shape.borderRadius)}px`,
boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)',
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
padding: `${theme.spacing(3)} 10`,
'& .retry-button': {
margin: '16px auto 0 auto'

14
react/features/base/styles/functions.web.ts
View File

@@ -22,17 +22,3 @@ export function getFixedPlatformStyle(style?: StyleType | StyleType[]) {
return style;
}
/**
* Sets the line height of a CSS Object group in pixels.
* By default lineHeight is unitless in CSS, but not in RN.
*
* @param {Object} base - The base object containing the `lineHeight` property.
* @returns {Object}
*/
export function withPixelLineHeight(base: any) {
return {
...base,
lineHeight: `${base.lineHeight}px`
};
}

3
react/features/base/tooltip/components/Tooltip.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import { isMobileBrowser } from '../../environment/utils';
import Popover from '../../popover/components/Popover.web';
import { withPixelLineHeight } from '../../styles/functions.web';
import { TOOLTIP_POSITION } from '../../ui/constants.any';
import { hideTooltip, showTooltip } from '../actions';
@@ -26,7 +25,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.uiBackground,
borderRadius: '3px',
padding: theme.spacing(2),
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text01,
position: 'relative',

56
react/features/base/ui/Tokens.ts
View File

@@ -118,8 +118,8 @@ export const colorMap = {
export const font = {
weightRegular: '400',
weightSemiBold: '600'
weightRegular: 400,
weightSemiBold: 600
};
export const shape = {
@@ -136,64 +136,64 @@ export const typography = {
labelBold: 'labelBold01',
bodyShortRegularSmall: {
fontSize: 10,
lineHeight: 16,
fontSize: '0.625rem',
lineHeight: '1rem',
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortRegular: {
fontSize: 14,
lineHeight: 20,
fontSize: '0.875rem',
lineHeight: '1.25rem',
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBold: {
fontSize: 14,
lineHeight: 20,
fontSize: '0.875rem',
lineHeight: '1.25rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyShortRegularLarge: {
fontSize: 16,
lineHeight: 22,
fontSize: '1rem',
lineHeight: '1.375rem',
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyShortBoldLarge: {
fontSize: 16,
lineHeight: 22,
fontSize: '1rem',
lineHeight: '1.375rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyLongRegular: {
fontSize: 14,
lineHeight: 24,
fontSize: '0.875rem',
lineHeight: '1.5rem',
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyLongRegularLarge: {
fontSize: 16,
lineHeight: 26,
fontSize: '1rem',
lineHeight: '1.625rem',
fontWeight: font.weightRegular,
letterSpacing: 0
},
bodyLongBold: {
fontSize: 14,
lineHeight: 24,
fontSize: '0.875rem',
lineHeight: '1.5rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
bodyLongBoldLarge: {
fontSize: 16,
lineHeight: 26,
fontSize: '1rem',
lineHeight: '1.625rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
@@ -203,29 +203,29 @@ export const typography = {
heading2: 'heading02',
heading3: {
fontSize: 32,
lineHeight: 40,
fontSize: '2rem',
lineHeight: '2.5rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading4: {
fontSize: 28,
lineHeight: 36,
fontSize: '1.75rem',
lineHeight: '2.25rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading5: {
fontSize: 20,
lineHeight: 28,
fontSize: '1.25rem',
lineHeight: '1.75rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
},
heading6: {
fontSize: 16,
lineHeight: 26,
fontSize: '1rem',
lineHeight: '1.625rem',
fontWeight: font.weightSemiBold,
letterSpacing: 0
}

3
react/features/base/ui/components/web/BaseDialog.tsx
View File

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
import { keyframes } from 'tss-react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { isElementInTheViewport } from '../../functions.web';
import { DialogTransitionContext } from './DialogTransition';
@@ -16,7 +15,7 @@ const useStyles = makeStyles()(theme => {
height: '100%',
position: 'fixed',
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyLongRegular),
...theme.typography.bodyLongRegular,
top: 0,
left: 0,
display: 'flex',

7
react/features/base/ui/components/web/Button.tsx
View File

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { BUTTON_TYPES } from '../../constants.web';
import { IButtonProps } from '../types';
@@ -57,7 +56,7 @@ const useStyles = makeStyles()(theme => {
alignItems: 'center',
justifyContent: 'center',
border: 0,
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
transition: 'background .2s',
cursor: 'pointer',
@@ -151,7 +150,7 @@ const useStyles = makeStyles()(theme => {
small: {
padding: '8px 16px',
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
'&.iconButton': {
padding: theme.spacing(1)
@@ -162,7 +161,7 @@ const useStyles = makeStyles()(theme => {
large: {
padding: '13px 16px',
...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
...theme.typography.bodyShortBoldLarge,
'&.iconButton': {
padding: '12px'

5
react/features/base/ui/components/web/Checkbox.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconCheck } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface ICheckboxProps {
@@ -42,13 +41,13 @@ interface ICheckboxProps {
const useStyles = makeStyles()(theme => {
return {
formControl: {
...withPixelLineHeight(theme.typography.bodyLongRegular),
...theme.typography.bodyLongRegular,
color: theme.palette.text01,
display: 'inline-flex',
alignItems: 'center',
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
...theme.typography.bodyLongRegularLarge
}
},

5
react/features/base/ui/components/web/ContextMenu.tsx
View File

@@ -8,7 +8,6 @@ import Drawer from '../../../../toolbox/components/web/Drawer';
import JitsiPortal from '../../../../toolbox/components/web/JitsiPortal';
import { showOverflowDrawer } from '../../../../toolbox/functions.web';
import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { spacing } from '../../Tokens';
@@ -139,7 +138,7 @@ const useStyles = makeStyles()(theme => {
borderRadius: `${Number(theme.shape.borderRadius)}px`,
boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)',
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
marginTop: '48px',
position: 'absolute',
right: `${participantsPaneTheme.panePadding}px`,
@@ -159,7 +158,7 @@ const useStyles = makeStyles()(theme => {
paddingTop: '16px',
'& > div': {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
...theme.typography.bodyShortRegularLarge,
'& svg': {
fill: theme.palette.icon01

5
react/features/base/ui/components/web/ContextMenuItem.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { showOverflowDrawer } from '../../../../toolbox/functions.web';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { TEXT_OVERFLOW_TYPES } from '../../constants.any';
import TextWithOverflow from './TextWithOverflow';
@@ -174,12 +173,12 @@ const useStyles = makeStyles()(theme => {
},
text: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01
},
drawerText: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
}
};
});

3
react/features/base/ui/components/web/Dialog.tsx
View File

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import { hideDialog } from '../../../dialog/actions';
import { IconCloseLarge } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { operatesWithEnterKey } from '../../functions.web';
import BaseDialog, { IProps as IBaseDialogProps } from './BaseDialog';
@@ -26,7 +25,7 @@ const useStyles = makeStyles()(theme => {
title: {
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.heading5),
...theme.typography.heading5,
margin: 0,
padding: 0
},

3
react/features/base/ui/components/web/DialogWithTabs.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../app/types';
import { hideDialog } from '../../../dialog/actions';
import { IconArrowBack, IconCloseLarge } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import BaseDialog, { IProps as IBaseProps } from './BaseDialog';
import Button from './Button';
@@ -70,7 +69,7 @@ const useStyles = makeStyles()(theme => {
},
title: {
...withPixelLineHeight(theme.typography.heading5),
...theme.typography.heading5,
color: `${theme.palette.text01} !important`,
margin: 0,
padding: 0

13
react/features/base/ui/components/web/Input.tsx
View File

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconCloseCircle } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { IInputProps } from '../types';
import { HiddenDescription } from './HiddenDescription';
@@ -51,11 +50,11 @@ const useStyles = makeStyles()(theme => {
label: {
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
marginBottom: theme.spacing(2),
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
}
},
@@ -68,7 +67,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.ui03,
background: theme.palette.ui03,
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
padding: '10px 16px',
borderRadius: theme.shape.borderRadius,
border: 0,
@@ -92,7 +91,7 @@ const useStyles = makeStyles()(theme => {
'&.is-mobile': {
height: '48px',
padding: '13px 16px',
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
'&.icon-input': {
@@ -139,11 +138,11 @@ const useStyles = makeStyles()(theme => {
bottomLabel: {
marginTop: theme.spacing(2),
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text02,
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
},
'&.error': {

5
react/features/base/ui/components/web/ListItem.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { ACTION_TRIGGER } from '../../../../participants-pane/constants';
import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
import { isMobileBrowser } from '../../../environment/utils';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface IProps {
@@ -86,7 +85,7 @@ const useStyles = makeStyles()(theme => {
alignItems: 'center',
color: theme.palette.text01,
display: 'flex',
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
margin: `0 -${participantsPaneTheme.panePadding}px`,
padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`,
position: 'relative',
@@ -110,7 +109,7 @@ const useStyles = makeStyles()(theme => {
},
[`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
...theme.typography.bodyShortBoldLarge,
padding: `${theme.spacing(3)} ${participantsPaneTheme.panePadding}px`
}
},

3
react/features/base/ui/components/web/MultiSelect.tsx
View File

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useRef } from 'react';
import { makeStyles } from 'tss-react/mui';
import { IconCloseLarge } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
import { MultiSelectItem } from '../types';
import ClickableIcon from './ClickableIcon';
@@ -42,7 +41,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.ui01,
border: `1px solid ${theme.palette.ui04}`,
borderRadius: `${Number(theme.shape.borderRadius)}px`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
zIndex: 2,
maxHeight: `${MULTI_SELECT_HEIGHT}px`,
overflowY: 'auto',

13
react/features/base/ui/components/web/Select.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { IconArrowDown } from '../../../icons/svg';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface ISelectProps {
@@ -72,11 +71,11 @@ const useStyles = makeStyles()(theme => {
label: {
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
marginBottom: theme.spacing(2),
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
}
},
@@ -88,7 +87,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.ui03,
borderRadius: `${theme.shape.borderRadius}px`,
width: '100%',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
padding: '10px 16px',
paddingRight: '42px',
@@ -108,7 +107,7 @@ const useStyles = makeStyles()(theme => {
},
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
...theme.typography.bodyShortRegularLarge,
padding: '12px 16px',
paddingRight: '46px'
},
@@ -132,11 +131,11 @@ const useStyles = makeStyles()(theme => {
bottomLabel: {
marginTop: theme.spacing(2),
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text02,
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
},
'&.error': {

7
react/features/base/ui/components/web/Tabs.tsx
View File

@@ -3,7 +3,6 @@ import { makeStyles } from 'tss-react/mui';
import { isMobileBrowser } from '../../../environment/utils';
import Icon from '../../../icons/components/Icon';
import { withPixelLineHeight } from '../../../styles/functions.web';
interface ITabProps {
accessibilityLabel: string;
@@ -28,7 +27,7 @@ const useStyles = makeStyles()(theme => {
},
tab: {
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text02,
flex: 1,
padding: '14px',
@@ -65,12 +64,12 @@ const useStyles = makeStyles()(theme => {
},
'&.is-mobile': {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
...theme.typography.bodyShortBoldLarge
}
},
badge: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text04,
padding: `0 ${theme.spacing(1)}`,
borderRadius: '100%',

22
react/features/base/ui/constants.web.ts
View File

@@ -32,7 +32,7 @@ export const commonStyles = (theme: Theme) => {
marginTop: theme.spacing(3),
'& label': {
fontSize: '14px'
fontSize: '0.875rem'
}
}
},
@@ -42,10 +42,10 @@ export const commonStyles = (theme: Theme) => {
color: theme.palette.text01,
cursor: 'pointer',
display: 'flex',
fontSize: 14,
fontSize: '0.875rem',
fontWeight: 400,
height: 40,
lineHeight: '24px',
lineHeight: '1.5rem',
padding: '8px 16px',
boxSizing: 'border-box' as const,
'& > div': {
@@ -85,7 +85,7 @@ export const commonStyles = (theme: Theme) => {
'& i': {
display: 'inline',
fontSize: 24
fontSize: '1.5rem'
},
'@media (hover: hover) and (pointer: fine)': {
@@ -120,8 +120,8 @@ export const commonStyles = (theme: Theme) => {
},
'.prejoin-dialog-label': {
fontSize: '15px',
lineHeight: '24px'
fontSize: '1rem',
lineHeight: '1.5rem'
},
'.prejoin-dialog-label-num': {
@@ -156,8 +156,8 @@ export const commonStyles = (theme: Theme) => {
'.prejoin-dialog-title': {
display: 'inline-block',
fontSize: '24px',
lineHeight: '32px'
fontSize: '1.5rem',
lineHeight: '2rem'
},
'.prejoin-dialog-icon': {
@@ -196,7 +196,7 @@ export const commonStyles = (theme: Theme) => {
'.prejoin-dialog-delimiter-txt': {
background: theme.palette.uiBackground,
color: theme.palette.text01,
fontSize: '11px',
fontSize: '0.75rem',
textTransform: 'uppercase' as const,
padding: `0 ${theme.spacing(2)}`
}
@@ -212,7 +212,7 @@ export const commonStyles = (theme: Theme) => {
display: 'flex',
borderRadius: 3,
flexDirection: 'column' as const,
fontSize: 24,
fontSize: '1.5rem',
height: 48,
justifyContent: 'center',
width: 48,
@@ -249,7 +249,7 @@ export const commonStyles = (theme: Theme) => {
color: theme.palette.text01,
cursor: 'pointer',
display: 'inline-block',
lineHeight: '48px',
lineHeight: '3rem',
textAlign: 'center' as const
},

25
react/features/base/ui/functions.any.ts Normal file
View File

@@ -0,0 +1,25 @@
// Base font size in pixels (standard is 16px = 1rem)
const BASE_FONT_SIZE = 16;
/**
* Converts rem to pixels.
*
* @param {string} remValue - The value in rem units (e.g. '0.875rem').
* @returns {number}
*/
export function remToPixels(remValue: string): number {
const numericValue = parseFloat(remValue.replace('rem', ''));
return Math.round(numericValue * BASE_FONT_SIZE);
}
/**
* Converts pixels to rem.
*
* @param {number} pixels - The value in pixels.
* @returns {string}
* */
export function pixelsToRem(pixels: number): string {
return `${(pixels / BASE_FONT_SIZE).toFixed(3)}rem`;
}

31
react/features/base/ui/functions.native.ts
View File

@@ -1,7 +1,36 @@
import { DefaultTheme } from 'react-native-paper';
import { remToPixels } from './functions.any';
import { createColorTokens } from './utils';
export * from './functions.any';
/**
* Converts all rem to pixels in an object.
*
* @param {Object} obj - The object to convert rem values in.
* @returns {Object}
*/
function convertRemValues(obj: any): any {
const converted: { [key: string]: any; } = {};
if (typeof obj !== 'object' || obj === null) {
return obj;
}
Object.entries(obj).forEach(([ key, value ]) => {
if (typeof value === 'string' && value.includes('rem')) {
converted[key] = remToPixels(value);
} else if (typeof value === 'object' && value !== null) {
converted[key] = convertRemValues(value);
} else {
converted[key] = value;
}
});
return converted;
}
/**
* Creates a React Native Paper theme based on local UI tokens.
*
@@ -16,7 +45,7 @@ export function createNativeTheme({ font, colorMap, shape, spacing, typography }
spacing,
typography: {
font,
...typography
...convertRemValues(typography)
}
};
}

2
react/features/base/ui/functions.web.ts
View File

@@ -5,6 +5,8 @@ import { ITypography, IPalette as Palette1 } from '../ui/types';
import { createColorTokens, createTypographyTokens } from './utils';
export * from './functions.any';
declare module '@mui/material/styles' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface Palette extends Palette1 {}

6
react/features/base/ui/types.ts
View File

@@ -1,8 +1,8 @@
interface ITypographyType {
fontSize: number;
fontWeight: number; // TODO: revisit this.
fontSize: string;
fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
letterSpacing: number;
lineHeight: number;
lineHeight: string;
}
export interface IPalette {

4
react/features/calendar-sync/components/styles.ts
View File

@@ -130,7 +130,7 @@ export default createStyleSheet({
*/
notificationIcon: {
color: 'white',
fontSize: 25
fontSize: '1.5rem'
},
/**
@@ -148,7 +148,7 @@ export default createStyleSheet({
*/
notificationText: {
color: 'white',
fontSize: 13
fontSize: '0.875rem'
},
/**

9
react/features/chat/components/web/ChatMessage.tsx
View File

@@ -8,7 +8,6 @@ import { translate } from '../../../base/i18n/functions';
import { getParticipantById, getParticipantDisplayName, isPrivateChatEnabled } from '../../../base/participants/functions';
import Popover from '../../../base/popover/components/Popover.web';
import Message from '../../../base/react/components/web/Message';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { MESSAGE_TYPE_LOCAL } from '../../constants';
import { getFormattedTimestamp, getMessageText, getPrivateNoticeMessage } from '../../functions';
import { IChatMessageProps } from '../../types';
@@ -130,7 +129,7 @@ const useStyles = makeStyles()((theme: Theme) => {
minHeight: '32px'
},
displayName: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text02,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
@@ -139,18 +138,18 @@ const useStyles = makeStyles()((theme: Theme) => {
maxWidth: '130px'
},
userMessage: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word'
},
privateMessageNotice: {
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text02,
marginTop: theme.spacing(1)
},
timestamp: {
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text03,
marginTop: theme.spacing(1),
marginLeft: theme.spacing(1),

3
react/features/chat/components/web/ClosedCaptionsTab.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import Icon from '../../../base/icons/components/Icon';
import { IconSubtitles } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import { groupMessagesBySender } from '../../../base/util/messageGrouping';
import { setRequestingSubtitles } from '../../../subtitles/actions.any';
@@ -67,7 +66,7 @@ const useStyles = makeStyles()(theme => {
}
},
emptyState: {
...withPixelLineHeight(theme.typography.bodyLongBold),
...theme.typography.bodyLongBold,
color: theme.palette.text02
}
};

2
react/features/chat/components/web/MessageMenu.tsx
View File

@@ -48,7 +48,7 @@ const useStyles = makeStyles()(theme => {
color: 'white',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
fontSize: '0.75rem',
zIndex: 1000,
opacity: 0,
transition: 'opacity 0.3s ease-in-out',

3
react/features/chat/components/web/MessageRecipient.tsx
View File

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IconCloseLarge } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.any';
import {
@@ -24,7 +23,7 @@ const useStyles = makeStyles()(theme => {
alignItems: 'center',
backgroundColor: theme.palette.support05,
borderRadius: theme.shape.borderRadius,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01
},

3
react/features/chat/components/web/NewMessagesButton.tsx
View File

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../base/i18n/functions';
import Icon from '../../../base/icons/components/Icon';
import { IconArrowDown } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
export interface INewMessagesButtonProps extends WithTranslation {
@@ -53,7 +52,7 @@ const useStyles = makeStyles()(theme => {
},
textContainer: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text04,
paddingLeft: '8px'
}

7
react/features/chat/components/web/SubtitleMessage.tsx
View File

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { getParticipantDisplayName } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { ISubtitle } from '../../../subtitles/types';
/**
@@ -39,7 +38,7 @@ const useStyles = makeStyles()(theme => {
},
messageHeader: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text02,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
@@ -49,14 +48,14 @@ const useStyles = makeStyles()(theme => {
},
messageText: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
whiteSpace: 'pre-wrap',
wordBreak: 'break-word'
},
timestamp: {
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text03,
marginTop: theme.spacing(1)
},

3
react/features/conference/components/web/ConferenceTimerDisplay.tsx
View File

@@ -1,13 +1,12 @@
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { IDisplayProps } from '../ConferenceTimer';
const useStyles = makeStyles()(theme => {
return {
timer: {
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text01,
padding: '6px 8px',
backgroundColor: 'rgba(0, 0, 0, 0.8)',

2
react/features/conference/components/web/LeaveReasonDialog.web.tsx
View File

@@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => {
},
text: {
fontSize: '20px'
fontSize: '1.25rem'
}
};
});

3
react/features/conference/components/web/SubjectText.tsx
View File

@@ -4,13 +4,12 @@ import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { getConferenceName } from '../../../base/conference/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Tooltip from '../../../base/tooltip/components/Tooltip';
const useStyles = makeStyles()(theme => {
return {
container: {
...withPixelLineHeight(theme.typography.bodyLongRegular),
...theme.typography.bodyLongRegular,
color: theme.palette.text01,
padding: '2px 16px',
backgroundColor: 'rgba(0, 0, 0, 0.6)',

3
react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx
View File

@@ -8,7 +8,6 @@ import { MIN_ASSUMED_BANDWIDTH_BPS } from '../../../../../modules/API/constants'
import { IReduxState } from '../../../app/types';
import { setAssumedBandwidthBps as saveAssumedBandwidthBps } from '../../../base/conference/actions';
import { IconInfoCircle } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Dialog from '../../../base/ui/components/web/Dialog';
import Input from '../../../base/ui/components/web/Input';
@@ -20,7 +19,7 @@ const useStyles = makeStyles()(theme => {
info: {
background: theme.palette.ui01,
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text02,
marginTop: theme.spacing(2)
},

3
react/features/connection-indicator/components/web/ConnectionIndicator.tsx
View File

@@ -19,6 +19,7 @@ import {
getVirtualScreenshareParticipantTrack
} from '../../../base/tracks/functions';
import { ITrack } from '../../../base/tracks/types';
import { pixelsToRem } from '../../../base/ui/functions.any';
import {
isTrackStreamingStatusInactive,
isTrackStreamingStatusInterrupted
@@ -355,7 +356,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<IProps, IState> {
return (
<div
style = {{ fontSize: iconSize }}>
style = {{ fontSize: pixelsToRem(iconSize) }}>
<span className = 'sr-only'>{ t('videothumbnail.connectionInfo') }</span>
<ConnectionIndicatorIcon
classes = { classes }

2
react/features/connection-stats/components/ConnectionStatsTable.tsx
View File

@@ -222,7 +222,7 @@ const useStyles = makeStyles()(theme => {
},
connectionStatsTable: {
'&, & > table': {
fontSize: '12px',
fontSize: '0.75rem',
fontWeight: 400,
'& td': {

9
react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx
View File

@@ -12,7 +12,6 @@ import { getLegalUrls } from '../../base/config/functions.any';
import { isSupportedBrowser } from '../../base/environment/environment';
import { translate, translateToHTML } from '../../base/i18n/functions';
import Platform from '../../base/react/Platform.web';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Button from '../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../base/ui/constants.any';
import {
@@ -46,15 +45,15 @@ const useStyles = makeStyles()((theme: Theme) => {
},
launchingMeetingLabel: {
marginBottom: 16,
...withPixelLineHeight(theme.typography.heading4)
...theme.typography.heading4
},
roomName: {
marginBottom: 32,
...withPixelLineHeight(theme.typography.heading5)
...theme.typography.heading5
},
descriptionLabel: {
marginBottom: 32,
...withPixelLineHeight(theme.typography.bodyLongRegular)
...theme.typography.bodyLongRegular
},
buttonsContainer: {
display: 'flex',
@@ -71,7 +70,7 @@ const useStyles = makeStyles()((theme: Theme) => {
},
label: {
marginTop: 40,
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
color: theme.palette.text02,
'& a': {
color: theme.palette.link01

11
react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx
View File

@@ -12,7 +12,6 @@ import { IDeeplinkingConfig, IDeeplinkingMobileConfig } from '../../base/config/
import { isSupportedMobileBrowser } from '../../base/environment/environment';
import { translate } from '../../base/i18n/functions';
import Platform from '../../base/react/Platform.web';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Button from '../../base/ui/components/web/Button';
import DialInSummary from '../../invite/components/dial-in-summary/web/DialInSummary';
import { openWebApp } from '../actions';
@@ -51,10 +50,10 @@ const useStyles = makeStyles()((theme: Theme) => {
marginTop: 24,
textAlign: 'center',
marginBottom: 32,
...withPixelLineHeight(theme.typography.heading5)
...theme.typography.heading5
},
roomNameLabel: {
...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
...theme.typography.bodyLongRegularLarge
},
joinMeetWrapper: {
marginTop: 24,
@@ -63,7 +62,7 @@ const useStyles = makeStyles()((theme: Theme) => {
labelDescription: {
textAlign: 'center',
marginTop: 16,
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
linkWrapper: {
display: 'flex',
@@ -74,7 +73,7 @@ const useStyles = makeStyles()((theme: Theme) => {
},
linkLabel: {
color: theme.palette.link01,
...withPixelLineHeight(theme.typography.bodyLongBoldLarge)
...theme.typography.bodyLongBoldLarge
},
supportedBrowserContent: {
marginTop: 16,
@@ -84,7 +83,7 @@ const useStyles = makeStyles()((theme: Theme) => {
justifyContent: 'center'
},
labelOr: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
separator: {
marginTop: '32px',

3
react/features/device-selection/components/DeviceHidContainer.web.tsx
View File

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../base/icons/components/Icon';
import { IconTrash } from '../../base/icons/svg';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Button from '../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../base/ui/constants.any';
import { closeHidDevice, requestHidDevice } from '../../web-hid/actions';
@@ -20,7 +19,7 @@ const useStyles = makeStyles()(theme => {
},
label: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
marginBottom: theme.spacing(2)
},

3
react/features/device-selection/components/DeviceSelector.web.tsx
View File

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Select from '../../base/ui/components/web/Select';
/**
@@ -60,7 +59,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.uiBackground,
padding: '10px 16px',
textAlign: 'center',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
border: `1px solid ${theme.palette.ui03}`
}
};

5
react/features/display-name/components/web/DisplayName.tsx
View File

@@ -9,7 +9,6 @@ import {
getParticipantDisplayName
} from '../../../base/participants/functions';
import { updateSettings } from '../../../base/settings/actions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Tooltip from '../../../base/tooltip/components/Tooltip';
import { getIndicatorsTooltipPosition } from '../../../filmstrip/functions.web';
import { appendSuffix } from '../../functions';
@@ -49,7 +48,7 @@ interface IProps {
const useStyles = makeStyles()(theme => {
return {
displayName: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text01,
overflow: 'hidden',
textOverflow: 'ellipsis',
@@ -62,7 +61,7 @@ const useStyles = makeStyles()(theme => {
background: 'none',
boxShadow: 'none',
padding: 0,
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text01
}
};

4
react/features/display-name/components/web/DisplayNameBadge.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { remToPixels } from '../../../base/ui/functions.any';
import { DISPLAY_NAME_VERTICAL_PADDING } from './styles';
const useStyles = makeStyles()(theme => {
@@ -13,7 +15,7 @@ const useStyles = makeStyles()(theme => {
color: text01,
maxWidth: '50%',
overflow: 'hidden',
padding: `${DISPLAY_NAME_VERTICAL_PADDING / 2}px 16px`,
padding: `${remToPixels(`${DISPLAY_NAME_VERTICAL_PADDING}rem`) / 2}px 16px`,
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}

7
react/features/display-name/components/web/StageParticipantNameLabel.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import { getParticipantDisplayName, isScreenShareParticipant } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { getVideospaceFloatingElementsBottomSpacing } from '../../../base/ui/functions.web';
import { getLargeVideoParticipant } from '../../../large-video/functions';
import {
@@ -38,8 +37,8 @@ const useStyles = makeStyles<IOptions, 'screenSharing'>()((theme, options: IOpti
// the clientHeight will be 960px if there are some titlebars, toolbars, addressbars, etc visible.For any other
// screen size we will decrease/increase the font size based on the screen size.
typography.fontSize = scaleFontProperty(clientHeight, getStageParticipantFontSizeRange(theme));
typography.lineHeight = getStageParticipantNameLabelLineHeight(theme, clientHeight);
typography.fontSize = `${scaleFontProperty(clientHeight, getStageParticipantFontSizeRange(theme))}rem`;
typography.lineHeight = `${getStageParticipantNameLabelLineHeight(theme, clientHeight)}rem`;
}
const toolbarVisibleTransitionProps = getTransitionParamsForElementsAboveToolbox(true);
@@ -53,7 +52,7 @@ const useStyles = makeStyles<IOptions, 'screenSharing'>()((theme, options: IOpti
return {
badgeContainer: {
...withPixelLineHeight(typography),
...typography,
alignItems: 'center',
display: 'inline-flex',
justifyContent: 'center',

51
react/features/display-name/components/web/styles.ts
View File

@@ -3,7 +3,7 @@ import { Theme } from '@mui/material';
/**
* The vertical padding for the display name.
*/
export const DISPLAY_NAME_VERTICAL_PADDING = 4;
export const DISPLAY_NAME_VERTICAL_PADDING = 0.25;
/**
* Returns the typography for stage participant display name badge.
@@ -46,12 +46,12 @@ export function getStageParticipantLineHeightRange(theme: Theme) {
*
* @param {Theme} theme - The current theme.
* @param {number} clientHeight - The height of the visible area.
* @returns {number}
* @returns {string}
*/
export function getStageParticipantNameLabelHeight(theme: Theme, clientHeight?: number) {
export function getStageParticipantNameLabelHeight(theme: Theme, clientHeight?: number): string {
const lineHeight = getStageParticipantNameLabelLineHeight(theme, clientHeight);
return lineHeight + DISPLAY_NAME_VERTICAL_PADDING;
return `${lineHeight + DISPLAY_NAME_VERTICAL_PADDING}rem`;
}
/**
@@ -59,13 +59,18 @@ export function getStageParticipantNameLabelHeight(theme: Theme, clientHeight?:
*
* @param {Theme} theme - The current theme.
* @param {number} clientHeight - The height of the visible area.
* @returns {number}
* @returns {number} - Value in rem units.
*/
export function getStageParticipantNameLabelLineHeight(theme: Theme, clientHeight?: number) {
export function getStageParticipantNameLabelLineHeight(theme: Theme, clientHeight?: number): number {
return scaleFontProperty(clientHeight, getStageParticipantLineHeightRange(theme));
}
interface ILimits {
max: string;
min: string;
}
interface INumberLimits {
max: number;
min: number;
}
@@ -85,22 +90,34 @@ const DEFAULT_CLIENT_HEIGHT_LIMITS = {
*
* @param {number|undefined} screenHeight - The current screen height.
* @param {ILimits} propValuesLimits - The max and min value for the font property that we are scaling.
* @param {ILimits} screenHeightLimits - The max and min value for screen height.
* @returns {number} - The scaled prop value.
* @param {INumberLimits} screenHeightLimits - The max and min value for screen height.
* @returns {number} - The scaled prop value in rem units.
*/
export function scaleFontProperty(
screenHeight: number | undefined,
propValuesLimits: ILimits,
screenHeightLimits: ILimits = DEFAULT_CLIENT_HEIGHT_LIMITS) {
if (typeof screenHeight !== 'number') {
return propValuesLimits.max;
}
screenHeightLimits: INumberLimits = DEFAULT_CLIENT_HEIGHT_LIMITS): number {
const { max: maxPropSize, min: minPropSize } = propValuesLimits;
const { max: maxHeight, min: minHeight } = screenHeightLimits;
const propSizePerPxHeight = (maxPropSize - minPropSize) / (maxHeight - minHeight);
const numericalMinRem = parseFloat(minPropSize);
const numericalMaxRem = parseFloat(maxPropSize);
return Math.round(
(Math.max(Math.min(screenHeight, maxHeight), minHeight) - minHeight) * propSizePerPxHeight
) + minPropSize;
if (typeof screenHeight !== 'number') {
return numericalMaxRem;
}
// Calculate how much the 'rem' value changes per pixel of screen height.
// (max 'rem' - min 'rem') / (max screen height in px - min screen height in px)
const propSizeRemPerPxHeight = (numericalMaxRem - numericalMinRem) / (maxHeight - minHeight);
// Clamp the screenHeight to be within the defined minHeight and maxHeight.
const clampedScreenHeightPx = Math.max(Math.min(screenHeight, maxHeight), minHeight);
// Calculate the scaled 'rem' value:
// Start with the base min 'rem' value.
// Add the scaled portion: (how far the current screen height is from the min height) * (rem change per pixel).
// (clampedScreenHeightPx - minHeigh) gives the effective height within the range.
const calculatedRemValue = (clampedScreenHeightPx - minHeight) * propSizeRemPerPxHeight + numericalMinRem;
return parseFloat(calculatedRemValue.toFixed(3));
}

29
react/features/dynamic-branding/functions.web.ts
View File

@@ -4,6 +4,29 @@ import { adaptV4Theme, createTheme } from '@mui/material/styles';
import { breakpoints, colorMap, font, shape, spacing, typography } from '../base/ui/Tokens';
import { createColorTokens } from '../base/ui/utils';
const DEFAULT_FONT_SIZE = 16;
/**
* Converts unitless fontSize and lineHeight values in a typography style object to rem units.
* Backward compatibility: This conversion supports custom themes that may still override
* typography values with numeric (pixel-based) values instead of rem strings.
*
* @param {Object} style - The typography style object to convert.
* @returns {void}
*/
function convertTypographyToRem(style: any): void {
if (style) {
// Support for backward compatibility with numeric font size overrides
if (typeof style.fontSize === 'number') {
style.fontSize = `${style.fontSize / DEFAULT_FONT_SIZE}rem`;
}
// Support for backward compatibility with numeric line height overrides
if (typeof style.lineHeight === 'number') {
style.lineHeight = `${style.lineHeight / DEFAULT_FONT_SIZE}rem`;
}
}
}
/**
* Creates MUI branding theme based on the custom theme json.
*
@@ -38,6 +61,12 @@ export function createMuiBrandingTheme(customTheme: Theme) {
if (customTypography) {
overwriteRecurrsive(newTypography, customTypography);
// Convert typography values to rem units in case some of the overrides are using the legacy unitless format.
// Note: We do the conversion onlt when we do have custom typography overrides. All other values are already in rem.
for (const variant of Object.keys(newTypography)) {
convertTypographyToRem((newTypography as Record<string, any>)[variant]);
}
}
const newBreakpoints = { ...breakpoints };

4
react/features/e2ee/components/E2EESection.tsx
View File

@@ -52,7 +52,7 @@ const useStyles = makeStyles()(() => {
},
description: {
fontSize: '13px',
fontSize: '0.875rem',
margin: '15px 0'
},
@@ -62,7 +62,7 @@ const useStyles = makeStyles()(() => {
marginTop: '15px',
'& label': {
fontSize: '14px',
fontSize: '0.875rem',
fontWeight: 'bold'
}
}

2
react/features/e2ee/components/ParticipantVerificationDialog.tsx
View File

@@ -34,7 +34,7 @@ const useStyles = makeStyles()(() => {
margin: '16px'
},
emoji: {
fontSize: '40px',
fontSize: '2.5rem',
margin: '12px'
}
};

5
react/features/feedback/components/FeedbackDialog.web.tsx
View File

@@ -10,7 +10,6 @@ import { IJitsiConference } from '../../base/conference/reducer';
import { isMobileBrowser } from '../../base/environment/utils';
import Icon from '../../base/icons/components/Icon';
import { IconFavorite, IconFavoriteSolid } from '../../base/icons/svg';
import { withPixelLineHeight } from '../../base/styles/functions.web';
import Dialog from '../../base/ui/components/web/Dialog';
import Input from '../../base/ui/components/web/Input';
import { cancelFeedback, submitFeedback } from '../actions.web';
@@ -31,7 +30,7 @@ const useStyles = makeStyles()(theme => {
},
ratingLabel: {
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text01,
marginBottom: theme.spacing(2),
height: '20px'
@@ -61,7 +60,7 @@ const useStyles = makeStyles()(theme => {
},
title: {
fontSize: '16px'
fontSize: '1rem'
},
details: {

3
react/features/file-sharing/components/web/FileSharing.tsx
View File

@@ -7,7 +7,6 @@ import { IReduxState } from '../../../app/types';
import Avatar from '../../../base/avatar/components/Avatar';
import Icon from '../../../base/icons/components/Icon';
import { IconCloudUpload, IconDownload, IconTrash } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import BaseTheme from '../../../base/ui/components/BaseTheme.web';
import Button from '../../../base/ui/components/web/Button';
import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -161,7 +160,7 @@ const useStyles = makeStyles()(theme => {
},
noFilesText: {
...withPixelLineHeight(theme.typography.bodyLongBold),
...theme.typography.bodyLongBold,
color: theme.palette.text02,
padding: '0 24px',
textAlign: 'center'

2
react/features/filmstrip/components/web/Filmstrip.tsx
View File

@@ -84,7 +84,7 @@ function styles(theme: Theme, props: IProps) {
},
toggleFilmstripButton: {
fontSize: '14px',
fontSize: '0.875rem',
lineHeight: 1.2,
textAlign: 'center' as const,
background: 'transparent',

2
react/features/filmstrip/components/web/PinnedIndicator.tsx
View File

@@ -71,7 +71,7 @@ const PinnedIndicator = ({
id = { `pin-indicator-${participantId}` }>
<BaseIndicator
icon = { IconPin }
iconSize = { `${iconSize}px` }
iconSize = { iconSize }
tooltipKey = 'pinnedParticipant'
tooltipPosition = { tooltipPosition } />
</div>

2
react/features/filmstrip/components/web/RaisedHandIndicator.tsx
View File

@@ -68,7 +68,7 @@ const RaisedHandIndicator = ({
<BaseIndicator
icon = { IconRaiseHand }
iconColor = { theme.palette.uiBackground }
iconSize = { `${iconSize}px` }
iconSize = { iconSize }
tooltipKey = 'raisedHand'
tooltipPosition = { tooltipPosition } />
</div>

3
react/features/invite/components/add-people-dialog/web/DialInLimit.tsx
View File

@@ -3,7 +3,6 @@ import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { UPGRADE_OPTIONS_LINK, UPGRADE_OPTIONS_TEXT } from '../../../constants';
const useStyles = makeStyles()(theme => {
@@ -15,7 +14,7 @@ const useStyles = makeStyles()(theme => {
},
limitInfo: {
color: theme.palette.text.primary,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
},
link: {
color: `${theme.palette.text.primary} !important`,

5
react/features/invite/components/add-people-dialog/web/DialInSection.tsx
View File

@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../app/types';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { getDialInfoPageURL, hasMultipleNumbers } from '../../../functions';
import DialInNumber from './DialInNumber';
@@ -22,12 +21,12 @@ const useStyles = makeStyles()(theme => {
return {
container: {
'& .info-label': {
...withPixelLineHeight(theme.typography.bodyLongBold)
...theme.typography.bodyLongBold
}
},
link: {
...withPixelLineHeight(theme.typography.bodyLongRegular),
...theme.typography.bodyLongRegular,
color: theme.palette.link01,
'&:hover': {

7
react/features/invite/components/dial-in-summary/web/ConferenceID.tsx
View File

@@ -4,7 +4,6 @@ import { WithTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { translate } from '../../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { _formatConferenceIDPin } from '../../../_utils';
@@ -38,14 +37,14 @@ const useStyles = makeStyles()((theme: Theme) => {
}
},
confNameLabel: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
marginBottom: 18,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
descriptionLabel: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
...theme.typography.bodyShortRegularLarge,
marginBottom: 18
},
separator: {
@@ -55,7 +54,7 @@ const useStyles = makeStyles()((theme: Theme) => {
marginBottom: 18
},
pinLabel: {
...withPixelLineHeight(theme.typography.heading6)
...theme.typography.heading6
}
};
});

3
react/features/invite/components/dial-in-summary/web/DialInSummary.tsx
View File

@@ -5,7 +5,6 @@ import { WithTranslation } from 'react-i18next';
import { withStyles } from 'tss-react/mui';
import { translate } from '../../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { getDialInConferenceID, getDialInNumbers } from '../../../_utils';
import ConferenceID from './ConferenceID';
@@ -103,7 +102,7 @@ const styles = (theme: Theme) => {
},
roomName: {
margin: '40px auto 8px',
...withPixelLineHeight(theme.typography.heading5)
...theme.typography.heading5
}
};
};

8
react/features/large-video/components/ScreenSharePlaceholder.web.tsx
View File

@@ -45,8 +45,8 @@ const useStyles = makeStyles()(theme => {
sharingMessage: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '20px',
lineHeight: '28px',
fontSize: '1.25rem',
lineHeight: '1.75rem',
marginTop: '24px',
letterSpacing: '-0.012em',
color: theme.palette.text01
@@ -54,8 +54,8 @@ const useStyles = makeStyles()(theme => {
showSharing: {
fontStyle: 'normal',
fontWeight: 600,
fontSize: '14px',
lineHeight: '20px',
fontSize: '0.875rem',
lineHeight: '1.25rem',
height: '20px',
marginTop: '16px',
color: theme.palette.link01,

7
react/features/notifications/components/web/Notification.tsx
View File

@@ -17,7 +17,6 @@ import {
} from '../../../base/icons/svg';
import Message from '../../../base/react/components/web/Message';
import { getSupportUrl } from '../../../base/react/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { NOTIFICATION_ICON, NOTIFICATION_TYPE } from '../../constants';
import { INotificationProps } from '../../types';
import { NotificationsTransitionContext } from '../NotificationsTransition';
@@ -124,11 +123,11 @@ const useStyles = makeStyles()((theme: Theme) => {
},
title: {
...withPixelLineHeight(theme.typography.bodyShortBold)
...theme.typography.bodyShortBold
},
description: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
overflow: 'auto',
overflowWrap: 'break-word',
userSelect: 'all',
@@ -152,7 +151,7 @@ const useStyles = makeStyles()((theme: Theme) => {
outline: 0,
backgroundColor: 'transparent',
color: theme.palette.action01,
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
marginRight: theme.spacing(3),
padding: 0,
cursor: 'pointer',

3
react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx
View File

@@ -7,7 +7,6 @@ import { IReduxState } from '../../../../../app/types';
import Icon from '../../../../../base/icons/components/Icon';
import { IconArrowDown, IconArrowUp } from '../../../../../base/icons/svg';
import { isLocalParticipantModerator } from '../../../../../base/participants/functions';
import { withPixelLineHeight } from '../../../../../base/styles/functions.web';
import ListItem from '../../../../../base/ui/components/web/ListItem';
import { IRoom } from '../../../../../breakout-rooms/types';
import { showOverflowDrawer } from '../../../../../toolbox/functions.web';
@@ -92,7 +91,7 @@ const useStyles = makeStyles()(theme => {
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
...withPixelLineHeight(theme.typography.bodyLongBold)
...theme.typography.bodyLongBold
},
arrowContainer: {

3
react/features/participants-pane/components/web/CurrentVisitorsList.tsx
View File

@@ -9,7 +9,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import Icon from '../../../base/icons/components/Icon';
import { IconArrowDown, IconArrowUp } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { normalizeAccents } from '../../../base/util/strings.web';
import { subscribeVisitorsList } from '../../../visitors/actions';
import {
@@ -45,7 +44,7 @@ const useStyles = makeStyles()(theme => {
justifyContent: 'space-between',
cursor: 'pointer',
padding: `${theme.spacing(1)} 0`,
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text02,
flexShrink: 0
},

3
react/features/participants-pane/components/web/FooterContextMenu.tsx
View File

@@ -26,7 +26,6 @@ import {
IconVideoOff
} from '../../../base/icons/svg';
import { getRaiseHandsQueue } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import ContextMenu from '../../../base/ui/components/web/ContextMenu';
import ContextMenuItemGroup from '../../../base/ui/components/web/ContextMenuItemGroup';
import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
@@ -49,7 +48,7 @@ const useStyles = makeStyles()(theme => {
},
text: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text02,
padding: '10px 16px',
height: '40px',

7
react/features/participants-pane/components/web/LobbyParticipants.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import Avatar from '../../../base/avatar/components/Avatar';
import Icon from '../../../base/icons/components/Icon';
import { IconCheck, IconCloseLarge } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { admitMultiple } from '../../../lobby/actions.web';
import { getKnockingParticipants, getLobbyEnabled } from '../../../lobby/functions';
import Drawer from '../../../toolbox/components/web/Drawer';
@@ -28,7 +27,7 @@ const useStyles = makeStyles()(theme => {
color: theme.palette.text01,
display: 'flex',
padding: '12px 16px',
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
...theme.typography.bodyShortRegularLarge,
'&:first-child': {
marginTop: '15px'
@@ -48,11 +47,11 @@ const useStyles = makeStyles()(theme => {
justifyContent: 'space-between'
},
heading: {
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text02
},
link: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.link01,
cursor: 'pointer'
}

5
react/features/participants-pane/components/web/MeetingParticipants.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
import { getParticipantById, isScreenShareParticipant } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Input from '../../../base/ui/components/web/Input';
import useContextMenu from '../../../base/ui/hooks/useContextMenu.web';
import { normalizeAccents } from '../../../base/util/strings.web';
@@ -28,11 +27,11 @@ const useStyles = makeStyles()(theme => {
},
heading: {
color: theme.palette.text02,
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
marginBottom: theme.spacing(3),
[`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
...theme.typography.bodyShortBoldLarge
}
},

3
react/features/participants-pane/components/web/ParticipantItem.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import Avatar from '../../../base/avatar/components/Avatar';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import ListItem from '../../../base/ui/components/web/ListItem';
import {
ACTION_TRIGGER,
@@ -110,7 +109,7 @@ const useStyles = makeStyles()(theme => {
},
moderatorLabel: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.text03
},

3
react/features/participants-pane/components/web/ParticipantsCounter.tsx
View File

@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { getParticipantCountForDisplay } from '../../../base/participants/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
const useStyles = makeStyles()(theme => {
return {
@@ -13,7 +12,7 @@ const useStyles = makeStyles()(theme => {
height: '16px',
minWidth: '16px',
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
pointerEvents: 'none',
position: 'absolute',
right: '-4px',

7
react/features/participants-pane/components/web/VisitorsList.tsx
View File

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { admitMultiple, goLive } from '../../../visitors/actions';
import {
getPromotionRequests,
@@ -33,7 +32,7 @@ const useStyles = makeStyles()(theme => {
color: theme.palette.text01,
display: 'flex',
padding: '12px 16px',
...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
...theme.typography.bodyShortRegularLarge,
'&:first-child': {
marginTop: '15px'
@@ -53,11 +52,11 @@ const useStyles = makeStyles()(theme => {
justifyContent: 'space-between'
},
heading: {
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text02
},
link: {
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
color: theme.palette.link01,
cursor: 'pointer'
}

5
react/features/polls/components/web/PollAnswer.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../../base/icons/components/Icon';
import { IconCloseLarge } from '../../../base/icons/svg';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import Checkbox from '../../../base/ui/components/web/Checkbox';
import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -31,12 +30,12 @@ const useStyles = makeStyles()(theme => {
marginBottom: '24px'
},
question: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
color: theme.palette.text01,
marginBottom: '8px'
},
creator: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text02
},
answerList: {

5
react/features/polls/components/web/PollCreate.tsx
View File

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import Input from '../../../base/ui/components/web/Input';
import { BUTTON_TYPES } from '../../../base/ui/constants.web';
@@ -22,7 +21,7 @@ const useStyles = makeStyles()(theme => {
overflowY: 'auto'
},
header: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
color: theme.palette.text01,
margin: '24px 0 16px'
},
@@ -39,7 +38,7 @@ const useStyles = makeStyles()(theme => {
marginBottom: '24px'
},
removeOption: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.link01,
marginTop: '8px',
border: 0,

13
react/features/polls/components/web/PollResults.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import AbstractPollResults, { AbstractProps } from '../AbstractPollResults';
const useStyles = makeStyles()(theme => {
@@ -17,12 +16,12 @@ const useStyles = makeStyles()(theme => {
marginBottom: '16px'
},
question: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
color: theme.palette.text01,
marginBottom: '8px'
},
creator: {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text02
},
resultList: {
@@ -38,7 +37,7 @@ const useStyles = makeStyles()(theme => {
display: 'flex',
flexShrink: 1,
overflowWrap: 'anywhere',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
marginBottom: '4px'
},
@@ -65,7 +64,7 @@ const useStyles = makeStyles()(theme => {
voteCount: {
flex: 1,
textAlign: 'right',
...withPixelLineHeight(theme.typography.bodyShortBold),
...theme.typography.bodyShortBold,
color: theme.palette.text01
},
voters: {
@@ -79,7 +78,7 @@ const useStyles = makeStyles()(theme => {
padding: '8px 16px',
'& li': {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01,
margin: 0,
marginBottom: '2px',
@@ -96,7 +95,7 @@ const useStyles = makeStyles()(theme => {
'& button': {
border: 0,
backgroundColor: 'transparent',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.link01
}
}

3
react/features/polls/components/web/PollsList.tsx
View File

@@ -7,7 +7,6 @@ import { IReduxState } from '../../../app/types';
import Icon from '../../../base/icons/components/Icon';
import { IconMessage } from '../../../base/icons/svg';
import { browser } from '../../../base/lib-jitsi-meet';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import PollItem from './PollItem';
@@ -31,7 +30,7 @@ const useStyles = makeStyles()(theme => {
}
},
emptyMessage: {
...withPixelLineHeight(theme.typography.bodyLongBold),
...theme.typography.bodyLongBold,
color: theme.palette.text02,
padding: '0 24px',
textAlign: 'center'

5
react/features/prejoin/components/web/Prejoin.tsx
View File

@@ -15,7 +15,6 @@ import ActionButton from '../../../base/premeeting/components/web/ActionButton';
import PreMeetingScreen from '../../../base/premeeting/components/web/PreMeetingScreen';
import { updateSettings } from '../../../base/settings/actions';
import { getDisplayName } from '../../../base/settings/functions.web';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { getLocalJitsiVideoTrack } from '../../../base/tracks/functions.web';
import Button from '../../../base/ui/components/web/Button';
import Input from '../../../base/ui/components/web/Input';
@@ -164,7 +163,7 @@ const useStyles = makeStyles()(theme => {
},
avatarName: {
...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
...theme.typography.bodyShortBoldLarge,
color: theme.palette.text01,
marginBottom: theme.spacing(5),
textAlign: 'center'
@@ -175,7 +174,7 @@ const useStyles = makeStyles()(theme => {
color: theme.palette.text01,
borderRadius: theme.shape.borderRadius,
width: '100%',
...withPixelLineHeight(theme.typography.labelRegular),
...theme.typography.labelRegular,
boxSizing: 'border-box',
padding: theme.spacing(1),
textAlign: 'center',

3
react/features/prejoin/components/web/country-picker/CountryPicker.tsx
View File

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../../app/types';
import Popover from '../../../../base/popover/components/Popover.web';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import { setDialOutCountry, setDialOutNumber } from '../../../actions.web';
import { getDialOutCountry, getDialOutNumber } from '../../../functions';
import { getCountryFromDialCodeText } from '../../../utils';
@@ -58,7 +57,7 @@ const useStyles = makeStyles()(theme => {
background: 'transparent',
color: theme.palette.text01,
flexGrow: 1,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
}
};
});

3
react/features/prejoin/components/web/country-picker/CountryRow.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
interface IProps {
@@ -35,7 +34,7 @@ const useStyles = makeStyles()(theme => {
text: {
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
flexGrow: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',

3
react/features/prejoin/components/web/country-picker/CountrySelector.tsx
View File

@@ -3,7 +3,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../../../base/icons/components/Icon';
import { IconArrowDown } from '../../../../base/icons/svg';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
interface IProps {
@@ -28,7 +27,7 @@ const useStyles = makeStyles()(theme => {
backgroundColor: theme.palette.ui01,
borderRight: `1px solid ${theme.palette.ui03}`,
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
position: 'relative',
width: '88px',
borderTopLeftRadius: theme.shape.borderRadius,

6
react/features/prejoin/components/web/dialogs/CallingDialog.tsx
View File

@@ -37,13 +37,13 @@ const useStyles = makeStyles()(theme => {
},
'& .prejoin-dialog-calling-label': {
fontSize: '15px',
fontSize: '1rem',
margin: `${theme.spacing(2)} 0 ${theme.spacing(3)} 0`
},
'& .prejoin-dialog-calling-number': {
fontSize: '19px',
lineHeight: '28px',
fontSize: '1.25rem',
lineHeight: '1.75rem',
margin: `${theme.spacing(3)} 0`
}
}

8
react/features/prejoin/components/web/dialogs/DialInDialog.tsx
View File

@@ -59,8 +59,8 @@ const useStyles = makeStyles()(theme => {
background: '#3e474f',
borderRadius: '4px',
display: 'inline-block',
fontSize: '15px',
lineHeight: '24px',
fontSize: '1rem',
lineHeight: '1.5rem',
margin: theme.spacing(1),
padding: theme.spacing(2),
userSelect: 'text',
@@ -79,8 +79,8 @@ const useStyles = makeStyles()(theme => {
color: '#6FB1EA',
cursor: 'pointer',
display: 'inline-block',
fontSize: '13px',
lineHeight: '20px',
fontSize: '0.875rem',
lineHeight: '1.5rem',
marginBottom: theme.spacing(4)
},
'& .prejoin-dialog-dialin-spaced-label': {

3
react/features/prejoin/components/web/preview/DeviceStatus.tsx
View File

@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
import { makeStyles } from 'tss-react/mui';
import { ColorPalette } from '../../../../base/styles/components/styles/ColorPalette';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import {
getDeviceStatusText,
getDeviceStatusType
@@ -16,7 +15,7 @@ const useStyles = makeStyles<{ deviceStatusType?: string; }>()((theme, { deviceS
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: '#fff',
marginTop: theme.spacing(4),

4
react/features/reactions/components/web/ReactionsMenu.tsx
View File

@@ -98,8 +98,8 @@ const useStyles = makeStyles<IProps>()((theme, props: IProps) => {
'span.emoji': {
width: '24px',
height: '24px',
lineHeight: '24px',
fontSize: '16px'
lineHeight: '1.5rem',
fontSize: '1rem'
}
}
},

3
react/features/recording/components/LiveStream/web/StreamKeyForm.tsx
View File

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
import { withStyles } from 'tss-react/mui';
import { translate } from '../../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import Input from '../../../../base/ui/components/web/Input';
import AbstractStreamKeyForm, {
IProps as AbstractProps,
@@ -26,7 +25,7 @@ const styles = (theme: Theme) => {
cursor: 'pointer',
color: theme.palette.link01,
transition: 'color .2s ease',
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
marginLeft: 'auto',
marginTop: theme.spacing(1),

2
react/features/recording/components/Recording/web/HighlightButton.tsx
View File

@@ -71,7 +71,7 @@ const styles = (theme: Theme) => {
boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
boxSizing: 'border-box' as const,
color: theme.palette.uiBackground,
fontSize: '14px',
fontSize: '0.875rem',
fontWeight: 400,
left: '4px',
padding: '16px',

8
react/features/salesforce/components/web/RecordItem.tsx
View File

@@ -52,16 +52,16 @@ const useStyles = makeStyles()(theme => {
textOverflow: 'ellipsis'
},
recordName: {
fontSize: '15px',
fontSize: '1rem',
fontWeight: 400,
lineHeight: '20px',
lineHeight: '1.25rem',
overflow: 'hidden',
textOverflow: 'ellipsis'
},
recordType: {
fontSize: '13px',
fontSize: '0.875rem',
fontWeight: 400,
lineHeight: '18px'
lineHeight: '1.125rem'
}
};
});

7
react/features/salesforce/components/web/SalesforceLinkDialog.tsx
View File

@@ -7,7 +7,6 @@ import { hideDialog } from '../../../base/dialog/actions';
import Icon from '../../../base/icons/components/Icon';
import { IconSearch } from '../../../base/icons/svg';
import { getFieldValue } from '../../../base/react/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Dialog from '../../../base/ui/components/web/Dialog';
import Spinner from '../../../base/ui/components/web/Spinner';
import { NOTES_MAX_LENGTH } from '../../constants';
@@ -36,7 +35,7 @@ const useStyles = makeStyles()(theme => {
height: 20
},
resultLabel: {
fontSize: '15px',
fontSize: '1rem',
margin: '16px 0 8px'
},
recordsSearch: {
@@ -50,7 +49,7 @@ const useStyles = makeStyles()(theme => {
height: 40,
'&::placeholder': {
color: theme.palette.text03,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
}
},
spinner: {
@@ -107,7 +106,7 @@ const useStyles = makeStyles()(theme => {
padding: '10px 0'
},
notes: {
lineHeight: '18px',
lineHeight: '1.125rem',
minHeight: '130px',
resize: 'vertical',
width: '100%',

5
react/features/settings/components/web/CalendarTab.tsx
View File

@@ -6,7 +6,6 @@ import { withStyles } from 'tss-react/mui';
import { IReduxState, IStore } from '../../../app/types';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import Spinner from '../../../base/ui/components/web/Spinner';
import { bootstrapCalendarIntegration, clearCalendarIntegration, signIn } from '../../../calendar-sync/actions';
@@ -76,10 +75,10 @@ const styles = (theme: Theme) => {
flexDirection: 'column' as const,
alignItems: 'center',
justifyContent: 'center',
textAlign: 'center',
textAlign: 'center' as const,
minHeight: '100px',
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
},
button: {

3
react/features/settings/components/web/ModeratorTab.tsx
View File

@@ -6,7 +6,6 @@ import { withStyles } from 'tss-react/mui';
import AbstractDialogTab, {
IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Checkbox from '../../../base/ui/components/web/Checkbox';
/**
@@ -90,7 +89,7 @@ const styles = (theme: Theme) => {
},
title: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
color: `${theme.palette.text01} !important`,
marginBottom: theme.spacing(3)
},

3
react/features/settings/components/web/NotificationsTab.tsx
View File

@@ -6,7 +6,6 @@ import { withStyles } from 'tss-react/mui';
import AbstractDialogTab, {
IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Checkbox from '../../../base/ui/components/web/Checkbox';
/**
@@ -107,7 +106,7 @@ const styles = (theme: Theme) => {
},
title: {
...withPixelLineHeight(theme.typography.heading6),
...theme.typography.heading6,
color: `${theme.palette.text01} !important`,
marginBottom: theme.spacing(3)
},

3
react/features/settings/components/web/ProfileTab.tsx
View File

@@ -12,7 +12,6 @@ import Avatar from '../../../base/avatar/components/Avatar';
import AbstractDialogTab, {
IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Button from '../../../base/ui/components/web/Button';
import Input from '../../../base/ui/components/web/Input';
@@ -89,7 +88,7 @@ const styles = (theme: Theme) => {
label: {
color: `${theme.palette.text01} !important`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
marginBottom: theme.spacing(2)
},

5
react/features/settings/components/web/ShortcutsTab.tsx
View File

@@ -6,7 +6,6 @@ import { withStyles } from 'tss-react/mui';
import AbstractDialogTab, {
IProps as AbstractDialogTabProps } from '../../../base/dialog/components/web/AbstractDialogTab';
import { translate } from '../../../base/i18n/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Checkbox from '../../../base/ui/components/web/Checkbox';
/**
@@ -59,13 +58,13 @@ const styles = (theme: Theme) => {
justifyContent: 'space-between',
alignItems: 'center',
padding: `${theme.spacing(1)} 0`,
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
color: theme.palette.text01
},
listItemKey: {
backgroundColor: theme.palette.ui04,
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
borderRadius: `${Number(theme.shape.borderRadius) / 2}px`
}

3
react/features/settings/components/web/video/VideoSettingsContent.tsx
View File

@@ -8,7 +8,6 @@ import { IconImage } from '../../../../base/icons/svg';
import { Video } from '../../../../base/media/components/index';
import { equals } from '../../../../base/redux/functions';
import { updateSettings } from '../../../../base/settings/actions';
import { withPixelLineHeight } from '../../../../base/styles/functions.web';
import Checkbox from '../../../../base/ui/components/web/Checkbox';
import ContextMenu from '../../../../base/ui/components/web/ContextMenu';
import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
@@ -130,7 +129,7 @@ const useStyles = makeStyles()(theme => {
borderRadius: '4px',
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
color: theme.palette.text01,
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
width: 'fit-content',
maxwidth: `calc(100% - ${theme.spacing(2)} - ${theme.spacing(2)})`,
overflow: 'hidden',

3
react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx
View File

@@ -3,7 +3,6 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import Switch from '../../../base/ui/components/web/Switch';
const useStyles = makeStyles()((theme: Theme) => {
@@ -15,7 +14,7 @@ const useStyles = makeStyles()((theme: Theme) => {
switchLabel: {
marginRight: 10,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
}
};
});

9
react/features/speaker-stats/components/web/SpeakerStatsList.tsx
View File

@@ -1,7 +1,6 @@
import React from 'react';
import { makeStyles } from 'tss-react/mui';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { MOBILE_BREAKPOINT } from '../../constants';
import abstractSpeakerStatsList from '../AbstractSpeakerStatsList';
@@ -25,16 +24,16 @@ const useStyles = makeStyles()(theme => {
'& .time': {
padding: '2px 4px',
borderRadius: '4px',
...withPixelLineHeight(theme.typography.labelBold),
...theme.typography.labelBold,
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
},
backgroundColor: theme.palette.ui02
},
'& .display-name': {
...withPixelLineHeight(theme.typography.bodyShortRegular),
...theme.typography.bodyShortRegular,
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
...theme.typography.bodyShortRegularLarge
}
},
'& .dominant': {

5
react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
import Icon from '../../../base/icons/components/Icon';
import { IconSearch } from '../../../base/icons/svg';
import { getFieldValue } from '../../../base/react/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
import { HiddenDescription } from '../../../base/ui/components/web/HiddenDescription';
import { MOBILE_BREAKPOINT } from '../../constants';
import { isSpeakerStatsSearchDisabled } from '../../functions';
@@ -39,13 +38,13 @@ const useStyles = makeStyles()(theme => {
height: 40,
'&::placeholder': {
color: theme.palette.text03,
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
},
[theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
height: 48,
padding: '13px 16px 13px 44px',
'&::placeholder': {
...withPixelLineHeight(theme.typography.bodyShortRegular)
...theme.typography.bodyShortRegular
}
}
}

6
react/features/subtitles/components/web/Captions.tsx
View File

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import { withStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import { getVideospaceFloatingElementsBottomSpacing } from '../../../base/ui/functions.web';
import { getVideospaceFloatingElementsBottomSpacing, pixelsToRem, remToPixels } from '../../../base/ui/functions.web';
import { getStageParticipantNameLabelHeight } from '../../../display-name/components/web/styles';
import { shouldDisplayStageParticipantBadge } from '../../../display-name/functions';
import {
@@ -63,7 +63,7 @@ const styles = (theme: Theme, props: IProps) => {
if (_isLifted) {
// 10px is the space between the onstage participant display name label and subtitles. We also need
// to add the padding of the subtitles because it will decrease the gap between the label and subtitles.
bottom += getStageParticipantNameLabelHeight(theme, _clientHeight) + 10 + padding;
bottom += remToPixels(getStageParticipantNameLabelHeight(theme, _clientHeight)) + 10 + padding;
}
if (_shiftUp) {
@@ -75,7 +75,7 @@ const styles = (theme: Theme, props: IProps) => {
transcriptionSubtitles: {
bottom: `${bottom}px`,
marginBottom: `${marginBottom}px`,
fontSize: `${fontSize}px`,
fontSize: pixelsToRem(fontSize),
left: '50%',
maxWidth: '50vw',
overflowWrap: 'break-word' as const,

Some files were not shown because too many files have changed in this diff Show More