The links in the menu items should extend to the whole dark purple instead of an area centered.

The order summary must be always visible and act as an overlay with fixed position when the screen is not hight enough.

It's important that the code structure is consistent across the same codebase but the current SCSS / CSS lacks consistency:

• Casing: in most places, class names seems to be hyphenated / kebab-cased but in many occurrences some classes are calemcased

• Positioning / ordering of properties: sometimes styles for the selector are placed before or after pseudo / children selectors

Currently, the content seems to be constrained and aligned to the left while the design requires the content to extend to the max width of the viewport.

In addition, the header ("Order / TN SO 000015") should be aligned to the top.

In src/actions/index.js

In src/containers/App.js:

In src/components/Sidebar/Sidebar.scss:

If the component doesn't do much more than take in some props and render, it can be simplified by using a function instead of classes.

let Remarks = (props) => {
  return (
    ...
  )
}

Instead of:

class Remarks extends Component {  
 render() {
   ...
  }
}

With media queries, the position property for the this UI element can be changed from sticky not sticky without having to resort to having duplicated DOM elements:

👉 Only duplicate UI elements if there is absolutely no other way to do it

• Tab space is inconsistent: sometimes 2, 3 or 4 tab spaces. Code lintinh can help with that.

• Lots blank spaces:

• Not using enough CSS / SCSS variables make the UI inconsistent as sizing / colors are different everywhere