Channels listing and details page

src/App.tsx

@@ -295,7 +295,6 @@ export default function App() {
   }, []);
 
   const steps = UserJourneySteps({ darkMode });
-
   const handleJoyrideCallback = (data: CallBackProps) => {
     const { action, lifecycle, index } = data;
     if (lifecycle === 'ready') {

src/blocks/button/Button.tsx

@@ -40,6 +40,7 @@ const StyledButton = styled.button<ButtonProps>`
   font-family: var(--font-family);
   justify-content: center;
   white-space: nowrap;
+  flex-shrink: 0;
 
   /* Common icon css added through CSS class */
   .icon {
@@ -56,7 +57,7 @@ const StyledButton = styled.button<ButtonProps>`
   ${({ iconOnly, size }) => getButtonSizeStyles({ iconOnly: !!iconOnly, size: size || 'medium' })}
 
   /* Circular CSS for rounded icon only buttons */
-  ${({ circular, iconOnly }) => circular && iconOnly && `border-radius: var(--r10)`}
+  ${({ circular, iconOnly }) => circular && iconOnly && `border-radius: var(--r10);`}
 
   /* Prop specific CSS */
   ${({ block }) => block && 'width: 100%;'}

src/blocks/icons/components/CaretLeft.tsx

@@ -9,16 +9,17 @@ const CaretLeft: FC<IconProps> = (allProps) => {
       componentName="CaretLeft"
       icon={
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           width="inherit"
           height="inherit"
-          viewBox="0 0 6 10"
+          viewBox="0 0 24 24"
           fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           {...props}
         >
           <path
-            d="M4.89258 8.72499L1.16758 4.99999L4.89258 1.27499"
+            d="M14.8389 17.5875L9.25137 12L14.8389 6.41248"
             stroke="currentColor"
+            stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
           />

src/blocks/icons/components/CaretRight.tsx

@@ -9,19 +9,32 @@ const CaretRight: FC<IconProps> = (allProps) => {
       componentName="CaretRight"
       icon={
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           width="inherit"
           height="inherit"
-          viewBox="0 0 6 10"
+          viewBox="0 0 24 24"
           fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           {...props}
         >
-          <path
-            d="M1.16748 1.27502L4.89246 5L1.16748 8.72498"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
+          <g clip-path="url(#clip0_4239_16009)">
+            <path
+              d="M9.25146 6.41254L14.8389 12L9.25146 17.5875"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_4239_16009">
+              <rect
+                width="15.9553"
+                height="8.72765"
+                fill="white"
+                transform="translate(16.4089 4.02235) rotate(90)"
+              />
+            </clipPath>
+          </defs>
         </svg>
       }
       {...restProps}

src/blocks/icons/components/Chat.tsx

@@ -9,8 +9,7 @@ const Chat: FC<IconProps> = (allProps) => {
       componentName="Chat"
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          style={{ width: 'inherit', height: 'inherit' }}
           viewBox="0 0 32 32"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

src/blocks/icons/components/Tutotial.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Tutorial: FC<IconProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IconWrapper
+      componentName="Tutorial"
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          style={{ width: 'inherit', height: 'inherit' }}
+          viewBox="0 0 22 21"
+          fill="none"
+          {...props}
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0 2.09998V14.9666C0 16.0712 0.895431 16.9666 2 16.9666H20C21.1046 16.9666 22 16.0712 22 14.9666V2.09998C22 0.995407 21.1046 0.0999756 20 0.0999756H2C0.89543 0.0999756 0 0.995406 0 2.09998ZM8.8 4.31022V12.6964C8.8 12.9192 9.06929 13.0307 9.22678 12.8732L13.7424 8.35756C13.8454 8.25459 13.8389 8.08575 13.7284 7.99097L9.2127 4.12041C9.05053 3.98141 8.8 4.09663 8.8 4.31022Z"
+            fill="currentColor"
+          />
+          <path
+            d="M5.8667 19.9H16.1334"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default Tutorial;

src/blocks/icons/index.ts

@@ -168,6 +168,7 @@ export { default as Swap } from './components/Swap';
 export { default as Tick } from './components/Tick';
 export { default as TickCircleFilled } from './components/TickCircleFilled';
 export { default as TickDecoratedCircleFilled } from './components/TickDecoratedCircleFilled';
+export { default as Tutorial } from './components/Tutotial';
 
 export { default as UserFilled } from './components/UserFilled';
 

src/blocks/index.ts

@@ -9,6 +9,7 @@ export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './m
 export { Modal, type ModalProps, modal } from './modal';
 export { notification, Notification } from './notification';
 export { Pagination, type PaginationProps } from './pagination';
+export { Pill, type PillProps } from './pill';
 export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';

src/blocks/pill/Pill.tsx

@@ -0,0 +1,53 @@
+import { FC, ReactNode } from 'react';
+import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import { TransformedHTMLAttributes } from '../Blocks.types';
+import { getTextVariantStyles } from '../Blocks.utils';
+
+export type PillProps = {
+  /* Child react nodes rendered by Pill */
+  children?: ReactNode;
+  /* Additional prop from styled components to apply custom css to Lozenge */
+  css?: FlattenSimpleInterpolation;
+  /* Decides the UI state of the component */
+  isActive?: boolean;
+} & TransformedHTMLAttributes<HTMLDivElement>;
+
+const StyledPill = styled.div<PillProps>`
+  align-items: center;
+  border-radius: var(--radius-xl);
+  background: var(--components-pill-background-${({ isActive }) => (isActive ? 'selected' : 'default')});
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 40px;
+  justify-content: center;
+  max-width: max-content;
+  padding: var(--spacing-none) var(--spacing-sm);
+
+  ${({ 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 || ''}
+`;
+
+const Pill: FC<PillProps> = ({ children, isActive = false, onClick, ...props }) => {
+  return (
+    <StyledPill
+      isActive={isActive}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </StyledPill>
+  );
+};
+
+export { Pill };

src/blocks/pill/index.ts

@@ -0,0 +1 @@
+export * from './Pill';

src/blocks/select/Select.tsx

@@ -41,12 +41,12 @@ export type SelectProps = {
   action?: ReactNode;
 };
 
-const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+const Container = styled.div<{ css?: FlattenSimpleInterpolation; label: SelectProps['label'] }>`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   flex: 1 0 0;
-  gap: var(--spacing-xxs, 8px);
+  gap: var(--spacing-${({ label }) => (label ? 'xxs' : 'none')});
 
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''};
@@ -215,7 +215,7 @@ const Select: React.FC<SelectProps> = ({
   disabled,
 }) => {
   const [popoverWidth, setPopoverWidth] = useState(0);
-  const [viewPopover, setViewPopover] = useState(true);
+  const [viewPopover, setViewPopover] = useState(false);
   const [popoverLeft, setPopoverLeft] = useState(0);
   const comboboxRef = useRef<HTMLDivElement>(null);
   const parentRef = useRef<HTMLDivElement>(null);
@@ -253,9 +253,11 @@ const Select: React.FC<SelectProps> = ({
   const handleParentFocus = () => {
     childRef?.current?.focus();
   };
-
   return (
-    <Container css={css}>
+    <Container
+      css={css}
+      label={label}
+    >
       <LabelContainer>
         <LabelText color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-default'}>
           <LabelTextContainer>

src/blocks/textInput/TextInput.tsx

@@ -21,12 +21,12 @@ export type TextInputProps = {
   value: string | number;
 };
 
-const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+const Container = styled.div<{ css?: FlattenSimpleInterpolation; label: TextInputProps['label'] }>`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   flex: 1 0 0;
-  gap: var(--spacing-xxs, 8px);
+  gap: var(--spacing-${({ label }) => (label ? 'xxs' : 'none')});
 
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''};
@@ -151,7 +151,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     ref
   ) => {
     return (
-      <Container css={css}>
+      <Container
+        css={css}
+        label={label}
+      >
         {label && (
           <LabelContainer>
             <InputText

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,
+  },
+};