From d2e52d2c2a272cf0bcc4a129309955b659580511 Mon Sep 17 00:00:00 2001 From: raduanastase8x8 <133645895+raduanastase8x8@users.noreply.github.com> Date: Thu, 7 Aug 2025 03:07:27 +0300 Subject: [PATCH] ref(Theme): Changes typography values to rem (#16021) Replaces hard-coded pixel values with relative rem units across UI components to improve typography responsiveness and maintainability. Co-authored-by: Hristo Terezov --- css/_variables.scss | 2 +- .../avatar/components/web/StatelessAvatar.tsx | 7 +- .../features/base/buttons/CopyButton.web.tsx | 3 +- .../base/label/components/web/Label.tsx | 3 +- .../components/web/ActionButton.tsx | 7 +- .../components/web/ConnectionStatus.tsx | 3 +- .../components/web/PreMeetingScreen.tsx | 5 +- .../components/web/RecordingWarning.tsx | 4 +- .../components/web/UnsafeRoomWarning.tsx | 3 +- .../react/components/web/BaseIndicator.tsx | 7 +- .../components/web/InlineDialogFailure.tsx | 3 +- react/features/base/styles/functions.web.ts | 14 - .../base/tooltip/components/Tooltip.tsx | 3 +- react/features/base/ui/Tokens.ts | 56 ++-- .../base/ui/components/web/BaseDialog.tsx | 3 +- .../base/ui/components/web/Button.tsx | 7 +- .../base/ui/components/web/Checkbox.tsx | 5 +- .../base/ui/components/web/ContextMenu.tsx | 5 +- .../ui/components/web/ContextMenuItem.tsx | 5 +- .../base/ui/components/web/Dialog.tsx | 3 +- .../base/ui/components/web/DialogWithTabs.tsx | 3 +- .../features/base/ui/components/web/Input.tsx | 13 +- .../base/ui/components/web/ListItem.tsx | 5 +- .../base/ui/components/web/MultiSelect.tsx | 3 +- .../base/ui/components/web/Select.tsx | 13 +- .../features/base/ui/components/web/Tabs.tsx | 7 +- react/features/base/ui/constants.web.ts | 22 +- react/features/base/ui/functions.any.ts | 25 ++ react/features/base/ui/functions.native.ts | 31 +- react/features/base/ui/functions.web.ts | 2 + react/features/base/ui/types.ts | 6 +- .../calendar-sync/components/styles.ts | 4 +- .../chat/components/web/ChatMessage.tsx | 9 +- .../chat/components/web/ClosedCaptionsTab.tsx | 3 +- .../chat/components/web/MessageMenu.tsx | 2 +- .../chat/components/web/MessageRecipient.tsx | 3 +- .../chat/components/web/NewMessagesButton.tsx | 3 +- .../chat/components/web/SubtitleMessage.tsx | 7 +- .../components/web/ConferenceTimerDisplay.tsx | 3 +- .../components/web/LeaveReasonDialog.web.tsx | 2 +- .../conference/components/web/SubjectText.tsx | 3 +- .../web/BandwidthSettingsDialog.tsx | 3 +- .../components/web/ConnectionIndicator.tsx | 3 +- .../components/ConnectionStatsTable.tsx | 2 +- .../components/DeepLinkingDesktopPage.web.tsx | 9 +- .../components/DeepLinkingMobilePage.web.tsx | 11 +- .../components/DeviceHidContainer.web.tsx | 3 +- .../components/DeviceSelector.web.tsx | 3 +- .../components/web/DisplayName.tsx | 5 +- .../components/web/DisplayNameBadge.tsx | 4 +- .../web/StageParticipantNameLabel.tsx | 7 +- .../display-name/components/web/styles.ts | 51 ++- .../dynamic-branding/functions.web.ts | 29 ++ .../features/e2ee/components/E2EESection.tsx | 4 +- .../ParticipantVerificationDialog.tsx | 2 +- .../components/FeedbackDialog.web.tsx | 5 +- .../components/web/FileSharing.tsx | 3 +- .../filmstrip/components/web/Filmstrip.tsx | 2 +- .../components/web/PinnedIndicator.tsx | 2 +- .../components/web/RaisedHandIndicator.tsx | 2 +- .../add-people-dialog/web/DialInLimit.tsx | 3 +- .../add-people-dialog/web/DialInSection.tsx | 5 +- .../dial-in-summary/web/ConferenceID.tsx | 7 +- .../dial-in-summary/web/DialInSummary.tsx | 3 +- .../components/ScreenSharePlaceholder.web.tsx | 8 +- .../components/web/Notification.tsx | 7 +- .../components/web/CollapsibleRoom.tsx | 3 +- .../components/web/CurrentVisitorsList.tsx | 3 +- .../components/web/FooterContextMenu.tsx | 3 +- .../components/web/LobbyParticipants.tsx | 7 +- .../components/web/MeetingParticipants.tsx | 5 +- .../components/web/ParticipantItem.tsx | 3 +- .../components/web/ParticipantsCounter.tsx | 3 +- .../components/web/VisitorsList.tsx | 7 +- .../polls/components/web/PollAnswer.tsx | 5 +- .../polls/components/web/PollCreate.tsx | 5 +- .../polls/components/web/PollResults.tsx | 13 +- .../polls/components/web/PollsList.tsx | 3 +- .../prejoin/components/web/Prejoin.tsx | 5 +- .../web/country-picker/CountryPicker.tsx | 3 +- .../web/country-picker/CountryRow.tsx | 3 +- .../web/country-picker/CountrySelector.tsx | 3 +- .../components/web/dialogs/CallingDialog.tsx | 6 +- .../components/web/dialogs/DialInDialog.tsx | 8 +- .../components/web/preview/DeviceStatus.tsx | 3 +- .../components/web/ReactionsMenu.tsx | 4 +- .../LiveStream/web/StreamKeyForm.tsx | 3 +- .../Recording/web/HighlightButton.tsx | 2 +- .../salesforce/components/web/RecordItem.tsx | 8 +- .../components/web/SalesforceLinkDialog.tsx | 7 +- .../settings/components/web/CalendarTab.tsx | 5 +- .../settings/components/web/ModeratorTab.tsx | 3 +- .../components/web/NotificationsTab.tsx | 3 +- .../settings/components/web/ProfileTab.tsx | 3 +- .../settings/components/web/ShortcutsTab.tsx | 5 +- .../web/video/VideoSettingsContent.tsx | 3 +- .../components/web/FaceExpressionsSwitch.tsx | 3 +- .../components/web/SpeakerStatsList.tsx | 9 +- .../components/web/SpeakerStatsSearch.tsx | 5 +- .../subtitles/components/web/Captions.tsx | 6 +- .../components/web/LanguageListItem.tsx | 2 +- .../components/web/LanguageSelector.tsx | 3 +- .../components/web/LanguageSelectorDialog.tsx | 2 +- .../toolbox/components/web/Drawer.tsx | 2 +- .../components/VideoQualitySlider.web.tsx | 5 +- .../components/UploadImageButton.tsx | 3 +- .../components/VirtualBackgrounds.tsx | 3 +- .../visitors/components/web/VisitorsQueue.tsx | 3 +- react/features/welcome/constants.tsx | 2 +- resources/custom-theme/custom-theme.json | 304 +++++++++--------- 110 files changed, 502 insertions(+), 487 deletions(-) create mode 100644 react/features/base/ui/functions.any.ts diff --git a/css/_variables.scss b/css/_variables.scss index ade184dd71..f3f2bc5791 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -90,7 +90,7 @@ $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0; $welcomePageHeaderTextTitleMarginBottom: 0; $welcomePageHeaderTextTitleFontSize: 2.625rem; $welcomePageHeaderTextTitleFontWeight: normal; -$welcomePageHeaderTextTitleLineHeight: 50px; +$welcomePageHeaderTextTitleLineHeight: 3.125rem; $welcomePageHeaderTextTitleOpacity: 1; $welcomePageEnterRoomDisplay: flex; diff --git a/react/features/base/avatar/components/web/StatelessAvatar.tsx b/react/features/base/avatar/components/web/StatelessAvatar.tsx index eb5f70caa2..29eb4252e0 100644 --- a/react/features/base/avatar/components/web/StatelessAvatar.tsx +++ b/react/features/base/avatar/components/web/StatelessAvatar.tsx @@ -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%' }; diff --git a/react/features/base/buttons/CopyButton.web.tsx b/react/features/base/buttons/CopyButton.web.tsx index 7ee7758a5b..7a8cf32b5d 100644 --- a/react/features/base/buttons/CopyButton.web.tsx +++ b/react/features/base/buttons/CopyButton.web.tsx @@ -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', diff --git a/react/features/base/label/components/web/Label.tsx b/react/features/base/label/components/web/Label.tsx index 3c9a73303b..9488a021a1 100644 --- a/react/features/base/label/components/web/Label.tsx +++ b/react/features/base/label/components/web/Label.tsx @@ -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', diff --git a/react/features/base/premeeting/components/web/ActionButton.tsx b/react/features/base/premeeting/components/web/ActionButton.tsx index d4154cd826..8e1d61893e 100644 --- a/react/features/base/premeeting/components/web/ActionButton.tsx +++ b/react/features/base/premeeting/components/web/ActionButton.tsx @@ -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' } diff --git a/react/features/base/premeeting/components/web/ConnectionStatus.tsx b/react/features/base/premeeting/components/web/ConnectionStatus.tsx index 8276dfdc41..dbd62392bc 100644 --- a/react/features/base/premeeting/components/web/ConnectionStatus.tsx +++ b/react/features/base/premeeting/components/web/ConnectionStatus.tsx @@ -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%', diff --git a/react/features/base/premeeting/components/web/PreMeetingScreen.tsx b/react/features/base/premeeting/components/web/PreMeetingScreen.tsx index e3845d88d6..dd56a18d88 100644 --- a/react/features/base/premeeting/components/web/PreMeetingScreen.tsx +++ b/react/features/base/premeeting/components/web/PreMeetingScreen.tsx @@ -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', diff --git a/react/features/base/premeeting/components/web/RecordingWarning.tsx b/react/features/base/premeeting/components/web/RecordingWarning.tsx index 7c9cccd5da..0323208f37 100644 --- a/react/features/base/premeeting/components/web/RecordingWarning.tsx +++ b/react/features/base/premeeting/components/web/RecordingWarning.tsx @@ -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), diff --git a/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx b/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx index f4e3cc3d42..4bc69f47d7 100644 --- a/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx +++ b/react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx @@ -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) diff --git a/react/features/base/react/components/web/BaseIndicator.tsx b/react/features/base/react/components/web/BaseIndicator.tsx index b90e98c820..8787990122 100644 --- a/react/features/base/react/components/web/BaseIndicator.tsx +++ b/react/features/base/react/components/web/BaseIndicator.tsx @@ -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 ( diff --git a/react/features/base/react/components/web/InlineDialogFailure.tsx b/react/features/base/react/components/web/InlineDialogFailure.tsx index 9e7150aa3d..c85d395507 100644 --- a/react/features/base/react/components/web/InlineDialogFailure.tsx +++ b/react/features/base/react/components/web/InlineDialogFailure.tsx @@ -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' diff --git a/react/features/base/styles/functions.web.ts b/react/features/base/styles/functions.web.ts index 2003613358..8c028a4f92 100644 --- a/react/features/base/styles/functions.web.ts +++ b/react/features/base/styles/functions.web.ts @@ -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` - }; -} diff --git a/react/features/base/tooltip/components/Tooltip.tsx b/react/features/base/tooltip/components/Tooltip.tsx index 265834a8fd..482b137754 100644 --- a/react/features/base/tooltip/components/Tooltip.tsx +++ b/react/features/base/tooltip/components/Tooltip.tsx @@ -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', diff --git a/react/features/base/ui/Tokens.ts b/react/features/base/ui/Tokens.ts index d165d95a92..e3b3e6472b 100644 --- a/react/features/base/ui/Tokens.ts +++ b/react/features/base/ui/Tokens.ts @@ -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 } diff --git a/react/features/base/ui/components/web/BaseDialog.tsx b/react/features/base/ui/components/web/BaseDialog.tsx index 16dedd749c..b0c43599fe 100644 --- a/react/features/base/ui/components/web/BaseDialog.tsx +++ b/react/features/base/ui/components/web/BaseDialog.tsx @@ -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', diff --git a/react/features/base/ui/components/web/Button.tsx b/react/features/base/ui/components/web/Button.tsx index bab1866d5d..974bc715c6 100644 --- a/react/features/base/ui/components/web/Button.tsx +++ b/react/features/base/ui/components/web/Button.tsx @@ -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' diff --git a/react/features/base/ui/components/web/Checkbox.tsx b/react/features/base/ui/components/web/Checkbox.tsx index 0af3303b2e..857d23c49e 100644 --- a/react/features/base/ui/components/web/Checkbox.tsx +++ b/react/features/base/ui/components/web/Checkbox.tsx @@ -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 } }, diff --git a/react/features/base/ui/components/web/ContextMenu.tsx b/react/features/base/ui/components/web/ContextMenu.tsx index 5f4c4ce815..6dfa53f09e 100644 --- a/react/features/base/ui/components/web/ContextMenu.tsx +++ b/react/features/base/ui/components/web/ContextMenu.tsx @@ -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 diff --git a/react/features/base/ui/components/web/ContextMenuItem.tsx b/react/features/base/ui/components/web/ContextMenuItem.tsx index 96b7db0caa..d6ee2dc19a 100644 --- a/react/features/base/ui/components/web/ContextMenuItem.tsx +++ b/react/features/base/ui/components/web/ContextMenuItem.tsx @@ -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 } }; }); diff --git a/react/features/base/ui/components/web/Dialog.tsx b/react/features/base/ui/components/web/Dialog.tsx index e52974304c..34bed70127 100644 --- a/react/features/base/ui/components/web/Dialog.tsx +++ b/react/features/base/ui/components/web/Dialog.tsx @@ -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 }, diff --git a/react/features/base/ui/components/web/DialogWithTabs.tsx b/react/features/base/ui/components/web/DialogWithTabs.tsx index bdbf5e227b..aac38268f6 100644 --- a/react/features/base/ui/components/web/DialogWithTabs.tsx +++ b/react/features/base/ui/components/web/DialogWithTabs.tsx @@ -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 diff --git a/react/features/base/ui/components/web/Input.tsx b/react/features/base/ui/components/web/Input.tsx index d4af9f7060..c07f87d7f2 100644 --- a/react/features/base/ui/components/web/Input.tsx +++ b/react/features/base/ui/components/web/Input.tsx @@ -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': { diff --git a/react/features/base/ui/components/web/ListItem.tsx b/react/features/base/ui/components/web/ListItem.tsx index d86b4938fa..9506371989 100644 --- a/react/features/base/ui/components/web/ListItem.tsx +++ b/react/features/base/ui/components/web/ListItem.tsx @@ -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` } }, diff --git a/react/features/base/ui/components/web/MultiSelect.tsx b/react/features/base/ui/components/web/MultiSelect.tsx index 0b712dffb5..667e1eb54f 100644 --- a/react/features/base/ui/components/web/MultiSelect.tsx +++ b/react/features/base/ui/components/web/MultiSelect.tsx @@ -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', diff --git a/react/features/base/ui/components/web/Select.tsx b/react/features/base/ui/components/web/Select.tsx index 1289864a9e..7a2f1c4864 100644 --- a/react/features/base/ui/components/web/Select.tsx +++ b/react/features/base/ui/components/web/Select.tsx @@ -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': { diff --git a/react/features/base/ui/components/web/Tabs.tsx b/react/features/base/ui/components/web/Tabs.tsx index e92df387de..be39dbfb2b 100644 --- a/react/features/base/ui/components/web/Tabs.tsx +++ b/react/features/base/ui/components/web/Tabs.tsx @@ -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%', diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts index e15bcad9a0..070ea5028d 100644 --- a/react/features/base/ui/constants.web.ts +++ b/react/features/base/ui/constants.web.ts @@ -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 }, diff --git a/react/features/base/ui/functions.any.ts b/react/features/base/ui/functions.any.ts new file mode 100644 index 0000000000..51f561f041 --- /dev/null +++ b/react/features/base/ui/functions.any.ts @@ -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`; +} diff --git a/react/features/base/ui/functions.native.ts b/react/features/base/ui/functions.native.ts index 602f4b0a3e..0da60368a4 100644 --- a/react/features/base/ui/functions.native.ts +++ b/react/features/base/ui/functions.native.ts @@ -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) } }; } diff --git a/react/features/base/ui/functions.web.ts b/react/features/base/ui/functions.web.ts index a3d06c23f6..0d7f2b2f24 100644 --- a/react/features/base/ui/functions.web.ts +++ b/react/features/base/ui/functions.web.ts @@ -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 {} diff --git a/react/features/base/ui/types.ts b/react/features/base/ui/types.ts index 4871763f4e..0cd52e03c0 100644 --- a/react/features/base/ui/types.ts +++ b/react/features/base/ui/types.ts @@ -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 { diff --git a/react/features/calendar-sync/components/styles.ts b/react/features/calendar-sync/components/styles.ts index c3fd911118..fdae14373b 100644 --- a/react/features/calendar-sync/components/styles.ts +++ b/react/features/calendar-sync/components/styles.ts @@ -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' }, /** diff --git a/react/features/chat/components/web/ChatMessage.tsx b/react/features/chat/components/web/ChatMessage.tsx index 410c8963cc..d332e12349 100644 --- a/react/features/chat/components/web/ChatMessage.tsx +++ b/react/features/chat/components/web/ChatMessage.tsx @@ -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), diff --git a/react/features/chat/components/web/ClosedCaptionsTab.tsx b/react/features/chat/components/web/ClosedCaptionsTab.tsx index a49fce33b1..14c0f2cb9f 100644 --- a/react/features/chat/components/web/ClosedCaptionsTab.tsx +++ b/react/features/chat/components/web/ClosedCaptionsTab.tsx @@ -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 } }; diff --git a/react/features/chat/components/web/MessageMenu.tsx b/react/features/chat/components/web/MessageMenu.tsx index 9e35492fd5..497957293b 100644 --- a/react/features/chat/components/web/MessageMenu.tsx +++ b/react/features/chat/components/web/MessageMenu.tsx @@ -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', diff --git a/react/features/chat/components/web/MessageRecipient.tsx b/react/features/chat/components/web/MessageRecipient.tsx index 51b7db880f..0bf5f11830 100644 --- a/react/features/chat/components/web/MessageRecipient.tsx +++ b/react/features/chat/components/web/MessageRecipient.tsx @@ -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 }, diff --git a/react/features/chat/components/web/NewMessagesButton.tsx b/react/features/chat/components/web/NewMessagesButton.tsx index 6f4a370718..93f7186253 100644 --- a/react/features/chat/components/web/NewMessagesButton.tsx +++ b/react/features/chat/components/web/NewMessagesButton.tsx @@ -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' } diff --git a/react/features/chat/components/web/SubtitleMessage.tsx b/react/features/chat/components/web/SubtitleMessage.tsx index 30931752ce..85b1569d5f 100644 --- a/react/features/chat/components/web/SubtitleMessage.tsx +++ b/react/features/chat/components/web/SubtitleMessage.tsx @@ -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) }, diff --git a/react/features/conference/components/web/ConferenceTimerDisplay.tsx b/react/features/conference/components/web/ConferenceTimerDisplay.tsx index 056144a9f5..6a191ba0c9 100644 --- a/react/features/conference/components/web/ConferenceTimerDisplay.tsx +++ b/react/features/conference/components/web/ConferenceTimerDisplay.tsx @@ -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)', diff --git a/react/features/conference/components/web/LeaveReasonDialog.web.tsx b/react/features/conference/components/web/LeaveReasonDialog.web.tsx index f9aa22bdb7..8855b1c458 100644 --- a/react/features/conference/components/web/LeaveReasonDialog.web.tsx +++ b/react/features/conference/components/web/LeaveReasonDialog.web.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles()(theme => { }, text: { - fontSize: '20px' + fontSize: '1.25rem' } }; }); diff --git a/react/features/conference/components/web/SubjectText.tsx b/react/features/conference/components/web/SubjectText.tsx index c21868876f..00e4611064 100644 --- a/react/features/conference/components/web/SubjectText.tsx +++ b/react/features/conference/components/web/SubjectText.tsx @@ -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)', diff --git a/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx b/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx index 08a81bfeab..3bc02f054f 100644 --- a/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx +++ b/react/features/connection-indicator/components/web/BandwidthSettingsDialog.tsx @@ -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) }, diff --git a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx index cf99fc2f0b..7e1b0208e2 100644 --- a/react/features/connection-indicator/components/web/ConnectionIndicator.tsx +++ b/react/features/connection-indicator/components/web/ConnectionIndicator.tsx @@ -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 { return (
+ style = {{ fontSize: pixelsToRem(iconSize) }}> { t('videothumbnail.connectionInfo') } { }, connectionStatsTable: { '&, & > table': { - fontSize: '12px', + fontSize: '0.75rem', fontWeight: 400, '& td': { diff --git a/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx b/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx index 1856ea0e80..20fc528764 100644 --- a/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx +++ b/react/features/deep-linking/components/DeepLinkingDesktopPage.web.tsx @@ -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 diff --git a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx b/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx index 4b4e4c2a9d..40d36584f1 100644 --- a/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx +++ b/react/features/deep-linking/components/DeepLinkingMobilePage.web.tsx @@ -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', diff --git a/react/features/device-selection/components/DeviceHidContainer.web.tsx b/react/features/device-selection/components/DeviceHidContainer.web.tsx index b151ea07ac..40ef8582f7 100644 --- a/react/features/device-selection/components/DeviceHidContainer.web.tsx +++ b/react/features/device-selection/components/DeviceHidContainer.web.tsx @@ -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) }, diff --git a/react/features/device-selection/components/DeviceSelector.web.tsx b/react/features/device-selection/components/DeviceSelector.web.tsx index a1d042fae0..6b30ff4402 100644 --- a/react/features/device-selection/components/DeviceSelector.web.tsx +++ b/react/features/device-selection/components/DeviceSelector.web.tsx @@ -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}` } }; diff --git a/react/features/display-name/components/web/DisplayName.tsx b/react/features/display-name/components/web/DisplayName.tsx index 7f028394d3..b89428ffac 100644 --- a/react/features/display-name/components/web/DisplayName.tsx +++ b/react/features/display-name/components/web/DisplayName.tsx @@ -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 } }; diff --git a/react/features/display-name/components/web/DisplayNameBadge.tsx b/react/features/display-name/components/web/DisplayNameBadge.tsx index 4fcc688201..765fb22721 100644 --- a/react/features/display-name/components/web/DisplayNameBadge.tsx +++ b/react/features/display-name/components/web/DisplayNameBadge.tsx @@ -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' } diff --git a/react/features/display-name/components/web/StageParticipantNameLabel.tsx b/react/features/display-name/components/web/StageParticipantNameLabel.tsx index 1eb9242890..67acfc88ed 100644 --- a/react/features/display-name/components/web/StageParticipantNameLabel.tsx +++ b/react/features/display-name/components/web/StageParticipantNameLabel.tsx @@ -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()((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()((theme, options: IOpti return { badgeContainer: { - ...withPixelLineHeight(typography), + ...typography, alignItems: 'center', display: 'inline-flex', justifyContent: 'center', diff --git a/react/features/display-name/components/web/styles.ts b/react/features/display-name/components/web/styles.ts index 734a4a2603..f00d25d63e 100644 --- a/react/features/display-name/components/web/styles.ts +++ b/react/features/display-name/components/web/styles.ts @@ -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)); } diff --git a/react/features/dynamic-branding/functions.web.ts b/react/features/dynamic-branding/functions.web.ts index d40c2c6a4d..6923c2f9b6 100644 --- a/react/features/dynamic-branding/functions.web.ts +++ b/react/features/dynamic-branding/functions.web.ts @@ -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)[variant]); + } } const newBreakpoints = { ...breakpoints }; diff --git a/react/features/e2ee/components/E2EESection.tsx b/react/features/e2ee/components/E2EESection.tsx index e245eaed7b..cc2b1be501 100644 --- a/react/features/e2ee/components/E2EESection.tsx +++ b/react/features/e2ee/components/E2EESection.tsx @@ -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' } } diff --git a/react/features/e2ee/components/ParticipantVerificationDialog.tsx b/react/features/e2ee/components/ParticipantVerificationDialog.tsx index b64dfb9954..a336b9f479 100644 --- a/react/features/e2ee/components/ParticipantVerificationDialog.tsx +++ b/react/features/e2ee/components/ParticipantVerificationDialog.tsx @@ -34,7 +34,7 @@ const useStyles = makeStyles()(() => { margin: '16px' }, emoji: { - fontSize: '40px', + fontSize: '2.5rem', margin: '12px' } }; diff --git a/react/features/feedback/components/FeedbackDialog.web.tsx b/react/features/feedback/components/FeedbackDialog.web.tsx index e56ecb988d..ba96f54b6d 100644 --- a/react/features/feedback/components/FeedbackDialog.web.tsx +++ b/react/features/feedback/components/FeedbackDialog.web.tsx @@ -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: { diff --git a/react/features/file-sharing/components/web/FileSharing.tsx b/react/features/file-sharing/components/web/FileSharing.tsx index 13955e3e5e..6f88024bf7 100644 --- a/react/features/file-sharing/components/web/FileSharing.tsx +++ b/react/features/file-sharing/components/web/FileSharing.tsx @@ -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' diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx index e70b164a00..e0474f1a35 100644 --- a/react/features/filmstrip/components/web/Filmstrip.tsx +++ b/react/features/filmstrip/components/web/Filmstrip.tsx @@ -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', diff --git a/react/features/filmstrip/components/web/PinnedIndicator.tsx b/react/features/filmstrip/components/web/PinnedIndicator.tsx index c73b23ef38..5faca7dba3 100644 --- a/react/features/filmstrip/components/web/PinnedIndicator.tsx +++ b/react/features/filmstrip/components/web/PinnedIndicator.tsx @@ -71,7 +71,7 @@ const PinnedIndicator = ({ id = { `pin-indicator-${participantId}` }>
diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx index 12e789f698..c2d5adff2f 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.tsx +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.tsx @@ -68,7 +68,7 @@ const RaisedHandIndicator = ({ diff --git a/react/features/invite/components/add-people-dialog/web/DialInLimit.tsx b/react/features/invite/components/add-people-dialog/web/DialInLimit.tsx index 0d97c7ea00..4d9d14b4ab 100644 --- a/react/features/invite/components/add-people-dialog/web/DialInLimit.tsx +++ b/react/features/invite/components/add-people-dialog/web/DialInLimit.tsx @@ -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`, diff --git a/react/features/invite/components/add-people-dialog/web/DialInSection.tsx b/react/features/invite/components/add-people-dialog/web/DialInSection.tsx index 4efaadefeb..9baf30b652 100644 --- a/react/features/invite/components/add-people-dialog/web/DialInSection.tsx +++ b/react/features/invite/components/add-people-dialog/web/DialInSection.tsx @@ -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': { diff --git a/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx b/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx index becb45bfa5..efec4ec8ad 100644 --- a/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx +++ b/react/features/invite/components/dial-in-summary/web/ConferenceID.tsx @@ -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 } }; }); diff --git a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx b/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx index 25c37bb4cd..cd1c16adbe 100644 --- a/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx +++ b/react/features/invite/components/dial-in-summary/web/DialInSummary.tsx @@ -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 } }; }; diff --git a/react/features/large-video/components/ScreenSharePlaceholder.web.tsx b/react/features/large-video/components/ScreenSharePlaceholder.web.tsx index 1f8323ee66..0e60041e43 100644 --- a/react/features/large-video/components/ScreenSharePlaceholder.web.tsx +++ b/react/features/large-video/components/ScreenSharePlaceholder.web.tsx @@ -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, diff --git a/react/features/notifications/components/web/Notification.tsx b/react/features/notifications/components/web/Notification.tsx index d57dc1c343..2a816f7800 100644 --- a/react/features/notifications/components/web/Notification.tsx +++ b/react/features/notifications/components/web/Notification.tsx @@ -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', diff --git a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx index 891c1b8b50..243ac3a151 100644 --- a/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx +++ b/react/features/participants-pane/components/breakout-rooms/components/web/CollapsibleRoom.tsx @@ -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: { diff --git a/react/features/participants-pane/components/web/CurrentVisitorsList.tsx b/react/features/participants-pane/components/web/CurrentVisitorsList.tsx index ec02c50da7..d3be9ace92 100644 --- a/react/features/participants-pane/components/web/CurrentVisitorsList.tsx +++ b/react/features/participants-pane/components/web/CurrentVisitorsList.tsx @@ -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 }, diff --git a/react/features/participants-pane/components/web/FooterContextMenu.tsx b/react/features/participants-pane/components/web/FooterContextMenu.tsx index 856b0eecfe..63512d63e3 100644 --- a/react/features/participants-pane/components/web/FooterContextMenu.tsx +++ b/react/features/participants-pane/components/web/FooterContextMenu.tsx @@ -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', diff --git a/react/features/participants-pane/components/web/LobbyParticipants.tsx b/react/features/participants-pane/components/web/LobbyParticipants.tsx index 2681ac4a68..5d30996f4d 100644 --- a/react/features/participants-pane/components/web/LobbyParticipants.tsx +++ b/react/features/participants-pane/components/web/LobbyParticipants.tsx @@ -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' } diff --git a/react/features/participants-pane/components/web/MeetingParticipants.tsx b/react/features/participants-pane/components/web/MeetingParticipants.tsx index 0956da5395..21e32a3d5b 100644 --- a/react/features/participants-pane/components/web/MeetingParticipants.tsx +++ b/react/features/participants-pane/components/web/MeetingParticipants.tsx @@ -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 } }, diff --git a/react/features/participants-pane/components/web/ParticipantItem.tsx b/react/features/participants-pane/components/web/ParticipantItem.tsx index 2eb173a1ca..7cf4c1692f 100644 --- a/react/features/participants-pane/components/web/ParticipantItem.tsx +++ b/react/features/participants-pane/components/web/ParticipantItem.tsx @@ -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 }, diff --git a/react/features/participants-pane/components/web/ParticipantsCounter.tsx b/react/features/participants-pane/components/web/ParticipantsCounter.tsx index 3c9e59173c..5598a9babd 100644 --- a/react/features/participants-pane/components/web/ParticipantsCounter.tsx +++ b/react/features/participants-pane/components/web/ParticipantsCounter.tsx @@ -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', diff --git a/react/features/participants-pane/components/web/VisitorsList.tsx b/react/features/participants-pane/components/web/VisitorsList.tsx index eb6660721a..23ecaea63a 100644 --- a/react/features/participants-pane/components/web/VisitorsList.tsx +++ b/react/features/participants-pane/components/web/VisitorsList.tsx @@ -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' } diff --git a/react/features/polls/components/web/PollAnswer.tsx b/react/features/polls/components/web/PollAnswer.tsx index bac4bd6da8..8f7d782c20 100644 --- a/react/features/polls/components/web/PollAnswer.tsx +++ b/react/features/polls/components/web/PollAnswer.tsx @@ -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: { diff --git a/react/features/polls/components/web/PollCreate.tsx b/react/features/polls/components/web/PollCreate.tsx index 43918a746f..b8bf329da1 100644 --- a/react/features/polls/components/web/PollCreate.tsx +++ b/react/features/polls/components/web/PollCreate.tsx @@ -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, diff --git a/react/features/polls/components/web/PollResults.tsx b/react/features/polls/components/web/PollResults.tsx index 2b58d02b24..fb0da5b51f 100644 --- a/react/features/polls/components/web/PollResults.tsx +++ b/react/features/polls/components/web/PollResults.tsx @@ -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 } } diff --git a/react/features/polls/components/web/PollsList.tsx b/react/features/polls/components/web/PollsList.tsx index 327e6f0f06..f9e49d822d 100644 --- a/react/features/polls/components/web/PollsList.tsx +++ b/react/features/polls/components/web/PollsList.tsx @@ -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' diff --git a/react/features/prejoin/components/web/Prejoin.tsx b/react/features/prejoin/components/web/Prejoin.tsx index 3ca7d50ac1..544025803c 100644 --- a/react/features/prejoin/components/web/Prejoin.tsx +++ b/react/features/prejoin/components/web/Prejoin.tsx @@ -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', diff --git a/react/features/prejoin/components/web/country-picker/CountryPicker.tsx b/react/features/prejoin/components/web/country-picker/CountryPicker.tsx index 96f37884fd..b16800b523 100644 --- a/react/features/prejoin/components/web/country-picker/CountryPicker.tsx +++ b/react/features/prejoin/components/web/country-picker/CountryPicker.tsx @@ -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 } }; }); diff --git a/react/features/prejoin/components/web/country-picker/CountryRow.tsx b/react/features/prejoin/components/web/country-picker/CountryRow.tsx index 456b44e915..2b4e60dc53 100644 --- a/react/features/prejoin/components/web/country-picker/CountryRow.tsx +++ b/react/features/prejoin/components/web/country-picker/CountryRow.tsx @@ -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', diff --git a/react/features/prejoin/components/web/country-picker/CountrySelector.tsx b/react/features/prejoin/components/web/country-picker/CountrySelector.tsx index 0a8c643250..97db7c7c0c 100644 --- a/react/features/prejoin/components/web/country-picker/CountrySelector.tsx +++ b/react/features/prejoin/components/web/country-picker/CountrySelector.tsx @@ -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, diff --git a/react/features/prejoin/components/web/dialogs/CallingDialog.tsx b/react/features/prejoin/components/web/dialogs/CallingDialog.tsx index ec17b1fb9c..5ebf3d93aa 100644 --- a/react/features/prejoin/components/web/dialogs/CallingDialog.tsx +++ b/react/features/prejoin/components/web/dialogs/CallingDialog.tsx @@ -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` } } diff --git a/react/features/prejoin/components/web/dialogs/DialInDialog.tsx b/react/features/prejoin/components/web/dialogs/DialInDialog.tsx index 4fb7d9e31b..7c5f283173 100644 --- a/react/features/prejoin/components/web/dialogs/DialInDialog.tsx +++ b/react/features/prejoin/components/web/dialogs/DialInDialog.tsx @@ -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': { diff --git a/react/features/prejoin/components/web/preview/DeviceStatus.tsx b/react/features/prejoin/components/web/preview/DeviceStatus.tsx index 5faf209edf..f1d0e1415d 100644 --- a/react/features/prejoin/components/web/preview/DeviceStatus.tsx +++ b/react/features/prejoin/components/web/preview/DeviceStatus.tsx @@ -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), diff --git a/react/features/reactions/components/web/ReactionsMenu.tsx b/react/features/reactions/components/web/ReactionsMenu.tsx index 11f0830d3c..8266a08565 100644 --- a/react/features/reactions/components/web/ReactionsMenu.tsx +++ b/react/features/reactions/components/web/ReactionsMenu.tsx @@ -98,8 +98,8 @@ const useStyles = makeStyles()((theme, props: IProps) => { 'span.emoji': { width: '24px', height: '24px', - lineHeight: '24px', - fontSize: '16px' + lineHeight: '1.5rem', + fontSize: '1rem' } } }, diff --git a/react/features/recording/components/LiveStream/web/StreamKeyForm.tsx b/react/features/recording/components/LiveStream/web/StreamKeyForm.tsx index cd24632f46..44e58f1faa 100644 --- a/react/features/recording/components/LiveStream/web/StreamKeyForm.tsx +++ b/react/features/recording/components/LiveStream/web/StreamKeyForm.tsx @@ -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), diff --git a/react/features/recording/components/Recording/web/HighlightButton.tsx b/react/features/recording/components/Recording/web/HighlightButton.tsx index d20d027935..30c8b0b022 100644 --- a/react/features/recording/components/Recording/web/HighlightButton.tsx +++ b/react/features/recording/components/Recording/web/HighlightButton.tsx @@ -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', diff --git a/react/features/salesforce/components/web/RecordItem.tsx b/react/features/salesforce/components/web/RecordItem.tsx index 5058ba50cf..f26fd501fd 100644 --- a/react/features/salesforce/components/web/RecordItem.tsx +++ b/react/features/salesforce/components/web/RecordItem.tsx @@ -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' } }; }); diff --git a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx index 45605751e3..f8b38a7ef9 100644 --- a/react/features/salesforce/components/web/SalesforceLinkDialog.tsx +++ b/react/features/salesforce/components/web/SalesforceLinkDialog.tsx @@ -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%', diff --git a/react/features/settings/components/web/CalendarTab.tsx b/react/features/settings/components/web/CalendarTab.tsx index e3da2ac1b0..544e4b3018 100644 --- a/react/features/settings/components/web/CalendarTab.tsx +++ b/react/features/settings/components/web/CalendarTab.tsx @@ -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: { diff --git a/react/features/settings/components/web/ModeratorTab.tsx b/react/features/settings/components/web/ModeratorTab.tsx index fd04f811a1..9e8a472af9 100644 --- a/react/features/settings/components/web/ModeratorTab.tsx +++ b/react/features/settings/components/web/ModeratorTab.tsx @@ -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) }, diff --git a/react/features/settings/components/web/NotificationsTab.tsx b/react/features/settings/components/web/NotificationsTab.tsx index 2456539356..317451a87c 100644 --- a/react/features/settings/components/web/NotificationsTab.tsx +++ b/react/features/settings/components/web/NotificationsTab.tsx @@ -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) }, diff --git a/react/features/settings/components/web/ProfileTab.tsx b/react/features/settings/components/web/ProfileTab.tsx index 836ad05cb2..2428aef3ea 100644 --- a/react/features/settings/components/web/ProfileTab.tsx +++ b/react/features/settings/components/web/ProfileTab.tsx @@ -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) }, diff --git a/react/features/settings/components/web/ShortcutsTab.tsx b/react/features/settings/components/web/ShortcutsTab.tsx index bae5862cd8..379924b280 100644 --- a/react/features/settings/components/web/ShortcutsTab.tsx +++ b/react/features/settings/components/web/ShortcutsTab.tsx @@ -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` } diff --git a/react/features/settings/components/web/video/VideoSettingsContent.tsx b/react/features/settings/components/web/video/VideoSettingsContent.tsx index c77be499e4..3bc5286bf5 100644 --- a/react/features/settings/components/web/video/VideoSettingsContent.tsx +++ b/react/features/settings/components/web/video/VideoSettingsContent.tsx @@ -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', diff --git a/react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx b/react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx index 6efea03bc1..c041386c77 100644 --- a/react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx +++ b/react/features/speaker-stats/components/web/FaceExpressionsSwitch.tsx @@ -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 } }; }); diff --git a/react/features/speaker-stats/components/web/SpeakerStatsList.tsx b/react/features/speaker-stats/components/web/SpeakerStatsList.tsx index ffb34a32cd..b7e162bfee 100644 --- a/react/features/speaker-stats/components/web/SpeakerStatsList.tsx +++ b/react/features/speaker-stats/components/web/SpeakerStatsList.tsx @@ -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': { diff --git a/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx b/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx index fa43b7baca..a807a87f04 100644 --- a/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx +++ b/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx @@ -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 } } } diff --git a/react/features/subtitles/components/web/Captions.tsx b/react/features/subtitles/components/web/Captions.tsx index b91e8e7674..91ffe6f104 100644 --- a/react/features/subtitles/components/web/Captions.tsx +++ b/react/features/subtitles/components/web/Captions.tsx @@ -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, diff --git a/react/features/subtitles/components/web/LanguageListItem.tsx b/react/features/subtitles/components/web/LanguageListItem.tsx index 4b9a7511ab..4958122da5 100644 --- a/react/features/subtitles/components/web/LanguageListItem.tsx +++ b/react/features/subtitles/components/web/LanguageListItem.tsx @@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => { display: 'flex', color: theme.palette.text02, alignItems: 'center', - fontSize: '14px', + fontSize: '0.875rem', cursor: 'pointer', padding: '5px 0', '&:hover': { diff --git a/react/features/subtitles/components/web/LanguageSelector.tsx b/react/features/subtitles/components/web/LanguageSelector.tsx index 8f7960ba57..04ceb35685 100644 --- a/react/features/subtitles/components/web/LanguageSelector.tsx +++ b/react/features/subtitles/components/web/LanguageSelector.tsx @@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; import { IReduxState } from '../../../app/types'; -import { withPixelLineHeight } from '../../../base/styles/functions.web'; import Select from '../../../base/ui/components/web/Select'; import { setRequestingSubtitles } from '../../actions.any'; import { getAvailableSubtitlesLanguages } from '../../functions.any'; @@ -28,7 +27,7 @@ const useStyles = makeStyles()(theme => { minWidth: 200 }, label: { - ...withPixelLineHeight(theme.typography.bodyShortRegular), + ...theme.typography.bodyShortRegular, color: theme.palette.text01, whiteSpace: 'nowrap' } diff --git a/react/features/subtitles/components/web/LanguageSelectorDialog.tsx b/react/features/subtitles/components/web/LanguageSelectorDialog.tsx index 9e8e413150..84dbf85751 100644 --- a/react/features/subtitles/components/web/LanguageSelectorDialog.tsx +++ b/react/features/subtitles/components/web/LanguageSelectorDialog.tsx @@ -17,7 +17,7 @@ import LanguageList from './LanguageList'; const useStyles = makeStyles()(theme => { return { paragraphWrapper: { - fontSize: 14, + fontSize: '0.875rem', margin: '10px 0px', color: theme.palette.text01 }, diff --git a/react/features/toolbox/components/web/Drawer.tsx b/react/features/toolbox/components/web/Drawer.tsx index 93f1ad376a..a3b4cac47e 100644 --- a/react/features/toolbox/components/web/Drawer.tsx +++ b/react/features/toolbox/components/web/Drawer.tsx @@ -67,7 +67,7 @@ const useStyles = makeStyles()(theme => { color: theme.palette.text01, cursor: 'pointer', display: 'flex', - fontSize: '16px', + fontSize: '1rem', '& div': { display: 'flex', diff --git a/react/features/video-quality/components/VideoQualitySlider.web.tsx b/react/features/video-quality/components/VideoQualitySlider.web.tsx index a9ddd68665..aa2683e33e 100644 --- a/react/features/video-quality/components/VideoQualitySlider.web.tsx +++ b/react/features/video-quality/components/VideoQualitySlider.web.tsx @@ -12,7 +12,6 @@ import { setAudioOnly } from '../../base/audio-only/actions'; import { translate } from '../../base/i18n/functions'; import { setLastN } from '../../base/lastn/actions'; import { getLastNForQualityLevel } from '../../base/lastn/functions'; -import { withPixelLineHeight } from '../../base/styles/functions.web'; import { setPreferredVideoQuality } from '../actions'; import { DEFAULT_LAST_N, VIDEO_QUALITY_LEVELS } from '../constants'; import logger from '../logger'; @@ -92,7 +91,7 @@ const styles = (theme: Theme) => { color: theme.palette.text01 }, dialogDetails: { - ...withPixelLineHeight(theme.typography.bodyShortRegularLarge), + ...theme.typography.bodyShortRegularLarge, marginBottom: 16 }, dialogContents: { @@ -100,7 +99,7 @@ const styles = (theme: Theme) => { padding: '16px 16px 48px 16px' }, sliderDescription: { - ...withPixelLineHeight(theme.typography.heading6), + ...theme.typography.heading6, display: 'flex', justifyContent: 'space-between', diff --git a/react/features/virtual-background/components/UploadImageButton.tsx b/react/features/virtual-background/components/UploadImageButton.tsx index 5feb07ded9..2b33f4cab5 100644 --- a/react/features/virtual-background/components/UploadImageButton.tsx +++ b/react/features/virtual-background/components/UploadImageButton.tsx @@ -6,7 +6,6 @@ import { v4 as uuidv4 } from 'uuid'; import { translate } from '../../base/i18n/functions'; import Icon from '../../base/icons/components/Icon'; import { IconPlus } from '../../base/icons/svg'; -import { withPixelLineHeight } from '../../base/styles/functions.web'; import { type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants'; import { resizeImage } from '../functions'; import logger from '../logger'; @@ -42,7 +41,7 @@ interface IProps extends WithTranslation { const useStyles = makeStyles()(theme => { return { label: { - ...withPixelLineHeight(theme.typography.bodyShortBold), + ...theme.typography.bodyShortBold, color: theme.palette.link01, marginBottom: theme.spacing(3), cursor: 'pointer', diff --git a/react/features/virtual-background/components/VirtualBackgrounds.tsx b/react/features/virtual-background/components/VirtualBackgrounds.tsx index bd04347d4a..8604c4d689 100644 --- a/react/features/virtual-background/components/VirtualBackgrounds.tsx +++ b/react/features/virtual-background/components/VirtualBackgrounds.tsx @@ -12,7 +12,6 @@ import { IReduxState, IStore } from '../../app/types'; import { translate } from '../../base/i18n/functions'; import Icon from '../../base/icons/components/Icon'; import { IconCloseLarge } from '../../base/icons/svg'; -import { withPixelLineHeight } from '../../base/styles/functions.web'; import Tooltip from '../../base/tooltip/components/Tooltip'; import Spinner from '../../base/ui/components/web/Spinner'; import { BACKGROUNDS_LIMIT, IMAGES, type Image, VIRTUAL_BACKGROUND_TYPE } from '../constants'; @@ -107,7 +106,7 @@ const useStyles = makeStyles()(theme => { alignItems: 'center', justifyContent: 'center', textAlign: 'center', - ...withPixelLineHeight(theme.typography.labelBold), + ...theme.typography.labelBold, color: theme.palette.text01, objectFit: 'cover', diff --git a/react/features/visitors/components/web/VisitorsQueue.tsx b/react/features/visitors/components/web/VisitorsQueue.tsx index 5b6ab3d640..8f430ebc11 100644 --- a/react/features/visitors/components/web/VisitorsQueue.tsx +++ b/react/features/visitors/components/web/VisitorsQueue.tsx @@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux'; import { makeStyles } from 'tss-react/mui'; import { hangup } from '../../../base/connection/actions.web'; -import { withPixelLineHeight } from '../../../base/styles/functions'; import Button from '../../../base/ui/components/web/Button'; import LoadingIndicator from '../../../base/ui/components/web/Spinner'; @@ -57,7 +56,7 @@ const useStyles = makeStyles()(theme => { width: '100%' }, roomName: { - ...withPixelLineHeight(theme.typography.heading5), + ...theme.typography.heading5, color: theme.palette.text01, marginBottom: theme.spacing(4), overflow: 'hidden', diff --git a/react/features/welcome/constants.tsx b/react/features/welcome/constants.tsx index a8586c6452..a9b0664e70 100644 --- a/react/features/welcome/constants.tsx +++ b/react/features/welcome/constants.tsx @@ -12,7 +12,7 @@ export const tabBarOptions = { tabBarActiveTintColor: ACTIVE_TAB_COLOR, tabBarInactiveTintColor: INACTIVE_TAB_COLOR, tabBarLabelStyle: { - fontSize: 12 + fontSize: 12, }, tabBarStyle: { backgroundColor: BaseTheme.palette.ui01 diff --git a/resources/custom-theme/custom-theme.json b/resources/custom-theme/custom-theme.json index a5e22c9a2d..c7fd05958b 100644 --- a/resources/custom-theme/custom-theme.json +++ b/resources/custom-theme/custom-theme.json @@ -1,153 +1,153 @@ -{ - "spacing": [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ], - "breakpoints": { - "values": { - "0": 0, - "320": 320, - "400": 400, - "480": 480 - } - }, - "palette": { - "uiBackground": "#040404", - "ui01": "#141414", - "ui02": "#292929", - "ui03": "#3D3D3D", - "ui04": "#525252", - "ui05": "#666", - "action01": "#0056E0", - "action01Hover": "#246FE5", - "action01Active": "#0045B3", - "disabled01": "#00225A", - "action02": "#3D3D3D", - "action02Hover": "#525252", - "action02Active": "#292929", - "action03": "transparent", - "action03Hover": "#525252", - "action03Active": "#292929", - "actionDanger": "#CB2233", - "actionDangerHover": "#E04757", - "actionDangerActive": "#A21B29", - "bottomSheet": "#111111", - "text01": "#FFF", - "text02": "#C2C2C2", - "text03": "#858585", - "text04": "#AAAAAA", - "textError": "#E04757", - "icon01": "#FFF", - "icon02": "#C2C2C2", - "icon03": "#858585", - "iconError": "#E04757", - "field01": "#040404", - "link01": "#669AEC", - "link01Hover": "#99BBF3", - "link01Active": "#246FE5", - "success01": "#1EC26A", - "success02": "#1EC26A", - "warning01": "#F8AE1A", - "warning02": "#ED9E1B", - "support01": "#FF9B42", - "support02": "#F96E57", - "support03": "#DF486F", - "support04": "#B23683", - "support05": "#73348C", - "support06": "#6A50D3", - "support07": "#4380E2", - "support08": "#00A8B3", - "support09": "#2AA076" - }, - "typography": { - "font": { - "weightRegular": "400", - "weightSemiBold": "600" - }, - "labelRegular": { - "fontSize": 12, - "lineHeight": 16, - "fontWeight": "400", - "letterSpacing": 0.16 - }, - "labelBold": { - "fontSize": 12, - "lineHeight": 16, - "fontWeight": "600", - "letterSpacing": 0.16 - }, - "bodyShortRegular": { - "fontSize": 14, - "lineHeight": 18, - "fontWeight": "400", - "letterSpacing": 0 - }, - "bodyShortBold": { - "fontSize": 14, - "lineHeight": 18, - "fontWeight": "600", - "letterSpacing": 0 - }, - "bodyShortRegularLarge": { - "fontSize": 16, - "lineHeight": 24, - "fontWeight": "400", - "letterSpacing": 0 - }, - "bodyShortBoldLarge": { - "fontSize": 16, - "lineHeight": 24, - "fontWeight": "600", - "letterSpacing": 0 - }, - "bodyLongRegular": { - "fontSize": 14, - "lineHeight": 24, - "fontWeight": "400", - "letterSpacing": 0 - }, - "bodyLongBold": { - "fontSize": 14, - "lineHeight": 24, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading1": { - "fontSize": 54, - "lineHeight": 64, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading2": { - "fontSize": 42, - "lineHeight": 50, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading3": { - "fontSize": 32, - "lineHeight": 40, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading4": { - "fontSize": 28, - "lineHeight": 36, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading5": { - "fontSize": 20, - "lineHeight": 28, - "fontWeight": "600", - "letterSpacing": 0 - }, - "heading6": { - "fontSize": 16, - "lineHeight": 26, - "fontWeight": "600", - "letterSpacing": 0 - } - }, - "shape": { - "borderRadius": 6, - "boxShadow": "inset 0px -1px 0px rgba(255, 255, 255, 0.15)" - } +{ + "spacing": [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80, 88, 96, 104, 112, 120, 128 ], + "breakpoints": { + "values": { + "0": 0, + "320": 320, + "400": 400, + "480": 480 + } + }, + "palette": { + "uiBackground": "#040404", + "ui01": "#141414", + "ui02": "#292929", + "ui03": "#3D3D3D", + "ui04": "#525252", + "ui05": "#666", + "action01": "#0056E0", + "action01Hover": "#246FE5", + "action01Active": "#0045B3", + "disabled01": "#00225A", + "action02": "#3D3D3D", + "action02Hover": "#525252", + "action02Active": "#292929", + "action03": "transparent", + "action03Hover": "#525252", + "action03Active": "#292929", + "actionDanger": "#CB2233", + "actionDangerHover": "#E04757", + "actionDangerActive": "#A21B29", + "bottomSheet": "#111111", + "text01": "#FFF", + "text02": "#C2C2C2", + "text03": "#858585", + "text04": "#AAAAAA", + "textError": "#E04757", + "icon01": "#FFF", + "icon02": "#C2C2C2", + "icon03": "#858585", + "iconError": "#E04757", + "field01": "#040404", + "link01": "#669AEC", + "link01Hover": "#99BBF3", + "link01Active": "#246FE5", + "success01": "#1EC26A", + "success02": "#1EC26A", + "warning01": "#F8AE1A", + "warning02": "#ED9E1B", + "support01": "#FF9B42", + "support02": "#F96E57", + "support03": "#DF486F", + "support04": "#B23683", + "support05": "#73348C", + "support06": "#6A50D3", + "support07": "#4380E2", + "support08": "#00A8B3", + "support09": "#2AA076" + }, + "typography": { + "font": { + "weightRegular": "400", + "weightSemiBold": "600" + }, + "labelRegular": { + "fontSize": "0.75rem", + "lineHeight": "1rem", + "fontWeight": "400", + "letterSpacing": 0.16 + }, + "labelBold": { + "fontSize": "0.75rem", + "lineHeight": "1rem", + "fontWeight": "600", + "letterSpacing": 0.16 + }, + "bodyShortRegular": { + "fontSize": "0.875rem", + "lineHeight": "1.125rem", + "fontWeight": "400", + "letterSpacing": 0 + }, + "bodyShortBold": { + "fontSize": "0.875rem", + "lineHeight": "1.125rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "bodyShortRegularLarge": { + "fontSize": "1rem", + "lineHeight": "1.5rem", + "fontWeight": "400", + "letterSpacing": 0 + }, + "bodyShortBoldLarge": { + "fontSize": "1rem", + "lineHeight": "1.5rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "bodyLongRegular": { + "fontSize": "0.875rem", + "lineHeight": "1.5rem", + "fontWeight": "400", + "letterSpacing": 0 + }, + "bodyLongBold": { + "fontSize": "0.875rem", + "lineHeight": "1.5rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading1": { + "fontSize": "3.375rem", + "lineHeight": "4rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading2": { + "fontSize": "2.625rem", + "lineHeight": "3.125rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading3": { + "fontSize": "2rem", + "lineHeight": "2.5rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading4": { + "fontSize": "1.75rem", + "lineHeight": "2.25rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading5": { + "fontSize": "1.25rem", + "lineHeight": "1.75rem", + "fontWeight": "600", + "letterSpacing": 0 + }, + "heading6": { + "fontSize": "1rem", + "lineHeight": "1.625rem", + "fontWeight": "600", + "letterSpacing": 0 + } + }, + "shape": { + "borderRadius": 6, + "boxShadow": "inset 0px -1px 0px rgba(255, 255, 255, 0.15)" + } } \ No newline at end of file