diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss index 7d65c8d0f..1a2a36d8e 100644 --- a/src/components/common/EmbeddedMessage.scss +++ b/src/components/common/EmbeddedMessage.scss @@ -93,9 +93,9 @@ } .emoji { - width: 1.125rem !important; - height: 1.125rem !important; - vertical-align: -4px !important; + width: calc(1.125 * var(--message-text-size, 1rem)) !important; + height: calc(1.125 * var(--message-text-size, 1rem)) !important; + vertical-align: text-bottom !important; } } diff --git a/src/components/left/settings/SettingsGeneral.tsx b/src/components/left/settings/SettingsGeneral.tsx index 5f2c7ac84..0394548b4 100644 --- a/src/components/left/settings/SettingsGeneral.tsx +++ b/src/components/left/settings/SettingsGeneral.tsx @@ -7,7 +7,7 @@ import { GlobalActions } from '../../../global/types'; import { SettingsScreens, ISettings } from '../../../types'; import { ApiSticker, ApiStickerSet } from '../../../api/types'; -import { IS_MAC_OS, IS_TOUCH_ENV } from '../../../util/environment'; +import { IS_IOS, IS_MAC_OS, IS_TOUCH_ENV } from '../../../util/environment'; import { pick } from '../../../util/iteratees'; import useLang from '../../../hooks/useLang'; import useFlag from '../../../hooks/useFlag'; @@ -111,6 +111,9 @@ const SettingsGeneral: FC = ({ }, [setSettingOption]); const handleMessageTextSizeChange = useCallback((newSize: number) => { + document.documentElement.style.setProperty( + '--composer-text-size', `${Math.max(newSize, IS_IOS ? 16 : 15)}px`, + ); document.documentElement.style.setProperty('--message-text-size', `${newSize}px`); setSettingOption({ messageTextSize: newSize }); diff --git a/src/components/middle/MessageList.scss b/src/components/middle/MessageList.scss index 891411287..b38bd3c40 100644 --- a/src/components/middle/MessageList.scss +++ b/src/components/middle/MessageList.scss @@ -153,16 +153,23 @@ display: inline-block; background: var(--pattern-color); color: white; - font-size: 0.9375rem; + font-size: calc(var(--message-text-size, 1rem) - .0625rem); font-weight: 500; - line-height: 1.5rem; + line-height: 1.75; padding: 0 .5rem; - border-radius: 0.75rem; + border-radius: 2rem; word-break: break-word; body.is-ios &, body.is-macos & { - font-size: .875rem; + font-size: calc(var(--message-text-size, 1rem) - .125rem); + } + + .emoji-small { + vertical-align: text-bottom; + width: calc(1.25 * var(--message-text-size, 1rem)); + height: calc(1.25 * var(--message-text-size, 1rem)); + background-size: calc(1.25 * var(--message-text-size, 1rem)); } } diff --git a/src/components/middle/composer/Composer.scss b/src/components/middle/composer/Composer.scss index 34fc61d02..a5c1612b4 100644 --- a/src/components/middle/composer/Composer.scss +++ b/src/components/middle/composer/Composer.scss @@ -23,6 +23,10 @@ } } + .form-control { + --border-width: 0; + } + > .Button { flex-shrink: 0; margin-left: .5rem; @@ -170,6 +174,7 @@ width: .5625rem; height: 1.25rem; transition: opacity 200ms; + font-size: 1rem !important; .corner { fill: var(--color-background); @@ -263,13 +268,13 @@ position: relative; .form-control { - padding-top: calc(1rem - var(--border-width)); - padding-bottom: calc(1rem - var(--border-width)); + padding: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2) calc(.9rem - var(--border-width)); overflow: hidden; - line-height: 1.375rem; + line-height: 1.375; font-family: Roboto, -apple-system, "Apple Color Emoji", "Helvetica Neue", sans-serif; unicode-bidi: plaintext; text-align: initial; + font-size: var(--composer-text-size, 1rem); body.is-ios &, body.is-macos & { @@ -295,23 +300,14 @@ .forced-placeholder, .placeholder-text { position: absolute; - bottom: .9375rem; color: var(--color-placeholders); pointer-events: none; unicode-bidi: plaintext; text-align: initial; - - body.is-macos & { - bottom: 1rem; - } - - @media (max-width: 600px) { - bottom: .625rem; - - body.is-ios & { - bottom: .6875rem; - } - } + line-height: 1.3125; + font-size: var(--composer-text-size, 1rem); + top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2); + bottom: auto; } .forced-placeholder { @@ -362,15 +358,13 @@ min-height: 3.5rem; max-height: 26rem; line-height: 1.3125; - padding-top: calc(1.15625rem - var(--border-width)); - padding-bottom: calc(1.15625rem - var(--border-width)); + padding: calc((3.5rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; @media (max-width: 600px) { height: 2.875rem; min-height: 2.875rem; max-height: 16rem; - padding-top: calc(0.84375rem - var(--border-width)); - padding-bottom: calc(0.84375rem - var(--border-width)); + padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0; overflow: auto; } @@ -381,6 +375,15 @@ } } + .forced-placeholder, + .placeholder-text { + top: calc((3.5rem - var(--composer-text-size, 1rem) * 1.3125) / 2); + + @media (max-width: 600px) { + top: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2); + } + } + &:not(:only-child) { .form-control { padding-left: 0; diff --git a/src/components/middle/message/WebPage.scss b/src/components/middle/message/WebPage.scss index 441b2e157..0f0734f42 100644 --- a/src/components/middle/message/WebPage.scss +++ b/src/components/middle/message/WebPage.scss @@ -105,7 +105,7 @@ } .site-description { - line-height: 1rem; + line-height: 1.25; margin-bottom: 0; body.is-ios & { diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss index 444cd2a48..7e0cbb724 100644 --- a/src/components/middle/message/_message-content.scss +++ b/src/components/middle/message/_message-content.scss @@ -110,7 +110,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - font-size: 0.875rem; + font-size: calc(var(--message-text-size, 1rem) - .125rem); font-weight: 500; line-height: 1.25rem; color: var(--accent-color); @@ -219,6 +219,7 @@ bottom: -.0875rem; width: .5625rem; height: 1.125rem; + font-size: 1rem !important; .corner { fill: var(--background-color); @@ -311,6 +312,7 @@ &:not(.custom-shape) .text-content .emoji { width: calc(1.25 * var(--message-text-size, 1rem)); + height: calc(1.25 * var(--message-text-size, 1rem)); background-size: calc(1.25 * var(--message-text-size, 1rem)); } @@ -689,4 +691,5 @@ margin: 0; padding: 1px 2px; border-radius: 4px; + font-size: calc(var(--message-text-size, 1rem) - 0.0625rem); } diff --git a/src/modules/actions/ui/initial.ts b/src/modules/actions/ui/initial.ts index 662ea0e72..e9b1231d8 100644 --- a/src/modules/actions/ui/initial.ts +++ b/src/modules/actions/ui/initial.ts @@ -18,6 +18,9 @@ addReducer('init', (global) => { setLanguage(language, undefined, true); + document.documentElement.style.setProperty( + '--composer-text-size', `${Math.max(messageTextSize, IS_IOS ? 16 : 15)}px`, + ); document.documentElement.style.setProperty('--message-text-size', `${messageTextSize}px`); document.body.classList.add('initial'); document.body.classList.add(`animation-level-${animationLevel}`);