All emoji icons moved from sprite.

Telegram/Resources/basic.style

@@ -665,28 +665,6 @@ introErrTop: 15px;
 introErrHeight: 40px;
 introErrFont: font(16px);
 
-introErrLabel: flatLabel(labelDefFlat) {
-	font: introErrFont;
-	align: align(center);
-}
-introBackButton: IconButton {
-	width: 40px;
-	height: 40px;
-
-	opacity: 0.71;
-	overOpacity: 1.;
-
-	icon: icon {
-		{ size(40px, 40px), #eeeeee },
-		{ "title_previous", #969696, point(12px, 12px) },
-	};
-	iconPosition: point(0px, 0px);
-	downIconPosition: point(0px, 0px);
-
-	duration: 150;
-}
-introBackPosition: point(32px, 32px);
-
 setLittleSkip: 9px;
 setScroll: flatScroll(scrollDef) {
 	bottomsh: 0px;
@@ -725,19 +703,6 @@ topBarBackAlpha: 0.8;
 topBarBackColor: #005faf;
 topBarBackFont: font(16px);
 topBarArrowPadding: margins(39px, 8px, 17px, 8px);
-topBarSearch: IconButton {
-	width: 44px;
-	height: topBarHeight;
-
-	icon: icon {{ "title_search", #000000 }};
-	iconPosition: point(13px, 18px);
-	downIconPosition: point(13px, 18px);
-
-	opacity: 0.22;
-	overOpacity: 0.36;
-
-	duration: 150;
-}
 topBarMinPadding: 5px;
 topBarButton: RoundButton {
 	textFg: #0084c4;
@@ -1352,171 +1317,6 @@ dpiFont2: linkFont;
 dpiFont3: linkFont;
 dpiFont4: linkFont;
 
-stickersMaxHeight: 440px;
-stickersPadding: margins(19px, 17px, 19px, 17px);
-stickersSize: size(64px, 64px);
-stickersScroll: flatScroll(boxScroll) {
-	round: 2px;
-	deltax: 7px;
-	deltat: 23px;
-	deltab: 9px;
-}
-stickersReorderPadding: margins(0px, 12px, 0px, 12px);
-stickersReorderFg: #777;
-stickersRowDisabledOpacity: 0.4;
-stickersRowDuration: 200;
-
-emojiScroll: flatScroll(solidScroll) {
-	deltat: 48px;
-}
-emojiRecentOver: sprite(0px, 196px, 21px, 22px);
-emojiRecentActive: sprite(245px, 264px, 21px, 22px);
-emojiPeopleOver: sprite(21px, 196px, 21px, 22px);
-emojiPeopleActive: sprite(266px, 264px, 21px, 22px);
-emojiNatureOver: sprite(42px, 196px, 21px, 22px);
-emojiNatureActive: sprite(245px, 286px, 21px, 22px);
-emojiFoodOver: sprite(63px, 196px, 21px, 22px);
-emojiFoodActive: sprite(266px, 286px, 21px, 22px);
-emojiActivityOver: sprite(126px, 196px, 21px, 22px);
-emojiActivityActive: sprite(287px, 264px, 21px, 22px);
-emojiTravelOver: sprite(105px, 196px, 21px, 22px);
-emojiTravelActive: sprite(308px, 286px, 21px, 22px);
-emojiObjectsOver: sprite(147px, 196px, 21px, 22px);
-emojiObjectsActive: sprite(308px, 264px, 21px, 22px);
-emojiSymbolsOver: sprite(84px, 196px, 21px, 22px);
-emojiSymbolsActive: sprite(287px, 286px, 21px, 22px);
-stickersSettings: sprite(140px, 124px, 21px, 22px);
-savedGifsOver: sprite(329px, 286px, 21px, 22px);
-savedGifsActive: sprite(350px, 286px, 21px, 22px);
-featuredStickersOver: sprite(329px, 264px, 21px, 22px);
-featuredStickersActive: sprite(350px, 264px, 21px, 22px);
-
-stickersSettingsUnreadSize: 17px;
-stickersSettingsUnreadPosition: point(4px, 5px);
-
-emojiPanCategories: #f7f7f7;
-
-rbEmoji: flatCheckbox {
-	textColor: transparent;
-	bgColor: emojiPanCategories;
-	disColor: emojiPanCategories;
-
-	width: 42px;
-	height: 46px;
-
-	textTop: 0px;
-	textLeft: 0px;
-	font: font(fsize);
-	duration: 200;
-	bgFunc: transition(easeOutCirc);
-	cursor: cursor(pointer);
-
-	disabledCursor: cursor(default);
-	imagePos: point(11px, 12px);
-}
-rbEmojiRecent: flatCheckbox(rbEmoji) {
-	imageRect: emojiRecentOver;
-	chkImageRect: emojiRecentActive;
-	overImageRect: emojiRecentOver;
-	chkOverImageRect: emojiRecentActive;
-	disImageRect: emojiRecentOver;
-	chkDisImageRect: emojiRecentActive;
-}
-rbEmojiPeople: flatCheckbox(rbEmoji) {
-	imageRect: emojiPeopleOver;
-	chkImageRect: emojiPeopleActive;
-	overImageRect: emojiPeopleOver;
-	chkOverImageRect: emojiPeopleActive;
-	disImageRect: emojiPeopleOver;
-	chkDisImageRect: emojiPeopleActive;
-}
-rbEmojiNature: flatCheckbox(rbEmoji) {
-	imageRect: emojiNatureOver;
-	chkImageRect: emojiNatureActive;
-	overImageRect: emojiNatureOver;
-	chkOverImageRect: emojiNatureActive;
-	disImageRect: emojiNatureOver;
-	chkDisImageRect: emojiNatureActive;
-}
-rbEmojiFood: flatCheckbox(rbEmoji) {
-	imageRect: emojiFoodOver;
-	chkImageRect: emojiFoodActive;
-	overImageRect: emojiFoodOver;
-	chkOverImageRect: emojiFoodActive;
-	disImageRect: emojiFoodOver;
-	chkDisImageRect: emojiFoodActive;
-}
-rbEmojiActivity: flatCheckbox(rbEmoji) {
-	imageRect: emojiActivityOver;
-	chkImageRect: emojiActivityActive;
-	overImageRect: emojiActivityOver;
-	chkOverImageRect: emojiActivityActive;
-	disImageRect: emojiActivityOver;
-	chkDisImageRect: emojiActivityActive;
-}
-rbEmojiTravel: flatCheckbox(rbEmoji) {
-	imageRect: emojiTravelOver;
-	chkImageRect: emojiTravelActive;
-	overImageRect: emojiTravelOver;
-	chkOverImageRect: emojiTravelActive;
-	disImageRect: emojiTravelOver;
-	chkDisImageRect: emojiTravelActive;
-}
-rbEmojiObjects: flatCheckbox(rbEmoji) {
-	imageRect: emojiObjectsOver;
-	chkImageRect: emojiObjectsActive;
-	overImageRect: emojiObjectsOver;
-	chkOverImageRect: emojiObjectsActive;
-	disImageRect: emojiObjectsOver;
-	chkDisImageRect: emojiObjectsActive;
-}
-rbEmojiSymbols: flatCheckbox(rbEmoji) {
-	imageRect: emojiSymbolsOver;
-	chkImageRect: emojiSymbolsActive;
-	overImageRect: emojiSymbolsOver;
-	chkOverImageRect: emojiSymbolsActive;
-	disImageRect: emojiSymbolsOver;
-	chkDisImageRect: emojiSymbolsActive;
-}
-emojiPanPadding: 12px;
-emojiPanSize: size(45px, 41px);
-emojiPanWidth: 345px;
-emojiPanMaxHeight: 366px;
-emojiPanDuration: 200;
-emojiPanHover: #f0f4f7;
-
-emojiPanHeader: 42px;
-emojiPanHeaderFont: semiboldFont;
-emojiPanHeaderColor: #999;
-emojiPanHeaderLeft: 22px;
-emojiPanHeaderTop: 12px;
-emojiPanHeaderBg: #fffffff2;
-
-emojiColorsPadding: 5px;
-emojiColorsSep: 1px;
-emojiColorsSepColor: #d5d5d5;
-
-emojiSwitchSkip: 27px;
-emojiSwitchImgSkip: 21px;
-emojiSwitchStickers: sprite(318px, 328px, 8px, 12px);
-emojiSwitchEmoji: sprite(310px, 328px, 8px, 12px);
-emojiSwitchColor: #42a8db;
-
-stickerPanSize: size(64px, 64px);
-stickerPanPadding: 11px;
-stickerPanDelete: sprite(128px, 132px, 12px, 12px);
-stickerPanDeleteOpacity: 0.5;
-stickerIconPadding: 5px;
-stickerIconOpacity: 0.7;
-stickerIconSel: 2px;
-stickerIconSelColor: #58b2ed;
-stickerIconLeft: sprite(342px, 72px, 40px, 1px);
-stickerIconRight: sprite(342px, 73px, 40px, 1px);
-stickerIconMove: 400;
-stickerPreviewDuration: 150;
-stickerPreviewBg: #FFFFFFB0;
-stickerPreviewMin: 0.1;
-
 botKbDuration: 200;
 botKbBg: #edf1f5;
 botKbOverBg: #d8e2ec;

Telegram/Resources/basic_types.style

@@ -386,17 +386,3 @@ OutlineButton {
 	font: font;
 	padding: margins;
 }
-
-IconButton {
-	width: pixels;
-	height: pixels;
-
-	opacity: double;
-	overOpacity: double;
-
-	icon: icon;
-	iconPosition: point;
-	downIconPosition: point;
-
-	duration: int;
-}

Telegram/SourceFiles/app.cpp

@@ -27,6 +27,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 
 #include "styles/style_overview.h"
 #include "styles/style_mediaview.h"
+#include "styles/style_stickers.h"
 #include "lang.h"
 #include "data/data_abstract_structure.h"
 #include "history/history_service_layout.h"

Telegram/SourceFiles/boxes/boxes.style

@@ -203,3 +203,6 @@ notificationSampleUserpicFg: #40ace3;
 notificationSampleCloseFg: #d7d7d7;
 notificationSampleTextFg: #d7d7d7;
 notificationSampleNameFg: #939393;
+
+membersAboutPadding: margins(0px, 12px, 0px, 12px);
+membersAboutFg: #777;

Telegram/SourceFiles/boxes/members_box.cpp

@@ -170,8 +170,8 @@ void MembersBox::Inner::paintEvent(QPaintEvent *e) {
 			p.translate(0, _rowHeight);
 		}
 		if (to == _rows.size() && _filter == MembersFilter::Recent && (_rows.size() < _channel->membersCount() || _rows.size() >= Global::ChatSizeMax())) {
-			p.setPen(st::stickersReorderFg);
-			_about.draw(p, st::contactsPadding.left(), st::stickersReorderPadding.top(), _aboutWidth, style::al_center);
+			p.setPen(st::membersAboutFg);
+			_about.draw(p, st::contactsPadding.left(), st::membersAboutPadding.top(), _aboutWidth, style::al_center);
 		}
 	}
 }
@@ -348,7 +348,7 @@ void MembersBox::Inner::refresh() {
 		_aboutHeight = 0;
 	} else {
 		_about.setText(st::boxTextFont, lng_channel_only_last_shown(lt_count, _rows.size()));
-		_aboutHeight = st::stickersReorderPadding.top() + _about.countHeight(_aboutWidth) + st::stickersReorderPadding.bottom();
+		_aboutHeight = st::membersAboutPadding.top() + _about.countHeight(_aboutWidth) + st::membersAboutPadding.bottom();
 		if (_filter != MembersFilter::Recent || (_rows.size() >= _channel->membersCount() && _rows.size() < Global::ChatSizeMax())) {
 			_aboutHeight = 0;
 		}

Telegram/SourceFiles/history/field_autocomplete.cpp

@@ -25,6 +25,8 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "apiwrap.h"
 #include "localstorage.h"
 #include "styles/style_history.h"
+#include "styles/style_widgets.h"
+#include "styles/style_stickers.h"
 
 FieldAutocomplete::FieldAutocomplete(QWidget *parent) : TWidget(parent)
 , _scroll(this, st::mentionScroll)

Telegram/SourceFiles/history/history.style

@@ -210,3 +210,17 @@ historyAttachDropdownMenu: DropdownMenu(defaultDropdownMenu) {
 		itemPadding: margins(48px, 11px, 48px, 11px);
 	}
 }
+
+topBarSearch: IconButton {
+	width: 44px;
+	height: topBarHeight;
+
+	icon: icon {{ "title_search", #000000 }};
+	iconPosition: point(13px, 18px);
+	downIconPosition: point(13px, 18px);
+
+	opacity: 0.22;
+	overOpacity: 0.36;
+
+	duration: 150;
+}

Telegram/SourceFiles/inline_bots/inline_bot_layout_internal.cpp

@@ -23,6 +23,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 
 #include "styles/style_overview.h"
 #include "styles/style_history.h"
+#include "styles/style_stickers.h"
 #include "inline_bots/inline_bot_result.h"
 #include "media/media_audio.h"
 #include "media/media_clip_reader.h"

Telegram/SourceFiles/intro/intro.style

@@ -0,0 +1,44 @@
+/*
+This file is part of Telegram Desktop,
+the official desktop version of Telegram messaging app, see https://telegram.org
+
+Telegram Desktop is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+It is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+In addition, as a special exception, the copyright holders give permission
+to link the code of portions of this program with the OpenSSL library.
+
+Full license: https://github.com/telegramdesktop/tdesktop/blob/master/LICENSE
+Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
+*/
+using "basic.style";
+using "ui/widgets/widgets.style";
+
+introErrLabel: flatLabel(labelDefFlat) {
+	font: introErrFont;
+	align: align(center);
+}
+introBackButton: IconButton {
+	width: 40px;
+	height: 40px;
+
+	opacity: 0.71;
+	overOpacity: 1.;
+
+	icon: icon {
+		{ size(40px, 40px), #eeeeee },
+		{ "title_previous", #969696, point(12px, 12px) },
+	};
+	iconPosition: point(0px, 0px);
+	downIconPosition: point(0px, 0px);
+
+	duration: 150;
+}
+introBackPosition: point(32px, 32px);

Telegram/SourceFiles/intro/introphone.cpp

@@ -24,6 +24,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "lang.h"
 #include "application.h"
 #include "intro/introcode.h"
+#include "styles/style_intro.h"
 
 namespace {
 	class SignUpClickHandler : public LeftButtonClickHandler {

Telegram/SourceFiles/intro/introwidget.cpp

@@ -34,6 +34,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "ui/text/text.h"
 #include "ui/buttons/icon_button.h"
 #include "ui/effects/widget_fade_wrap.h"
+#include "styles/style_intro.h"
 
 IntroWidget::IntroWidget(QWidget *parent) : TWidget(parent)
 , _a_stage(animation(this, &IntroWidget::step_stage))

Telegram/SourceFiles/settings/settings.style

@@ -21,6 +21,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 using "basic.style";
 using "basic_types.style";
 using "dialogs/dialogs.style";
+using "ui/widgets/widgets.style";
 
 settingsMaxWidth: 520px;
 settingsMaxPadding: 48px;

Telegram/SourceFiles/stickers/emoji_pan.cpp

@@ -22,6 +22,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "stickers/emoji_pan.h"
 
 #include "styles/style_stickers.h"
+#include "ui/buttons/icon_button.h"
 #include "boxes/confirmbox.h"
 #include "boxes/stickersetbox.h"
 #include "boxes/stickers_box.h"
@@ -292,7 +293,7 @@ void EmojiColorPicker::drawVariant(Painter &p, int variant) {
 }
 
 EmojiPanInner::EmojiPanInner() : TWidget()
-, _maxHeight(int(st::emojiPanMaxHeight) - st::rbEmoji.height)
+, _maxHeight(int(st::emojiPanMaxHeight) - st::emojiCategory.height)
 , _a_selected(animation(this, &EmojiPanInner::step_selected)) {
 	resize(st::emojiPanWidth - st::emojiScroll.width, countHeight());
 
@@ -797,9 +798,9 @@ StickerPanInner::StickerPanInner() : TWidget()
 , _a_selected(animation(this, &StickerPanInner::step_selected))
 , _section(cShowingSavedGifs() ? Section::Gifs : Section::Stickers)
 , _addText(lang(lng_stickers_featured_add).toUpper())
-, _addWidth(st::featuredStickersAdd.font->width(_addText))
+, _addWidth(st::stickersTrendingAdd.font->width(_addText))
 , _settings(this, lang(lng_stickers_you_have)) {
-	setMaxHeight(st::emojiPanMaxHeight - st::rbEmoji.height);
+	setMaxHeight(st::emojiPanMaxHeight - st::emojiCategory.height);
 
 	setMouseTracking(true);
 	setFocusPolicy(Qt::NoFocus);
@@ -864,7 +865,7 @@ void StickerPanInner::readVisibleSets() {
 }
 
 int StickerPanInner::featuredRowHeight() const {
-	return st::featuredStickersHeader + st::stickerPanSize.height() + st::featuredStickersSkip;
+	return st::stickersTrendingHeader + st::stickerPanSize.height() + st::stickersTrendingSkip;
 }
 
 int StickerPanInner::countHeight(bool plain) {
@@ -915,7 +916,7 @@ StickerPanInner::~StickerPanInner() {
 QRect StickerPanInner::stickerRect(int tab, int sel) {
 	int x = 0, y = 0;
 	if (_section == Section::Featured) {
-		y += st::emojiPanHeader + (tab * featuredRowHeight()) + st::featuredStickersHeader;
+		y += st::emojiPanHeader + (tab * featuredRowHeight()) + st::stickersTrendingHeader;
 		x = st::stickerPanPadding + (sel * st::stickerPanSize.width());
 	} else {
 		auto &sets = shownSets();
@@ -1018,15 +1019,15 @@ void StickerPanInner::paintStickers(Painter &p, const QRect &r) {
 			if (featuredHasAddButton(c)) {
 				auto add = featuredAddRect(c);
 				auto selected = (_selectedFeaturedSetAdd == c);
-				auto textBg = selected ? st::featuredStickersAdd.textBgOver : st::featuredStickersAdd.textBg;
-				auto textTop = (selected && _selectedFeaturedSetAdd == _pressedFeaturedSetAdd) ? st::featuredStickersAdd.downTextTop : st::featuredStickersAdd.textTop;
+				auto textBg = selected ? st::stickersTrendingAdd.textBgOver : st::stickersTrendingAdd.textBg;
+				auto textTop = (selected && _selectedFeaturedSetAdd == _pressedFeaturedSetAdd) ? st::stickersTrendingAdd.downTextTop : st::stickersTrendingAdd.textTop;
 
 				App::roundRect(p, myrtlrect(add), textBg, ImageRoundRadius::Small);
-				p.setFont(st::featuredStickersAdd.font);
-				p.setPen(selected ? st::featuredStickersAdd.textFgOver : st::featuredStickersAdd.textFg);
-				p.drawTextLeft(add.x() - (st::featuredStickersAdd.width / 2), add.y() + textTop, width(), _addText, _addWidth);
+				p.setFont(st::stickersTrendingAdd.font);
+				p.setPen(selected ? st::stickersTrendingAdd.textFgOver : st::stickersTrendingAdd.textFg);
+				p.drawTextLeft(add.x() - (st::stickersTrendingAdd.width / 2), add.y() + textTop, width(), _addText, _addWidth);
 
-				widthForTitle -= add.width() - (st::featuredStickersAdd.width / 2);
+				widthForTitle -= add.width() - (st::stickersTrendingAdd.width / 2);
 			} else {
 				auto add = featuredAddRect(c);
 				int checkx = add.left() + (add.width() - st::stickersFeaturedInstalled.width()) / 2;
@@ -1038,29 +1039,29 @@ void StickerPanInner::paintStickers(Painter &p, const QRect &r) {
 			}
 
 			auto titleText = set.title;
-			auto titleWidth = st::featuredStickersHeaderFont->width(titleText);
+			auto titleWidth = st::stickersTrendingHeaderFont->width(titleText);
 			if (titleWidth > widthForTitle) {
-				titleText = st::featuredStickersHeaderFont->elided(titleText, widthForTitle);
-				titleWidth = st::featuredStickersHeaderFont->width(titleText);
+				titleText = st::stickersTrendingHeaderFont->elided(titleText, widthForTitle);
+				titleWidth = st::stickersTrendingHeaderFont->width(titleText);
 			}
-			p.setFont(st::featuredStickersHeaderFont);
-			p.setPen(st::featuredStickersHeaderFg);
-			p.drawTextLeft(st::emojiPanHeaderLeft, y + st::featuredStickersHeaderTop, width(), titleText, titleWidth);
+			p.setFont(st::stickersTrendingHeaderFont);
+			p.setPen(st::stickersTrendingHeaderFg);
+			p.drawTextLeft(st::emojiPanHeaderLeft, y + st::stickersTrendingHeaderTop, width(), titleText, titleWidth);
 
 			if (set.flags & MTPDstickerSet_ClientFlag::f_unread) {
 				p.setPen(Qt::NoPen);
 				p.setBrush(st::stickersFeaturedUnreadBg);
 
 				p.setRenderHint(QPainter::HighQualityAntialiasing, true);
-				p.drawEllipse(rtlrect(st::emojiPanHeaderLeft + titleWidth + st::stickersFeaturedUnreadSkip, y + st::featuredStickersHeaderTop + st::stickersFeaturedUnreadTop, st::stickersFeaturedUnreadSize, st::stickersFeaturedUnreadSize, width()));
+				p.drawEllipse(rtlrect(st::emojiPanHeaderLeft + titleWidth + st::stickersFeaturedUnreadSkip, y + st::stickersTrendingHeaderTop + st::stickersFeaturedUnreadTop, st::stickersFeaturedUnreadSize, st::stickersFeaturedUnreadSize, width()));
 				p.setRenderHint(QPainter::HighQualityAntialiasing, false);
 			}
 
-			p.setFont(st::featuredStickersSubheaderFont);
-			p.setPen(st::featuredStickersSubheaderFg);
-			p.drawTextLeft(st::emojiPanHeaderLeft, y + st::featuredStickersSubheaderTop, width(), lng_stickers_count(lt_count, size));
+			p.setFont(st::stickersTrendingSubheaderFont);
+			p.setPen(st::stickersTrendingSubheaderFg);
+			p.drawTextLeft(st::emojiPanHeaderLeft, y + st::stickersTrendingSubheaderTop, width(), lng_stickers_count(lt_count, size));
 
-			y += st::featuredStickersHeader;
+			y += st::stickersTrendingHeader;
 			if (y >= r.y() + r.height()) break;
 
 			for (int j = fromcol; j < tocol; ++j) {
@@ -1156,10 +1157,10 @@ int StickerPanInner::featuredContentWidth() const {
 }
 
 QRect StickerPanInner::featuredAddRect(int index) const {
-	int addw = _addWidth - st::featuredStickersAdd.width;
-	int addh = st::featuredStickersAdd.height;
+	int addw = _addWidth - st::stickersTrendingAdd.width;
+	int addh = st::stickersTrendingAdd.height;
 	int addx = featuredContentWidth() - addw;
-	int addy = st::emojiPanHeader + index * featuredRowHeight() + st::featuredStickersAddTop;
+	int addy = st::emojiPanHeader + index * featuredRowHeight() + st::stickersTrendingAddTop;
 	return QRect(addx, addy, addw, addh);
 }
 
@@ -2002,7 +2003,7 @@ void StickerPanInner::fillIcons(QList<StickerIcon> &icons) {
 		}
 		for (int l = _mySets.size(); i < l; ++i) {
 			auto s = _mySets[i].pack[0];
-			int32 availw = st::rbEmoji.width - 2 * st::stickerIconPadding, availh = st::rbEmoji.height - 2 * st::stickerIconPadding;
+			int32 availw = st::emojiCategory.width - 2 * st::stickerIconPadding, availh = st::emojiCategory.height - 2 * st::stickerIconPadding;
 			int32 thumbw = s->thumb->width(), thumbh = s->thumb->height(), pixw = 1, pixh = 1;
 			if (availw * thumbh > availh * thumbw) {
 				pixh = availh;
@@ -2175,7 +2176,7 @@ void StickerPanInner::updateSelected() {
 		}
 		if (p.y() >= y && p.y() < ytill) {
 			if (featured) {
-				if (p.y() < y + st::featuredStickersHeader) {
+				if (p.y() < y + st::stickersTrendingHeader) {
 					if (featuredHasAddButton(c) && myrtlrect(featuredAddRect(c)).contains(p.x(), p.y())) {
 						selectedFeaturedSetAdd = c;
 					} else {
@@ -2183,7 +2184,7 @@ void StickerPanInner::updateSelected() {
 					}
 					break;
 				}
-				y += st::featuredStickersHeader;
+				y += st::stickersTrendingHeader;
 			} else {
 				y += st::emojiPanHeader;
 			}
@@ -2547,18 +2548,18 @@ EmojiPan::EmojiPan(QWidget *parent) : TWidget(parent)
 , _maxHeight(st::emojiPanMaxHeight)
 , _contentMaxHeight(st::emojiPanMaxHeight)
 , _contentHeight(_contentMaxHeight)
-, _contentHeightEmoji(_contentHeight - st::rbEmoji.height)
-, _contentHeightStickers(_contentHeight - st::rbEmoji.height)
+, _contentHeightEmoji(_contentHeight - st::emojiCategory.height)
+, _contentHeightStickers(_contentHeight - st::emojiCategory.height)
 , _a_appearance(animation(this, &EmojiPan::step_appearance))
 , _shadow(st::defaultDropdownShadow)
-, _recent(this  , qsl("emoji_group"), dbietRecent  , QString(), true , st::rbEmojiRecent)
-, _people(this  , qsl("emoji_group"), dbietPeople  , QString(), false, st::rbEmojiPeople)
-, _nature(this  , qsl("emoji_group"), dbietNature  , QString(), false, st::rbEmojiNature)
-, _food(this    , qsl("emoji_group"), dbietFood    , QString(), false, st::rbEmojiFood)
-, _activity(this, qsl("emoji_group"), dbietActivity, QString(), false, st::rbEmojiActivity)
-, _travel(this  , qsl("emoji_group"), dbietTravel  , QString(), false, st::rbEmojiTravel)
-, _objects(this , qsl("emoji_group"), dbietObjects , QString(), false, st::rbEmojiObjects)
-, _symbols(this , qsl("emoji_group"), dbietSymbols , QString(), false, st::rbEmojiSymbols)
+, _recent(this, st::emojiCategoryRecent)
+, _people(this, st::emojiCategoryPeople)
+, _nature(this, st::emojiCategoryNature)
+, _food(this, st::emojiCategoryFood)
+, _activity(this, st::emojiCategoryActivity)
+, _travel(this, st::emojiCategoryTravel)
+, _objects(this, st::emojiCategoryObjects)
+, _symbols(this, st::emojiCategorySymbols)
 , _a_icons(animation(this, &EmojiPan::step_icons))
 , _a_slide(animation(this, &EmojiPan::step_slide))
 , e_scroll(this, st::emojiScroll)
@@ -2589,19 +2590,21 @@ EmojiPan::EmojiPan(QWidget *parent) : TWidget(parent)
 	e_inner.moveToLeft(0, 0, e_scroll.width());
 	s_inner.moveToLeft(0, 0, s_scroll.width());
 
-	int32 left = _iconsLeft = st::defaultDropdownPadding.left() + (st::emojiPanWidth - 8 * st::rbEmoji.width) / 2;
-	int32 top = _iconsTop = st::defaultDropdownPadding.top() + _contentHeight - st::rbEmoji.height;
-	prepareTab(left, top, _width, _recent);
-	prepareTab(left, top, _width, _people);
-	prepareTab(left, top, _width, _nature);
-	prepareTab(left, top, _width, _food);
-	prepareTab(left, top, _width, _activity);
-	prepareTab(left, top, _width, _travel);
-	prepareTab(left, top, _width, _objects);
-	prepareTab(left, top, _width, _symbols);
+	int32 left = _iconsLeft = st::defaultDropdownPadding.left() + (st::emojiPanWidth - 8 * st::emojiCategory.width) / 2;
+	int32 top = _iconsTop = st::defaultDropdownPadding.top() + _contentHeight - st::emojiCategory.height;
+	prepareTab(left, top, _width, _recent, dbietRecent);
+	prepareTab(left, top, _width, _people, dbietPeople);
+	prepareTab(left, top, _width, _nature, dbietNature);
+	prepareTab(left, top, _width, _food, dbietFood);
+	prepareTab(left, top, _width, _activity, dbietActivity);
+	prepareTab(left, top, _width, _travel, dbietTravel);
+	prepareTab(left, top, _width, _objects, dbietObjects);
+	prepareTab(left, top, _width, _symbols, dbietSymbols);
 	e_inner.fillPanels(e_panels);
 	updatePanelsPositions(e_panels, 0);
 
+	setCurrentTabIcon(dbietRecent);
+
 	_hideTimer.setSingleShot(true);
 	connect(&_hideTimer, SIGNAL(timeout()), this, SLOT(hideAnimated()));
 
@@ -2657,8 +2660,8 @@ void EmojiPan::setMaxHeight(int32 h) {
 
 void EmojiPan::updateContentHeight() {
 	int32 h = qMin(_contentMaxHeight, _maxHeight);
-	int32 he = h - st::rbEmoji.height;
-	int32 hs = h - (s_inner.showSectionIcons() ? st::rbEmoji.height : 0);
+	int32 he = h - st::emojiCategory.height;
+	int32 hs = h - (s_inner.showSectionIcons() ? st::emojiCategory.height : 0);
 	if (h == _contentHeight && he == _contentHeightEmoji && hs == _contentHeightStickers) return;
 
 	int32 was = _contentHeight, wase = _contentHeightEmoji, wass = _contentHeightStickers;
@@ -2683,24 +2686,23 @@ void EmojiPan::updateContentHeight() {
 		s_scroll.resize(st::emojiPanWidth, _contentHeightStickers);
 	}
 
-	_iconsTop = st::defaultDropdownPadding.top() + _contentHeight - st::rbEmoji.height;
-	_recent.move(_recent.x(), _iconsTop);
-	_people.move(_people.x(), _iconsTop);
-	_nature.move(_nature.x(), _iconsTop);
-	_food.move(_food.x(), _iconsTop);
-	_activity.move(_activity.x(), _iconsTop);
-	_travel.move(_travel.x(), _iconsTop);
-	_objects.move(_objects.x(), _iconsTop);
-	_symbols.move(_symbols.x(), _iconsTop);
+	_iconsTop = st::defaultDropdownPadding.top() + _contentHeight - st::emojiCategory.height;
+	_recent->move(_recent->x(), _iconsTop);
+	_people->move(_people->x(), _iconsTop);
+	_nature->move(_nature->x(), _iconsTop);
+	_food->move(_food->x(), _iconsTop);
+	_activity->move(_activity->x(), _iconsTop);
+	_travel->move(_travel->x(), _iconsTop);
+	_objects->move(_objects->x(), _iconsTop);
+	_symbols->move(_symbols->x(), _iconsTop);
 
 	update();
 }
 
-void EmojiPan::prepareTab(int32 &left, int32 top, int32 _width, FlatRadiobutton &tab) {
-	tab.moveToLeft(left, top, _width);
-	left += tab.width();
-	tab.setAttribute(Qt::WA_OpaquePaintEvent);
-	connect(&tab, SIGNAL(changed()), this, SLOT(onTabChange()));
+void EmojiPan::prepareTab(int &left, int top, int _width, Ui::IconButton *tab, DBIEmojiTab value) {
+	tab->moveToLeft(left, top, _width);
+	left += tab->width();
+	tab->setClickedCallback([this, value] { setActiveTab(value); });
 }
 
 void EmojiPan::onWndActiveChanged() {
@@ -2718,8 +2720,8 @@ void EmojiPan::onSaveConfigDelayed(int32 delay) {
 }
 
 void EmojiPan::paintStickerSettingsIcon(Painter &p) const {
-	int settingsLeft = _iconsLeft + 7 * st::rbEmoji.width;
-	p.drawSpriteLeft(settingsLeft + st::rbEmojiRecent.imagePos.x(), _iconsTop + st::rbEmojiRecent.imagePos.y(), width(), st::stickersSettings);
+	int settingsLeft = _iconsLeft + 7 * st::emojiCategory.width;
+	st::stickersSettings.paint(p, settingsLeft + st::emojiCategory.iconPosition.x(), _iconsTop + st::emojiCategory.iconPosition.y(), width());
 }
 
 void EmojiPan::paintFeaturedStickerSetsBadge(Painter &p, int iconLeft) const {
@@ -2727,7 +2729,7 @@ void EmojiPan::paintFeaturedStickerSetsBadge(Painter &p, int iconLeft) const {
 		Dialogs::Layout::UnreadBadgeStyle unreadSt;
 		unreadSt.sizeId = Dialogs::Layout::UnreadBadgeInStickersPanel;
 		unreadSt.size = st::stickersSettingsUnreadSize;
-		int unreadRight = iconLeft + st::rbEmoji.width - st::stickersSettingsUnreadPosition.x();
+		int unreadRight = iconLeft + st::emojiCategory.width - st::stickersSettingsUnreadPosition.x();
 		if (rtl()) unreadRight = width() - unreadRight;
 		int unreadTop = _iconsTop + st::stickersSettingsUnreadPosition.y();
 		Dialogs::Layout::paintUnreadCount(p, QString::number(unread), unreadRight, unreadTop, unreadSt);
@@ -2750,28 +2752,28 @@ void EmojiPan::paintEvent(QPaintEvent *e) {
 		if (_cache.isNull()) {
 			p.fillRect(myrtlrect(r.x() + r.width() - st::emojiScroll.width, r.y(), st::emojiScroll.width, e_scroll.height()), st::white->b);
 			if (_stickersShown && s_inner.showSectionIcons()) {
-				p.fillRect(r.left(), _iconsTop, r.width(), st::rbEmoji.height, st::emojiPanCategories);
+				p.fillRect(r.left(), _iconsTop, r.width(), st::emojiCategory.height, st::emojiPanCategories);
 				paintStickerSettingsIcon(p);
 
 				if (!_icons.isEmpty()) {
 					int x = _iconsLeft, selxrel = _iconsLeft + _iconSelX.current(), selx = selxrel - _iconsX.current();
 
-					QRect clip(x, _iconsTop, _iconsLeft + 7 * st::rbEmoji.width - x, st::rbEmoji.height);
+					QRect clip(x, _iconsTop, _iconsLeft + 7 * st::emojiCategory.width - x, st::emojiCategory.height);
 					if (rtl()) clip.moveLeft(width() - x - clip.width());
 					p.setClipRect(clip);
 
 					auto getSpecialSetIcon = [](uint64 setId, bool active) {
 						if (setId == Stickers::NoneSetId) {
-							return active ? st::savedGifsActive : st::savedGifsOver;
+							return active ? &st::emojiSavedGifsActive : &st::emojiSavedGifs;
 						} else if (setId == Stickers::FeaturedSetId) {
-							return active ? st::featuredStickersActive : st::featuredStickersOver;
+							return active ? &st::stickersTrendingActive : &st::stickersTrending;
 						}
-						return active ? st::rbEmojiRecent.chkImageRect : st::rbEmojiRecent.imageRect;
+						return active ? &st::emojiRecentActive : &st::emojiRecent;
 					};
 
 					int i = 0;
-					i += _iconsX.current() / int(st::rbEmoji.width);
-					x -= _iconsX.current() % int(st::rbEmoji.width);
+					i += _iconsX.current() / int(st::emojiCategory.width);
+					x -= _iconsX.current() % int(st::emojiCategory.width);
 					selxrel -= _iconsX.current();
 					for (int l = qMin(_icons.size(), i + 8); i < l; ++i) {
 						auto &s = _icons.at(i);
@@ -2779,54 +2781,52 @@ void EmojiPan::paintEvent(QPaintEvent *e) {
 							s.sticker->thumb->load();
 							QPixmap pix(s.sticker->thumb->pix(s.pixw, s.pixh));
 
-							p.drawPixmapLeft(x + (st::rbEmoji.width - s.pixw) / 2, _iconsTop + (st::rbEmoji.height - s.pixh) / 2, width(), pix);
-							x += st::rbEmoji.width;
+							p.drawPixmapLeft(x + (st::emojiCategory.width - s.pixw) / 2, _iconsTop + (st::emojiCategory.height - s.pixh) / 2, width(), pix);
+							x += st::emojiCategory.width;
 						} else {
 							if (true || selxrel != x) {
-								p.drawSpriteLeft(x + st::rbEmojiRecent.imagePos.x(), _iconsTop + st::rbEmojiRecent.imagePos.y(), width(), getSpecialSetIcon(s.setId, false));
+								getSpecialSetIcon(s.setId, false)->paint(p, x + st::emojiCategory.iconPosition.x(), _iconsTop + st::emojiCategory.iconPosition.y(), width());
 							}
-							//if (selxrel < x + st::rbEmoji.width && selxrel > x - st::rbEmoji.width) {
-							//	p.setOpacity(1 - (qAbs(selxrel - x) / float64(st::rbEmoji.width)));
+							//if (selxrel < x + st::emojiCategory.width && selxrel > x - st::emojiCategory.width) {
+							//	p.setOpacity(1 - (qAbs(selxrel - x) / float64(st::emojiCategory.width)));
 							//	p.drawSpriteLeft(x + st::rbEmojiRecent.imagePos.x(), _iconsTop + st::rbEmojiRecent.imagePos.y(), width(), getSpecialSetIcon(s.setId, true));
 							//	p.setOpacity(1);
 							//}
 							if (s.setId == Stickers::FeaturedSetId) {
 								paintFeaturedStickerSetsBadge(p, x);
 							}
-							x += st::rbEmoji.width;
+							x += st::emojiCategory.width;
 						}
 					}
 
-					if (rtl()) selx = width() - selx - st::rbEmoji.width;
+					if (rtl()) selx = width() - selx - st::emojiCategory.width;
 					p.setOpacity(1.);
-					p.fillRect(selx, _iconsTop + st::rbEmoji.height - st::stickerIconPadding, st::rbEmoji.width, st::stickerIconSel, st::stickerIconSelColor);
+					p.fillRect(selx, _iconsTop + st::emojiCategory.height - st::stickerIconPadding, st::emojiCategory.width, st::stickerIconSel, st::stickerIconSelColor);
 
 					float64 o_left = snap(float64(_iconsX.current()) / st::stickerIconLeft.pxWidth(), 0., 1.);
 					if (o_left > 0) {
 						p.setOpacity(o_left);
-						p.drawSpriteLeft(QRect(_iconsLeft, _iconsTop, st::stickerIconLeft.pxWidth(), st::rbEmoji.height), width(), st::stickerIconLeft);
+						p.drawSpriteLeft(QRect(_iconsLeft, _iconsTop, st::stickerIconLeft.pxWidth(), st::emojiCategory.height), width(), st::stickerIconLeft);
 					}
 					float64 o_right = snap(float64(_iconsMax - _iconsX.current()) / st::stickerIconRight.pxWidth(), 0., 1.);
 					if (o_right > 0) {
 						p.setOpacity(o_right);
-						p.drawSpriteRight(QRect(width() - _iconsLeft - 7 * st::rbEmoji.width, _iconsTop, st::stickerIconRight.pxWidth(), st::rbEmoji.height), width(), st::stickerIconRight);
+						p.drawSpriteRight(QRect(width() - _iconsLeft - 7 * st::emojiCategory.width, _iconsTop, st::stickerIconRight.pxWidth(), st::emojiCategory.height), width(), st::stickerIconRight);
 					}
 				}
 			} else if (_stickersShown) {
-				int32 x = rtl() ? (_recent.x() + _recent.width()) : (_objects.x() + _objects.width());
-				p.fillRect(x, _recent.y(), r.left() + r.width() - x, st::rbEmoji.height, st::white);
+				int32 x = rtl() ? (_recent->x() + _recent->width()) : (_objects->x() + _objects->width());
+				p.fillRect(x, _recent->y(), r.left() + r.width() - x, st::emojiCategory.height, st::white);
 			} else {
-				p.fillRect(r.left(), _recent.y(), (rtl() ? _objects.x() : _recent.x() - r.left()), st::rbEmoji.height, st::emojiPanCategories);
-				int32 x = rtl() ? (_recent.x() + _recent.width()) : (_objects.x() + _objects.width());
-				p.fillRect(x, _recent.y(), r.left() + r.width() - x, st::rbEmoji.height, st::emojiPanCategories);
+				p.fillRect(r.left(), _iconsTop, r.width(), st::emojiCategory.height, st::emojiPanCategories);
 			}
 		} else {
 			p.fillRect(r, st::white);
 			p.drawPixmap(r.left(), r.top(), _cache);
 		}
 	} else {
-		p.fillRect(QRect(r.left(), r.top(), r.width(), r.height() - st::rbEmoji.height), st::white->b);
-		p.fillRect(QRect(r.left(), _iconsTop, r.width(), st::rbEmoji.height), st::emojiPanCategories->b);
+		p.fillRect(QRect(r.left(), r.top(), r.width(), r.height() - st::emojiCategory.height), st::white->b);
+		p.fillRect(QRect(r.left(), _iconsTop, r.width(), st::emojiCategory.height), st::emojiPanCategories->b);
 		p.setOpacity(o * a_fromAlpha.current());
 		QRect fromDst = QRect(r.left() + a_fromCoord.current(), r.top(), _fromCache.width() / cIntRetinaFactor(), _fromCache.height() / cIntRetinaFactor());
 		QRect fromSrc = QRect(0, 0, _fromCache.width(), _fromCache.height());
@@ -2957,7 +2957,7 @@ void EmojiPan::mouseReleaseEvent(QMouseEvent *e) {
 		updateSelected();
 
 		if (wasDown == _iconOver && _iconOver >= 0 && _iconOver < _icons.size()) {
-			_iconSelX = anim::ivalue(_iconOver * st::rbEmoji.width, _iconOver * st::rbEmoji.width);
+			_iconSelX = anim::ivalue(_iconOver * st::emojiCategory.width, _iconOver * st::emojiCategory.width);
 			s_inner.showStickerSet(_icons.at(_iconOver).setId);
 		}
 	}
@@ -3031,7 +3031,7 @@ void EmojiPan::onRefreshIcons(bool scrollAnimation) {
 		_iconsMax = 0;
 	} else {
 		_iconHovers = QVector<float64>(_icons.size(), 0);
-		_iconsMax = qMax(int((_icons.size() - 7) * st::rbEmoji.width), 0);
+		_iconsMax = qMax(int((_icons.size() - 7) * st::emojiCategory.width), 0);
 	}
 	if (_iconsX.current() > _iconsMax) {
 		_iconsX = anim::ivalue(_iconsMax, _iconsMax);
@@ -3070,12 +3070,12 @@ void EmojiPan::updateSelected() {
 	int32 x = p.x(), y = p.y(), newOver = -1;
 	if (rtl()) x = width() - x;
 	x -= _iconsLeft;
-	if (x >= st::rbEmoji.width * 7 && x < st::rbEmoji.width * 8 && y >= _iconsTop && y < _iconsTop + st::rbEmoji.height) {
+	if (x >= st::emojiCategory.width * 7 && x < st::emojiCategory.width * 8 && y >= _iconsTop && y < _iconsTop + st::emojiCategory.height) {
 		newOver = _icons.size();
 	} else if (!_icons.isEmpty()) {
-		if (y >= _iconsTop && y < _iconsTop + st::rbEmoji.height && x >= 0 && x < 7 * st::rbEmoji.width && x < _icons.size() * st::rbEmoji.width) {
+		if (y >= _iconsTop && y < _iconsTop + st::emojiCategory.height && x >= 0 && x < 7 * st::emojiCategory.width && x < _icons.size() * st::emojiCategory.width) {
 			x += _iconsX.current();
-			newOver = qFloor(x / st::rbEmoji.width);
+			newOver = qFloor(x / st::emojiCategory.width);
 		}
 	}
 	if (newOver != _iconOver) {
@@ -3108,7 +3108,7 @@ void EmojiPan::updateIcons() {
 	if (!_stickersShown || !s_inner.showSectionIcons()) return;
 
 	QRect r(st::defaultDropdownPadding.left(), st::defaultDropdownPadding.top(), _width - st::defaultDropdownPadding.left() - st::defaultDropdownPadding.right(), _height - st::defaultDropdownPadding.top() - st::defaultDropdownPadding.bottom());
-	update(r.left(), _iconsTop, r.width(), st::rbEmoji.height);
+	update(r.left(), _iconsTop, r.width(), st::emojiCategory.height);
 }
 
 void EmojiPan::step_icons(uint64 ms, bool timer) {
@@ -3229,11 +3229,7 @@ void EmojiPan::hideFinish() {
 	_hiding = false;
 
 	e_scroll.scrollToY(0);
-	if (!_recent.checked()) {
-		_noTabUpdate = true;
-		_recent.setChecked(true);
-		_noTabUpdate = false;
-	}
+	setCurrentTabIcon(dbietRecent);
 	s_scroll.scrollToY(0);
 	_iconOver = _iconDown = -1;
 	_iconSel = 0;
@@ -3349,55 +3345,46 @@ bool EmojiPan::ui_isInlineItemBeingChosen() {
 void EmojiPan::showAll() {
 	if (_stickersShown) {
 		s_scroll.show();
-		_recent.hide();
-		_people.hide();
-		_nature.hide();
-		_food.hide();
-		_activity.hide();
-		_travel.hide();
-		_objects.hide();
-		_symbols.hide();
+		_recent->hide();
+		_people->hide();
+		_nature->hide();
+		_food->hide();
+		_activity->hide();
+		_travel->hide();
+		_objects->hide();
+		_symbols->hide();
 		e_scroll.hide();
 	} else {
 		s_scroll.hide();
-		_recent.show();
-		_people.show();
-		_nature.show();
-		_food.show();
-		_activity.show();
-		_travel.show();
-		_objects.show();
-		_symbols.show();
+		_recent->show();
+		_people->show();
+		_nature->show();
+		_food->show();
+		_activity->show();
+		_travel->show();
+		_objects->show();
+		_symbols->show();
 		e_scroll.show();
 	}
 }
 
 void EmojiPan::hideAll() {
-	_recent.hide();
-	_people.hide();
-	_nature.hide();
-	_food.hide();
-	_activity.hide();
-	_travel.hide();
-	_objects.hide();
-	_symbols.hide();
+	_recent->hide();
+	_people->hide();
+	_nature->hide();
+	_food->hide();
+	_activity->hide();
+	_travel->hide();
+	_objects->hide();
+	_symbols->hide();
 	e_scroll.hide();
 	s_scroll.hide();
 	e_inner.clearSelection(true);
 	s_inner.clearSelection(true);
 }
 
-void EmojiPan::onTabChange() {
-	if (_noTabUpdate) return;
-	DBIEmojiTab newTab = dbietRecent;
-	if (_people.checked()) newTab = dbietPeople;
-	else if (_nature.checked()) newTab = dbietNature;
-	else if (_food.checked()) newTab = dbietFood;
-	else if (_activity.checked()) newTab = dbietActivity;
-	else if (_travel.checked()) newTab = dbietTravel;
-	else if (_objects.checked()) newTab = dbietObjects;
-	else if (_symbols.checked()) newTab = dbietSymbols;
-	e_inner.showEmojiPack(newTab);
+void EmojiPan::setActiveTab(DBIEmojiTab tab) {
+	e_inner.showEmojiPack(tab);
 }
 
 void EmojiPan::updatePanelsPositions(const QVector<internal::EmojiPanel*> &panels, int32 st) {
@@ -3423,27 +3410,22 @@ void EmojiPan::onScrollEmoji() {
 
 	updatePanelsPositions(e_panels, st);
 
-	auto tab = e_inner.currentTab(st);
-	FlatRadiobutton *check = nullptr;
-	switch (tab) {
-	case dbietRecent: check = &_recent; break;
-	case dbietPeople: check = &_people; break;
-	case dbietNature: check = &_nature; break;
-	case dbietFood: check = &_food; break;
-	case dbietActivity: check = &_activity; break;
-	case dbietTravel: check = &_travel; break;
-	case dbietObjects: check = &_objects; break;
-	case dbietSymbols: check = &_symbols; break;
-	}
-	if (check && !check->checked()) {
-		_noTabUpdate = true;
-		check->setChecked(true);
-		_noTabUpdate = false;
-	}
+	setCurrentTabIcon(e_inner.currentTab(st));
 
 	e_inner.setVisibleTopBottom(st, st + e_scroll.height());
 }
 
+void EmojiPan::setCurrentTabIcon(DBIEmojiTab tab) {
+	_recent->setIcon((tab == dbietRecent) ? &st::emojiRecentActive : nullptr);
+	_people->setIcon((tab == dbietPeople) ? &st::emojiPeopleActive : nullptr);
+	_nature->setIcon((tab == dbietNature) ? &st::emojiNatureActive : nullptr);
+	_food->setIcon((tab == dbietFood) ? &st::emojiFoodActive : nullptr);
+	_activity->setIcon((tab == dbietActivity) ? &st::emojiActivityActive : nullptr);
+	_travel->setIcon((tab == dbietTravel) ? &st::emojiTravelActive : nullptr);
+	_objects->setIcon((tab == dbietObjects) ? &st::emojiObjectsActive : nullptr);
+	_symbols->setIcon((tab == dbietSymbols) ? &st::emojiSymbolsActive : nullptr);
+}
+
 void EmojiPan::onScrollStickers() {
 	auto st = s_scroll.scrollTop();
 
@@ -3468,13 +3450,13 @@ void EmojiPan::validateSelectedIcon(ValidateIconAnimations animations) {
 	}
 	if (newSel != _iconSel) {
 		_iconSel = newSel;
-		auto iconSelXFinal = newSel * st::rbEmoji.width;
+		auto iconSelXFinal = newSel * st::emojiCategory.width;
 		if (animations == ValidateIconAnimations::Full) {
 			_iconSelX.start(iconSelXFinal);
 		} else {
 			_iconSelX = anim::ivalue(iconSelXFinal, iconSelXFinal);
 		}
-		auto iconsXFinal = snap((2 * newSel - 7) * int(st::rbEmoji.width) / 2, 0, _iconsMax);
+		auto iconsXFinal = snap((2 * newSel - 7) * int(st::emojiCategory.width) / 2, 0, _iconsMax);
 		if (animations == ValidateIconAnimations::None) {
 			_iconsX = anim::ivalue(iconsXFinal, iconsXFinal);
 			_a_icons.stop();

Telegram/SourceFiles/stickers/emoji_pan.h

@@ -30,6 +30,10 @@ class ItemBase;
 class Result;
 } // namespace InlineBots
 
+namespace Ui {
+class IconButton;
+} // namesapce Ui
+
 namespace internal {
 
 constexpr int InlineItemsMaxPerRow = 5;
@@ -545,7 +549,6 @@ private slots:
 
 	void onWndActiveChanged();
 
-	void onTabChange();
 	void onScrollEmoji();
 	void onScrollStickers();
 	void onSwitch();
@@ -577,6 +580,8 @@ private:
 	bool preventAutoHide() const;
 	void installSetDone(const MTPmessages_StickerSetInstallResult &result);
 	bool installSetFail(uint64 setId, const RPCError &error);
+	void setActiveTab(DBIEmojiTab tab);
+	void setCurrentTabIcon(DBIEmojiTab tab);
 
 	void paintStickerSettingsIcon(Painter &p) const;
 	void paintFeaturedStickerSetsBadge(Painter &p, int iconLeft) const;
@@ -596,8 +601,8 @@ private:
 	void updateSelected();
 	void updateIcons();
 
-	void prepareTab(int32 &left, int32 top, int32 _width, FlatRadiobutton &tab);
-	void updatePanelsPositions(const QVector<internal::EmojiPanel*> &panels, int32 st);
+	void prepareTab(int &left, int top, int _width, Ui::IconButton *tab, DBIEmojiTab value);
+	void updatePanelsPositions(const QVector<internal::EmojiPanel*> &panels, int st);
 
 	void showAll();
 	void hideAll();
@@ -605,8 +610,6 @@ private:
 	int32 _maxHeight, _contentMaxHeight, _contentHeight, _contentHeightEmoji, _contentHeightStickers;
 	bool _horizontal = false;
 
-	bool _noTabUpdate = false;
-
 	int32 _width, _height, _bottom;
 	bool _hiding = false;
 	QPixmap _cache;
@@ -618,7 +621,15 @@ private:
 
 	Ui::RectShadow _shadow;
 
-	FlatRadiobutton _recent, _people, _nature, _food, _activity, _travel, _objects, _symbols;
+	ChildWidget<Ui::IconButton> _recent;
+	ChildWidget<Ui::IconButton> _people;
+	ChildWidget<Ui::IconButton> _nature;
+	ChildWidget<Ui::IconButton> _food;
+	ChildWidget<Ui::IconButton> _activity;
+	ChildWidget<Ui::IconButton> _travel;
+	ChildWidget<Ui::IconButton> _objects;
+	ChildWidget<Ui::IconButton> _symbols;
+
 	QList<internal::StickerIcon> _icons;
 	QVector<float64> _iconHovers;
 	int _iconOver = -1;

Telegram/SourceFiles/stickers/stickers.style

@@ -21,19 +21,20 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 using "basic.style";
 
 using "boxes/boxes.style";
+using "ui/widgets/widgets.style";
 
-featuredStickersHeader: 45px;
-featuredStickersSkip: 15px;
+stickersTrendingHeader: 45px;
+stickersTrendingSkip: 15px;
 
-featuredStickersHeaderFont: semiboldFont;
-featuredStickersHeaderFg: windowTextFg;
-featuredStickersHeaderTop: 0px;
-featuredStickersSubheaderFont: normalFont;
-featuredStickersSubheaderFg: #777;
-featuredStickersSubheaderTop: 20px;
+stickersTrendingHeaderFont: semiboldFont;
+stickersTrendingHeaderFg: windowTextFg;
+stickersTrendingHeaderTop: 0px;
+stickersTrendingSubheaderFont: normalFont;
+stickersTrendingSubheaderFg: #777;
+stickersTrendingSubheaderTop: 20px;
 
-featuredStickersAddTop: 3px;
-featuredStickersAdd: RoundButton(defaultActiveButton) {
+stickersTrendingAddTop: 3px;
+stickersTrendingAdd: RoundButton(defaultActiveButton) {
 	width: -17px;
 	height: 26px;
 	textTop: 4px;
@@ -56,3 +57,108 @@ stickersFeaturedUnreadSize: 5px;
 stickersFeaturedUnreadSkip: 5px;
 stickersFeaturedUnreadTop: 7px;
 stickersFeaturedInstalled: icon {{ "mediaview_save_check", #40ace3 }};
+
+stickersMaxHeight: 440px;
+stickersPadding: margins(19px, 17px, 19px, 17px);
+stickersSize: size(64px, 64px);
+stickersScroll: flatScroll(boxScroll) {
+	round: 2px;
+	deltax: 7px;
+	deltat: 23px;
+	deltab: 9px;
+}
+stickersReorderPadding: margins(0px, 12px, 0px, 12px);
+stickersReorderFg: #777;
+stickersRowDisabledOpacity: 0.4;
+stickersRowDuration: 200;
+
+stickersSettings: icon {{ "emoji_settings", #b3b3b3 }};
+stickersTrending: icon {{ "emoji_trending", #b3b3b3 }};
+stickersTrendingActive: icon {{ "emoji_trending", #58b2ed }};
+
+stickersSettingsUnreadSize: 17px;
+stickersSettingsUnreadPosition: point(4px, 5px);
+
+emojiScroll: flatScroll(solidScroll) {
+	deltat: 48px;
+}
+emojiRecent: icon {{ "emoji_recent", #b3b3b3 }};
+emojiRecentActive: icon {{ "emoji_recent", #58b2ed }};
+emojiPeople: icon {{ "emoji_people", #b3b3b3 }};
+emojiPeopleActive: icon {{ "emoji_people", #58b2ed }};
+emojiNature: icon {{ "emoji_nature", #b3b3b3 }};
+emojiNatureActive: icon {{ "emoji_nature", #58b2ed }};
+emojiFood: icon {{ "emoji_food", #b3b3b3 }};
+emojiFoodActive: icon {{ "emoji_food", #58b2ed }};
+emojiActivity: icon {{ "emoji_activity", #b3b3b3 }};
+emojiActivityActive: icon {{ "emoji_activity", #58b2ed }};
+emojiTravel: icon {{ "emoji_travel", #b3b3b3 }};
+emojiTravelActive: icon {{ "emoji_travel", #58b2ed }};
+emojiObjects: icon {{ "emoji_objects", #b3b3b3 }};
+emojiObjectsActive: icon {{ "emoji_objects", #58b2ed }};
+emojiSymbols: icon {{ "emoji_symbols", #b3b3b3 }};
+emojiSymbolsActive: icon {{ "emoji_symbols", #58b2ed }};
+emojiSavedGifs: icon {{ "emoji_gif", #b3b3b3 }};
+emojiSavedGifsActive: icon {{ "emoji_gif", #58b2ed }};
+
+emojiPanCategories: #f7f7f7;
+
+emojiCategory: IconButton {
+	width: 42px;
+	height: 46px;
+
+	opacity: 1.;
+	overOpacity: 1.;
+
+	iconPosition: point(11px, 12px);
+	downIconPosition: point(11px, 12px);
+
+	duration: 0;
+}
+emojiCategoryRecent: IconButton(emojiCategory) { icon: emojiRecent; }
+emojiCategoryPeople: IconButton(emojiCategory) { icon: emojiPeople; }
+emojiCategoryNature: IconButton(emojiCategory) { icon: emojiNature; }
+emojiCategoryFood: IconButton(emojiCategory) { icon: emojiFood; }
+emojiCategoryActivity: IconButton(emojiCategory) { icon: emojiActivity; }
+emojiCategoryTravel: IconButton(emojiCategory) { icon: emojiTravel; }
+emojiCategoryObjects: IconButton(emojiCategory) { icon: emojiObjects; }
+emojiCategorySymbols: IconButton(emojiCategory) { icon: emojiSymbols; }
+
+emojiPanPadding: 12px;
+emojiPanSize: size(45px, 41px);
+emojiPanWidth: 345px;
+emojiPanMaxHeight: 366px;
+emojiPanDuration: 200;
+emojiPanHover: #f0f4f7;
+
+emojiPanHeader: 42px;
+emojiPanHeaderFont: semiboldFont;
+emojiPanHeaderColor: #999;
+emojiPanHeaderLeft: 22px;
+emojiPanHeaderTop: 12px;
+emojiPanHeaderBg: #fffffff2;
+
+emojiColorsPadding: 5px;
+emojiColorsSep: 1px;
+emojiColorsSepColor: #d5d5d5;
+
+emojiSwitchSkip: 27px;
+emojiSwitchImgSkip: 21px;
+emojiSwitchStickers: sprite(318px, 328px, 8px, 12px);
+emojiSwitchEmoji: sprite(310px, 328px, 8px, 12px);
+emojiSwitchColor: #42a8db;
+
+stickerPanSize: size(64px, 64px);
+stickerPanPadding: 11px;
+stickerPanDelete: sprite(128px, 132px, 12px, 12px);
+stickerPanDeleteOpacity: 0.5;
+stickerIconPadding: 5px;
+stickerIconOpacity: 0.7;
+stickerIconSel: 2px;
+stickerIconSelColor: #58b2ed;
+stickerIconLeft: sprite(342px, 72px, 40px, 1px);
+stickerIconRight: sprite(342px, 73px, 40px, 1px);
+stickerIconMove: 400;
+stickerPreviewDuration: 150;
+stickerPreviewBg: #FFFFFFB0;
+stickerPreviewMin: 0.1;

Telegram/SourceFiles/ui/buttons/history_down_button.h

@@ -21,6 +21,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #pragma once
 
 #include "ui/button.h"
+#include "styles/style_widgets.h"
 
 namespace Ui {
 

Telegram/SourceFiles/ui/buttons/icon_button.h

@@ -21,6 +21,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #pragma once
 
 #include "ui/button.h"
+#include "styles/style_widgets.h"
 
 namespace Ui {
 

Telegram/SourceFiles/ui/widgets/widgets.style

@@ -27,10 +27,18 @@ LabelSimple {
 	textFg: color;
 }
 
-defaultLabelSimple: LabelSimple {
-	font: normalFont;
-	maxWidth: 0px;
-	textFg: windowTextFg;
+IconButton {
+	width: pixels;
+	height: pixels;
+
+	opacity: double;
+	overOpacity: double;
+
+	icon: icon;
+	iconPosition: point;
+	downIconPosition: point;
+
+	duration: int;
 }
 
 MediaSlider {
@@ -153,6 +161,12 @@ DropdownMenu {
 	menu: Menu;
 }
 
+defaultLabelSimple: LabelSimple {
+	font: normalFont;
+	maxWidth: 0px;
+	textFg: windowTextFg;
+}
+
 widgetSlideDuration: 200;
 widgetFadeDuration: 200;
 

Telegram/SourceFiles/window/top_bar_widget.cpp

@@ -21,6 +21,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 #include "stdafx.h"
 #include "window/top_bar_widget.h"
 
+#include "styles/style_history.h"
 #include "boxes/addcontactbox.h"
 #include "boxes/confirmbox.h"
 #include "mainwidget.h"

Telegram/SourceFiles/window/window.style

@@ -20,6 +20,7 @@ Copyright (c) 2014-2016 John Preston, https://desktop.telegram.org
 */
 
 using "basic.style";
+using "ui/widgets/widgets.style";
 
 titleIconPosition: point(9px, 9px);
 titleIcon: icon {

Telegram/gyp/Telegram.gyp

@@ -39,6 +39,7 @@
         '<(src_loc)/boxes/boxes.style',
         '<(src_loc)/dialogs/dialogs.style',
         '<(src_loc)/history/history.style',
+        '<(src_loc)/intro/intro.style',
         '<(src_loc)/media/view/mediaview.style',
         '<(src_loc)/media/player/media_player.style',
         '<(src_loc)/overview/overview.style',