mobile channel logos

artlu99 · Jun 25, 2024 · 1542ca4 · 1542ca4
1 parent cae01cc
commit 1542ca4
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 35 deletions.
diff --git a/src/components/apps/cast/Cast.tsx b/src/components/apps/cast/Cast.tsx
@@ -175,7 +175,7 @@ export const Cast: React.FC<CastProps> = ({
         {tags.map((tag) =>
           linkTo ? (
             <Link to={`/~/channel/${linkTo}`}>
-              <BaseHashTag key={tag.bgColor} title={tag.title} bgColor={tag.bgColor} />
+              <BaseHashTag key={`${castHash}-${tag.title}-${tag.bgColor}`} title={tag.title} bgColor={tag.bgColor} />
             </Link>
           ) : (
             <BaseHashTag key={tag.bgColor} title={tag.title} bgColor={tag.bgColor} />

diff --git 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<ReactionsProps> = ({
   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
@@ -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 (
     <S.ChannelLogoDiv>
-      <S.ChannelLogoLink
-        to={`https://farcaster-channels.artlu.xyz/channel-followers/${activeChannelId}.csv`}
-        target="_blank"
-      >
-        <S.BrandSpan>
-          <img src={img} alt={channelName} height={48} style={{ borderRadius: BORDER_RADIUS }} />
-        </S.BrandSpan>
-        {isPinned ? (
-          <PinIcon
-            size={pinIconSize}
-            onClick={() => {
-              unpinChannel(activeChannelId) && window.location.reload();
-            }}
-          />
-        ) : (
-          <PinOffIcon
-            size={pinIconSize}
-            onClick={() => {
-              pinChannel(activeChannelId) && window.location.reload();
-            }}
-          />
-        )}
-      </S.ChannelLogoLink>
+      <BaseTooltip title={channelName}>
+        <S.ChannelLogoLink
+          to={`https://farcaster-channels.artlu.xyz/channel-followers/${activeChannelId}.csv`}
+          target="_blank"
+        >
+          <S.BrandSpan>
+            <img src={img} alt={channelName} height={logoSize} style={{ borderRadius: BORDER_RADIUS }} />
+          </S.BrandSpan>
+          {isPinned ? (
+            <PinIcon
+              size={pinIconSize}
+              onClick={() => {
+                unpinChannel(activeChannelId) && window.location.reload();
+              }}
+            />
+          ) : (
+            <PinOffIcon
+              size={pinIconSize}
+              onClick={() => {
+                pinChannel(activeChannelId) && window.location.reload();
+              }}
+            />
+          )}
+        </S.ChannelLogoLink>
+      </BaseTooltip>
     </S.ChannelLogoDiv>
   );
 };
diff --git 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<MobileHeaderProps> = ({ 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<MobileHeaderProps> = ({ toggleSider, isSider
         </BaseCol>
 
         <BaseCol>
-          <BaseRow align="middle">
+          <BaseRow align="middle" justify="space-between">
             {(isHomeFeed || isChannelFeed) && (
               <>
                 <BaseCol>
@@ -36,14 +40,19 @@ export const MobileHeader: React.FC<MobileHeaderProps> = ({ toggleSider, isSider
                 </BaseCol>
               </>
             )}
-            {isVotePage && (
-              <BaseRow justify="space-between" align="middle">
-                <BaseCol>
+            {isLandscapeMobile && (
+              <BaseCol>
+                {isChannelFeed ? (
+                  <ChannelLogo />
+                ) : isHomeFeed ? (
                   <S.CCAButton />
-                </BaseCol>
-              </BaseRow>
+                ) : isVotePage ? (
+                  <S.CCAButton />
+                ) : (
+                  <S.FCButton />
+                )}
+              </BaseCol>
             )}
-
             <BaseCol>
               <SettingsDropdown />
             </BaseCol>

diff --git 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,