🐛 [BUG] - Fix the Push snap UI for channels page

[corlard3y]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
push-dapp	❌ Failed (Inspect)			May 22, 2024 10:03am

[github-actions]

• In the NotifsOuter styled component, the closing backtick is missing for the template literal.
• In the Notifs styled component, the closing backtick is missing for the template literal.
• In the ToasterMsg styled component, the styles are missing. It should have some CSS properties.
• In the InstallText styled component, the styles are missing. It should have some CSS properties.
• The CloseButton styled component is referring to a component named Close which is not defined in the provided code snippet.
• The InstallPushSnap styled component is missing a closing backtick for the template literal.
• In the ScrollItem styled component, there are no CSS properties defined within the styled component.

All other styled components have their CSS properties correctly defined.

Therefore, the corrected code for the problematic parts should be:

const NotifsOuter = styled.div`
  margin: 25px 0px;
`;

const Notifs = styled.div`
  align-self: stretch;
  flex: 1;
`;

const Toaster = styled.div`
  display: flex;
  flex-direction: row;
  margin: 0px 10px;
`;

const ToasterMsg = styled.div`
  // Add CSS styles here
`;

const InstallText = styled(ItemHV2)`
  flex-direction: column;
  align-items: baseline;
  display: block;
  align-self: auto;
`;

const CloseButton = styled.div`
  cursor: pointer;
  height: 20px;
  width: 20px;
`;

const InstallPushSnap = styled(SpanV2)`
  font-size: 14px;
  font-weight: 500;
  color: #d53a94;
  &:hover {
    text-decoration: underline;
    text-underline-position: under;
  }
`;

const ScrollItem = styled(Item)`
  align-items: stretch;
  justify-content: stretch;
  flex-wrap: nowrap;
`;

All other parts of the code look good.

[rohitmalhotra1420]

@corlard3y could your resolve the merge conflicts here

[github-actions]

In the code provided, there are some mistakes and areas that need attention:

1. In the NotifsOuter constant declaration, the styled component is not properly closed with a backtick.
2. In the Notifs styled component, it lacks the closing backtick.
3. In the Toaster styled component, the closing backtick is missing.
4. In the ToasterMsg styled component, the styles are missing.
5. In the SnapSection styled component, there are duplicated properties for border and background. Also, there is a missing closing brace for the @media query.
6. The InstallText styled component has a missing closing brace for the @media query.
7. In the CloseButton styled component, the height and width are not specified in the correct unit (missing "px").
8. The InstallPushSnap styled component is missing a closing brace.
9. In the InstallPushSnap styled component, the overflow property is set to show which should be either visible or removed.
10. The ScrollItem styled component is cut off.

After correcting the listed issues, the code should be finalized.

All looks good.

[github-actions]

PR Preview Action v1.4.7
Preview removed because the pull request was closed.
2024-05-22 10:20 UTC

[github-actions]

In the provided code snippet from the file Inbox.tsx, there are a few issues to address:

1. Missing closing backtick in the styled component NotifsOuter.
2. Missing closing backtick in the styled component Notifs.
3. ToasterMsg styled component is empty. It should have some CSS properties defined within it.
4. In the Toaster styled component, a closing backtick is missing at the end.
5. Inside the SnapSection styled component, there are duplicated properties for border and background.
6. Inside the SnapSection styled component, there are duplicated properties for gap.
7. Inside the SnapSection styled component, padding and gap values are being overridden within the media query, which may be a mistake.
8. Inside the InstallText styled component, unnecessary align-self: auto; property is used.

After addressing the issues mentioned above, the corrected code will look like this:

...
const StyledComponent = styled.div`
  flex-direction: column;
  height: 85%;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-weight: 200;
  margin: 0 0 0 10px;

  @media ${device.tablet} {
    height: 74%;
  }
`;

const NotifsOuter = styled.div`
  margin: 25px 0px;
`;

const Notifs = styled.div`
  align-self: stretch;
  flex: 1;
`;

const Toaster = styled.div`
  display: flex;
  flex-direction: row;
  margin: 0px 10px;
`;

const ToasterMsg = styled.div`
  /* Add CSS properties here */
`;

const SnapSection = styled(ItemHV2)`
  margin-top: 20px;
  border-radius: 12px;
  border: 1px solid #d4dcea;
  background: #fff;
  padding: 12px 16px;
  gap: 16px;
  max-height: 50px;

  @media (max-width: 525px) {
    padding: 8px 12px;
  }
`;

const InstallText = styled(ItemHV2)`
  flex-direction: column;
  align-items: baseline;
  display: block;
`;

const CloseButton = styled(Close)`
  cursor: pointer;
  height: 20px;
  width: 20px;
`;

const InstallPushSnap = styled(SpanV2)`
  font-size: 14px;
  font-weight: 500;
  color: #d53a94;

  &:hover {
    text-decoration: underline;
    text-underline-position: under;
  }
`;

const ScrollItem = styled(Item)`
  align-items: stretch;
...

After making these corrections, you can mark the section as 'All looks good.'

[rohitmalhotra1420]

Tested on Deploy preview looks good.