feat: convert px to rem (#145)

* feat: convert px to rem

package.json

@@ -101,8 +101,8 @@
 		"@fontsource/roboto": "^4.5.7",
 		"@sentry/browser": "^6.17.7",
 		"@tinymce/tinymce-react": "^3.13.0",
-		"@zextras/carbonio-design-system": "^0.5.0",
-		"@zextras/carbonio-ui-preview": "^0.2.3",
+		"@zextras/carbonio-design-system": "^0.5.1",
+		"@zextras/carbonio-ui-preview": "^0.2.4",
 		"darkreader": "4.9.46",
 		"history": "^5.2.0",
 		"i18next": "21.6.10",

src/boot/theme-provider.tsx

@@ -32,10 +32,10 @@ const themeSizes = (
 			return (theme: any): any => {
 				// eslint-disable-next-line no-param-reassign
 				theme.sizes.font = {
-					extrasmall: '10px',
-					small: '12px',
-					medium: '14px',
-					large: '16px'
+					extrasmall: '0.625rem',
+					small: '0.75rem',
+					medium: '0.875rem',
+					large: '1rem'
 				};
 				return theme;
 			};
@@ -44,10 +44,10 @@ const themeSizes = (
 			return (theme: any): any => {
 				// eslint-disable-next-line no-param-reassign
 				theme.sizes.font = {
-					extrasmall: '14px',
-					small: '16px',
-					medium: '18px',
-					large: '20px'
+					extrasmall: '0.875rem',
+					small: '1rem',
+					medium: '1.125rem',
+					large: '1.25rem'
 				};
 				return theme;
 			};
@@ -56,10 +56,10 @@ const themeSizes = (
 			return (theme: any): any => {
 				// eslint-disable-next-line no-param-reassign
 				theme.sizes.font = {
-					extrasmall: '16px',
-					small: '18px',
-					medium: '20px',
-					large: '22px'
+					extrasmall: '1rem',
+					small: '1.125rem',
+					medium: '1.25rem',
+					large: '1.375rem'
 				};
 				return theme;
 			};
@@ -70,10 +70,10 @@ const themeSizes = (
 			return (theme: any): any => {
 				// eslint-disable-next-line no-param-reassign
 				theme.sizes.font = {
-					extrasmall: '12px',
-					small: '14px',
-					medium: '16px',
-					large: '18px'
+					extrasmall: '0.75rem',
+					small: '0.875rem',
+					medium: '1rem',
+					large: '1.125rem'
 				};
 				return theme;
 			};
@@ -120,10 +120,10 @@ export const ThemeProvider: FC = ({ children }) => {
 		fonts: (theme) => {
 			// eslint-disable-next-line no-param-reassign
 			theme.sizes.font = {
-				extrasmall: '12px',
-				small: '14px',
-				medium: '16px',
-				large: '18px'
+				extrasmall: '0.75rem',
+				small: '0.875rem',
+				medium: '1rem',
+				large: '1.125rem'
 			};
 			return theme;
 		}

src/reporting/feedback.tsx

@@ -35,7 +35,7 @@ import { feedback } from './functions';
 
 const TextArea = styled.textarea<{ size?: string }>`
 	width: 100%;
-	min-height: 128px;
+	min-height: 8rem;
 	box-sizing: border-box;
 	outline: none;
 	border: none;
@@ -64,24 +64,23 @@ const ButtonContainer = styled(Container)`
 
 const TAContainer = styled(Container)`
 	background: ${({ theme }): string => theme.palette.gray5.regular};
-	border-radius: 2px 2px 0 0;
-	padding: 8px;
+	border-radius: 0.125rem 0.125rem 0 0;
+	padding: 0.5rem;
 	transition: height 0.4s ease;
 	height: auto;
 	max-height: 50%;
 	&:focus-within {
 		background: ${({ theme }): string => theme.palette.gray4.regular};
 		outline: none;
-		border-bottom: 1px solid ${({ theme }): string => theme.palette.primary.regular};
+		border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.primary.regular};
 	}
 `;
 
 const SubHeadingText = styled(Text)<{ lineHeight?: string }>`
-	border-radius: 2px 2px 0 0;
-	line-height: 21px;
-	font-size: 14px;
+	border-radius: 0.125rem 0.125rem 0 0;
+	font-size: 0.875rem;
 	font-weight: 300;
-	margin-top: 10px;
+	margin-top: 0.625rem;
 	line-height: ${({ lineHeight }): string => lineHeight ?? 'normal'};
 `;
 
@@ -90,7 +89,7 @@ interface LabelContainerProps extends ContainerProps {
 }
 
 const LabelContainer = styled(Container)<LabelContainerProps>`
-	border-bottom: 1px solid
+	border-bottom: 0.0625rem solid
 		${({ theme, disabled }): string =>
 			disabled ? theme.palette.error.regular : theme.palette.gray2.regular};
 `;
@@ -321,7 +320,7 @@ const Feedback: FC = () => {
 					<Text weight="bold" size="large">
 						{t('feedback.report_something', 'Do you want to report something?')}
 					</Text>
-					<SubHeadingText overflow="break-word" lineHeight="21px">
+					<SubHeadingText overflow="break-word" lineHeight="1.5">
 						{t(
 							'feedback.explanation',
 							'Please send us your feedback about your new experience with Zextras Server. Your opinion is meaningful for us to improve our product. So tell us what’s on your mind.'
@@ -350,7 +349,7 @@ const Feedback: FC = () => {
 				crossAlignment="flex-start"
 				orientation="horizontal"
 			>
-				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
+				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="19.0625rem">
 					<Row padding={{ vertical: 'large' }}>
 						<Text weight="bold" size="small">
 							Module
@@ -364,7 +363,7 @@ const Feedback: FC = () => {
 						LabelFactory={ModuleLabelFactory}
 					/>
 				</Container>
-				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="305px">
+				<Container mainAlignment="space-between" crossAlignment="flex-start" maxWidth="19.0625rem">
 					<Row padding={{ vertical: 'large' }}>
 						<Text weight="bold" size="small">
 							Topic

src/search/module-selector.tsx

@@ -12,7 +12,7 @@ import { SEARCH_APP_ID } from '../constants';
 import { useCurrentRoute, pushHistory } from '../history/hooks';
 
 const SelectorContainer = styled(Container)<{ open?: boolean }>`
-	border-right: 1px solid ${({ theme }): string => theme.palette.gray4.regular};
+	border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray4.regular};
 	cursor: pointer;
 	background: ${({ theme, open }): string => theme.palette[open ? 'gray5' : 'gray6'].regular};
 
@@ -66,9 +66,9 @@ const ModuleSelectorComponent: FC<{ app: string | undefined }> = ({ app }) => {
 		>
 			<SelectorContainer
 				orientation="horizontal"
-				height={42}
+				height="2.625rem"
 				width="fit"
-				minWidth={150}
+				minWidth="9.375rem"
 				crossAlignment="center"
 				mainAlignment="space-between"
 				borderRadius="half"

src/search/search-app-view.tsx

@@ -76,8 +76,8 @@ const ResultsHeader: FC<{ label: string; labelType?: ResultLabelType }> = ({
 				width="100%"
 				background="gray5"
 				height="fit"
-				minHeight="48px"
-				maxHeight="120px"
+				minHeight="3rem"
+				maxHeight="7.5rem"
 				style={{ overflow: 'hidden' }}
 				padding={{ horizontal: 'large', vertical: 'medium' }}
 			>

src/search/search-bar.tsx

@@ -27,7 +27,7 @@ import { ModuleSelector } from './module-selector';
 import { useSearchStore } from './search-store';
 
 const OutlinedIconButton = styled(IconButton)`
-	border: 1px solid
+	border: 0.0625rem solid
 		${({ theme, disabled }): string =>
 			disabled ? theme.palette.primary.disabled : theme.palette.primary.regular};
 	display: block;
@@ -37,7 +37,7 @@ const OutlinedIconButton = styled(IconButton)`
 `;
 
 const StyledChipInput = styled(ChipInput)`
-	padding: 0 16px;
+	padding: 0 1rem;
 	&:hover {
 		outline: none;
 		background: ${({ theme, disabled }): string =>
@@ -46,10 +46,10 @@ const StyledChipInput = styled(ChipInput)`
 `;
 
 const StyledContainer = styled(Container)`
-	height: 42px;
+	height: 2.625rem;
 	overflow-y: hidden;
 	&:first-child {
-		transform: translateY(-2px);
+		transform: translateY(-0.125rem);
 	}
 `;
 
@@ -382,7 +382,7 @@ export const SearchBar: FC = () => {
 				}
 			>
 				<Container orientation="horizontal" width="fill">
-					<Container minWidth="512px" width="fill">
+					<Container minWidth="32rem" width="fill">
 						<Container orientation="horizontal" width="fill">
 							<Container width="fit">
 								<ModuleSelector />

src/settings/components/account-settings/accounts-list.tsx

@@ -204,7 +204,7 @@ const AccountsList = ({
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/advanced-settings.tsx

@@ -26,7 +26,7 @@ interface AdvancedSettingsProps {
 const AdvancedSettings = ({ t }: AdvancedSettingsProps): ReactElement => (
 	<>
 		<Container
-			minWidth="calc(min(100%, 512px))"
+			minWidth="calc(min(100%, 32rem))"
 			width="fill"
 			padding={{ all: 'large' }}
 			height="fit"
@@ -45,7 +45,7 @@ const AdvancedSettings = ({ t }: AdvancedSettingsProps): ReactElement => (
 		>
 			<Checkbox label={t('label.change_pop', 'Change POP port')} width="fit" />
 			<Padding right="large" />
-			<Input width="100px" label={t('label.pop_port', 'POP port')} value="110" onChange={noop} />
+			<Input width="6.25rem" label={t('label.pop_port', 'POP port')} value="110" onChange={noop} />
 		</Row>
 		<Row
 			width="fill"

src/settings/components/account-settings/delegates.tsx

@@ -81,7 +81,7 @@ const Delegates = ({
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"
@@ -126,7 +126,7 @@ const Delegates = ({
 				/>
 			</Row>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="100%"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/download-messages.tsx

@@ -25,7 +25,7 @@ const DownloadMessages = ({ t }: DownloadMessagesProps): ReactElement => {
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/external-account-settings.tsx

@@ -37,7 +37,7 @@ const ExternalAccount = ({ t }: ExternalAccountProps): ReactElement => {
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"
@@ -78,7 +78,7 @@ const ExternalAccount = ({ t }: ExternalAccountProps): ReactElement => {
 				</Padding>
 			</Row>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="100%"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/password-recovery-settings.tsx

@@ -76,7 +76,7 @@ const PasswordRecoverySettings = ({
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/persona-settings.tsx

@@ -46,7 +46,7 @@ const PersonaSettings = ({ t, items, updateIdentities }: PersonaSettingsProps):
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"

src/settings/components/account-settings/persona-use-section.tsx

@@ -113,7 +113,7 @@ const PersonaUseSection = ({
 	return (
 		<>
 			<Container
-				minWidth="calc(min(100%, 512px))"
+				minWidth="calc(min(100%, 32rem))"
 				width="fill"
 				padding={{ all: 'large' }}
 				height="fit"