Replace most stylesheets with tailwind styles

src/common/MainHeader.scss

@@ -1,22 +0,0 @@
-.main-header.main-header {
-  color: white;
-  background-color: var(--brand-color) !important;
-
-  .navbar-brand {
-    color: inherit !important;
-  }
-}
-
-.main-header__brand-logo {
-  width: 26px;
-  margin-right: 5px;
-}
-
-.main-header__toggle-icon {
-  width: 20px;
-  transition: transform 300ms;
-}
-
-.main-header__toggle-icon--opened {
-  transform: rotate(180deg);
-}

src/common/MainHeader.tsx

@@ -9,7 +9,6 @@ import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } f
 import type { FCWithDeps } from '../container/utils';
 import { componentFactory, useDependencies } from '../container/utils';
 import { ShlinkLogo } from './img/ShlinkLogo';
-import './MainHeader.scss';
 
 type MainHeaderDeps = {
   ServersDropdown: FC;
@@ -25,20 +24,22 @@ const MainHeader: FCWithDeps<unknown, MainHeaderDeps> = () => {
   useEffect(collapse, [location, collapse]);
 
   const settingsPath = '/settings';
-  const toggleClass = clsx('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isNotCollapsed });
 
   return (
-    <Navbar color="primary" dark fixed="top" className="main-header" expand="md">
+    <Navbar color="primary" dark fixed="top" expand="md" className="tw:text-white tw:bg-lm-brand tw:dark:bg-dm-brand">
       <NavbarBrand tag={Link} to="/">
-        <ShlinkLogo className="main-header__brand-logo tw:inline" color="white" /> Shlink
+        <ShlinkLogo className="tw:inline tw:w-7 tw:mr-1" color="white" /> Shlink
       </NavbarBrand>
 
       <NavbarToggler onClick={toggleCollapse}>
-        <FontAwesomeIcon icon={arrowIcon} className={toggleClass} />
+        <FontAwesomeIcon
+          icon={arrowIcon}
+          className={clsx('tw:transition-transform tw:duration-300', { 'tw:rotate-180': isNotCollapsed })}
+        />
       </NavbarToggler>
 
       <Collapse navbar isOpen={isNotCollapsed}>
-        <Nav navbar className="ms-auto">
+        <Nav navbar className="tw:ml-auto">
           <NavItem>
             <NavLink tag={Link} to={settingsPath} active={pathname.startsWith(settingsPath)}>
               <FontAwesomeIcon icon={cogsIcon} />&nbsp; Settings

src/common/ShlinkVersionsContainer.scss

@@ -1,9 +0,0 @@
-@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-
-.shlink-versions-container--with-sidebar {
-  margin-left: 0;
-
-  @media (min-width: base.$mdMin) {
-    margin-left: base.$asideMenuWidth;
-  }
-}

src/common/ShlinkVersionsContainer.tsx

@@ -2,7 +2,6 @@ import { clsx } from 'clsx';
 import type { SelectedServer } from '../servers/data';
 import { isReachableServer } from '../servers/data';
 import { ShlinkVersions } from './ShlinkVersions';
-import './ShlinkVersionsContainer.scss';
 
 export type ShlinkVersionsContainerProps = {
   selectedServer: SelectedServer;
@@ -10,9 +9,7 @@ export type ShlinkVersionsContainerProps = {
 
 export const ShlinkVersionsContainer = ({ selectedServer }: ShlinkVersionsContainerProps) => (
   <div
-    className={clsx('text-center', {
-      'shlink-versions-container--with-sidebar': isReachableServer(selectedServer),
-    })}
+    className={clsx('text-center', { 'tw:md:ml-(--aside-menu-width)': isReachableServer(selectedServer) })}
   >
     <ShlinkVersions selectedServer={selectedServer} />
   </div>