List Item: Add divider on mobiles

src/components/left/main/Chat.scss

@@ -6,7 +6,6 @@
     --color-text-meta: var(--color-text-meta-apple);
   }
 
-
   position: absolute;
   top: 0;
   left: 0;
@@ -70,6 +69,12 @@
     }
   }
 
+  @media (max-width: 600px) {
+    .ListItem-button {
+      border-radius: 0 !important;
+    }
+  }
+
   .status {
     flex-shrink: 0;
   }
@@ -102,6 +107,7 @@
 
     .LastMessageMeta {
       margin-left: auto;
+
       body.is-ios & {
         font-size: .875rem;
         margin-right: 0;
@@ -133,6 +139,7 @@
           content: ': ';
         }
       }
+
       .colon {
         margin-inline-end: .25rem;
       }

src/components/left/search/AudioResults.tsx

@@ -85,7 +85,7 @@ const AudioResults: FC<OwnProps & StateProps & DispatchProps> = ({
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
-          className="ListItem"
+          className="ListItem small-icon"
           key={message.id}
         >
           {shouldDrawDateDivider && (

src/components/left/search/FileResults.tsx

@@ -80,7 +80,7 @@ const FileResults: FC<OwnProps & StateProps & DispatchProps> = ({
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
-          className="ListItem"
+          className="ListItem small-icon"
           key={message.id}
         >
           {shouldDrawDateDivider && (

src/components/left/search/LeftSearch.scss

@@ -17,8 +17,8 @@
   .documents-list {
     padding: 0 1.25rem 1.25rem;
 
-    .ListItem + .ListItem {
+    .ListItem {
-      margin-top: 1.25rem;
+      padding: 0.625rem 0;
     }
   }
 

src/components/left/search/LinkResults.tsx

@@ -77,7 +77,7 @@ const LinkResults: FC<OwnProps & StateProps & DispatchProps> = ({
         || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date);
       return (
         <div
-          className="ListItem"
+          className="ListItem small-icon"
           dir={lang.isRtl ? 'rtl' : undefined}
           key={message.id}
         >

src/components/left/settings/SettingsPrivacy.tsx

@@ -132,6 +132,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
 
         <ListItem
           narrow
+          className="no-icon"
           onClick={() => onScreenSelect(SettingsScreens.PrivacyPhoneNumber)}
         >
           <div className="multiline-menu-item">
@@ -143,6 +144,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         </ListItem>
         <ListItem
           narrow
+          className="no-icon"
           onClick={() => onScreenSelect(SettingsScreens.PrivacyLastSeen)}
         >
           <div className="multiline-menu-item">
@@ -154,6 +156,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         </ListItem>
         <ListItem
           narrow
+          className="no-icon"
           onClick={() => onScreenSelect(SettingsScreens.PrivacyProfilePhoto)}
         >
           <div className="multiline-menu-item">
@@ -165,6 +168,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         </ListItem>
         <ListItem
           narrow
+          className="no-icon"
           onClick={() => onScreenSelect(SettingsScreens.PrivacyForwarding)}
         >
           <div className="multiline-menu-item">
@@ -176,6 +180,7 @@ const SettingsPrivacy: FC<OwnProps & StateProps & DispatchProps> = ({
         </ListItem>
         <ListItem
           narrow
+          className="no-icon"
           onClick={() => onScreenSelect(SettingsScreens.PrivacyGroupChats)}
         >
           <div className="multiline-menu-item">

src/components/left/settings/SettingsPrivacyActiveSessions.tsx

@@ -72,7 +72,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
           {lang('AuthSessions.CurrentSession')}
         </h4>
 
-        <ListItem narrow inactive>
+        <ListItem narrow inactive className="no-icon">
           <div className="multiline-menu-item" dir="auto">
             <span className="title" dir="auto">{session.appName}</span>
             <span className="subtitle black tight">{getDeviceEnvironment(session)}</span>
@@ -81,7 +81,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
         </ListItem>
 
         <ListItem
-          className="destructive mb-0"
+          className="destructive mb-0 no-icon"
           icon="stop"
           ripple
           narrow
@@ -118,6 +118,7 @@ const SettingsPrivacyActiveSessions: FC<OwnProps & StateProps & DispatchProps> =
             handleTerminateSessionClick(session.hash);
           },
         }]}
+        className="no-icon"
       >
         <div className="multiline-menu-item full-size" dir="auto">
           <span className="date">{formatPastTimeShort(lang, session.dateActive * 1000)}</span>

src/components/left/settings/SettingsPrivacyBlockedUsers.tsx

@@ -60,7 +60,7 @@ const SettingsPrivacyBlockedUsers: FC<OwnProps & StateProps & DispatchProps> = (
     const chat = !isPrivate ? chatsByIds[contactId] : undefined;
 
     const className = buildClassName(
-      'Chat chat-item-clickable blocked-list-item',
+      'Chat chat-item-clickable blocked-list-item small-icon',
       isPrivate ? 'private' : 'group',
     );
 

src/components/left/settings/folders/SettingsFoldersMain.tsx

@@ -174,7 +174,7 @@ const SettingsFoldersMain: FC<OwnProps & StateProps & DispatchProps> = ({
 
         {userFolders && userFolders.length ? userFolders.map((folder) => (
           <ListItem
-            className="mb-2"
+            className="mb-2 no-icon"
             narrow
             multiline
             onClick={() => onEditFolder(foldersById[folder.id])}

src/components/right/Profile.tsx

@@ -333,7 +333,7 @@ const Profile: FC<OwnProps & StateProps & DispatchProps> = ({
             <ListItem
               key={id}
               teactOrderKey={i}
-              className="chat-item-clickable scroll-item"
+              className="chat-item-clickable scroll-item small-icon"
               onClick={() => handleMemberClick(id)}
               contextActions={getMemberContextAction(id)}
             >

src/components/ui/ListItem.scss

@@ -1,6 +1,26 @@
 .ListItem {
   position: relative;
 
+  @media (max-width: 600px) {
+    &:not(:last-of-type)::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 4.5rem;
+      right: 0;
+      height: 0.03125rem;
+      background: var(--color-dividers);
+    }
+
+    &.small-icon::after {
+      left: 3.875rem;
+    }
+
+    &.no-icon::after {
+      left: 0;
+    }
+  }
+
   .ListItem-button {
     width: 100%;
     background-color: var(--background-color);
@@ -48,7 +68,7 @@
     .ListItem-button {
       cursor: pointer;
 
-      @media (hover:hover) {
+      @media (hover: hover) {
         &:hover, &:focus {
           --background-color: var(--color-chat-hover);
         }

src/components/ui/MenuItem.scss

@@ -15,13 +15,14 @@
   cursor: pointer;
   unicode-bidi: plaintext;
 
-  @media (hover:hover) {
+  @media (hover: hover) {
     &:hover, &:focus {
       background-color: var(--color-chat-hover);
       text-decoration: none;
       color: inherit;
     }
   }
+
   @media (max-width: 600px) {
     &:focus, &:hover, &:active {
       text-decoration: none;
@@ -80,7 +81,7 @@
       margin-right: 0;
     }
 
-      > .Switcher {
+    > .Switcher {
       margin-left: 0;
       margin-right: auto;
     }

src/styles/_variables.scss

@@ -37,7 +37,8 @@ $color-text-secondary: #707579;
 $color-text-secondary-apple: #8A8A90;
 $color-text-meta: #686c72;
 $color-text-meta-apple: #8C8C91;
-$color-borders: #dadce0;
+$color-borders: #DADCE0;
+$color-dividers: #C8C6CC;
 $color-item-active: #ededed;
 $color-chat-hover: #f4f4f5;
 $color-chat-active: #5B90E0;
@@ -76,6 +77,7 @@ $color-user-8: #faa774;
   --color-text-green-rgb: #{toRGB($color-text-green)};
   --color-borders: #{$color-borders};
   --color-borders-input: #{$color-borders};
+  --color-dividers: #{$color-dividers};
   --color-webpage-initial-background: #{$color-dark-gray};
   --color-interactive-active: var(--color-primary);
   --color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);

src/styles/themes.json

@@ -15,8 +15,9 @@
   "--color-text": ["#000000", "#FFFFFF"],
   "--color-text-secondary": ["#707579", "#AAAAAA"],
   "--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"],
-  "--color-borders": ["#DADCE0", "#100F10"],
+  "--color-borders": ["#DADCE0", "#303030"],
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
+  "--color-dividers": ["#C8C6CC", "#404040"],
   "--color-links": ["#52A1EF", "#868DF6"],
   "--color-links-hover": ["#2d8dec", "#6b5fcc"],
   "--color-gray": ["#C4C9CC", "#717579"],