Follow-up (#460)

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;

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>
         );

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 {
+.settings-folders-color-circle {
-  color: var(--accent-color);
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
+
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+
+  background-color: var(--accent-color);
 }

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(
+                  <span className="title">
-                    'title',
-                    folder?.color !== undefined && folder.color !== -1 && isPremium
-                    && `${getApiPeerColorClass({ color: folder.color })} settings-folders-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>
             );