Inline Buttons: Support colors and icons (#6700)

src/api/gramjs/apiBuilders/bots.ts

@@ -16,6 +16,8 @@ import type {
   ApiInlineQueryPeerType,
   ApiInlineResultType,
   ApiKeyboardButton,
+  ApiKeyboardButtonBase,
+  ApiKeyboardButtonStyle,
   ApiMessagesBotApp,
   ApiReplyKeyboard,
   MediaContainer,
@@ -23,7 +25,7 @@ import type {
 } from '../../types';
 
 import { int2hex } from '../../../util/colors';
-import { pick } from '../../../util/iteratees';
+import { omitUndefined, pick } from '../../../util/iteratees';
 import { toJSNumber } from '../../../util/numbers';
 import { addDocumentToLocalDb } from '../helpers/localDb';
 import { serializeBytes } from '../helpers/misc';
@@ -50,10 +52,15 @@ export function buildReplyButtons(
 
   const markup = replyMarkup.rows.map(({ buttons }) => {
     return buttons.map((button): ApiKeyboardButton | undefined => {
-      const { text } = button;
+      const { text, style } = button;
+
+      const baseButton = omitUndefined<ApiKeyboardButtonBase>({
+        style: style && buildApiKeyboardButtonStyle(style),
+      });
 
       if (button instanceof GramJs.KeyboardButton) {
         return {
+          ...baseButton,
           type: 'command',
           text,
         };
@@ -62,12 +69,14 @@ export function buildReplyButtons(
       if (button instanceof GramJs.KeyboardButtonUrl) {
         if (button.url.includes('?startgroup=')) {
           return {
+            ...baseButton,
             type: 'unsupported',
             text,
           };
         }
 
         return {
+          ...baseButton,
           type: 'url',
           text,
           url: button.url,
@@ -77,12 +86,14 @@ export function buildReplyButtons(
       if (button instanceof GramJs.KeyboardButtonCallback) {
         if (button.requiresPassword) {
           return {
+            ...baseButton,
             type: 'unsupported',
             text,
           };
         }
 
         return {
+          ...baseButton,
           type: 'callback',
           text,
           data: serializeBytes(button.data),
@@ -91,6 +102,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonRequestPoll) {
         return {
+          ...baseButton,
           type: 'requestPoll',
           text,
           isQuiz: button.quiz,
@@ -99,6 +111,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonRequestPhone) {
         return {
+          ...baseButton,
           type: 'requestPhone',
           text,
         };
@@ -107,11 +120,13 @@ export function buildReplyButtons(
       if (button instanceof GramJs.KeyboardButtonBuy) {
         if (receiptMessageId) {
           return {
+            ...baseButton,
             type: 'receipt',
             receiptMessageId,
           };
         }
         return {
+          ...baseButton,
           type: 'buy',
           text,
         };
@@ -119,6 +134,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonGame) {
         return {
+          ...baseButton,
           type: 'game',
           text,
         };
@@ -126,6 +142,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonSwitchInline) {
         return {
+          ...baseButton,
           type: 'switchBotInline',
           text,
           query: button.query,
@@ -135,6 +152,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonUserProfile) {
         return {
+          ...baseButton,
           type: 'userProfile',
           text,
           userId: button.userId.toString(),
@@ -143,6 +161,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonSimpleWebView) {
         return {
+          ...baseButton,
           type: 'simpleWebView',
           text,
           url: button.url,
@@ -151,6 +170,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonWebView) {
         return {
+          ...baseButton,
           type: 'webView',
           text,
           url: button.url,
@@ -159,6 +179,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonUrlAuth) {
         return {
+          ...baseButton,
           type: 'urlAuth',
           text,
           url: button.url,
@@ -168,6 +189,7 @@ export function buildReplyButtons(
 
       if (button instanceof GramJs.KeyboardButtonCopy) {
         return {
+          ...baseButton,
           type: 'copy',
           text,
           copyText: button.copyText,
@@ -175,6 +197,7 @@ export function buildReplyButtons(
       }
 
       return {
+        ...baseButton,
         type: 'unsupported',
         text,
       };
@@ -193,6 +216,17 @@ export function buildReplyButtons(
   };
 }
 
+export function buildApiKeyboardButtonStyle(
+  style: GramJs.TypeKeyboardButtonStyle,
+): ApiKeyboardButtonStyle | undefined {
+  const { bgPrimary, bgDanger, bgSuccess, icon } = style;
+
+  return {
+    type: bgPrimary ? 'primary' : bgDanger ? 'destructive' : bgSuccess ? 'success' : undefined,
+    iconId: icon?.toString(),
+  };
+}
+
 export function buildBotInlineMessage(
   sendMessage: GramJs.TypeBotInlineMessage, type: string, document?: GramJs.TypeDocument, photo?: GramJs.TypePhoto,
 ): MediaContainer & { replyMarkup?: ApiReplyKeyboard } {

src/api/types/messages.ts

@@ -874,85 +874,94 @@ export type ApiSponsoredMessage = {
 
 // KeyboardButtons
 
-interface ApiKeyboardButtonSimple {
+export interface ApiKeyboardButtonStyle {
+  type?: 'primary' | 'success' | 'destructive';
+  iconId?: string;
+}
+
+export interface ApiKeyboardButtonBase {
+  style?: ApiKeyboardButtonStyle;
+}
+
+interface ApiKeyboardButtonSimple extends ApiKeyboardButtonBase {
   type: 'unsupported' | 'buy' | 'command' | 'requestPhone' | 'game';
   text: string;
 }
 
-interface ApiKeyboardButtonReceipt {
+interface ApiKeyboardButtonReceipt extends ApiKeyboardButtonBase {
   type: 'receipt';
   receiptMessageId: number;
 }
 
-interface ApiKeyboardButtonUrl {
+interface ApiKeyboardButtonUrl extends ApiKeyboardButtonBase {
   type: 'url';
   text: string;
   url: string;
 }
 
-interface ApiKeyboardButtonSimpleWebView {
+interface ApiKeyboardButtonSimpleWebView extends ApiKeyboardButtonBase {
   type: 'simpleWebView';
   text: string;
   url: string;
 }
 
-interface ApiKeyboardButtonWebView {
+interface ApiKeyboardButtonWebView extends ApiKeyboardButtonBase {
   type: 'webView';
   text: string;
   url: string;
 }
 
-interface ApiKeyboardButtonCallback {
+interface ApiKeyboardButtonCallback extends ApiKeyboardButtonBase {
   type: 'callback';
   text: string;
   data: string;
 }
 
-interface ApiKeyboardButtonRequestPoll {
+interface ApiKeyboardButtonRequestPoll extends ApiKeyboardButtonBase {
   type: 'requestPoll';
   text: string;
   isQuiz?: boolean;
 }
 
-interface ApiKeyboardButtonSwitchBotInline {
+interface ApiKeyboardButtonSwitchBotInline extends ApiKeyboardButtonBase {
   type: 'switchBotInline';
   text: string;
   query: string;
   isSamePeer?: boolean;
 }
 
-interface ApiKeyboardButtonUserProfile {
+interface ApiKeyboardButtonUserProfile extends ApiKeyboardButtonBase {
   type: 'userProfile';
   text: string;
   userId: string;
 }
 
-interface ApiKeyboardButtonUrlAuth {
+interface ApiKeyboardButtonUrlAuth extends ApiKeyboardButtonBase {
   type: 'urlAuth';
   text: string;
   url: string;
   buttonId: number;
 }
 
-interface ApiKeyboardButtonCopy {
+interface ApiKeyboardButtonCopy extends ApiKeyboardButtonBase {
   type: 'copy';
   text: string;
   copyText: string;
 }
 
-export interface KeyboardButtonSuggestedMessage {
+export interface KeyboardButtonSuggestedMessage extends ApiKeyboardButtonBase {
   type: 'suggestedMessage';
   text: string;
   buttonType: 'approve' | 'decline' | 'suggestChanges';
   disabled?: boolean;
 }
 
-export interface KeyboardButtonOpenThread {
+export interface KeyboardButtonOpenThread extends ApiKeyboardButtonBase {
   type: 'openThread';
   text: string;
 }
 
-export interface KeyboardButtonGiftOffer {
+export interface KeyboardButtonGiftOffer extends ApiKeyboardButtonBase {
   type: 'giftOffer';
   text: string;
   buttonType: 'accept' | 'reject';

src/components/common/Composer.scss

@@ -81,7 +81,7 @@
     height: var(--base-height);
     margin-left: 0.5rem;
 
-    &:not(.danger) {
+    &:not(.danger):not(:hover) {
       color: var(--color-composer-button);
     }
 

src/components/left/main/ChatBadge.module.scss

@@ -13,8 +13,6 @@
   color: white;
   text-align: center;
 
-  background: var(--color-gray);
-
   :global(body.is-ios) &,
   :global(body.is-macos) & {
     line-height: 1.375rem;
@@ -53,8 +51,8 @@
 }
 
 .mention,
-.unread:not(.muted),
+.unread,
-.unopened:not(.muted) {
+.unopened {
   color: var(--color-white);
   background: var(--color-green);
 }
@@ -78,11 +76,11 @@
   font-size: 1rem;
   color: var(--color-list-icon);
 
-  background: transparent;
+  background-color: transparent;
 }
 
-.reaction:not(.muted) {
+.reaction {
-  background: #ed504f;
+  background-color: #ed504f;
 }
 
 .round {
@@ -103,14 +101,18 @@
   font-size: 0.875rem !important;
 }
 
+.muted {
+  background-color: var(--color-gray);
+}
+
 .selected:not(.onAvatar) {
   .badge:not(.pinned) {
     color: var(--color-chat-active);
-    background: var(--color-white);
+    background-color: var(--color-white);
 
     &.muted {
       color: var(--color-white);
-      background: #ffffff33;
+      background-color: #ffffff33;
     }
   }
 }

src/components/left/main/ChatBadge.tsx

@@ -143,26 +143,27 @@ const ChatBadge = ({
   });
 
   function renderContent() {
-    const baseClassName = buildClassName(styles.badge, !shouldBeUnMuted && styles.muted, badgeClassName);
+    const baseClassName = buildClassName(styles.badge, badgeClassName);
+    const statefulClassName = buildClassName(baseClassName, !shouldBeUnMuted && styles.muted);
 
     const unreadReactionsElement = unreadReactionsCount && (
-      <div className={buildClassName(baseClassName, styles.reaction, styles.round)}>
+      <div className={buildClassName(statefulClassName, styles.reaction, styles.round)}>
         <Icon name="heart" />
       </div>
     );
 
     const unreadMentionsElement = unreadMentionsCount && (
-      <div className={buildClassName(baseClassName, styles.mention, styles.round)}>
+      <div className={buildClassName(statefulClassName, styles.mention, styles.round)}>
         <Icon name="mention" />
       </div>
     );
 
     const unopenedTopicElement = isTopicUnopened && (
-      <div className={buildClassName(baseClassName, styles.unopened)} />
+      <div className={buildClassName(statefulClassName, styles.unopened)} />
     );
 
     const unreadCountElement = isUnread ? (
-      <div className={buildClassName(baseClassName, styles.unread)}>
+      <div className={buildClassName(statefulClassName, styles.unread)}>
         {!hasUnreadMark && <AnimatedCounter text={formatIntegerCompact(lang, unreadCount!)} />}
       </div>
     ) : undefined;

src/components/middle/composer/BotKeyboardMenu.module.scss

@@ -0,0 +1,109 @@
+@use "../../../styles/mixins";
+
+.root {
+  :global(.bubble) {
+    width: 100% !important;
+    max-width: 27rem;
+    border-radius: var(--border-radius-default-small);
+  }
+}
+
+.content {
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+
+  max-height: 75vh;
+  padding: 0.1875rem 0.625rem;
+
+  @include mixins.adapt-padding-to-scrollbar(0.625rem);
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+
+  & + & {
+    margin-top: 0.375rem;
+  }
+}
+
+.button {
+  --secondary-bg: transparent;
+
+  flex: 1;
+
+  width: auto;
+  height: auto;
+  min-height: 3.0625rem;
+  border: 2px solid var(--color-primary);
+  border-radius: var(--border-radius-messages-small);
+
+  font-weight: var(--font-weight-medium);
+  color: var(--color-primary);
+
+  background: var(--color-background);
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    opacity: 80%;
+    background-color: var(--secondary-bg);
+  }
+
+  & + & {
+    margin-left: 0.375rem;
+  }
+
+  &:hover {
+    border-color: var(--color-primary-shade);
+    color: #fff;
+    background: var(--color-primary-shade);
+  }
+}
+
+.inlineButtonText {
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.customEmojiIcon {
+  margin-inline-end: 0.125rem;
+  vertical-align: text-top;
+}
+
+.primaryTint,
+.successTint,
+.destructiveTint {
+  border-width: 0;
+  color: #fff;
+  background-color: transparent;
+
+  &:hover {
+    border-color: transparent;
+    opacity: 75%;
+    background-color: transparent;
+  }
+}
+
+.primaryTint {
+  --secondary-bg: var(--color-primary);
+}
+
+.successTint {
+  --secondary-bg: var(--color-success);
+}
+
+.destructiveTint {
+  --secondary-bg: var(--color-error);
+}

src/components/middle/composer/BotKeyboardMenu.scss

@@ -1,55 +0,0 @@
-@use "../../../styles/mixins";
-
-.BotKeyboardMenu {
-  .bubble {
-    width: 100% !important;
-    max-width: 27rem;
-    border-radius: var(--border-radius-default-small);
-  }
-
-  .content {
-    overflow-y: scroll;
-    display: flex;
-    flex-direction: column;
-
-    max-height: 75vh;
-    padding: 0.1875rem 0.625rem;
-
-    @include mixins.adapt-padding-to-scrollbar(0.625rem);
-
-    .row {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .row + .row {
-      margin-top: 0.375rem;
-    }
-
-    .Button {
-      flex: 1;
-
-      width: auto;
-      height: auto;
-      min-height: 3.0625rem;
-      border: 2px solid var(--color-primary);
-      border-radius: var(--border-radius-messages-small);
-
-      font-weight: var(--font-weight-medium);
-      color: var(--color-primary);
-      text-transform: none;
-
-      background: var(--color-background);
-
-      &:hover {
-        border-color: var(--color-primary-shade);
-        color: #fff;
-        background: var(--color-primary-shade);
-      }
-    }
-
-    .Button + .Button {
-      margin-left: 0.375rem;
-    }
-  }
-}

src/components/middle/composer/BotKeyboardMenu.tsx

@@ -1,4 +1,4 @@
-import type { FC, TeactNode } from '../../../lib/teact/teact';
+import type { TeactNode } from '../../../lib/teact/teact';
 import { memo, useMemo } from '../../../lib/teact/teact';
 import { getActions, withGlobal } from '../../../global';
 
@@ -7,15 +7,17 @@ import type { ThreadId } from '../../../types';
 
 import { selectChatMessage, selectCurrentMessageList } from '../../../global/selectors';
 import { IS_TOUCH_ENV } from '../../../util/browser/windowEnvironment';
+import buildClassName from '../../../util/buildClassName';
 import renderKeyboardButtonText from './helpers/renderKeyboardButtonText';
 
 import useLang from '../../../hooks/useLang';
 import useMouseInside from '../../../hooks/useMouseInside';
 
+import CustomEmoji from '../../common/CustomEmoji';
 import Button from '../../ui/Button';
 import Menu from '../../ui/Menu';
 
-import './BotKeyboardMenu.scss';
+import styles from './BotKeyboardMenu.module.scss';
 
 export type OwnProps = {
   isOpen: boolean;
@@ -28,9 +30,11 @@ type StateProps = {
   message?: ApiMessage;
 };
 
-const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
+const ICON_SIZE = 16;
+
+const BotKeyboardMenu = ({
   isOpen, threadId, message, onClose,
-}) => {
+}: OwnProps & StateProps) => {
   const { clickBotInlineButton } = getActions();
 
   const lang = useLang();
@@ -58,25 +62,38 @@ const BotKeyboardMenu: FC<OwnProps & StateProps> = ({
       positionX="right"
       positionY="bottom"
       onClose={onClose}
-      className="BotKeyboardMenu"
+      className={styles.root}
       onCloseAnimationEnd={onClose}
       onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
       onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
       noCompact
     >
-      <div className="content custom-scroll">
+      <div className={buildClassName(styles.content, 'custom-scroll')}>
         {message.keyboardButtons.map((row, i) => (
-          <div className="row">
+          <div className={styles.row}>
             {row.map((button, j) => (
               <Button
+                className={buildClassName(
+                  styles.button,
+                  button.style?.type && styles[`${button.style.type}Tint`],
+                )}
                 ripple
+                noForcedUpperCase
                 disabled={button.type === 'unsupported'}
-
                 onClick={() => clickBotInlineButton({
                   chatId: message.chatId, messageId: message.id, threadId, button,
                 })}
               >
+                <span className={styles.inlineButtonText}>
+                  {button.style?.iconId && (
+                    <CustomEmoji
+                      className={styles.customEmojiIcon}
+                      documentId={button.style.iconId}
+                      size={ICON_SIZE}
+                    />
+                  )}
                   {buttonTexts?.[i][j]}
+                </span>
               </Button>
             ))}
           </div>

src/components/middle/message/ActionMessage.module.scss

@@ -86,10 +86,10 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+}
 
-  :global(.InlineButtons) {
+.inlineButtons {
   width: 100%;
-  }
 }
 
 .contextContainer {

src/components/middle/message/ActionMessage.tsx

@@ -616,6 +616,7 @@ const ActionMessage = ({
           {fullContent}
           {shouldRenderInlineButtons && (
             <InlineButtons
+              className={styles.inlineButtons}
               inlineButtons={giftOfferInlineButtons}
               onClick={handleInlineButtonClick}
             />

src/components/middle/message/InlineButtons.module.scss

@@ -0,0 +1,124 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  max-width: var(--max-width);
+}
+
+.button {
+  --secondary-bg: transparent;
+
+  flex: 1;
+
+  width: auto;
+  margin: 0.125rem;
+  border-radius: var(--border-radius-messages-small);
+
+  font-weight: var(--font-weight-medium);
+  line-height: 1.25;
+
+  background-color: var(--action-message-bg);
+
+  transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
+
+  &::before {
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+
+    opacity: 50%;
+    background-color: var(--secondary-bg);
+  }
+
+  &:active,
+  &:hover,
+  &:focus {
+    background-color: var(--action-message-bg) !important;
+    backdrop-filter: brightness(115%);
+
+    @supports not (backdrop-filter: brightness(115%)) {
+      filter: brightness(115%);
+    }
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+  }
+
+  &:last-of-type {
+    margin-right: 0;
+  }
+}
+
+.cornerIcon {
+  position: absolute;
+  top: 0.1875rem;
+  right: 0.1875rem;
+
+  display: block;
+
+  font-size: 0.875rem;
+
+  &:global(.icon-arrow-right) {
+    top: 0.125rem;
+    right: 0.125rem;
+    transform: rotate(-45deg);
+    font-size: 0.75rem;
+  }
+}
+
+.leftIcon {
+  margin-right: 0.25rem;
+  font-size: 1rem !important;
+}
+
+.inlineButtonText {
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.row {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+
+  &:first-of-type .button {
+    margin-top: 0.25rem !important;
+  }
+
+  &:last-of-type .button {
+    margin-bottom: 0;
+
+    &:first-of-type {
+      border-bottom-left-radius: var(--border-radius-messages);
+    }
+
+    &:last-of-type {
+      border-bottom-right-radius: var(--border-radius-messages);
+    }
+  }
+}
+
+.primaryTint {
+  --secondary-bg: var(--color-primary);
+}
+
+.successTint {
+  --secondary-bg: var(--color-success);
+}
+
+.destructiveTint {
+  --secondary-bg: var(--color-error);
+}
+
+.customEmojiIcon {
+  margin-inline-end: 0.125rem;
+  vertical-align: text-top;
+}

src/components/middle/message/InlineButtons.scss

@@ -1,89 +0,0 @@
-.InlineButtons {
-  display: flex;
-  flex-direction: column;
-  max-width: var(--max-width);
-
-  .row {
-    display: grid;
-    grid-auto-columns: minmax(0, 1fr);
-    grid-auto-flow: column;
-  }
-
-  .Button {
-    flex: 1;
-
-    width: auto;
-    margin: 0.125rem;
-    border-radius: var(--border-radius-messages-small);
-
-    font-weight: var(--font-weight-medium);
-    text-transform: none;
-
-    background: var(--action-message-bg);
-
-    transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;
-
-    &:active,
-    &:hover,
-    &:focus {
-      background: var(--action-message-bg) !important;
-      backdrop-filter: brightness(115%);
-
-      @supports not (backdrop-filter: brightness(115%)) {
-        filter: brightness(115%);
-      }
-    }
-
-    &:first-of-type {
-      margin-left: 0;
-    }
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-
-    .corner-icon {
-      position: absolute;
-      top: 0.1875rem;
-      right: 0.1875rem;
-
-      display: block;
-
-      font-size: 0.875rem;
-
-      &.icon-arrow-right {
-        top: 0.125rem;
-        right: 0.125rem;
-        transform: rotate(-45deg);
-        font-size: 0.75rem;
-      }
-    }
-  }
-
-  .left-icon {
-    margin-right: 0.25rem;
-    font-size: 1rem !important;
-  }
-
-  .inline-button-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .row:first-of-type .Button {
-    margin-top: 0.25rem !important;
-  }
-
-  .row:last-of-type .Button {
-    margin-bottom: 0;
-
-    &:first-of-type {
-      border-bottom-left-radius: var(--border-radius-messages);
-    }
-
-    &:last-of-type {
-      border-bottom-right-radius: var(--border-radius-messages);
-    }
-  }
-}

src/components/middle/message/InlineButtons.tsx

@@ -4,21 +4,26 @@ import { memo, useMemo } from '../../../lib/teact/teact';
 import type { ApiKeyboardButton } from '../../../api/types';
 
 import { RE_TME_LINK, TME_LINK_PREFIX } from '../../../config';
+import buildClassName from '../../../util/buildClassName';
 import renderKeyboardButtonText from '../composer/helpers/renderKeyboardButtonText';
 
 import useLang from '../../../hooks/useLang';
 
+import CustomEmoji from '../../common/CustomEmoji';
 import Icon from '../../common/icons/Icon';
 import Button from '../../ui/Button';
 
-import './InlineButtons.scss';
+import styles from './InlineButtons.module.scss';
 
 type OwnProps = {
+  className?: string;
   inlineButtons: ApiKeyboardButton[][];
   onClick: (payload: ApiKeyboardButton) => void;
 };
 
-const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
+const ICON_SIZE = 16;
+
+const InlineButtons = ({ className, inlineButtons, onClick }: OwnProps) => {
   const lang = useLang();
 
   const renderIcon = (button: ApiKeyboardButton) => {
@@ -28,42 +33,42 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
         const { url } = button;
 
         if (url.startsWith(TME_LINK_PREFIX) && url.includes('?startapp')) {
-          return <Icon className="corner-icon" name="webapp" />;
+          return <Icon className={styles.cornerIcon} name="webapp" />;
         } else if (!RE_TME_LINK.test(url)) {
-          return <Icon className="corner-icon" name="arrow-right" />;
+          return <Icon className={styles.cornerIcon} name="arrow-right" />;
         }
 
         return;
       }
       case 'urlAuth':
-        return <Icon className="corner-icon" name="arrow-right" />;
+        return <Icon className={styles.cornerIcon} name="arrow-right" />;
       case 'buy':
       case 'receipt':
-        return <Icon className="corner-icon" name="card" />;
+        return <Icon className={styles.cornerIcon} name="card" />;
       case 'switchBotInline':
-        return <Icon className="corner-icon" name="share-filled" />;
+        return <Icon className={styles.cornerIcon} name="share-filled" />;
       case 'webView':
       case 'simpleWebView':
-        return <Icon className="corner-icon" name="webapp" />;
+        return <Icon className={styles.cornerIcon} name="webapp" />;
       case 'copy':
-        return <Icon className="corner-icon" name="copy" />;
+        return <Icon className={styles.cornerIcon} name="copy" />;
       case 'suggestedMessage':
         if (button.buttonType === 'suggestChanges') {
-          return <Icon className="left-icon" name="edit" />;
+          return <Icon className={styles.leftIcon} name="edit" />;
         }
         if (button.buttonType === 'approve') {
-          return <Icon className="left-icon" name="check" />;
+          return <Icon className={styles.leftIcon} name="check" />;
         }
         if (button.buttonType === 'decline') {
-          return <Icon className="left-icon" name="close" />;
+          return <Icon className={styles.leftIcon} name="close" />;
         }
         break;
       case 'giftOffer':
         if (button.buttonType === 'accept') {
-          return <Icon className="left-icon" name="check" />;
+          return <Icon className={styles.leftIcon} name="check" />;
         }
         if (button.buttonType === 'reject') {
-          return <Icon className="left-icon" name="close" />;
+          return <Icon className={styles.leftIcon} name="close" />;
         }
         break;
     }
@@ -80,19 +85,29 @@ const InlineButtons = ({ inlineButtons, onClick }: OwnProps) => {
   }, [lang, inlineButtons]);
 
   return (
-    <div className="InlineButtons">
+    <div className={buildClassName(styles.root, className)}>
       {inlineButtons.map((row, i) => (
-        <div className="row">
+        <div className={styles.row}>
           {row.map((button, j) => (
             <Button
+              className={buildClassName(
+                styles.button, button.style?.type && styles[`${button.style.type}Tint`],
+              )}
               size="tiny"
               ripple
+              noForcedUpperCase
               disabled={button.type === 'unsupported' || (button.type === 'suggestedMessage' && button.disabled)}
-
               onClick={() => onClick(button)}
             >
               {renderIcon(button)}
-              <span className="inline-button-text">
+              <span className={styles.inlineButtonText}>
+                {button.style?.iconId && (
+                  <CustomEmoji
+                    className={styles.customEmojiIcon}
+                    documentId={button.style.iconId}
+                    size={ICON_SIZE}
+                  />
+                )}
                 {buttonTexts[i][j]}
               </span>
             </Button>

src/components/ui/Button.scss

@@ -24,8 +24,9 @@
   }
 }
 
-.Button {
+@layer ui.button {
-  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
+  .Button {
+    --premium-gradient: linear-gradient(88.39deg, #6c93ff -2.56%, #976fff 51.27%, #df69d1 107.39%);
 
     cursor: var(--custom-cursor, pointer);
 
@@ -53,7 +54,10 @@
     background-size: cover;
     outline: none !important;
 
-  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
+    transition:
+      background-color 0.2s,
+      color 0.2s,
+      opacity 0.2s;
 
     white-space-collapse: preserve;
 
@@ -308,18 +312,18 @@
       --ripple-color: rgba(0, 0, 0, 0.08);
 
       color: var(--color-white);
-    background-color: #FFB727;
+      background-color: #ffb727;
 
       .theme-dark & {
-      background-color: #CF8920;
+        background-color: #cf8920;
       }
 
       @include active-styles() {
-      background-color: #FFB727CC;
+        background-color: #ffb727cc;
       }
 
       @include no-ripple-styles() {
-      background-color: #FFB727;
+        background-color: #ffb727;
       }
     }
 
@@ -365,6 +369,7 @@
 
     &.tiny {
       --emoji-size: 1rem;
+      --custom-emoji-size: var(--emoji-size);
 
       height: 2.25rem;
       padding: 0.4375rem;
@@ -383,6 +388,7 @@
 
       &.pill {
         --emoji-size: 1.25rem;
+        --custom-emoji-size: var(--emoji-size);
 
         height: 1.75rem;
         padding: 0.25rem 0.5rem;
@@ -424,7 +430,8 @@
       }
     }
 
-  &.pill, &.badge {
+    &.pill,
+    &.badge {
       padding-right: 1.75rem;
       padding-left: 1.75rem;
       border-radius: 1.75rem;
@@ -436,7 +443,6 @@
       position: relative;
 
       .Spinner {
-
         --spinner-size: 1.8125rem;
 
         position: absolute;
@@ -521,4 +527,5 @@
         margin-inline-start: 0.25rem;
       }
     }
+  }
 }

src/index.html

@@ -51,6 +51,9 @@
   <link rel="manifest" id="the-manifest-placeholder" href="./<%= htmlWebpackPlugin.options.manifest %>">
 
   <script src="./redirect.js"></script>
+  <style>
+    @layer reset, variables, ui, components;
+  </style>
 </head>
 
 <body id="root">

src/styles/_variables.scss

@@ -18,54 +18,55 @@
   @return rgb($bm-red, $bm-green, $bm-blue);
 }
 
-$color-primary: #3390ec;
+@layer variables {
+  $color-primary: #3390ec;
 
-$color-links: #3390ec;
+  $color-links: #3390ec;
 
-$color-placeholders: #a2acb4;
+  $color-placeholders: #a2acb4;
 
-$color-text-green: #4fae4e;
+  $color-text-green: #4fae4e;
-$color-green: #00c73e;
+  $color-green: #00c73e;
-$color-light-green: #eeffde;
+  $color-light-green: #eeffde;
 
-$color-error: #e53935;
+  $color-error: #e53935;
 
-$color-warning: #fb8c00;
+  $color-warning: #fb8c00;
 
-$color-yellow: #fdd764;
+  $color-yellow: #fdd764;
-$color-orange: #d08a31;
+  $color-orange: #d08a31;
-$color-light-coral: #d08a3133;
+  $color-light-coral: #d08a3133;
 
-$color-white: #ffffff;
+  $color-white: #ffffff;
-$color-black: #000000;
+  $color-black: #000000;
-$color-dark-gray: #2e3939;
+  $color-dark-gray: #2e3939;
-$color-gray: #c4c9cc;
+  $color-gray: #c4c9cc;
-$color-text-secondary: #707579;
+  $color-text-secondary: #707579;
-$color-text-secondary-apple: #8a8a90;
+  $color-text-secondary-apple: #8a8a90;
-$color-text-meta: #686c72;
+  $color-text-meta: #686c72;
-$color-text-meta-apple: #8c8c91;
+  $color-text-meta-apple: #8c8c91;
-$color-borders: #dadce0;
+  $color-borders: #dadce0;
-$color-dividers: #c8c6cc;
+  $color-dividers: #c8c6cc;
-$color-dividers-android: #E7E7E7;
+  $color-dividers-android: #E7E7E7;
-$color-item-hover: #f4f4f5;
+  $color-item-hover: #f4f4f5;
-$color-item-active: #ededed;
+  $color-item-active: #ededed;
-$color-chat-hover: #f4f4f5;
+  $color-chat-hover: #f4f4f5;
-$color-chat-active: #3390ec;
+  $color-chat-active: #3390ec;
-$color-selection: #3993fb;
+  $color-selection: #3993fb;
 
-$color-message-reaction: #ebf3fd;
+  $color-message-reaction: #ebf3fd;
-$color-message-reaction-hover: #c5def9;
+  $color-message-reaction-hover: #c5def9;
-$color-message-reaction-own: #cef0ba;
+  $color-message-reaction-own: #cef0ba;
-$color-message-reaction-own-hover: #b5e0a4;
+  $color-message-reaction-own-hover: #b5e0a4;
-$color-message-reaction-chosen-hover: #1a82ea;
+  $color-message-reaction-chosen-hover: #1a82ea;
-$color-message-reaction-chosen-hover-own: #3f9d4b;
+  $color-message-reaction-chosen-hover-own: #3f9d4b;
 
-$color-message-non-contact: #cceebf;
+  $color-message-non-contact: #cceebf;
 
-$color-message-story-mention-from: #4ef390;
+  $color-message-story-mention-from: #4ef390;
-$color-message-story-mention-to: #74bcff;
+  $color-message-story-mention-to: #74bcff;
 
-:root {
+  :root {
     --color-background: #{$color-white};
     --color-background-compact-menu: #FFFFFFBB;
     --color-background-compact-menu-reactions: #FFFFFFEB;
@@ -237,8 +238,8 @@ $color-message-story-mention-to: #74bcff;
     --folders-sidebar-width: 5rem;
     --window-controls-width: 0rem;
     --header-height: 3.5rem;
-  --custom-emoji-size: 1.25rem;
+    --emoji-size: 1.25em;
-  --emoji-size: 1.25rem;
+    --custom-emoji-size: var(--emoji-size);
     --custom-emoji-border-radius: 0;
 
     --symbol-menu-width: 24rem;
@@ -349,4 +350,5 @@ $color-message-story-mention-to: #74bcff;
       --symbol-menu-width: 100vw;
       --symbol-menu-height: 17.6875rem;
     }
+  }
 }

src/styles/reboot.css

@@ -1,202 +1,196 @@
+/* stylelint-disable selector-max-type */
 /* stylelint-disable plugin/selector-tag-no-without-class */
-*,
+@layer reset {
-*::before,
+  *,
-*::after {
+  *::before,
+  *::after {
     box-sizing: border-box;
-}
+  }
 
-html {
+  html {
     font-family: sans-serif;
     line-height: 1.15;
     -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
 
-  -ms-overflow-style: scrollbar;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
+  }
 
-@-ms-viewport {
+  article,
-  width: device-width;
+  aside,
-}
+  dialog,
-
+  figcaption,
-article,
+  figure,
-aside,
+  footer,
-dialog,
+  header,
-figcaption,
+  hgroup,
-figure,
+  main,
-footer,
+  nav,
-header,
+  section {
-hgroup,
-main,
-nav,
-section {
     display: block;
-}
+  }
 
-body, blockquote {
+  body, blockquote {
     margin: 0;
-}
+  }
 
-[tabindex="-1"]:focus {
+  [tabindex="-1"]:focus {
     outline: none !important;
-}
+  }
 
-hr {
+  hr {
     overflow: visible;
     box-sizing: content-box;
     height: 0;
-}
+  }
 
-h1,
+  h1,
-h2,
+  h2,
-h3,
+  h3,
-h4,
+  h4,
-h5,
+  h5,
-h6 {
+  h6 {
     margin-top: 0;
     margin-bottom: 0.5rem;
     font-weight: var(--font-weight-medium);
-}
+  }
 
-abbr[title],
+  abbr[title],
-abbr[data-original-title] {
+  abbr[data-original-title] {
     cursor: help;
     border-bottom: 0;
     text-decoration: underline;
     text-decoration: underline dotted;
-}
+  }
 
-address {
+  address {
     margin-bottom: 1rem;
     font-style: normal;
     line-height: inherit;
-}
+  }
 
-p,
+  p,
-ol,
+  ol,
-ul,
+  ul,
-dl {
+  dl {
     margin-top: 0;
     margin-bottom: 1rem;
-}
+  }
 
-ol ol,
+  ol ol,
-ul ul,
+  ul ul,
-ol ul,
+  ol ul,
-ul ol {
+  ul ol {
     margin-bottom: 0;
-}
+  }
 
-dd {
+  dd {
     margin-bottom: 0.5rem;
     margin-left: 0;
-}
+  }
 
-figure {
+  figure {
     margin: 0 0 1rem;
-}
+  }
 
-dfn {
+  dfn {
     font-style: italic;
-}
+  }
 
-dt,
+  dt,
-b,
+  b,
-strong {
+  strong {
     font-weight: var(--font-weight-medium);
-}
+  }
 
-small {
+  small {
     font-size: 80%;
-}
+  }
 
-sub,
+  sub,
-sup {
+  sup {
     position: relative;
     font-size: 75%;
     line-height: 0;
     vertical-align: baseline;
-}
+  }
 
-sub {
+  sub {
     bottom: -0.25em;
-}
+  }
 
-sup {
+  sup {
     top: -0.5em;
-}
+  }
 
-a {
+  a {
     color: var(--color-links);
     text-decoration: none;
     background-color: transparent;
 
     -webkit-text-decoration-skip: objects;
-}
+  }
 
-a:hover {
+  a:hover {
     color: #0056b3;
     text-decoration: underline;
-}
+  }
 
-a:not([href]):not([tabindex]),
+  a:not([href]):not([tabindex]),
-a:not([href]):not([tabindex]):hover,
+  a:not([href]):not([tabindex]):hover,
-a:not([href]):not([tabindex]):focus {
+  a:not([href]):not([tabindex]):focus {
     color: inherit;
     text-decoration: none;
-}
+  }
 
-a:not([href]):not([tabindex]):focus {
+  a:not([href]):not([tabindex]):focus {
     outline: 0;
-}
+  }
 
-pre,
+  pre,
-code,
+  code,
-kbd,
+  kbd,
-samp {
+  samp {
     /* stylelint-disable-next-line @stylistic/max-line-length */
     font: 0.9375rem/1.25 "Courier", "Courier New", "Nimbus Mono L", "Courier 10 Pitch", "FreeMono", sans-serif-monospace, monospace;
     font-size-adjust: 0.5;
-}
+  }
 
-pre {
+  pre {
     overflow: auto;
     margin-top: 0;
     margin-bottom: 1rem;
+  }
 
-  -ms-overflow-style: scrollbar;
+  img {
-}
-
-img {
     border-style: none;
     vertical-align: middle;
-}
+  }
 
-img, video {
+  img, video {
     dynamic-range-limit: standard;
-}
+  }
 
-svg:not(:root) {
+  svg:not(:root) {
     overflow: hidden;
-}
+  }
 
-a,
+  a,
-area,
+  area,
-button,
+  button,
-[role="button"],
+  [role="button"],
-input:not([type="range"]),
+  input:not([type="range"]),
-label,
+  label,
-select,
+  select,
-summary,
+  summary,
-textarea {
+  textarea {
     touch-action: manipulation;
-}
+  }
 
-table {
+  table {
     border-collapse: collapse;
-}
+  }
 
-caption {
+  caption {
     caption-side: bottom;
 
     padding-top: 0.75rem;
@@ -204,79 +198,79 @@ caption {
 
     color: #868e96;
     text-align: left;
-}
+  }
 
-th {
+  th {
     text-align: inherit;
-}
+  }
 
-label {
+  label {
     display: inline-block;
     margin-bottom: 0.5rem;
-}
+  }
 
-button {
+  button {
     border-radius: 0;
     -webkit-appearance: button;
-}
+  }
 
-button:focus {
+  button:focus {
     outline: 1px dotted;
     outline: 5px auto -webkit-focus-ring-color;
-}
+  }
 
-input,
+  input,
-button,
+  button,
-select,
+  select,
-optgroup,
+  optgroup,
-textarea {
+  textarea {
     margin: 0;
     font-family: inherit;
     font-size: inherit;
     line-height: inherit;
-}
+  }
 
-button,
+  button,
-input {
+  input {
     overflow: visible;
-}
+  }
 
-button,
+  button,
-select {
+  select {
     text-transform: none;
-}
+  }
 
-button::-moz-focus-inner {
+  button::-moz-focus-inner {
     padding: 0;
     border-style: none;
-}
+  }
 
-input[type="radio"],
+  input[type="radio"],
-input[type="checkbox"] {
+  input[type="checkbox"] {
     box-sizing: border-box;
     padding: 0;
-}
+  }
 
-input[type="date"],
+  input[type="date"],
-input[type="time"],
+  input[type="time"],
-input[type="datetime-local"],
+  input[type="datetime-local"],
-input[type="month"] {
+  input[type="month"] {
     -webkit-appearance: listbox;
-}
+  }
 
-textarea {
+  textarea {
     resize: vertical;
     overflow: auto;
-}
+  }
 
-fieldset {
+  fieldset {
     min-width: 0;
     margin: 0;
     padding: 0;
     border: 0;
-}
+  }
 
-legend {
+  legend {
     display: block;
 
     width: 100%;
@@ -288,44 +282,45 @@ legend {
     line-height: inherit;
     color: inherit;
     white-space: normal;
-}
+  }
 
-progress {
+  progress {
     vertical-align: baseline;
-}
+  }
 
-[type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
+  [type="number"]::-webkit-outer-spin-button {
     height: auto;
-}
+  }
 
-[type="search"] {
+  [type="search"] {
     -webkit-appearance: none;
     outline-offset: -2px;
-}
+  }
 
-[type="search"]::-webkit-search-cancel-button,
+  [type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
+  [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
-}
+  }
 
-::-webkit-file-upload-button {
+  ::-webkit-file-upload-button {
     font: inherit;
     -webkit-appearance: button;
-}
+  }
 
-output {
+  output {
     display: inline-block;
-}
+  }
 
-summary {
+  summary {
     display: list-item;
-}
+  }
 
-template {
+  template {
     display: none;
-}
+  }
 
-[hidden] {
+  [hidden] {
     display: none !important;
+  }
 }