OSD600 -- Release 0.4.2

 OSD600 -- Release 0.4.2

In my preview blog, I have listed a couple of issues from telescope repository that I am currently working on. They are 

Issue-1424 Fix font colours in GitHub Contributor component

Issue-1271 Long search results need the "Scroll to Top" component
Issue-1426 Scroll To Top button doesn't move to correct position

Issue-1449 Post header overlap (z-index) issue with hamburger menu
Issue-1464 Scroll To Top button on the search page does not work in mobile version

Issue-1469 Port ScrollAction from Gatsby to NextJS #1469

The first PR I have done is that fix colours in Github Contributor component.

I found the color property inside the link was set to text.secondary(lightBlue). I changed it to primary.contrastText(white). Then I removed the hover effect and the text-decoration to underline. 

so the colour of the Contributor component from

to 

I also removed are an unused variable and fix a linter error in the file. I fixed a tag from 

href={'https://github.com/Seneca-CDOT/telescope/commits?author=' + contributor.login} to

href={`https://github.com/Seneca-CDOT/telescope/commits?author=${contributor.login}`}. 

I learned the syntax of @material-ui from this PR. I also learned that ${varible} is safer than + variable from the linter error.

The Second PR I have done is adding the Back to Top button to the search page for Long search results.

After Study the code in BackToTopButton and ScrollAction component, I found that all the functions for scrolls are built already, all I need to do is add the BackToTopButton component to the search component and add the specific id to an element as an anchor. I found that in the banner component, 

<div id="back-to-top-anchor" />

there is a div with id "back-to-top-anchor". I used the same id for my div elements in the search page component. After that, I studied from other components that how to add CSS of @material-ui to the component, then add CSS to move the scroll to the very top of the screen 

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(() => ({

  anchor: {

    position: 'absolute',

    top: 0,

  },

}));

const classes = useStyles();

<div className={classes.anchor} id="back-to-top-anchor"></div>

From the PR, I learend how to add CSS of @material-ui to the project, and the overall design of scroll to top/scroll action component. It helped me to quickly solve other css and scroll action bugs in the next a few issues.

The third PR I have done is that Fix Scroll To Top button doesn't move to the correct position.

Firstly, I quickly located that the anchor of the scroll action is in the Banner Component. Since I just studied how the scroll action works in Telescope, and the CSS of @material-ui. I fix this issue quickly by creating a CSS class named anchor and adjust its proper position. 

Now it moves to the proper position like this