diff --git a/src/common/Home.scss b/src/common/Home.scss deleted file mode 100644 index 04c8c21e..00000000 --- a/src/common/Home.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base'; - -.home__title { - font-size: 1.75rem; - - @media (min-width: base.$mdMin) { - font-size: 2.2rem; - } -} - -.home__servers-container { - @media (min-width: base.$mdMin) { - border-left: 1px solid var(--border-color); - } -} diff --git a/src/common/Home.tsx b/src/common/Home.tsx index 7ebfa583..23e3e819 100644 --- a/src/common/Home.tsx +++ b/src/common/Home.tsx @@ -1,18 +1,17 @@ import { faExternalLinkAlt, faPlus } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Button, Card } from '@shlinkio/shlink-frontend-kit/tailwind'; import { clsx } from 'clsx'; import { useEffect } from 'react'; import { ExternalLink } from 'react-external-link'; -import { Link, useNavigate } from 'react-router'; -import { Card } from 'reactstrap'; +import { useNavigate } from 'react-router'; import type { ServersMap } from '../servers/data'; import { ServersListGroup } from '../servers/ServersListGroup'; import { ShlinkLogo } from './img/ShlinkLogo'; -import './Home.scss'; -interface HomeProps { +export type HomeProps = { servers: ServersMap; -} +}; export const Home = ({ servers }: HomeProps) => { const navigate = useNavigate(); @@ -28,35 +27,37 @@ export const Home = ({ servers }: HomeProps) => { }, [serversList, navigate]); return ( -
- -
-
-
+
+ +
+
+
-
+

Welcome!

{!hasServers && ( -
-

This application will help you manage your Shlink servers.

-

- - Add a server - +

+

This application will help you manage your Shlink servers.

+

+

-

+

- Learn more about Shlink + Learn more about Shlink