From 1542ca47ed7c2c09f24ce3cb56ada4566d30056e Mon Sep 17 00:00:00 2001 From: artlu99 Date: Mon, 24 Jun 2024 20:01:38 -0400 Subject: [PATCH] mobile channel logos --- src/components/apps/cast/Cast.tsx | 2 +- src/components/apps/cast/Reactions.tsx | 6 +-- src/components/header/layouts/ChannelLogo.tsx | 54 ++++++++++--------- .../header/layouts/MobileHeader.tsx | 23 +++++--- src/hooks/useResponsive.ts | 3 ++ 5 files changed, 53 insertions(+), 35 deletions(-) diff --git a/src/components/apps/cast/Cast.tsx b/src/components/apps/cast/Cast.tsx index 6498b2e..8edf8b5 100644 --- a/src/components/apps/cast/Cast.tsx +++ b/src/components/apps/cast/Cast.tsx @@ -175,7 +175,7 @@ export const Cast: React.FC = ({ {tags.map((tag) => linkTo ? ( - + ) : ( diff --git a/src/components/apps/cast/Reactions.tsx b/src/components/apps/cast/Reactions.tsx index 1d50376..2afce16 100644 --- a/src/components/apps/cast/Reactions.tsx +++ b/src/components/apps/cast/Reactions.tsx @@ -1,6 +1,7 @@ import { Curation, putCuration } from '@app/api/curation.api'; import { HubReactionType, HubReactionsResponse, HubReactionsStreamItem } from '@app/api/hubble-http-types'; import { setReactionOnHash } from '@app/api/reactionOnHash.api'; +import { getFidWithFallback } from '@app/auth/fids'; import { ReactionsAnalytics } from '@app/components/apps/cast/ReactionsAnalytics'; import { BaseBadge } from '@app/components/common/BaseBadge/BaseBadge'; import { BaseDivider } from '@app/components/common/BaseDivider/BaseDivider'; @@ -20,7 +21,6 @@ import { } from 'lucide-react'; import { Dispatch, SetStateAction, useMemo, useState } from 'react'; import * as S from './Cast.styles'; -import { getFidWithFallback } from '@app/auth/fids'; const hubReactionsToStreamItems = (reactions: HubReactionsResponse | undefined): HubReactionsStreamItem[] => { return (reactions?.messages ?? []).map((m) => { @@ -79,8 +79,8 @@ export const Reactions: React.FC = ({ const shadedColor = theme === 'dark' ? BASE_COLORS.lightgrey : showPFPs ? BASE_COLORS.lightgreen : BASE_COLORS.gray; const highlightedColor = theme === 'dark' ? BASE_COLORS.orange : BASE_COLORS.blue; - const { isTablet, isDesktop } = useResponsive(); - const reactionBarMarginSize = isDesktop ? 60 : isTablet ? 40 : 30; + const { isLandscapeMobile, isTablet, isDesktop } = useResponsive(); + const reactionBarMarginSize = isDesktop ? 60 : isTablet ? 40 : isLandscapeMobile ? 50 : 10; const reactionIconSize = isDesktop ? 18 : isTablet ? 24 : 24; const { user } = useNeynarContext(); diff --git a/src/components/header/layouts/ChannelLogo.tsx b/src/components/header/layouts/ChannelLogo.tsx index 84dd946..8a3ca8b 100644 --- a/src/components/header/layouts/ChannelLogo.tsx +++ b/src/components/header/layouts/ChannelLogo.tsx @@ -1,5 +1,7 @@ import logo from '@app/assets/logo.png'; +import { BaseTooltip } from '@app/components/common/BaseTooltip/BaseTooltip'; import { useAppSelector } from '@app/hooks/reduxHooks'; +import { useResponsive } from '@app/hooks/useResponsive'; import { channelByIdQuery } from '@app/queries/queries'; import { pinChannel, unpinChannel } from '@app/store/slices/pinnedChannelsSlice'; import { useZustand } from '@app/store/zustand'; @@ -11,6 +13,7 @@ import * as S from './/ChannelLogo.styles'; export const ChannelLogo: React.FC = () => { const { activeChannelId } = useZustand(); + const { mobileOnly } = useResponsive(); const chQuery = useQuery(channelByIdQuery(activeChannelId)); const memodChData = useMemo(() => { @@ -26,32 +29,35 @@ export const ChannelLogo: React.FC = () => { const img = memodChData?.result?.channel?.imageUrl ?? logo; const channelName = memodChData?.result?.channel?.name ?? activeChannelId; - const pinIconSize = 18; + const logoSize = mobileOnly ? 36 : 48; + const pinIconSize = mobileOnly ? 20 : 18; return ( - - - {channelName} - - {isPinned ? ( - { - unpinChannel(activeChannelId) && window.location.reload(); - }} - /> - ) : ( - { - pinChannel(activeChannelId) && window.location.reload(); - }} - /> - )} - + + + + {channelName} + + {isPinned ? ( + { + unpinChannel(activeChannelId) && window.location.reload(); + }} + /> + ) : ( + { + pinChannel(activeChannelId) && window.location.reload(); + }} + /> + )} + + ); }; diff --git a/src/components/header/layouts/MobileHeader.tsx b/src/components/header/layouts/MobileHeader.tsx index 62fb95f..f4e20e4 100644 --- a/src/components/header/layouts/MobileHeader.tsx +++ b/src/components/header/layouts/MobileHeader.tsx @@ -3,6 +3,8 @@ import { BaseRow } from '@app/components/common/BaseRow/BaseRow'; import { SettingsDropdown } from '@app/components/header/components/settingsDropdown/SettingsDropdown'; import { SignalToNoiseDropdown } from '@app/components/header/components/signalToNoiseDropdown/SignalToNoiseDropdown'; import { ZenModeDropdown } from '@app/components/header/components/zenModeDropdown/ZenModeDropdown'; +import { ChannelLogo } from '@app/components/header/layouts/ChannelLogo'; +import { useResponsive } from '@app/hooks/useResponsive'; import { useLocation } from 'react-router-dom'; import * as S from '../Header.styles'; @@ -12,6 +14,8 @@ interface MobileHeaderProps { } export const MobileHeader: React.FC = ({ toggleSider, isSiderOpened }) => { + const { isLandscapeMobile } = useResponsive(); + const { pathname } = useLocation(); const isHomeFeed = pathname.startsWith('/home'); const isChannelFeed = pathname.startsWith('/~/channel/'); @@ -25,7 +29,7 @@ export const MobileHeader: React.FC = ({ toggleSider, isSider - + {(isHomeFeed || isChannelFeed) && ( <> @@ -36,14 +40,19 @@ export const MobileHeader: React.FC = ({ toggleSider, isSider )} - {isVotePage && ( - - + {isLandscapeMobile && ( + + {isChannelFeed ? ( + + ) : isHomeFeed ? ( - - + ) : isVotePage ? ( + + ) : ( + + )} + )} - diff --git a/src/hooks/useResponsive.ts b/src/hooks/useResponsive.ts index 8731f3d..e259143 100644 --- a/src/hooks/useResponsive.ts +++ b/src/hooks/useResponsive.ts @@ -3,6 +3,7 @@ import { MediaQueryAllQueryable, MediaQueryMatchers, useMediaQuery } from 'react interface ResponsiveReturnValues { isMobile: boolean; + isLandscapeMobile: boolean; isTablet: boolean; isDesktop: boolean; isBigScreen: boolean; @@ -18,6 +19,7 @@ interface ResponsiveReturnValues { export const useResponsive = (): ResponsiveReturnValues => { const isMobile = useMediaQuery({ query: media.xs }); + const isLandscapeMobile = useMediaQuery({ query: media.sm }); const isTablet = useMediaQuery({ query: media.md }); const isDesktop = useMediaQuery({ query: media.xl }); const isBigScreen = useMediaQuery({ query: media.xxl }); @@ -36,6 +38,7 @@ export const useResponsive = (): ResponsiveReturnValues => { return { isMobile, + isLandscapeMobile, isTablet, isDesktop, isBigScreen,