fixes done

src/blocks/pill/Pill.tsx

@@ -15,7 +15,7 @@ export type PillProps = {
 const StyledPill = styled.div<PillProps>`
   align-items: center;
   border-radius: var(--radius-xl);
-  background: var(--${({ isActive }) => (isActive ? 'surface-primary-inverse' : 'surface-secondary')});
+  background: var(--components-pill-background-${({ isActive }) => (isActive ? 'selected' : 'default')});
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -24,7 +24,15 @@ const StyledPill = styled.div<PillProps>`
   max-width: max-content;
   padding: var(--spacing-none) var(--spacing-sm);
 
-  ${({ isActive }) => getTextVariantStyles('bs-semibold', isActive ? 'text-primary-inverse' : 'text-primary')}
+  ${({ isActive }) =>
+    getTextVariantStyles('bs-semibold', isActive ? 'components-pill-text-selected' : 'components-pill-text-default')}
+
+  &:hover {
+    ${({ isActive }) =>
+      !isActive &&
+      `background: var(--components-pill-background-hover);
+    color: var(--components-pill-text-default);`}
+  }
 
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''}

src/blocks/theme/colors/colors.semantics.ts

@@ -28,6 +28,7 @@ import { tooltipSemantics } from '../semantics/semantics.tooltip';
 import { sliderSemantics } from '../semantics/semantics.slider';
 import { spinnerSemantics } from '../semantics/semantics.spinner';
 import { tableSemantics } from '../semantics/semantics.table';
+import { pillSemantics } from '../semantics/semantics.pill';
 
 // TODO: find a better way to do this in future
 type SemanticKeys = {
@@ -45,6 +46,7 @@ type SemanticKeys = {
   modal: 'components-modal';
   notifications: 'components-in-app-notification';
   pagination: 'components-pagination';
+  pill: 'components-pill';
   progressBar: 'components-progress-bar';
   radio: 'components-radio-button';
   surface: 'surface';
@@ -76,6 +78,7 @@ export const semanticKeys: SemanticKeys = {
   modal: 'components-modal',
   notifications: 'components-in-app-notification',
   pagination: 'components-pagination',
+  pill: 'components-pill',
   progressBar: 'components-progress-bar',
   radio: 'components-radio-button',
   surface: 'surface',
@@ -107,6 +110,7 @@ export const colorSemantics = {
   [semanticKeys.modal]: modalSemantics,
   [semanticKeys.notifications]: notificationsSemantics,
   [semanticKeys.pagination]: paginationSemantics,
+  [semanticKeys.pill]: pillSemantics,
   [semanticKeys.progressBar]: progressBarSemantics,
   [semanticKeys.radio]: radioSemantics,
   [semanticKeys.surface]: surfaceSemantics,

src/blocks/theme/semantics/semantics.pill.ts

@@ -0,0 +1,18 @@
+import { colorBrands } from '../colors/colors.brands';
+import { surfaceSemantics } from './semantics.surface';
+import { textSemantics } from './semantics.text';
+
+export const pillSemantics = {
+  'background-default': { light: colorBrands['neutral-100'], dark: colorBrands['neutral-700'] },
+  'background-selected': {
+    light: surfaceSemantics['primary-inverse'].light,
+    dark: surfaceSemantics['primary-inverse'].dark,
+  },
+  'background-hover': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] },
+
+  'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark },
+  'text-selected': {
+    light: textSemantics['primary-inverse'].light,
+    dark: textSemantics['primary-inverse'].dark,
+  },
+};

src/common/components/ChannelDetailsCard.tsx

@@ -10,6 +10,7 @@ import { LOGO_ALIAS_CHAIN, formatSubscriberCount, VerifiedChannelTooltipContent
 import {
   Box,
   Button,
+  ButtonProps,
   CaretDown,
   NotificationMobile,
   ResponsiveProp,
@@ -32,6 +33,7 @@ export type ChannelDetailsCardProps = {
   handleRefetch: () => void;
   userSettings: UserSetting[];
   width?: ResponsiveProp<string>;
+  buttonVariant?: ButtonProps['variant'];
 };
 
 const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
@@ -42,6 +44,7 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
   handleRefetch,
   userSettings,
   width,
+  buttonVariant = 'tertiary',
 }) => {
   let verifiedAliasChainIds = [
     appConfig.coreContractChain,
@@ -100,7 +103,7 @@ const ChannelDetailsCard: FC<ChannelDetailsCardProps> = ({
               <Button
                 id="basic-button"
                 disabled={isLoading}
-                variant="tertiary"
+                variant={buttonVariant}
                 size="small"
               >
                 Subscribe

src/modules/channelDetails/components/ChannelDetail.tsx

@@ -3,7 +3,7 @@ import { FC, useState } from 'react';
 import { css } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
-import { ChannelTutorialContent } from './ChannelTutorialContent';
+// import { ChannelTutorialContent } from './ChannelTutorialContent';
 import { ChannelDetailSubscribe } from './ChannelDetailSubscribe';
 import { RecentNotifications } from './RecentNotifications';
 import { Box, Text, Back, Tag, Skeleton, Tooltip, TickDecoratedCircleFilled } from 'blocks';
@@ -16,7 +16,7 @@ import { shortenText } from 'helpers/UtilityHelper';
 import APP_PATHS from 'config/AppPaths';
 import { appConfig } from 'config';
 
-import { getChannelTutorialDetails } from '../ChannelDetails.utils';
+// import { getChannelTutorialDetails } from '../ChannelDetails.utils';
 
 export type ChannelDetailProps = { channel: ChannelDetails; isLoading: boolean };
 const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
@@ -35,7 +35,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
       []),
   ];
 
-  const tutotrialDetails = getChannelTutorialDetails(channel?.channel);
+  // const tutotrialDetails = getChannelTutorialDetails(channel?.channel);
 
   return (
     <Box
@@ -207,7 +207,7 @@ const ChannelDetail: FC<ChannelDetailProps> = ({ channel, isLoading }) => {
                       {formatSubscriberCount(channel?.subscriber_count)} subscribers
                     </Text>
 
-                    {tutotrialDetails && <ChannelTutorialContent tutotrialDetails={tutotrialDetails} />}
+                    {/* {tutotrialDetails && <ChannelTutorialContent tutotrialDetails={tutotrialDetails} />} */}
                     {channel?.tags?.[0] && (
                       <Tag
                         label={channel.tags[0]}

src/modules/channels/Channels.tsx

@@ -98,7 +98,10 @@ const Channels: FC<ChannelsProps> = () => {
               justifyContent="center"
               height="100%"
             >
-              <Search size={48} />
+              <Search
+                size={48}
+                color="icon-tertiary"
+              />
               <Text variant="h5-bold">No channels to display</Text>
             </Box>
           ) : (

src/modules/channels/components/AllChannelsListItem.tsx

@@ -27,6 +27,7 @@ const AllChannelsListItem: FC<AllChannelsListItemProps> = ({ channelDetails, isL
 
   return (
     <ChannelDetailsCard
+      buttonVariant="outline"
       channelDetails={channelDetails}
       isLoading={isLoading}
       isSubscribed={!!channelSubscriptionData}

src/modules/channels/components/ChannelSearchAndChainSelection.tsx

@@ -46,7 +46,7 @@ const ChannelSearchAndChainSelection: FC<ChannelSearchAndChainSelectionProps> =
           value={searchQuery}
         />
       </Box>
-      <Box width="100%">
+      <Box width={{ initial: '300px', ml: '100%' }}>
         <Select
           options={getSelectChains(appConfig.allowedNetworks)}
           value={filters.chain}