RULEAPI-671 Remove menu button in github pages and change color theme (#359)

frontend/src/SearchHit.tsx

@@ -26,9 +26,15 @@ const useStyles = makeStyles((theme) => ({
     marginRight: theme.spacing(1),
     marginTop: theme.spacing(2),
   },
+  languageChip: {
+    marginRight: theme.spacing(1),
+    marginTop: theme.spacing(2),
+    backgroundColor: '#4c9bd6'
+  },
   unimplementedMarker: {
     marginRight: theme.spacing(1),
-    marginTop: theme.spacing(2)
+    marginTop: theme.spacing(2),
+    backgroundColor: '#fd6a00'
   }
 }));
 
@@ -41,7 +47,7 @@ export function SearchHit(props: SearchHitProps) {
   const actualLanguages = props.data.languages.filter(language => language !== 'default');
   const languages = actualLanguages.map(lang => (
     <Chip
-      classes={{root: classes.language}}
+      classes={{root: classes.languageChip}}
       label={lang}
       color="primary"
     />

frontend/src/TopBar.style.ts

@@ -4,11 +4,15 @@ export default makeStyles((theme) => ({
   root: {
     flexGrow: 1,
     marginBottom: '13px', // Quickfix. For some reason the topbar overlaps on the content.
+    backgroundColor: '#c72b28',
   },
-  menuButton: {
+  homeButton: {
     marginRight: theme.spacing(2),
   },
   title: {
     flexGrow: 1,
   },
+  unimplemented: {
+    color: '#FFFFFF',
+  },
 }));

frontend/src/TopBar.tsx

@@ -4,7 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
-import MenuIcon from '@material-ui/icons/Menu';
+import HomeIcon from '@material-ui/icons/Home';
 
 import useStyles from './TopBar.style';
 
@@ -14,17 +14,15 @@ export default function TopBar() {
   return (
       <AppBar position="static" className={classes.root}>
         <Toolbar>
-          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
-            <MenuIcon />
+          <IconButton edge="start" className={classes.homeButton} color="inherit" aria-label="menu" href="/rspec">
+            <HomeIcon />
           </IconButton>
           <Typography variant="h6" className={classes.title}>
             SonarSource Rule Specifications
           </Typography>
-          <a href="https://github.com/SonarSource/rspec/pulls?q=is%3Aopen+is%3Apr+%22Create+rule%22">
-            <Button>
-              <span> Unimplemented rules </span>
+            <Button href="https://github.com/SonarSource/rspec/pulls?q=is%3Aopen+is%3Apr+%22Create+rule%22">
+              <span className={classes.unimplemented} > Unimplemented rules </span>
             </Button>
-          </a>
         </Toolbar>
       </AppBar>
   );