From 5b073d4ddb300c6f8daacf6e98c1e01b18bd2c6f Mon Sep 17 00:00:00 2001
From: Eduard Kuzmenko <thanwords24@gmail.com>
Date: Mon, 3 May 2021 22:13:17 +0400
Subject: [PATCH] ESG replace inner box-shadow to border

---
 .../emoticonsDropdown/tabs/stickers.ts         | 13 ++++++++++---
 src/lang.ts                                    |  2 ++
 src/scss/partials/_emojiDropdown.scss          | 18 +++++-------------
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/emoticonsDropdown/tabs/stickers.ts b/src/components/emoticonsDropdown/tabs/stickers.ts
index 04746e31..199ee08d 100644
--- a/src/components/emoticonsDropdown/tabs/stickers.ts
+++ b/src/components/emoticonsDropdown/tabs/stickers.ts
@@ -12,6 +12,7 @@ import { MessagesAllStickers, StickerSet } from "../../../layer";
 import appDocsManager, { MyDocument } from "../../../lib/appManagers/appDocsManager";
 import appDownloadManager from "../../../lib/appManagers/appDownloadManager";
 import appStickersManager from "../../../lib/appManagers/appStickersManager";
+import { i18n } from "../../../lib/langPack";
 import lottieLoader from "../../../lib/lottieLoader";
 import { RichTextProcessor } from "../../../lib/richtextprocessor";
 import rootScope from "../../../lib/rootScope";
@@ -143,7 +144,7 @@ export default class StickersTab implements EmoticonsTab {
 
   private superStickerRenderer: SuperStickerRenderer;
 
-  categoryPush(categoryDiv: HTMLElement, categoryTitle: string, promise: Promise<MyDocument[]>, prepend?: boolean) {
+  categoryPush(categoryDiv: HTMLElement, categoryTitle: string = '', promise: Promise<MyDocument[]>, prepend?: boolean) {
     //if((docs.length % 5) !== 0) categoryDiv.classList.add('not-full');
 
     const itemsDiv = document.createElement('div');
@@ -151,7 +152,10 @@ export default class StickersTab implements EmoticonsTab {
 
     const titleDiv = document.createElement('div');
     titleDiv.classList.add('category-title');
-    titleDiv.innerHTML = categoryTitle;
+
+    if(categoryTitle) {
+      titleDiv.innerHTML = categoryTitle;
+    }
 
     categoryDiv.append(titleDiv, itemsDiv);
 
@@ -180,6 +184,8 @@ export default class StickersTab implements EmoticonsTab {
         this.queueCategoryPush.length = 0;
       }
     });
+
+    return {titleDiv};
   }
 
   async renderStickerSet(set: StickerSet.stickerSet, prepend = false) {
@@ -324,7 +330,8 @@ export default class StickersTab implements EmoticonsTab {
         };
 
         preloader.remove();
-        this.categoryPush(this.recentDiv, 'Recent', Promise.resolve(this.recentStickers), true);
+        const {titleDiv} = this.categoryPush(this.recentDiv, '', Promise.resolve(this.recentStickers), true);
+        titleDiv.append(i18n('Stickers.Recent'));
       }),
 
       appStickersManager.getAllStickers().then((res) => {
diff --git a/src/lang.ts b/src/lang.ts
index 1c7128ff..ada9f5c0 100644
--- a/src/lang.ts
+++ b/src/lang.ts
@@ -652,6 +652,8 @@ const lang = {
   "Schedule.SendToday": "Send today at %@",
   "Schedule.SendDate": "Send on %@ at %@",
   //"Schedule.SendWhenOnline": "Send When Online",
+  "Stickers.Recent": "Recent",
+  //"Stickers.Favorite": "Favorite",
   "TwoStepAuth.SetPasswordHelp": "You can set a password that will be required when you log in on a new device in addition to the code you get in the SMS.",
   "TwoStepAuth.GenericHelp": "You have enabled Two-Step verification.\nYou'll need the password you set up here to log in to your Telegram account.",
   "TwoStepAuth.ChangePassword": "Change Password",
diff --git a/src/scss/partials/_emojiDropdown.scss b/src/scss/partials/_emojiDropdown.scss
index f7cf5806..ef8547d4 100644
--- a/src/scss/partials/_emojiDropdown.scss
+++ b/src/scss/partials/_emojiDropdown.scss
@@ -44,13 +44,7 @@
 		width: calc(100% + 1rem);
 		margin-left: -.5rem;
 	} */
-	
-	> .menu-horizontal-div {
-		//font-weight: 500;
-		margin-top: 2px;
-		border: none;
-	}
-	
+
 	.emoji-container {
 		width: 100%;
 		max-width: 100%;
@@ -60,6 +54,9 @@
 
 	.emoji-tabs {
 		justify-content: center;
+		//font-weight: 500;
+		border: none;
+		border-top: 1px solid var(--border-color);
 
 		&-search {
 			position: absolute;
@@ -150,10 +147,8 @@
 	.emoji-padding, .stickers-padding {
 		.menu-horizontal-div {
 			height: 48px;
-			border-bottom: none;
 			padding: 2px;
 			width: 100%;
-			box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, 0.21);
 			z-index: 4;
 			background-color: var(--surface-color);
 
@@ -270,7 +265,6 @@
 	.menu-horizontal-div {
 		width: 100%;
 		height: 48px;
-		box-shadow: 0px -2px 5px -1px rgba(0, 0, 0, .21);
 
 		.menu-horizontal-div-item {
 			font-size: 1.5rem;
@@ -288,12 +282,10 @@
 		&.active {
 			.scrollable {
 				padding: 0;
-				box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .21);
+				//box-shadow: 0px 1px 5px -1px rgba(0, 0, 0, .21);
 			}
 
 			.menu-horizontal-div {
-				box-shadow: none;
-
 				.menu-horizontal-div-item {
 					height: 48px;
 					width: 48px;