Icon fix

[akp111]

Fixes Issue

Changes proposed

Check List (Check all the applicable boxes)

• My code follows the code style of this project.
• My change requires changes to the documentation.
• I have updated the documentation accordingly.
• This PR does not contain plagiarized content.
• The title of my pull request is a short description of the requested changes.

Screenshots

Note to reviewers

[github-actions]

In the file packages/uiweb/src/lib/components/notification/index.tsx:

1. In the OffsetWidthType type definition, there is a missing closing brace } after the offsetWidth property.
2. In the CustomThemeProps type definition, there is a missing closing brace } after the property declaration.
3. In the CTADataType type definition, there is a missing closing brace } after the property declaration.
4. The ContentSection styled component is missing a closing brace } after the media query (max-width: ${SM_BREAKPOINT}).
5. The ChainIconSVG styled component is missing a closing brace } after the media query (max-width: ${SM_BREAKPOINT}).
6. In the MobileImage styled component, the conditional border styling is not correctly applied. The border property should be within a setter like border: ....
7. There is an incomplete comment section // around setting an arbitrarily large number in MD_BREAKPOINT.

After fixing the above issues the refactored section would look like this:

type OffsetWidthType = {
  offsetWidth: number;
};

type ContainerDataType = {
  timestamp?: string;
} & OffsetWidthType;

type CustomThemeProps = {
  themeObject: INotificationItemTheme;
};

type CTADataType = {
  cta?: boolean;
};

const ContentSection = styled.div<CTADataType & CustomThemeProps & OffsetWidthType>`
  display: flex;
  padding: 15px 16px;
  cursor: ${(props) => (props.cta ? 'pointer' : 'default')};
  &:hover {
    background: ${(props) => (props.cta ? props?.themeObject?.color?.contentHoverBackground : 'none')};
  }
  ${(props: any) =>
    props.offsetWidth > 461 &&
    css`
      @media (min-width: ${SM_BREAKPOINT}) {
        align-items: flex-start;
        flex-direction: row;
        gap: 20px;
        justify-content: space-between;
      }
    }
  }
`;

const BlockchainContainer = styled.div`
  align-items: center;
  justify-content: center;
  font-weight: 700;
`;

const ChainIconSVG = styled.div<OffsetWidthType>`
  width: 33px;
  height: 28px;
  svg,
  svg image,
  img {
    width: 100%;
    height: 100%;
  }
  @media (max-width: ${SM_BREAKPOINT}) {
    width: 18px;
    height: 18px;
  }
`;

const MobileImage = styled.div<OffsetWidthType & { theme?: string }>`
  overflow: hidden;
  img, iframe, video {
    max-width: 100% !important;
    height: 100% !important;
    object-fit: fill;
    border-radius: 10px;
    border: 1px solid ${(props) => ((props.theme as unknown as string) === 'light' ? '#ededed' : '#444')};
    border-radius: 10px;
    min-width: 220px;
    width: 220px;
    height: 200px;
    display: block;
    width: 100%;
    max-height: 200px;
  }
`;

// Set an arbitrarily large number because we no longer use this breakpoint
const MD_BREAKPOINT = '50050px';
const SM_BREAKPOINT = '900px';

After reviewing the changes above, the rest of the code seems okay.

All looks good.