Topcoder - Notifications Popup Fixes

Challenge Objectives

• Implement the notification feature to new navigation based on provided design
• Call the API endpoint to get notifications
• Show alert when user have a new notification

Project Background
Currently, we deployed a new navigation to TopCoder site, as part of new navigation design we have Community Notifications. This will show notifications to members from admins, events and challenges progression. 

Technology Stack

• Node.js
• JavaScript
• React.js
• Kafka

Code Access
The work is to be done in the navigation-component repo (notifications branch).

Individual requirements
1) Mobile Version

• In mobile the notification icon will just show when open the user panel (https://marvelapp.com/89423f8/screen/65618954)
  • Will show the amount of notifications
• “View All Notifications” should be fixed at bottom
• Remove notification icon from header (next profile icon), keep pink in profile icon. https://drive.google.com/open?id=1UDb4Jg2DhXrkghH0iO0Y8ptZsaF7tqWx 
• When a user open notification panel needs to cover the whole page, currently it is possible to see the background page at the bottom.
• Header height, icon position and margin not match with design, please make sure all match with design. (Click in Handoff in Marvelapp link will show the CSS and height/width) https://drive.google.com/open?id=14ELukTrPc0OILHR3EVY1wQXqwN4Ux2g7 

2) Completed Challenges

• Added X button, if clicked, it will Dismiss respective notification and remove from panel.

3) Layout Issues
Some layout/UI not match with provided design:
https://marvelapp.com/89423f8/screen/65608885 

• Headerhttps://github.com/topcoder-platform/topcoder-react-lib
  • https://drive.google.com/open?id=13gcArhsPMwSHed34iYNow8boY2oR35Ov 
  • Remove back button ‘<’ from header, replace with notification icon. (Back button is just to mobile version)
  • Notification title need be aligned to left
  • Make pink mark absolute/fixed position to prevent moving bell icon when show or hide pink mark
• Content
  • Reduce left margin: https://drive.google.com/open?id=1PMrqh-xGs6ULZggcjgGDLmbGS79HMaAT 
    • Challenge name: 20px
    • Notification item: 50px

4) Empty State
 https://drive.google.com/open?id=1lYcgzo_OKmjCuCB_9MJGbgPjmxIMFlT- 

• Remove Settings link from top
• Add green bell icon
• Use correct font family
• Notification Settings button need be uppercase
• The whole panel need be a single area, currently we able to see two white sections
• Mobile version - Make sure this will work well in mobile version

API / Backend

• To see more details and information about tc-notifications service, please check this repo: https://github.com/topcoder-platform/tc-notifications
• You can use swagger to check the endpoints: https://github.com/topcoder-platform/tc-notifications/tree/dev/docs 
• Use http://editor.swagger.io or https://www.getpostman.com 

Important Notes

• You should follow the best practices established in the repository:
• We use this stand-alone library: https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services of current ReactJS based app. 
• As part of this challenge submission, you also might need to improve https://github.com/topcoder-platform/topcoder-react-lib for any actions/reducers/services updates
• Properly use Redux. Properly split code into reusable, self-contained React components, conveniently grouped inside folder structure;
• Do not violate ESLint rules for JS code, nor StyleLint rules for SCSS;
• Properly use babel-plugin-react-css-modules and / or react-css-theme for styling;
• Use SCSS variables and mixins from the global stylesheets (/src/styles/_tc-styles.scss). Especially, when it relates to colors, fonts, etc;
• Do not break existing unit tests.
• Etc.;

Should you have any doubts, do not hesitate to ask for clarifications in the challenge forum!

Final Submission Guidelines

• Submit a git patch for each repo.
• Make sure to mention the exact commits so we can apply your patch file.
• The winner must create a PR against our repos.