hunk.code_window: const StyledContentWrapper = styled.div`
     padding-right: 10px;
   `;
   const Button = styled(UnstyledButton)`
     position: relative;
     @media screen and (max-width: 1400px) {
       padding: 0 5px;
  
hunk.labels: keep keep keep keep add keep keep keep keep keep
hunk.after_edit: const Dropzone = styled.div<{ dark: boolean }>`
     position: absolute;
     top: 0px;
     bottom: 0px;
     left: 0px;
     right: 0px;
     background: ${({ dark }) => (dark ? colors.B17 : colors.B98)};
     color: ${({ dark }) => (dark ? colors.B98 : colors.B17)};
     border-radius: 7px;
     text-align: center;
     line-height: 75px;
     z-index: 1000000;
     border: 1px dashed ${({ dark }) => (dark ? colors.B30 : colors.B80)};
   `;
  
hunk.file_path: apps/web/src/design-system/template-button/ChannelButton.tsx
hunk.type: add
file: import styled from '@emotion/styled';
  import { colors, Text } from '../../../design-system';
  
  export function MessageContainer({ isDark }: { isDark: boolean }) {
    return (
      <>
        <Wrapper isDark={isDark}>
          <StyledTitle>YOUR ACTIVITY FEED</StyledTitle>
          <StyledText>Here you will see the activity graph once you send some events</StyledText>
        </Wrapper>
      </>
    );
  }
  
  const Wrapper = styled.div<{ isDark: boolean }>`
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    padding: 12px 15px 14px;
    height: 64px;
    background: ${({ isDark }) => {
      return isDark ? colors.B20 : colors.white;
    }};
    box-shadow: 0 5px 15px rgba(38, 68, 128, 0.05);
  
    border-radius: 7px;
    z-index: 2;
  
    &:after {
      display: inline-block;
      bottom: -9px;
      content: '';
      position: absolute;
      left: calc(50% - 5px);
      border-top: 10px solid
        ${({ isDark }) => {
          return isDark ? colors.B20 : colors.white;
        }};
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
    }
  `;
  
  const StyledTitle = styled(Text)`
    background: -webkit-linear-gradient(90deg, #dd2476 0%, #ff512f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 11px;
    margin: 12px 0 8px 0;
  `;
  
  const StyledText = styled(Text)`
    margin: 0 15px 14px 15px;
  `;
  