Various fixes for different font sizes (#1352)

src/components/common/EmbeddedMessage.scss

@@ -93,9 +93,9 @@
     }
 
     .emoji {
-      width: 1.125rem !important;
+      width: calc(1.125 * var(--message-text-size, 1rem)) !important;
-      height: 1.125rem !important;
+      height: calc(1.125 * var(--message-text-size, 1rem)) !important;
-      vertical-align: -4px !important;
+      vertical-align: text-bottom !important;
     }
   }
 

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<OwnProps & StateProps & DispatchProps> = ({
   }, [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 });

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));
       }
     }
 

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: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2 - var(--border-width, 0) * 2)  calc(.9rem - var(--border-width));
-    padding-bottom: calc(1rem - 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;
-
+    line-height: 1.3125;
-    body.is-macos & {
+    font-size: var(--composer-text-size, 1rem);
-      bottom: 1rem;
+    top: calc((3.25rem - var(--composer-text-size, 1rem) * 1.375) / 2);
-    }
+    bottom: auto;
-
-    @media (max-width: 600px) {
-      bottom: .625rem;
-
-      body.is-ios & {
-        bottom: .6875rem;
-      }
-    }
   }
 
   .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: calc((3.5rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
-    padding-bottom: calc(1.15625rem - var(--border-width));
 
     @media (max-width: 600px) {
       height: 2.875rem;
       min-height: 2.875rem;
       max-height: 16rem;
-      padding-top: calc(0.84375rem - var(--border-width));
+      padding: calc((2.875rem - var(--composer-text-size, 1rem) * 1.3125) / 2) 0;
-      padding-bottom: calc(0.84375rem - var(--border-width));
       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;

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 & {

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);
 }

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}`);