From 31d8e3c7b91544bf42d36f370bd72db1efd725e5 Mon Sep 17 00:00:00 2001
From: Shahaf <10106174+kotevcode@users.noreply.github.com>
Date: Fri, 29 Aug 2025 23:33:03 +0300
Subject: [PATCH] Follow-up (#460)

---
 src/components/left/main/ChatTags.module.scss |  2 +-
 src/components/left/main/ChatTags.tsx         |  1 +
 .../settings/folders/SettingsFolders.scss     | 14 ++++++++++--
 .../settings/folders/SettingsFoldersMain.tsx  | 22 +++++++++++++------
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/src/components/left/main/ChatTags.module.scss b/src/components/left/main/ChatTags.module.scss
index 8c6b21938..7c33803eb 100644
--- a/src/components/left/main/ChatTags.module.scss
+++ b/src/components/left/main/ChatTags.module.scss
@@ -21,7 +21,7 @@
 
   background-color: var(--accent-background-color);
 
-  :global(.emoji-small) {
+  :global(.emoji) {
     width: 0.5625rem;
     height: 0.5625rem;
     margin-top: -0.0625rem;
diff --git a/src/components/left/main/ChatTags.tsx b/src/components/left/main/ChatTags.tsx
index 28f0a333c..8475d6776 100644
--- a/src/components/left/main/ChatTags.tsx
+++ b/src/components/left/main/ChatTags.tsx
@@ -57,6 +57,7 @@ const ChatTags = ({
               text: folder.title.text,
               entities: folder.title.entities,
               noCustomEmojiPlayback: folder.noTitleAnimations,
+              emojiSize: 9,
             })}
           </div>
         );
diff --git a/src/components/left/settings/folders/SettingsFolders.scss b/src/components/left/settings/folders/SettingsFolders.scss
index a39a2166d..ca764897b 100644
--- a/src/components/left/settings/folders/SettingsFolders.scss
+++ b/src/components/left/settings/folders/SettingsFolders.scss
@@ -130,6 +130,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding-inline-end: 1rem;
 }
 
 .color-picker-item {
@@ -192,6 +193,15 @@
   color: var(--color-gray);
 }
 
-.settings-folders-title {
-  color: var(--accent-color);
+.settings-folders-color-circle {
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
+
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+
+  background-color: var(--accent-color);
 }
diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx
index 3a2e67049..15506cecc 100644
--- a/src/components/left/settings/folders/SettingsFoldersMain.tsx
+++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx
@@ -250,6 +250,8 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
             const draggedTop = (state.orderedFolderIds?.indexOf(folder.id) ?? 0) * FOLDER_HEIGHT_PX;
             const top = (state.dragOrderIds?.indexOf(folder.id) ?? 0) * FOLDER_HEIGHT_PX;
 
+            const shouldRenderColor = folder?.color !== undefined && folder.color !== -1 && isPremium;
+
             if (folder.id === ALL_FOLDER_ID) {
               return (
                 <Draggable
@@ -290,7 +292,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
                 onDrag={handleDrag}
                 onDragEnd={handleDragEnd}
                 style={`top: ${isDragged ? draggedTop : top}px;`}
-                knobStyle={`${lang.isRtl ? 'left' : 'right'}: 3rem;`}
+                knobStyle={`${lang.isRtl ? 'left' : 'right'}: ${shouldRenderColor ? '3.5rem' : '3rem'};`}
                 isDisabled={isBlocked || !isActive}
               >
                 <ListItem
@@ -319,12 +321,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
                     }
                   }}
                 >
-                  <span className={buildClassName(
-                    'title',
-                    folder?.color !== undefined && folder.color !== -1 && isPremium
-                    && `${getApiPeerColorClass({ color: folder.color })} settings-folders-title`,
-                  )}
-                  >
+                  <span className="title">
                     {renderTextWithEntities({
                       text: folder.title.text,
                       entities: folder.title.entities,
@@ -336,6 +333,17 @@ const SettingsFoldersMain: FC<OwnProps & StateProps> = ({
                     {folder.isChatList && <Icon name="link" className="mr-1" />}
                     {folder.subtitle}
                   </span>
+
+                  {
+                    shouldRenderColor && (
+                      <div className={buildClassName(
+                        'settings-folders-color-circle',
+                        getApiPeerColorClass({ color: folder.color }),
+                      )}
+                      />
+                    )
+                  }
+
                 </ListItem>
               </Draggable>
             );