Inline Buttons: Support colors and icons (#6700)

2026-02-22 23:43:44 +01:00 · 2026-02-22 23:43:44 +01:00 · 5a7b0b1492
commit 5a7b0b1492
parent f65b568cfb
17 changed files with 1385 additions and 1210 deletions
--- a/src/api/gramjs/apiBuilders/bots.ts
+++ b/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 } {
--- a/src/api/types/messages.ts
+++ b/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';
--- a/src/components/common/Composer.scss
+++ b/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);
    }

--- a/src/components/left/main/ChatBadge.module.scss
+++ b/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),
-.unopened:not(.muted) {
+.unread,
+.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) {
-  background: #ed504f;
+.reaction {
+  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;
    }
  }
 }
--- a/src/components/left/main/ChatBadge.tsx
+++ b/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;
--- a/src/components/middle/composer/BotKeyboardMenu.module.scss
+++ b/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);
+}
--- a/src/components/middle/composer/BotKeyboardMenu.scss
+++ b/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;
-    }
-  }
-}
--- a/src/components/middle/composer/BotKeyboardMenu.tsx
+++ b/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>
--- a/src/components/middle/message/ActionMessage.module.scss
+++ b/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 {
--- a/src/components/middle/message/ActionMessage.tsx
+++ b/src/components/middle/message/ActionMessage.tsx
@ -616,6 +616,7 @@ const ActionMessage = ({
          {fullContent}
          {shouldRenderInlineButtons && (
            <InlineButtons
+              className={styles.inlineButtons}
              inlineButtons={giftOfferInlineButtons}
              onClick={handleInlineButtonClick}
            />
--- a/src/components/middle/message/InlineButtons.module.scss
+++ b/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;
+}
--- a/src/components/middle/message/InlineButtons.scss
+++ b/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);
-    }
-  }
-}
--- a/src/components/middle/message/InlineButtons.tsx
+++ b/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>
--- a/src/components/ui/Button.scss
+++ b/src/components/ui/Button.scss
@ -24,8 +24,9 @@
  }
 }

-.Button {
-  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
+@layer ui.button {
+  .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;
      }
    }
+  }
 }
--- a/src/index.html
+++ b/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">
--- a/src/styles/_variables.scss
+++ b/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-green: #00c73e;
-$color-light-green: #eeffde;
+  $color-text-green: #4fae4e;
+  $color-green: #00c73e;
+  $color-light-green: #eeffde;

-$color-error: #e53935;
+  $color-error: #e53935;

-$color-warning: #fb8c00;
+  $color-warning: #fb8c00;

-$color-yellow: #fdd764;
-$color-orange: #d08a31;
-$color-light-coral: #d08a3133;
+  $color-yellow: #fdd764;
+  $color-orange: #d08a31;
+  $color-light-coral: #d08a3133;

-$color-white: #ffffff;
-$color-black: #000000;
-$color-dark-gray: #2e3939;
-$color-gray: #c4c9cc;
-$color-text-secondary: #707579;
-$color-text-secondary-apple: #8a8a90;
-$color-text-meta: #686c72;
-$color-text-meta-apple: #8c8c91;
-$color-borders: #dadce0;
-$color-dividers: #c8c6cc;
-$color-dividers-android: #E7E7E7;
-$color-item-hover: #f4f4f5;
-$color-item-active: #ededed;
-$color-chat-hover: #f4f4f5;
-$color-chat-active: #3390ec;
-$color-selection: #3993fb;
+  $color-white: #ffffff;
+  $color-black: #000000;
+  $color-dark-gray: #2e3939;
+  $color-gray: #c4c9cc;
+  $color-text-secondary: #707579;
+  $color-text-secondary-apple: #8a8a90;
+  $color-text-meta: #686c72;
+  $color-text-meta-apple: #8c8c91;
+  $color-borders: #dadce0;
+  $color-dividers: #c8c6cc;
+  $color-dividers-android: #E7E7E7;
+  $color-item-hover: #f4f4f5;
+  $color-item-active: #ededed;
+  $color-chat-hover: #f4f4f5;
+  $color-chat-active: #3390ec;
+  $color-selection: #3993fb;

-$color-message-reaction: #ebf3fd;
-$color-message-reaction-hover: #c5def9;
-$color-message-reaction-own: #cef0ba;
-$color-message-reaction-own-hover: #b5e0a4;
-$color-message-reaction-chosen-hover: #1a82ea;
-$color-message-reaction-chosen-hover-own: #3f9d4b;
+  $color-message-reaction: #ebf3fd;
+  $color-message-reaction-hover: #c5def9;
+  $color-message-reaction-own: #cef0ba;
+  $color-message-reaction-own-hover: #b5e0a4;
+  $color-message-reaction-chosen-hover: #1a82ea;
+  $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-to: #74bcff;
+  $color-message-story-mention-from: #4ef390;
+  $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.25rem;
+    --emoji-size: 1.25em;
+    --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;
    }
+  }
 }
--- a/src/styles/reboot.css
+++ b/src/styles/reboot.css
@ -1,202 +1,196 @@
+/* stylelint-disable selector-max-type */
 /* stylelint-disable plugin/selector-tag-no-without-class */
-*,
-*::before,
-*::after {
+@layer reset {
+  *,
+  *::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 {
-  width: device-width;
-}
-
-article,
-aside,
-dialog,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section {
+  article,
+  aside,
+  dialog,
+  figcaption,
+  figure,
+  footer,
+  header,
+  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,
-h2,
-h3,
-h4,
-h5,
-h6 {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
-}
+  }

-abbr[title],
-abbr[data-original-title] {
+  abbr[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,
-ol,
-ul,
-dl {
+  p,
+  ol,
+  ul,
+  dl {
    margin-top: 0;
    margin-bottom: 1rem;
-}
+  }

-ol ol,
-ul ul,
-ol ul,
-ul ol {
+  ol ol,
+  ul ul,
+  ol ul,
+  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,
-b,
-strong {
+  dt,
+  b,
+  strong {
    font-weight: var(--font-weight-medium);
-}
+  }

-small {
+  small {
    font-size: 80%;
-}
+  }

-sub,
-sup {
+  sub,
+  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]):hover,
-a:not([href]):not([tabindex]):focus {
+  a:not([href]):not([tabindex]),
+  a:not([href]):not([tabindex]):hover,
+  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,
-code,
-kbd,
-samp {
+  pre,
+  code,
+  kbd,
+  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,
-area,
-button,
-[role="button"],
-input:not([type="range"]),
-label,
-select,
-summary,
-textarea {
+  a,
+  area,
+  button,
+  [role="button"],
+  input:not([type="range"]),
+  label,
+  select,
+  summary,
+  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,
-button,
-select,
-optgroup,
-textarea {
+  input,
+  button,
+  select,
+  optgroup,
+  textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
-}
+  }

-button,
-input {
+  button,
+  input {
    overflow: visible;
-}
+  }

-button,
-select {
+  button,
+  select {
    text-transform: none;
-}
+  }

-button::-moz-focus-inner {
+  button::-moz-focus-inner {
    padding: 0;
    border-style: none;
-}
+  }

-input[type="radio"],
-input[type="checkbox"] {
+  input[type="radio"],
+  input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
-}
+  }

-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
+  input[type="date"],
+  input[type="time"],
+  input[type="datetime-local"],
+  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-outer-spin-button {
+  [type="number"]::-webkit-inner-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-decoration {
+  [type="search"]::-webkit-search-cancel-button,
+  [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;
+  }
 }