rename one of the directories (components -> common)

.babelrc

@@ -6,7 +6,7 @@
       {
         "@": ["./src"],
         "alias": {
-          "@components": "./src/components",
+          "@common": "./src/common",
           "@config": "./src/config",
           "@features": "./src/features",
           "@images": "./src/images",

jsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"],
-      "@components/*": ["src/components/*"],
+      "@common/*": ["src/common/*"],
       "@config/*": ["src/config/*"],
       "@features/*": ["src/features/*"],
       "@images/*": ["src/images/*"]

src/common/Layout/Footer.js

@@ -5,11 +5,12 @@ import { makeStyles } from '@material-ui/core/styles';
 import { AppBar, Toolbar, Typography, Container } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   appBar: {
     backgroundColor: 'transparent',
     color: '#fff',
     boxShadow: 'none',
+    padding: theme.spacing(1, 0)
   },
   copyright: {
     width: '100%',

src/common/Layout/Header.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import routes from '@config/routes';
+import { Route } from '@config/routing';
 
 import { makeStyles } from '@material-ui/core/styles';
 import {
@@ -56,7 +56,7 @@ function Header({ twhelpUrl, lang, languages, pathname }) {
           />
           <nav>
             <Hidden implementation="css" xsDown className={classes.hidden}>
-              <Link title="Home" color="inherit" to={routes[lang].HOME}>
+              <Link title="Home" color="inherit" to={Route[lang].IndexPage}>
                 Home
               </Link>
               <Link title={twhelpText} color="inherit" href={twhelpUrl}>
@@ -93,7 +93,7 @@ function Header({ twhelpUrl, lang, languages, pathname }) {
                     color="inherit"
                     underline="none"
                     className={classes.link}
-                    to={routes[lang].HOME}
+                    to={Route[lang].IndexPage}
                   >
                     Home
                   </Link>

src/config/routes.js

@@ -1,15 +0,0 @@
-const pl = {
-  HOME: '/pl/',
-  COMMANDS_PAGE: '/pl/commands/',
-};
-const en = {
-  HOME: '/',
-  COMMANDS_PAGE: '/commands/',
-};
-
-const routes = {
-  pl,
-  en,
-};
-
-export default routes

src/config/routing.js

@@ -0,0 +1,13 @@
+const pl = {
+  IndexPage: '/pl/',
+  CommandsPage: '/pl/commands/',
+};
+const en = {
+  IndexPage: '/',
+  CommandsPage: '/commands/',
+};
+
+export const Route = {
+  pl,
+  en,
+};

src/features/CommandsPage/CommandsPage.js

@@ -3,8 +3,8 @@ import translations from './translations';
 import commands from './commands';
 
 import { Container, Typography, Grid, Box } from '@material-ui/core';
-import Layout from '@components/Layout/Layout';
-import Seo from '@components/Seo';
+import Layout from '@common/Layout/Layout';
+import Seo from '@common/Seo';
 import Command from './Command';
 
 const CommandsPage = ({ location, pageContext }) => {

src/features/IndexPage/IndexPage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
-import routes from '@config/routes';
+import { Route } from '@config/routing';
 import translations from './translations';
 
 import { makeStyles } from '@material-ui/core/styles';
@@ -14,8 +14,8 @@ import {
   Grid,
 } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
-import Layout from '@components/Layout/Layout';
-import Seo from '@components/Seo';
+import Layout from '@common/Layout/Layout';
+import Seo from '@common/Seo';
 
 const useStyles = makeStyles(theme => ({
   divider: {
@@ -94,7 +94,7 @@ const IndexPage = ({ location, pageContext }) => {
               </Button>
               <Button>
                 <Link
-                  to={routes[pageContext.langKey].COMMANDS_PAGE}
+                  to={Route[pageContext.langKey].CommandsPage}
                   color="inherit"
                   title={t.header.commands}
                 >

src/pages/404.js

@@ -3,8 +3,8 @@ import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import { Container, Typography } from '@material-ui/core';
 import { Link } from 'gatsby-theme-material-ui';
-import Layout from '@components/Layout/Layout';
-import Seo from '@components/Seo';
+import Layout from '@common/Layout/Layout';
+import Seo from '@common/Seo';
 
 const useStyles = makeStyles(() => ({
   container: {