Migrated Home component to a functional component

src/common/Home.js

@@ -1,34 +1,35 @@
+import React, { useEffect } from 'react';
 import { isEmpty, values } from 'ramda';
-import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import './Home.scss';
 import ServersListGroup from '../servers/ServersListGroup';
 
-export default class Home extends React.Component {
-  static propTypes = {
-    resetSelectedServer: PropTypes.func,
-    servers: PropTypes.object,
-  };
+const propTypes = {
+  resetSelectedServer: PropTypes.func,
+  servers: PropTypes.object,
+};
 
-  componentDidMount() {
-    this.props.resetSelectedServer();
-  }
+const Home = ({ resetSelectedServer, servers: { list, loading } }) => {
+  const servers = values(list);
+  const hasServers = !isEmpty(servers);
 
-  render() {
-    const { servers: { list, loading } } = this.props;
-    const servers = values(list);
-    const hasServers = !isEmpty(servers);
+  useEffect(() => {
+    resetSelectedServer();
+  }, []);
 
-    return (
-      <div className="home">
-        <h1 className="home__title">Welcome to Shlink</h1>
-        <ServersListGroup servers={servers}>
-          {!loading && hasServers && <span>Please, select a server.</span>}
-          {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
-          {loading && <span>Trying to load servers...</span>}
-        </ServersListGroup>
-      </div>
-    );
-  }
-}
+  return (
+    <div className="home">
+      <h1 className="home__title">Welcome to Shlink</h1>
+      <ServersListGroup servers={servers}>
+        {!loading && hasServers && <span>Please, select a server.</span>}
+        {!loading && !hasServers && <span>Please, <Link to="/server/create">add a server</Link>.</span>}
+        {loading && <span>Trying to load servers...</span>}
+      </ServersListGroup>
+    </div>
+  );
+};
+
+Home.propTypes = propTypes;
+
+export default Home;

src/utils/Message.js

@@ -7,14 +7,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const getClassForType = (type) => {
   const map = {
-    error: 'bg-danger',
+    error: 'border-danger',
   };
 
-  return map[type] || 'bg-light';
+  return map[type] || '';
 };
 const getTextClassForType = (type) => {
   const map = {
-    error: 'text-white',
+    error: 'text-danger',
   };
 
   return map[type] || 'text-muted';
@@ -28,7 +28,7 @@ const propTypes = {
 };
 
 const Message = ({ children, loading = false, noMargin = false, type = 'default' }) => {
-  const cardClasses = classNames(getClassForType(type), { 'mt-4': !noMargin });
+  const cardClasses = classNames('bg-light', getClassForType(type), { 'mt-4': !noMargin });
 
   return (
     <div className="col-md-10 offset-md-1">