From 79240e98ea7195b13e20d467f116e20dfcd939d3 Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Fri, 11 Nov 2022 18:22:03 +0100 Subject: [PATCH] feat: convert px to rem (#145) * feat: convert px to rem --- package-lock.json | 28 ++-- package.json | 4 +- src/boot/theme-provider.tsx | 40 ++--- src/reporting/feedback.tsx | 23 ++- src/search/module-selector.tsx | 6 +- src/search/search-app-view.tsx | 4 +- src/search/search-bar.tsx | 10 +- .../account-settings/accounts-list.tsx | 2 +- .../account-settings/advanced-settings.tsx | 4 +- .../components/account-settings/delegates.tsx | 4 +- .../account-settings/download-messages.tsx | 2 +- .../external-account-settings.tsx | 4 +- .../password-recovery-settings.tsx | 2 +- .../account-settings/persona-settings.tsx | 2 +- .../account-settings/persona-use-section.tsx | 2 +- .../primary-account-settings.tsx | 2 +- .../settings-sent-messages.tsx | 2 +- src/settings/components/date-picker-style.jsx | 157 +++++++++--------- .../general-settings/appearance-settings.tsx | 2 +- .../components/general-settings/logout.tsx | 2 +- .../module-version-settings.tsx | 2 +- .../general-settings/out-of-office-view.tsx | 6 +- .../general-settings/user-quota.tsx | 2 +- .../language-and-timezone-settings.tsx | 6 +- src/settings/search-settings-view.tsx | 2 +- src/shell/app-view-container.tsx | 4 +- src/shell/badge-wrap.tsx | 16 +- src/shell/boards/board-container.tsx | 14 +- src/shell/boards/board-tab-list.tsx | 6 +- src/shell/boards/board-tab.tsx | 10 +- src/shell/boards/board.tsx | 4 +- src/shell/collapser.tsx | 12 +- src/shell/shell-header.tsx | 10 +- src/shell/shell-mobile-nav.tsx | 2 +- src/shell/shell-primary-bar.tsx | 8 +- src/shell/shell-secondary-bar.tsx | 8 +- src/splash.css | 11 +- src/update-log/change-log-modal.jsx | 2 +- src/utility-bar/bar.tsx | 2 +- src/utility-bar/panel.tsx | 6 +- 40 files changed, 219 insertions(+), 216 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7c844f81..a5c404fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,8 +13,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", @@ -3911,9 +3911,9 @@ "license": "Apache-2.0" }, "node_modules/@zextras/carbonio-design-system": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.5.0.tgz", - "integrity": "sha512-IuW3XqxtUTI3JqChDiDBhvVxIaLkohcTf1qxJJNimlw6xGPgcawDqEB4D3sVIHXI+Z3Y8xOMpbGNB1lY4Da5Ig==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.5.1.tgz", + "integrity": "sha512-RRC/GWhmQaRNFZiDGiw+xYp9knP2MCCIk3wL7VNaQcUza2pPQSYxSs2uzVCeO22+DVxjgKL6PZLYwvgdIS1lrA==", "dependencies": { "@popperjs/core": "2.11.0", "darkreader": "4.9.44", @@ -3972,9 +3972,9 @@ } }, "node_modules/@zextras/carbonio-ui-preview": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.3.tgz", - "integrity": "sha512-hsjY6dvEJHYUZ2E6t7wVz7ujpC0PXUkMQk93BybzleCeUwQcv0RX0VuonZlTuYvpf3APq9glPr8hgI7CR5RAVA==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.4.tgz", + "integrity": "sha512-pCUhpP+MtgPb7Rv/dMJ8nLfHaTnXY+MWvDtY0axTX3gqXlm5xVGPnWqyBfB8uuzjd/bbISzeDBEe0JKDHIHenA==", "dependencies": { "core-js": "^3.25.5", "react-pdf": "^5.7.2" @@ -17660,9 +17660,9 @@ "version": "4.2.2" }, "@zextras/carbonio-design-system": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.5.0.tgz", - "integrity": "sha512-IuW3XqxtUTI3JqChDiDBhvVxIaLkohcTf1qxJJNimlw6xGPgcawDqEB4D3sVIHXI+Z3Y8xOMpbGNB1lY4Da5Ig==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-0.5.1.tgz", + "integrity": "sha512-RRC/GWhmQaRNFZiDGiw+xYp9knP2MCCIk3wL7VNaQcUza2pPQSYxSs2uzVCeO22+DVxjgKL6PZLYwvgdIS1lrA==", "requires": { "@popperjs/core": "2.11.0", "darkreader": "4.9.44", @@ -17709,9 +17709,9 @@ } }, "@zextras/carbonio-ui-preview": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.3.tgz", - "integrity": "sha512-hsjY6dvEJHYUZ2E6t7wVz7ujpC0PXUkMQk93BybzleCeUwQcv0RX0VuonZlTuYvpf3APq9glPr8hgI7CR5RAVA==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-0.2.4.tgz", + "integrity": "sha512-pCUhpP+MtgPb7Rv/dMJ8nLfHaTnXY+MWvDtY0axTX3gqXlm5xVGPnWqyBfB8uuzjd/bbISzeDBEe0JKDHIHenA==", "requires": { "core-js": "^3.25.5", "react-pdf": "^5.7.2" diff --git a/package.json b/package.json index 56ea9c10..d158e88c 100644 --- a/package.json +++ b/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", diff --git a/src/boot/theme-provider.tsx b/src/boot/theme-provider.tsx index 00e45434..8f1eebae 100644 --- a/src/boot/theme-provider.tsx +++ b/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; } diff --git a/src/reporting/feedback.tsx b/src/reporting/feedback.tsx index 8c296803..2fcfcd24 100644 --- a/src/reporting/feedback.tsx +++ b/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)` - 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 = () => { {t('feedback.report_something', 'Do you want to report something?')} - + {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" > - + Module @@ -364,7 +363,7 @@ const Feedback: FC = () => { LabelFactory={ModuleLabelFactory} /> - + Topic diff --git a/src/search/module-selector.tsx b/src/search/module-selector.tsx index cb13f865..057359d3 100644 --- a/src/search/module-selector.tsx +++ b/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 }) => { > = ({ width="100%" background="gray5" height="fit" - minHeight="48px" - maxHeight="120px" + minHeight="3rem" + maxHeight="7.5rem" style={{ overflow: 'hidden' }} padding={{ horizontal: 'large', vertical: 'medium' }} > diff --git a/src/search/search-bar.tsx b/src/search/search-bar.tsx index 8d30b27b..f08888fa 100644 --- a/src/search/search-bar.tsx +++ b/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 = () => { } > - + diff --git a/src/settings/components/account-settings/accounts-list.tsx b/src/settings/components/account-settings/accounts-list.tsx index f80273b4..d596acb3 100644 --- a/src/settings/components/account-settings/accounts-list.tsx +++ b/src/settings/components/account-settings/accounts-list.tsx @@ -204,7 +204,7 @@ const AccountsList = ({ return ( <> ( <> ( > - + { return ( <> { return ( <> { theme.palette.gray5.regular}; - border-bottom: ${({ theme }) => theme.palette.gray2.regular} 1px solid; + border-bottom: ${({ theme }) => theme.palette.gray2.regular} 0.0625rem solid; } .rw-widget-container.rw-state-focus, .rw-state-focus > .rw-widget-container, .rw-widget-container.rw-state-focus:hover, .rw-state-focus > .rw-widget-container:hover { background-color: ${({ theme }) => theme.palette.gray5.focus}; - border-bottom: ${({ theme }) => theme.palette.primary.regular} 1px solid; + border-bottom: ${({ theme }) => theme.palette.primary.regular} 0.0625rem solid; } .rw-widget-container.rw-state-readonly, .rw-state-readonly > .rw-widget-container { @@ -200,7 +200,7 @@ const Styler = styled(Container)` } .rw-datetime-picker { - height: 42px; + height: 2.625rem; } .rw-widget-picker { position: relative; @@ -218,7 +218,7 @@ const Styler = styled(Container)` display: table-cell; } .rw-widget-picker > .rw-select { - width: ${({ allDay }) => (allDay ? '34px' : '68px')}; + width: ${({ allDay }) => (allDay ? '2.125rem' : '4.25rem')}; white-space: nowrap; } .rw-open > .rw-widget-picker { @@ -240,7 +240,7 @@ const Styler = styled(Container)` cursor: pointer; } .rw-select > * { - width: 32px; + width: 2rem; height: 100%; } .rw-state-readonly .rw-select, @@ -250,14 +250,14 @@ const Styler = styled(Container)` .rw-select-bordered { cursor: pointer; border: none; - border-left: #ccc 1px solid; + border-left: #ccc 0.0625rem solid; } .rw-select-bordered:hover, .rw-select-bordered:active { background-color: #e6e6e6; } .rw-select-bordered:active { - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); } .rw-state-disabled .rw-select-bordered, .rw-state-readonly .rw-select-bordered, @@ -274,7 +274,7 @@ const Styler = styled(Container)` box-shadow: none; } .rw-rtl .rw-select-bordered { - border-right: #ccc 1px solid; + border-right: #ccc 0.0625rem solid; border-left: none; } .rw-rtl { @@ -299,7 +299,7 @@ const Styler = styled(Container)` .rw-input, .rw-dropdown-list-autofill, .rw-filter-input { - padding: 0 0.857em; + padding: 0 0.857rem; } .rw-input[type='text']::-ms-clear { display: none; @@ -318,9 +318,9 @@ const Styler = styled(Container)` .rw-i.rw-loading { display: block; ${/* background: url("../img/loading.gif") no-repeat center; */ ''}; - min-width: 16px; - width: 1.9em; - height: 16px; + min-width: 1rem; + width: 1.9rem; + height: 1rem; } .rw-i.rw-loading:before { content: ''; @@ -345,23 +345,24 @@ const Styler = styled(Container)` .rw-filter-input { } .rw-widget-input.rw-state-focus { - box-shadow: 0 0 8px rgba(102, 175, 233, 0.6), inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: 0 0 0.5rem rgba(102, 175, 233, 0.6), + inset 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.075); } .rw-list { margin: 0; padding: 0; list-style: none; - font-size: 1em; + font-size: 1rem; outline: 0; overflow: auto; - max-height: 200px; + max-height: 12.5rem; } .rw-list-option { -ms-user-select: none; user-select: none; color: #333; cursor: pointer; - border: 1px solid transparent; + border: 0.0625rem solid transparent; } .rw-list-option.rw-state-focus, .rw-list-option.rw-state-focus:hover { @@ -398,15 +399,15 @@ const Styler = styled(Container)` .rw-list-empty, .rw-list-option, .rw-list-optgroup { - padding: 0.143em 0.75em; + padding: 0.143rem 0.75rem; outline: 0; } .rw-list-optgroup { font-weight: bold; - padding-top: 7px; + padding-top: 0.4375rem; } .rw-list-option-create { - border-top: 1px #ccc solid; + border-top: 0.0625rem #ccc solid; } .rw-dropdown-list-autofill { padding: 0; @@ -415,22 +416,22 @@ const Styler = styled(Container)` background-color: transparent; vertical-align: middle; padding-right: 0; - max-width: 1px; + max-width: 0.0625rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .rw-rtl .rw-dropdown-list-input { - padding-right: 0.857em; + padding-right: 0.857rem; padding-left: 0; } .rw-filter-input { position: relative; - margin: 4px; + margin: 0.25rem; padding-right: 0; } .rw-filter-input .rw-rtl { - padding-right: 0.857em; + padding-right: 0.857rem; padding-left: 0; } .rw-filter-input .rw-select, @@ -448,15 +449,15 @@ const Styler = styled(Container)` .rw-number-picker .rw-btn { cursor: pointer; - height: calc(1.2145em - 1px); + height: calc(1.2145rem - 0.0625rem); ${ /* - margin-top: -1px\9; - height: 1.2145em\9; -*/ 'border: 2px solid red;' + margin-top: -0.0625rem\9; + height: 1.2145rem\9; +*/ 'border: 0.125rem solid red;' }; - line-height: 1.2145em; - line-height: calc(1.2145em - 1px); + line-height: 1.2145rem; + line-height: calc(1.2145rem - 0.0625rem); display: block; border: none; } @@ -466,7 +467,7 @@ const Styler = styled(Container)` background-color: #e6e6e6; } .rw-number-picker .rw-btn:active { - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); + box-shadow: inset 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.125); } .rw-state-disabled .rw-number-picker .rw-btn, .rw-state-readonly .rw-number-picker .rw-btn, @@ -493,12 +494,12 @@ const Styler = styled(Container)` .rw-calendar-popup { right: auto; min-width: 0; - width: 18em; + width: 18rem; } .rw-calendar { - border-radius: 4px; + border-radius: 0.25rem; background-color: #fff; - border: #ccc 1px solid; + border: #ccc 0.0625rem solid; overflow: hidden; } .rw-calendar.rw-popup { @@ -515,11 +516,11 @@ const Styler = styled(Container)` width: 75%; } .rw-calendar-footer { - border-top: 1px solid #ccc; + border-top: 0.0625rem solid #ccc; } .rw-calendar-grid { outline: none; - height: 14.28571429em; + height: 14.28571429rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; @@ -528,17 +529,17 @@ const Styler = styled(Container)` } .rw-head-cell { text-align: center; - border-bottom: 1px solid #ccc; - padding: 0.25em; + border-bottom: 0.0625rem solid #ccc; + padding: 0.25rem; } .rw-cell { color: #333; - border-radius: 4px; + border-radius: 0.25rem; cursor: pointer; line-height: normal; text-align: center; - border: 1px solid transparent; - padding: 0.25em; + border: 0.0625rem solid transparent; + padding: 0.25rem; } .rw-cell:hover { background-color: #e6e6e6; @@ -630,19 +631,19 @@ const Styler = styled(Container)` } .rw-select-list .rw-list { max-height: none; - font-size: 1em; + font-size: 1rem; } .rw-select-list-label { display: block; position: relative; font-weight: normal; cursor: inherit; - padding-left: 20px; + padding-left: 1.25rem; margin: 0; } .rw-rtl .rw-select-list-label { padding-left: 0; - padding-right: 20px; + padding-right: 1.25rem; } input.rw-select-list-input { position: absolute; @@ -650,7 +651,7 @@ const Styler = styled(Container)` top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); - ${/* top: 0.1em\9; */ ''}; + ${/* top: 0.1rem\9; */ ''}; margin: 0; line-height: normal; cursor: inherit; @@ -664,7 +665,7 @@ const Styler = styled(Container)` ${/* background: url("../img/loader-big.gif") no-repeat center; */ ''}; position: absolute; background-color: #fff; - border-radius: 4px; + border-radius: 0.25rem; opacity: 0.7; top: 0; left: 0; @@ -675,15 +676,15 @@ const Styler = styled(Container)` cursor: text; } .rw-multiselect .rw-input-reset { - height: calc(2.429em - 2px); + height: calc(2.429rem - 0.125rem); ${ - /* margin-top: -2px\9; - height: 2.429em\9; */ '' + /* margin-top: -0.125rem\9; + height: 2.429rem\9; */ '' }; border-width: 0; width: auto; max-width: 100%; - padding: 0 0.857em; + padding: 0 0.857rem; } .rw-multiselect .rw-select { vertical-align: middle; @@ -705,14 +706,14 @@ const Styler = styled(Container)` .rw-multiselect-tag { display: inline-table; color: inherit; - padding: 0 0.35em 0 0.35em; - margin-left: calc(0.279335em - 1px); - margin-top: 0.279335em; - margin-top: calc(0.279335em - 1px); - height: 1.87033em; - border-radius: 3px; + padding: 0 0.35rem 0 0.35rem; + margin-left: calc(0.279335rem - 0.0625rem); + margin-top: 0.279335rem; + margin-top: calc(0.279335rem - 0.0625rem); + height: 1.87033rem; + border-radius: 0.1875rem; background-color: #eee; - border: 1px solid #ccc; + border: 0.0625rem solid #ccc; cursor: default; vertical-align: top; text-align: center; @@ -726,8 +727,8 @@ const Styler = styled(Container)` } .rw-rtl .rw-multiselect-tag { margin-left: 0; - margin-right: calc(0.279335em - 1px); - padding: 0 0.35em 0 0.35em; + margin-right: calc(0.279335rem - 0.0625rem); + padding: 0 0.35rem 0 0.35rem; } .rw-multiselect-tag.rw-state-focus, .rw-multiselect-tag.rw-state-focus:hover { @@ -753,11 +754,11 @@ const Styler = styled(Container)` } .rw-multiselect-tag-btn { color: inherit; - margin-left: 0.25em; + margin-left: 0.25rem; } .rw-rtl .rw-multiselect-tag-btn { margin-left: 0; - margin-right: 0.25em; + margin-right: 0.25rem; } .rw-autocomplete .rw-select { position: absolute; @@ -771,8 +772,8 @@ const Styler = styled(Container)` position: absolute; z-index: 1005; top: 100%; - left: -6px; - right: -6px; + left: -0.375rem; + right: -0.375rem; } .rw-popup-container.rw-dropup { top: auto; @@ -783,28 +784,28 @@ const Styler = styled(Container)` } .rw-popup-transition { width: 100%; - margin-bottom: 6px; - padding: 0 6px; + margin-bottom: 0.375rem; + padding: 0 0.375rem; } .rw-dropup > .rw-popup-transition { margin-bottom: 0; - margin-top: 6px; + margin-top: 0.375rem; } .rw-popup { border-top-right-radius: 0; border-top-left-radius: 0; - border-bottom-right-radius: 3px; - border-bottom-left-radius: 3px; - box-shadow: 0 5px 6px rgba(0, 0, 0, 0.2); - border: #ccc 1px solid; + border-bottom-right-radius: 0.1875rem; + border-bottom-left-radius: 0.1875rem; + box-shadow: 0 0.3125rem 0.375rem rgba(0, 0, 0, 0.2); + border: #ccc 0.0625rem solid; background: #fff; } .rw-dropup .rw-popup { border-bottom-right-radius: 0; border-bottom-left-radius: 0; - border-top-right-radius: 3px; - border-top-left-radius: 3px; - box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2); + border-top-right-radius: 0.1875rem; + border-top-left-radius: 0.1875rem; + box-shadow: 0 -0.125rem 0.375rem rgba(0, 0, 0, 0.2); } .rw-popup-transition { transition: transform 200ms; diff --git a/src/settings/components/general-settings/appearance-settings.tsx b/src/settings/components/general-settings/appearance-settings.tsx index 19f0856b..a2678bc9 100644 --- a/src/settings/components/general-settings/appearance-settings.tsx +++ b/src/settings/components/general-settings/appearance-settings.tsx @@ -59,7 +59,7 @@ const AppearanceSettings: FC<{ return ( diff --git a/src/settings/components/general-settings/logout.tsx b/src/settings/components/general-settings/logout.tsx index e59da252..45c56106 100644 --- a/src/settings/components/general-settings/logout.tsx +++ b/src/settings/components/general-settings/logout.tsx @@ -19,7 +19,7 @@ const Logout: FC = () => { return ( diff --git a/src/settings/components/general-settings/module-version-settings.tsx b/src/settings/components/general-settings/module-version-settings.tsx index 88874196..996c0bfc 100644 --- a/src/settings/components/general-settings/module-version-settings.tsx +++ b/src/settings/components/general-settings/module-version-settings.tsx @@ -43,7 +43,7 @@ const ModuleVersionSettings: FC = () => { <> diff --git a/src/settings/components/general-settings/out-of-office-view.tsx b/src/settings/components/general-settings/out-of-office-view.tsx index f233aef9..31cfe76b 100644 --- a/src/settings/components/general-settings/out-of-office-view.tsx +++ b/src/settings/components/general-settings/out-of-office-view.tsx @@ -35,8 +35,8 @@ import { const TextArea = styled.textarea` box-sizing: border-box; - padding: 10px; - min-height: 150px; + padding: 0.625rem; + min-height: 9.375rem; background: ${({ theme }): string => theme.palette.gray5.regular}; flex-grow: 1; width: 100%; @@ -142,7 +142,7 @@ const OutOfOfficeView: FC<{ return ( diff --git a/src/settings/components/general-settings/user-quota.tsx b/src/settings/components/general-settings/user-quota.tsx index 10960f8c..bfbde270 100644 --- a/src/settings/components/general-settings/user-quota.tsx +++ b/src/settings/components/general-settings/user-quota.tsx @@ -64,7 +64,7 @@ const UserQuota: FC = ({ mobileView }) => { ) : ( diff --git a/src/settings/language-and-timezone-settings.tsx b/src/settings/language-and-timezone-settings.tsx index 93e95f94..296cd3d6 100644 --- a/src/settings/language-and-timezone-settings.tsx +++ b/src/settings/language-and-timezone-settings.tsx @@ -57,7 +57,7 @@ const LanguageAndTimeZone: FC<{ return ( @@ -73,7 +73,7 @@ const LanguageAndTimeZone: FC<{ }} defaultSelection={defaultLocale} showCheckbox={false} - dropdownMaxHeight="200px" + dropdownMaxHeight="12.5rem" selectedBackgroundColor="highlight" /> )} @@ -89,7 +89,7 @@ const LanguageAndTimeZone: FC<{ }} selection={defaultTimeZone} showCheckbox={false} - dropdownMaxHeight="200px" + dropdownMaxHeight="12.5rem" selectedBackgroundColor="highlight" /> )} diff --git a/src/settings/search-settings-view.tsx b/src/settings/search-settings-view.tsx index 8ebd7689..e4e9aba9 100644 --- a/src/settings/search-settings-view.tsx +++ b/src/settings/search-settings-view.tsx @@ -58,7 +58,7 @@ const SearchSettingsView: FC<{ return ( diff --git a/src/shell/app-view-container.tsx b/src/shell/app-view-container.tsx index ae0df24c..b9b44d5d 100644 --- a/src/shell/app-view-container.tsx +++ b/src/shell/app-view-container.tsx @@ -15,8 +15,8 @@ import { useAppList, useAppStore, useRoutes } from '../store/app'; const _BoardsRouterContainer = styled(Container)` flex-grow: 1; flex-basis: 0; - min-width: 1px; - max-height: calc(100vh - 60px); + min-width: 0.0625rem; + max-height: calc(100vh - 3.75rem); overflow-y: auto; `; diff --git a/src/shell/badge-wrap.tsx b/src/shell/badge-wrap.tsx index ba120d5a..80adc63b 100644 --- a/src/shell/badge-wrap.tsx +++ b/src/shell/badge-wrap.tsx @@ -14,10 +14,10 @@ const MiniBadge = styled(Container)<{ badge: BadgeInfo }>` right: 25%; transform: translate(30%, 30%); background: ${({ badge, theme }): string => theme.palette[badge?.color ?? 'primary'].regular}; - min-width: 12px; - min-height: 12px; - line-height: 12px; - border-radius: 8px; + min-width: 0.75rem; + min-height: 0.75rem; + line-height: 0.75rem; + border-radius: 0.5rem; user-select: none; cursor: pointer; pointer-events: none; @@ -27,11 +27,15 @@ const MiniBadge = styled(Container)<{ badge: BadgeInfo }>` // eslint-disable-next-line react/display-name const BadgeWrap: FC<{ badge: BadgeInfo }> = forwardRef( ({ badge, children }, ref) => ( - + {badge.show && ( {badge.showCount ? ( - + {badge.count ?? 0} ) : null} diff --git a/src/shell/boards/board-container.tsx b/src/shell/boards/board-container.tsx index 4869faf2..c99825a1 100644 --- a/src/shell/boards/board-container.tsx +++ b/src/shell/boards/board-container.tsx @@ -29,9 +29,9 @@ import { TabsList } from './board-tab-list'; const BoardContainerComp = styled.div<{ expanded: boolean; minimized: boolean }>` position: fixed; - top: 60px; + top: 3.75rem; bottom: 0; - left: 48px; + left: 3rem; right: 0; background-color: rgba(0, 0, 0, 0); pointer-events: none; @@ -51,18 +51,18 @@ const BoardContainerComp = styled.div<{ expanded: boolean; minimized: boolean }> const Board = styled(Container)<{ expanded: boolean }>` z-index: 5; position: absolute; - left: 24px; + left: 1.5rem; bottom: 0; width: 700px; height: 70vh; min-height: 400px; - box-shadow: 0 2px 5px 0 rgba(125, 125, 125, 0.5); + box-shadow: 0 0.125rem 0.3125rem 0 rgba(125, 125, 125, 0.5); pointer-events: auto; ${({ expanded }): any => expanded && css` - height: calc(100% - 24px); - width: calc(100% - 24px * 2); + height: calc(100% - 1.5rem); + width: calc(100% - 1.5rem * 2); min-height: auto; `} `; @@ -113,7 +113,7 @@ export const BoardContainer: FC = () => { - + {map(boards, (b) => ( diff --git a/src/shell/boards/board-tab-list.tsx b/src/shell/boards/board-tab-list.tsx index a6af0aa2..7cfeed6b 100644 --- a/src/shell/boards/board-tab-list.tsx +++ b/src/shell/boards/board-tab-list.tsx @@ -33,10 +33,10 @@ export const TabsList: FC = () => { {boards && map(boards, (tab) => ( @@ -46,7 +46,7 @@ export const TabsList: FC = () => { {hiddenTabsCount > 0 && ( <> - + ` cursor: pointer; - height: 28px; + height: 1.75rem; width: fit-content; user-select: none; background-color: ${({ theme, active }): string => active ? theme.palette.gray3.regular : theme.palette.gray5.regular}; - border-radius: 2px; - padding: 2px 4px; + border-radius: 0.125rem; + padding: 0.125rem 0.25rem; `; const VerticalDivider = styled(Container)` - width: 1px; + width: 0.0625rem; height: 100%; background: ${({ theme }): string => theme.palette.gray3.regular}; margin: ${({ theme }): string => theme.sizes.padding.extrasmall}; @@ -83,7 +83,7 @@ export const AppBoardTab: FC<{ id: string; icon: string; title: string }> = ({ iconColor="secondary" icon="Close" onClick={onRemove} - style={{ padding: '2px', width: '24px', height: '24px' }} + style={{ padding: '0.125rem', width: '1.5rem', height: '1.5rem' }} /> diff --git a/src/shell/boards/board.tsx b/src/shell/boards/board.tsx index 6e7376c0..10e8e8f1 100644 --- a/src/shell/boards/board.tsx +++ b/src/shell/boards/board.tsx @@ -20,7 +20,7 @@ const BoardContainer = styled.div<{ show: boolean }>` width: 100%; overflow-y: auto; &::-webkit-scrollbar { - width: 8px; + width: 0.5rem; } &::-webkit-scrollbar-track { @@ -29,7 +29,7 @@ const BoardContainer = styled.div<{ show: boolean }>` &::-webkit-scrollbar-thumb { background-color: ${({ theme }): string => theme.palette.gray3.regular}; - border-radius: 4px; + border-radius: 0.25rem; } `; diff --git a/src/shell/collapser.tsx b/src/shell/collapser.tsx index 05871084..0f341b30 100644 --- a/src/shell/collapser.tsx +++ b/src/shell/collapser.tsx @@ -12,9 +12,9 @@ const VerticalDivider = styled.div` position: relative; overflow: visible; height: 100%; - width: 1px; - max-width: 1px; - min-width: 1px; + width: 0.0625rem; + max-width: 0.0625rem; + min-width: 0.0625rem; background-color: ${({ theme }): string => theme.palette.gray2.regular}; transition: background 0.2s; &:hover { @@ -30,9 +30,9 @@ const Bubble = styled.div<{ open: boolean }>` justify-content: center; position: absolute; top: 50%; - left: -12px; - width: 24px; - height: 24px; + left: -0.75rem; + width: 1.5rem; + height: 1.5rem; border-radius: 50%; background-color: ${({ theme }): string => theme.palette.gray2.regular}; transition: background-color 0.2s, transform 0.2s; diff --git a/src/shell/shell-header.tsx b/src/shell/shell-header.tsx index fdf7adb1..46b04ffd 100644 --- a/src/shell/shell-header.tsx +++ b/src/shell/shell-header.tsx @@ -31,9 +31,9 @@ const ShellHeader: FC<{ orientation="horizontal" background="gray3" width="fill" - height="60px" - minHeight="60px" - maxHeight="60px" + height="3.75rem" + minHeight="3.75rem" + maxHeight="3.75rem" mainAlignment="space-between" padding={{ horizontal: screenMode === 'desktop' ? 'large' : 'extrasmall', @@ -52,8 +52,8 @@ const ShellHeader: FC<{ - - + + diff --git a/src/shell/shell-mobile-nav.tsx b/src/shell/shell-mobile-nav.tsx index 83588f14..2500d297 100644 --- a/src/shell/shell-mobile-nav.tsx +++ b/src/shell/shell-mobile-nav.tsx @@ -95,7 +95,7 @@ const ShellMobileNavComponent: FC = ({ orientation="vertical" mainAlignment="space-between" style={{ - maxHeight: 'calc(100vh - 48px)', + maxHeight: 'calc(100vh - 3rem)', overflowY: 'auto' }} > diff --git a/src/shell/shell-primary-bar.tsx b/src/shell/shell-primary-bar.tsx index d08ded35..f5e47d2d 100644 --- a/src/shell/shell-primary-bar.tsx +++ b/src/shell/shell-primary-bar.tsx @@ -19,7 +19,7 @@ import { minimizeBoards, reopenBoards, useBoardStore } from '../store/boards'; import { useCurrentRoute } from '../history/hooks'; const ContainerWithDivider = styled(Container)` - border-right: 1px solid ${({ theme }): string => theme.palette.gray3.regular}; + border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray3.regular}; `; const ToggleBoardIcon: FC = () => { @@ -118,7 +118,7 @@ const ShellPrimaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute } } return ( = ({ activeRoute } takeAvailableSpace wrap="nowrap" style={{ - minHeight: '1px', + minHeight: '0.0625rem', // TODO: fix overlay usage // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore @@ -157,7 +157,7 @@ const ShellPrimaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute } // TODO: fix overlay usage // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore - style={{ minHeight: '1px', overflowY: 'overlay' }} + style={{ minHeight: '0.0625rem', overflowY: 'overlay' }} > {accessories.map((v) => ( diff --git a/src/shell/shell-secondary-bar.tsx b/src/shell/shell-secondary-bar.tsx index f347fd50..417e7b88 100644 --- a/src/shell/shell-secondary-bar.tsx +++ b/src/shell/shell-secondary-bar.tsx @@ -18,9 +18,9 @@ import { checkRoute } from '../utility-bar/utils'; import { useCurrentRoute } from '../history/hooks'; const SidebarContainer = styled(Container)` - min-width: 48px; - max-width: 314px; - width: ${({ sidebarIsOpen }): number => (sidebarIsOpen ? 314 : 48)}px; + min-width: 3rem; + max-width: 19.625rem; + width: ${({ sidebarIsOpen }): number => (sidebarIsOpen ? 19.625 : 3)}rem; transition: width 300ms; overflow-x: hidden; `; @@ -53,7 +53,7 @@ const ShellSecondaryBarComponent: FC<{ activeRoute: AppRoute }> = ({ activeRoute mainAlignment="space-between" onClick={isOpen ? undefined : onCollapserClick} style={{ - maxHeight: 'calc(100vh - 48px)', + maxHeight: 'calc(100vh - 3rem)', overflowY: 'auto' }} > diff --git a/src/splash.css b/src/splash.css index 584b3248..246619b7 100644 --- a/src/splash.css +++ b/src/splash.css @@ -18,12 +18,11 @@ left: 100%; /* width: 15%; */ width: 20%; - } } .loader { - height: 4px; - min-height: 4px; + height: 0.25rem; + min-height: 0.25rem; position: relative; width: 100%; overflow-x: clip; @@ -32,9 +31,9 @@ .loader .bar { position: absolute; transform: translateX(-50%); - top: -2px; - height: 8px; - + top: -0.125rem; + height: 0.5rem; + animation-name: loader-animation; animation-direction: alternate; animation-duration: 1.5s; diff --git a/src/update-log/change-log-modal.jsx b/src/update-log/change-log-modal.jsx index ba9f73f1..d34959cb 100644 --- a/src/update-log/change-log-modal.jsx +++ b/src/update-log/change-log-modal.jsx @@ -16,7 +16,7 @@ import { useApps } from '../store/app'; const Title = styled(Text)` width: 100%; font-family: ${({ theme }) => theme.fonts.default}; - font-size: 15px; + font-size: 0.9375rem; background: ${({ theme }) => theme.palette.gray5.regular}; `; diff --git a/src/utility-bar/bar.tsx b/src/utility-bar/bar.tsx index f73aa0d7..c3c6695e 100644 --- a/src/utility-bar/bar.tsx +++ b/src/utility-bar/bar.tsx @@ -107,7 +107,7 @@ export const ShellUtilityBar: FC = () => { ))} - + diff --git a/src/utility-bar/panel.tsx b/src/utility-bar/panel.tsx index fb8a4b3d..afd8e0a0 100644 --- a/src/utility-bar/panel.tsx +++ b/src/utility-bar/panel.tsx @@ -12,7 +12,7 @@ import { useUtilityViews } from './utils'; import { useUtilityBarStore } from './store'; const Panel = styled(Container)<{ mode: string }>` - width: ${({ mode }): number => (mode !== 'closed' ? 256 : 48)}px; + width: ${({ mode }): number => (mode !== 'closed' ? 16 : 3)}rem; border-radius: 0; height: 100%; position: absolute; @@ -20,11 +20,11 @@ const Panel = styled(Container)<{ mode: string }>` top: 0; bottom: 0; transition: width 0.2s; - border-left: 1px solid ${({ theme }): string => theme.palette.gray2.regular}; + border-left: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular}; `; const Spacer = styled.div<{ mode: string }>` position: relative; - width: ${({ mode }): number => (mode === 'open' ? 256 : 48)}px; + width: ${({ mode }): number => (mode === 'open' ? 16 : 3)}rem; height: 100%; transition: width 0.2s; `;