Merge pull request #1352 from acelaya-forks/feature/remove-rows

Feature/remove rows

Author: acelaya

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,41 +28,44 @@ export const Home = ({ servers }: HomeProps) => {
   }, [serversList, navigate]);
 
   return (
-    <div className="home">
-      <Card className="home__main-card">
-        <Row className="g-0">
-          <div className="col-md-5 d-none d-md-block">
-            <div className="home__logo-wrapper">
-              <div className="home__logo">
-                <ShlinkLogo />
-              </div>
+    <div className="w-100">
+      <Card className="mx-auto" style={{ maxWidth: '720px' }}>
+        <div className="d-flex flex-column flex-md-row">
+          <div className="p-4 d-none d-md-flex align-items-center" style={{ width: '40%' }}>
+            <div className="w-100">
+              <ShlinkLogo />
             </div>
           </div>
-          <div className="col-md-7 home__servers-container">
-            <div className="home__title-wrapper">
-              <h1 className="home__title">Welcome!</h1>
-            </div>
+
+          <div className="home__servers-container flex-grow-1">
+            <h1
+              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">
-                  <p className="mb-5">This application will help you manage your Shlink servers.</p>
-                  <p>
+                <div className="p-4 text-center d-flex flex-column gap-5">
+                  <p className="mb-0">This application will help you manage your Shlink servers.</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>
                 </div>
               )}
             </ServersListGroup>
           </div>
-        </Row>
+        </div>
       </Card>
     </div>
   );

src/common/NoMenuLayout.tsx

@@ -1,6 +1,11 @@
+import { clsx } from 'clsx';
 import type { FC, PropsWithChildren } from 'react';
 import './NoMenuLayout.scss';
 
-export const NoMenuLayout: FC<PropsWithChildren> = ({ children }) => (
-  <div className="no-menu-wrapper container-xl">{children}</div>
+export type NoMenuLayoutProps = PropsWithChildren & {
+  className?: string;
+};
+
+export const NoMenuLayout: FC<NoMenuLayoutProps> = ({ children, className }) => (
+  <div className={clsx('no-menu-wrapper container-xl', className)}>{children}</div>
 );

src/servers/ManageServers.tsx

@@ -5,7 +5,7 @@ import { Result, SearchField, SimpleCard } from '@shlinkio/shlink-frontend-kit';
 import type { FC } from 'react';
 import { useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Row } from 'reactstrap';
+import { Button } from 'reactstrap';
 import { NoMenuLayout } from '../common/NoMenuLayout';
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
@@ -44,24 +44,22 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
   const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
 
   return (
-    <NoMenuLayout>
-      <SearchField className="mb-3" onChange={setSearchTerm} />
+    <NoMenuLayout className="d-flex flex-column gap-3">
+      <SearchField onChange={setSearchTerm} />
 
-      <Row className="mb-3">
-        <div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
+      <div className="d-flex flex-column flex-md-row gap-2">
+        <div className="d-flex gap-2">
           <ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
           {filteredServers.length > 0 && (
-            <Button outline className="ms-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
+            <Button outline className="flex-fill" onClick={async () => serversExporter.exportServers()}>
               <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
             </Button>
           )}
         </div>
-        <div className="col-md-6 text-md-end d-flex d-md-block">
-          <Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">
-            <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
-          </Button>
-        </div>
-      </Row>
+        <Button outline color="primary" className="ms-md-auto" tag={Link} to="/server/create">
+          <FontAwesomeIcon icon={plusIcon} fixedWidth /> Add a server
+        </Button>
+      </div>
 
       <SimpleCard>
         <table className="table table-hover responsive-table mb-0">
@@ -83,7 +81,7 @@ const ManageServers: FCWithDeps<ManageServersProps, ManageServersDeps> = ({ serv
       </SimpleCard>
 
       {errorImporting && (
-        <div className="mt-3">
+        <div>
           <Result type="error">The servers could not be imported. Make sure the format is correct.</Result>
         </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');