Add initial support to new brand color

src/common/MainHeader.tsx

@@ -26,7 +26,7 @@ const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
   const settingsPath = '/settings';
 
   return (
-    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-brand tw:dark:bg-dm-brand">
+    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-main tw:dark:bg-dm-main">
       <NavbarBrand tag={Link} to="/">
         <ShlinkLogo className="tw:inline tw:w-7 tw:mr-1" color="white" /> Shlink
       </NavbarBrand>

src/index.tsx

@@ -5,8 +5,8 @@ import pack from '../package.json';
 import { container } from './container';
 import { setUpStore } from './container/store';
 import { register as registerServiceWorker } from './serviceWorkerRegistration';
-import './tailwind.css';
 import './index.scss';
+import './tailwind.css';
 
 const store = setUpStore(container);
 const { App, ScrollToTop, ErrorHandler, appUpdateAvailable } = container;

src/servers/ManageServersRow.tsx

@@ -27,7 +27,11 @@ const ManageServersRow: FCWithDeps<ManageServersRowProps, ManageServersRowDeps>
         <Table.Cell columnName="Auto-connect">
           {server.autoConnect && (
             <>
-              <FontAwesomeIcon icon={checkIcon} className="tw:text-brand" id="autoConnectIcon" />
+              <FontAwesomeIcon
+                icon={checkIcon}
+                className="tw:text-lm-brand tw:dark:text-dm-brand"
+                id="autoConnectIcon"
+              />
               <UncontrolledTooltip target="autoConnectIcon" placement="right">
                 Auto-connect to this server
               </UncontrolledTooltip>

src/tailwind.css

@@ -1,15 +1,7 @@
 @import 'tailwindcss' prefix(tw) important;
-@source '../node_modules/@shlinkio/shlink-frontend-kit';
 @import '@shlinkio/shlink-frontend-kit/tailwind.preset.css';
-
-@theme {
-    /* Override breakpoints with the values from bootstrap, to keep sizing until fully migrated */
-    --breakpoint-sm: 576px;
-    --breakpoint-md: 768px;
-    --breakpoint-lg: 992px;
-    --breakpoint-xl: 1200px;
-    --breakpoint-2xl: 1400px;
-}
+@source '../node_modules/@shlinkio/shlink-frontend-kit';
+@source '../node_modules/@shlinkio/shlink-web-component';
 
 @layer base {
     :root {