From b3e21e293aaf5e60eec276878ee2f74b9cc6625d Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 22 Mar 2024 13:06:11 +0100 Subject: [PATCH] UserStatus: Design improvements (#4372) --- .../common/PrivacySettingsNoticeModal.tsx | 2 +- src/components/common/ProfileInfo.module.scss | 24 ++++++++++++++++ src/components/common/ProfileInfo.scss | 10 ------- src/components/common/ProfileInfo.tsx | 6 ++-- .../left/settings/PremiumStatusItem.tsx | 10 +++++-- .../left/settings/PrivacyMessages.tsx | 2 +- .../middle/message/SimilarChannels.tsx | 25 ++--------------- src/hooks/useAverageColor.ts | 28 +++++++++++++++++++ 8 files changed, 67 insertions(+), 40 deletions(-) create mode 100644 src/hooks/useAverageColor.ts diff --git a/src/components/common/PrivacySettingsNoticeModal.tsx b/src/components/common/PrivacySettingsNoticeModal.tsx index 2e4311dfc..da9e5ba73 100644 --- a/src/components/common/PrivacySettingsNoticeModal.tsx +++ b/src/components/common/PrivacySettingsNoticeModal.tsx @@ -69,7 +69,7 @@ const PrivacySettingsNoticeModal = ({ isOpen, isReadDate, user }: OwnProps & Sta closePrivacySettingsNoticeModal(); setTimeout(() => { - openPremiumModal(); + openPremiumModal({ initialSection: 'last_seen' }); }, CLOSE_ANIMATION_DURATION); }); diff --git a/src/components/common/ProfileInfo.module.scss b/src/components/common/ProfileInfo.module.scss index 5c902d80a..35ace2eb2 100644 --- a/src/components/common/ProfileInfo.module.scss +++ b/src/components/common/ProfileInfo.module.scss @@ -176,9 +176,33 @@ .status { font-size: 0.875rem; + display: flex; + align-items: center; +} + +.user-status { opacity: 0.5; } +.get-status { + --blured-background-color: #c4c9cc42; + cursor: var(--custom-cursor, pointer); + font-size: 0.75rem; + margin-inline-start: 0.375rem; + border-radius: 1rem; + padding: 0.1875rem 0.375rem; + pointer-events: all; + font-weight: 500; + transition: 150ms filter ease-in; + background: var(--blured-background-color); + backdrop-filter: blur(100px); + opacity: 0.8; + + &:hover { + filter: brightness(1.10); + } +} + .topicContainer { --custom-emoji-size: 7.5rem; diff --git a/src/components/common/ProfileInfo.scss b/src/components/common/ProfileInfo.scss index c514bfb3f..33139e38f 100644 --- a/src/components/common/ProfileInfo.scss +++ b/src/components/common/ProfileInfo.scss @@ -48,14 +48,4 @@ pointer-events: auto; cursor: var(--custom-cursor, pointer); } - - .get-status { - cursor: var(--custom-cursor, pointer); - margin-left: 0.375rem; - border-radius: 0.5rem; - padding: 0.125rem 0.375rem; - background: var(--color-background-menu-separator); - pointer-events: all; - font-weight: 500; - } } diff --git a/src/components/common/ProfileInfo.tsx b/src/components/common/ProfileInfo.tsx index 0198083b9..9706c1bf2 100644 --- a/src/components/common/ProfileInfo.tsx +++ b/src/components/common/ProfileInfo.tsx @@ -276,12 +276,12 @@ const ProfileInfo: FC = ({ isUserOnline(user, userStatus) && 'online', )} > - + {getUserStatus(lang, user, userStatus)} {userStatus?.isReadDateRestrictedByMe && ( - - {lang('StatusHiddenShow')} + + {lang('StatusHiddenShow')} )} diff --git a/src/components/left/settings/PremiumStatusItem.tsx b/src/components/left/settings/PremiumStatusItem.tsx index b74749a98..19497058e 100644 --- a/src/components/left/settings/PremiumStatusItem.tsx +++ b/src/components/left/settings/PremiumStatusItem.tsx @@ -1,16 +1,22 @@ import React, { memo } from '../../../lib/teact/teact'; import { getActions } from '../../../global'; +import type { ApiPremiumSection } from '../../../global/types'; + import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; import PremiumIcon from '../../common/PremiumIcon'; import ListItem from '../../ui/ListItem'; -function PremiumStatusItem() { +type OwnProps = { + premiumSection?: ApiPremiumSection; +}; + +function PremiumStatusItem({ premiumSection }: OwnProps) { const { openPremiumModal } = getActions(); const lang = useLang(); - const handleOpenPremiumModal = useLastCallback(() => openPremiumModal()); + const handleOpenPremiumModal = useLastCallback(() => openPremiumModal({ initialSection: premiumSection })); return (
diff --git a/src/components/left/settings/PrivacyMessages.tsx b/src/components/left/settings/PrivacyMessages.tsx index e2f2f0378..f33dc11ae 100644 --- a/src/components/left/settings/PrivacyMessages.tsx +++ b/src/components/left/settings/PrivacyMessages.tsx @@ -67,7 +67,7 @@ function PrivacyMessages({ {lang('Privacy.Messages.SectionFooter')}

- {!isCurrentUserPremium && } + {!isCurrentUserPremium && } ); } diff --git a/src/components/middle/message/SimilarChannels.tsx b/src/components/middle/message/SimilarChannels.tsx index fb40fbc5a..b96839502 100644 --- a/src/components/middle/message/SimilarChannels.tsx +++ b/src/components/middle/message/SimilarChannels.tsx @@ -4,24 +4,21 @@ import React, { import { getActions, getGlobal, withGlobal } from '../../../global'; import type { ApiChat } from '../../../api/types'; -import { ApiMediaFormat } from '../../../api/types'; -import { getChatAvatarHash } from '../../../global/helpers'; import { selectChat, selectIsCurrentUserPremium, selectSimilarChannelIds, } from '../../../global/selectors'; import buildClassName from '../../../util/buildClassName'; -import { getAverageColor, rgb2hex } from '../../../util/colors'; import { formatIntegerCompact } from '../../../util/textFormat'; import useTimeout from '../../../hooks/schedulers/useTimeout'; +import useAverageColor from '../../../hooks/useAverageColor'; import useFlag from '../../../hooks/useFlag'; import useHorizontalScroll from '../../../hooks/useHorizontalScroll'; import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; -import useMedia from '../../../hooks/useMedia'; import Avatar from '../../common/Avatar'; import Icon from '../../common/Icon'; @@ -173,7 +170,7 @@ const SimilarChannels = ({ function SimilarChannel({ channel }: { channel: ApiChat }) { const { openChat } = getActions(); - const color = useAverageColor(channel); + const color = useAverageColor(channel, DEFAULT_BADGE_COLOR); return (
openChat({ id: channel.id })}> @@ -233,24 +230,6 @@ function MoreChannels({ ); } -function useAverageColor(channel: ApiChat) { - const [color, setColor] = useState(DEFAULT_BADGE_COLOR); - const imgBlobUrl = useMedia(getChatAvatarHash(channel), false, ApiMediaFormat.BlobUrl); - - useEffect(() => { - (async () => { - if (!imgBlobUrl) { - return; - } - - const averageColor = await getAverageColor(imgBlobUrl); - setColor(`#${rgb2hex(averageColor)}`); - })(); - }, [imgBlobUrl]); - - return color; -} - export default memo( withGlobal((global, { chatId }): StateProps => { const { similarChannelIds, shouldShowInChat, count } = selectSimilarChannelIds(global, chatId) || {}; diff --git a/src/hooks/useAverageColor.ts b/src/hooks/useAverageColor.ts new file mode 100644 index 000000000..d9b92de13 --- /dev/null +++ b/src/hooks/useAverageColor.ts @@ -0,0 +1,28 @@ +import { useEffect, useState } from '../lib/teact/teact'; + +import type { ApiChat } from '../api/types'; +import { ApiMediaFormat } from '../api/types'; + +import { getChatAvatarHash } from '../global/helpers'; +import { getAverageColor, rgb2hex } from '../util/colors'; +import useMedia from './useMedia'; + +function useAverageColor(chat: ApiChat, fallbackColor = '#00000000') { + const [color, setColor] = useState(fallbackColor); + const imgBlobUrl = useMedia(getChatAvatarHash(chat), false, ApiMediaFormat.BlobUrl); + + useEffect(() => { + (async () => { + if (!imgBlobUrl) { + return; + } + + const averageColor = await getAverageColor(imgBlobUrl); + setColor(`#${rgb2hex(averageColor)}`); + })(); + }, [imgBlobUrl]); + + return color; +} + +export default useAverageColor;