Simplify styles in home page with flex utilities

src/app/App.tsx

@@ -66,7 +66,7 @@ const App: FCWithDeps<AppProps, AppDeps> = (
       <MainHeader />
 
       <div className="app">
-        <div className={clsx('shlink-wrapper', { 'd-flex d-md-block align-items-center': isHome })}>
+        <div className={clsx('shlink-wrapper', { 'd-flex align-items-center pt-3': isHome })}>
           <Routes>
             <Route index element={<Home />} />
             <Route path="/settings/*" element={<Settings />} />

src/common/Home.scss

@@ -1,50 +1,7 @@
 @import 'node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/vertical-align';
-
-$mainCardWidth: 720px;
-$fiveColumnsSize: .4167; // 12 / 5 -> Can't use "/" operator in latest dart-sass
-
-.home {
-  position: relative;
-  padding-top: 15px;
-  width: 100%;
-
-  @media (min-width: $mdMin) {
-    padding-top: 0;
-    height: calc(100vh - #{$headerHeight} - #{($footer-height + $footer-margin)});
-  }
-}
-
-.home__logo-wrapper {
-  padding: 1.5rem !important;
-  height: 100% !important;
-  min-height: 300px;
-}
-
-.home__logo {
-  @include vertical-align();
-
-  width: calc(#{$mainCardWidth * $fiveColumnsSize} - 3rem);
-}
-
-.home__main-card {
-  margin: 0 auto;
-  max-width: $mainCardWidth;
-
-  @media (min-width: $mdMin) {
-    @include vertical-align();
-  }
-}
-
-.home__title-wrapper {
-  padding: 1.5rem !important;
-  border-bottom: 1px solid var(--border-color);
-}
 
 .home__title {
-  text-align: center;
   font-size: 1.75rem;
-  margin: 0;
 
   @media (min-width: $mdMin) {
     font-size: 2.2rem;

src/common/Home.tsx

@@ -1,9 +1,10 @@
 import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { clsx } from 'clsx';
 import { useEffect } from 'react';
 import { ExternalLink } from 'react-external-link';
 import { Link, useNavigate } from 'react-router-dom';
-import { Card, Row } from 'reactstrap';
+import { Card } from 'reactstrap';
 import type { ServersMap } from '../servers/data';
 import { ServersListGroup } from '../servers/ServersListGroup';
 import { ShlinkLogo } from './img/ShlinkLogo';
@@ -27,33 +28,36 @@ export const Home = ({ servers }: HomeProps) => {
   }, [serversList, navigate]);
 
   return (
-    <div className="home">
+    <div className="w-100">
-      <Card className="home__main-card">
+      <Card className="mx-auto" style={{ maxWidth: '720px' }}>
-        <Row className="g-0">
+        <div className="d-flex flex-column flex-md-row">
-          <div className="col-md-5 d-none d-md-block">
+          <div className="p-4 d-none d-md-flex align-items-center" style={{ width: '40%' }}>
-            <div className="home__logo-wrapper">
+            <div className="w-100">
-              <div className="home__logo">
+              <ShlinkLogo />
-                <ShlinkLogo />
-              </div>
             </div>
           </div>
-          <div className="col-md-7 home__servers-container">
+
-            <div className="home__title-wrapper">
+          <div className="home__servers-container flex-grow-1">
-              <h1 className="home__title">Welcome!</h1>
+            <h1
-            </div>
+              className={clsx('home__title p-4 text-center m-0', { 'border-bottom': !hasServers })}
+              style={{ borderColor: 'var(--border-color) !important' }}
+            >
+              Welcome!
+            </h1>
             <ServersListGroup embedded servers={serversList}>
               {!hasServers && (
-                <div className="p-4 text-center">
+                <div className="p-4 text-center d-flex flex-column gap-5">
-                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
+                  <p className="mb-0">This application will help you manage your Shlink servers.</p>
-                  <p>
+                  <p className="mb-0">
                     <Link to="/server/create" className="btn btn-outline-primary btn-lg me-2">
-                      <FontAwesomeIcon icon={faPlus} /> <span className="ms-1">Add a server</span>
+                      <FontAwesomeIcon icon={faPlus}/> <span className="ms-1">Add a server</span>
                     </Link>
                   </p>
-                  <p className="mb-0 mt-5">
+                  <p className="mb-0">
                     <ExternalLink href="https://shlink.io/documentation">
                       <small>
-                        <span className="me-1">Learn more about Shlink</span> <FontAwesomeIcon icon={faExternalLinkAlt} />
+                        <span className="me-2">Learn more about Shlink</span>
+                        <FontAwesomeIcon icon={faExternalLinkAlt}/>
                       </small>
                     </ExternalLink>
                   </p>
@@ -61,7 +65,7 @@ export const Home = ({ servers }: HomeProps) => {
               )}
             </ServersListGroup>
           </div>
-        </Row>
+        </div>
       </Card>
     </div>
   );

test/app/App.test.tsx

@@ -56,7 +56,7 @@ describe('<App />', () => {
   it.each([
     ['/foo', 'shlink-wrapper'],
     ['/bar', 'shlink-wrapper'],
-    ['/', 'shlink-wrapper d-flex d-md-block align-items-center'],
+    ['/', 'shlink-wrapper d-flex align-items-center pt-3'],
   ])('renders expected classes on shlink-wrapper based on current pathname', async (pathname, expectedClasses) => {
     const { container } = await setUp(pathname);
     const shlinkWrapper = container.querySelector('.shlink-wrapper');