fix: small styling improvements

app/components/Menu.js

 import React from 'react'
 import styled, { css } from 'styled-components'
 import PropTypes from 'prop-types'
-import { override, th, grid } from '@pubsweet/ui-toolkit'
+import { override, th, grid, darken } from '@pubsweet/ui-toolkit'
 
 import { Icon, Action } from '@pubsweet/ui'
 import { UserAvatar } from '../components/component-avatar/src'
@@ -46,18 +46,26 @@ const NavItem = ({ className, link, name, icon }) => (
 
 const Item = styled(NavItem)`
   border-radius: 10px;
+  padding-left: ${grid(1)};
   height: ${grid(5)};
   line-height: ${grid(3)};
 
   display: flex;
   align-items: center;
-  color: ${th('colorSecondary')};
+  color: ${darken('colorSecondary', 0.5)};
+
   &:hover {
+    color: ${th('colorText')};
+    stroke: ${th('colorText')};
     background-color: ${th('colorBackgroundHue')};
   }
 
   svg {
+    &:hover {
+
+    }
     width: 1em;
+    stroke: ${darken('colorSecondary', 0.5)};
   }
 
   ${props =>
@@ -65,6 +73,11 @@ const Item = styled(NavItem)`
     css`
       background-color: ${th('colorFurniture')};
       color: ${th('colorText')};
+
+      &:hover {
+        background-color: ${th('colorFurniture')};
+        color: ${th('colorText')};
+      }
     `}
   // align-items: center;
   // display: inline-flex;

app/components/component-chat/src/SuperChatInput/style.js

@@ -122,8 +122,8 @@ export const ChatInputWrapper = styled.div`
   margin-bottom: ${th('gridUnit')};
   padding: 8px 12px 0 12px;
   background-color: ${th('colorBackground')};
-  border-top: 1px solid ${th('colorBorder')};
-  box-shadow: -1px 0 0 ${th('colorBorder')}, 1px 0 0 ${th('colorBorder')};
+  // border-top: 1px solid ${th('colorBorder')};
+  // box-shadow: -1px 0 0 ${th('colorBorder')}, 1px 0 0 ${th('colorBorder')};
   @media (max-width: ${MEDIA_BREAK}px) {
     bottom: ${props => (props.focus ? '0' : 'auto')};
     position: relative;

app/components/component-chat/src/index.js

 import React from 'react'
 import styled from 'styled-components'
-// import { th } from '@pubsweet/ui-toolkit'
+import { th } from '@pubsweet/ui-toolkit'
 // import { useQuery } from '@apollo/react-hooks'
 // import gql from 'graphql-tag'
 // import { useParams } from 'react-router-dom'
@@ -10,10 +10,8 @@ import ChatInput from './SuperChatInput/SuperChatInput'
 const MessageContainer = styled.section`
   display: grid;
   min-width: 100%;
-  // flex-direction: column;
   background: rgb(255, 255, 255);
-  // height: calc(100vh - 64px);
-  // grid-template-rows: calc(100% - 40px);
+  grid-template-rows: 1fr calc(${th('gridUnit')} * 8);
   grid-template-areas:
     'read'
     'write';

app/theme/index.js

@@ -16,11 +16,12 @@ import {
 const cokoTheme = {
   /* Colors */
   colorBackground: 'white',
+  colorSecondaryBackground: '#f9fafb', // custom
   colorPrimary: '#0B65CB',
   colorSecondary: '#9e9e9e',
   colorFurniture: '#E8E8E8',
   colorBorder: '#AAA',
-  colorBackgroundHue: '#f9fafb',
+  colorBackgroundHue: '#f4f5f7',
   colorSuccess: '#008800',
   colorError: '#FF2D1A',
   colorText: '#111',
@@ -64,7 +65,7 @@ const cokoTheme = {
   gridUnit: '8px',
 
   /* Border */
-  borderRadius: '0',
+  borderRadius: '8px',
   borderWidth: '1px', // julien: not 0
   borderStyle: 'solid',