diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index 503c41818..c153336f5 100644 --- a/src/components/left/main/Chat.scss +++ b/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; } diff --git a/src/components/left/search/AudioResults.tsx b/src/components/left/search/AudioResults.tsx index cd9d7010f..2c2ca3df6 100644 --- a/src/components/left/search/AudioResults.tsx +++ b/src/components/left/search/AudioResults.tsx @@ -85,7 +85,7 @@ const AudioResults: FC = ({ || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date); return (
{shouldDrawDateDivider && ( diff --git a/src/components/left/search/FileResults.tsx b/src/components/left/search/FileResults.tsx index 31ac1193b..a219bb7db 100644 --- a/src/components/left/search/FileResults.tsx +++ b/src/components/left/search/FileResults.tsx @@ -80,7 +80,7 @@ const FileResults: FC = ({ || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date); return (
{shouldDrawDateDivider && ( diff --git a/src/components/left/search/LeftSearch.scss b/src/components/left/search/LeftSearch.scss index ccf148e45..b10b4e594 100644 --- a/src/components/left/search/LeftSearch.scss +++ b/src/components/left/search/LeftSearch.scss @@ -17,8 +17,8 @@ .documents-list { padding: 0 1.25rem 1.25rem; - .ListItem + .ListItem { - margin-top: 1.25rem; + .ListItem { + padding: 0.625rem 0; } } diff --git a/src/components/left/search/LinkResults.tsx b/src/components/left/search/LinkResults.tsx index 7e6781a04..7e141c66d 100644 --- a/src/components/left/search/LinkResults.tsx +++ b/src/components/left/search/LinkResults.tsx @@ -77,7 +77,7 @@ const LinkResults: FC = ({ || toYearMonth(message.date) !== toYearMonth(foundMessages[index - 1].date); return (
diff --git a/src/components/left/settings/SettingsPrivacy.tsx b/src/components/left/settings/SettingsPrivacy.tsx index d253c00c8..46390e9e8 100644 --- a/src/components/left/settings/SettingsPrivacy.tsx +++ b/src/components/left/settings/SettingsPrivacy.tsx @@ -132,6 +132,7 @@ const SettingsPrivacy: FC = ({ onScreenSelect(SettingsScreens.PrivacyPhoneNumber)} >
@@ -143,6 +144,7 @@ const SettingsPrivacy: FC = ({ onScreenSelect(SettingsScreens.PrivacyLastSeen)} >
@@ -154,6 +156,7 @@ const SettingsPrivacy: FC = ({ onScreenSelect(SettingsScreens.PrivacyProfilePhoto)} >
@@ -165,6 +168,7 @@ const SettingsPrivacy: FC = ({ onScreenSelect(SettingsScreens.PrivacyForwarding)} >
@@ -176,6 +180,7 @@ const SettingsPrivacy: FC = ({ onScreenSelect(SettingsScreens.PrivacyGroupChats)} >
diff --git a/src/components/left/settings/SettingsPrivacyActiveSessions.tsx b/src/components/left/settings/SettingsPrivacyActiveSessions.tsx index 48c839758..c2ad06448 100644 --- a/src/components/left/settings/SettingsPrivacyActiveSessions.tsx +++ b/src/components/left/settings/SettingsPrivacyActiveSessions.tsx @@ -72,7 +72,7 @@ const SettingsPrivacyActiveSessions: FC = {lang('AuthSessions.CurrentSession')} - +
{session.appName} {getDeviceEnvironment(session)} @@ -81,7 +81,7 @@ const SettingsPrivacyActiveSessions: FC = = handleTerminateSessionClick(session.hash); }, }]} + className="no-icon" >
{formatPastTimeShort(lang, session.dateActive * 1000)} diff --git a/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx b/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx index d6e13a023..ca23808b4 100644 --- a/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx +++ b/src/components/left/settings/SettingsPrivacyBlockedUsers.tsx @@ -60,7 +60,7 @@ const SettingsPrivacyBlockedUsers: FC = ( 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', ); diff --git a/src/components/left/settings/folders/SettingsFoldersMain.tsx b/src/components/left/settings/folders/SettingsFoldersMain.tsx index 42ffa9db8..ca43f2d86 100644 --- a/src/components/left/settings/folders/SettingsFoldersMain.tsx +++ b/src/components/left/settings/folders/SettingsFoldersMain.tsx @@ -174,7 +174,7 @@ const SettingsFoldersMain: FC = ({ {userFolders && userFolders.length ? userFolders.map((folder) => ( onEditFolder(foldersById[folder.id])} diff --git a/src/components/right/Profile.tsx b/src/components/right/Profile.tsx index 82724ec09..cfa33e6cd 100644 --- a/src/components/right/Profile.tsx +++ b/src/components/right/Profile.tsx @@ -333,7 +333,7 @@ const Profile: FC = ({ handleMemberClick(id)} contextActions={getMemberContextAction(id)} > diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 9729403a4..7cc20f518 100644 --- a/src/components/ui/ListItem.scss +++ b/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); } diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss index 18a87eb9f..dc711c172 100644 --- a/src/components/ui/MenuItem.scss +++ b/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; } diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index e1814b371..af15af65f 100644 --- a/src/styles/_variables.scss +++ b/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); diff --git a/src/styles/themes.json b/src/styles/themes.json index c0e53a7cf..11b565930 100644 --- a/src/styles/themes.json +++ b/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"],