Relocate stylesheets to their proper component

shlink-web-component/src/Main.scss

@@ -1,14 +1,14 @@
 @import '@shlinkio/shlink-frontend-kit/base';
 
-.menu-layout__swipeable {
+.shlink-layout__swipeable {
   height: 100%;
 }
 
-.menu-layout__swipeable-inner {
+.shlink-layout__swipeable-inner {
   height: 100%;
 }
 
-.menu-layout__burger-icon {
+.shlink-layout__burger-icon {
   display: none;
   transition: color 300ms;
   position: fixed;
@@ -23,11 +23,11 @@
   }
 }
 
-.menu-layout__burger-icon--active {
+.shlink-layout__burger-icon--active {
   color: white;
 }
 
-.menu-layout__container.menu-layout__container {
+.shlink-layout__container.shlink-layout__container {
   padding: 20px 0 0;
   min-height: 100%;
 

shlink-web-component/src/Main.tsx

@@ -9,7 +9,7 @@ import { AsideMenu } from './common/AsideMenu';
 import { useFeature } from './utils/features';
 import { useSwipeable } from './utils/helpers/hooks';
 import { useRoutesPrefix } from './utils/routesPrefix';
-import './utils/StickyCardPaginator.scss';
+import './Main.scss';
 
 export type MainProps = {
   createNotFound?: (nonPrefixedHomePath: string) => ReactNode;
@@ -41,7 +41,7 @@ export const Main = (
   useEffect(() => hideSidebar(), [location]);
 
   const addDomainVisitsRoute = useFeature('domainVisits');
-  const burgerClasses = classNames('menu-layout__burger-icon', { 'menu-layout__burger-icon--active': sidebarVisible });
+  const burgerClasses = classNames('shlink-layout__burger-icon', { 'shlink-layout__burger-icon--active': sidebarVisible });
   const swipeableProps = useSwipeable(showSidebar, hideSidebar);
 
   // FIXME Check if this works when not currently wrapped in a router
@@ -50,10 +50,10 @@ export const Main = (
     <Wrapper {...props}>
       <FontAwesomeIcon icon={burgerIcon} className={burgerClasses} onClick={toggleSidebar} />
 
-      <div {...swipeableProps} className="menu-layout__swipeable">
-        <div className="menu-layout__swipeable-inner">
+      <div {...swipeableProps} className="shlink-layout__swipeable">
+        <div className="shlink-layout__swipeable-inner">
           <AsideMenu routePrefix={routesPrefix} showOnMobile={sidebarVisible} />
-          <div className="menu-layout__container" onClick={() => hideSidebar()}>
+          <div className="shlink-layout__container" onClick={() => hideSidebar()}>
             <div className="container-xl">
               <Routes>
                 <Route index element={<Navigate replace to="overview" />} />

shlink-web-component/src/index.scss

@@ -0,0 +1,2 @@
+@import './tags/react-tag-autocomplete';
+@import './utils/StickyCardPaginator.scss';

src/common/ShlinkWebComponentContainer.tsx

@@ -4,7 +4,6 @@ import type { ShlinkApiClientBuilder } from '../api/services/ShlinkApiClientBuil
 import { isReachableServer } from '../servers/data';
 import { withSelectedServer } from '../servers/helpers/withSelectedServer';
 import { NotFound } from './NotFound';
-import './ShlinkWebComponentContainer.scss';
 
 interface ShlinkWebComponentContainerProps {
   settings: Settings;

src/index.scss

@@ -2,9 +2,8 @@
 
 @import '@shlinkio/shlink-frontend-kit/base';
 @import '@shlinkio/shlink-frontend-kit/index';
+@import '@shlinkio/shlink-web-component/index';
 @import 'node_modules/bootstrap/scss/bootstrap.scss';
-@import './common/react-tag-autocomplete.scss';
-@import './utils/mixins/text-ellipsis';
 
 * {
   outline: none !important;
@@ -220,10 +219,6 @@ hr {
   cursor: pointer;
 }
 
-.text-ellipsis {
-  @include text-ellipsis();
-}
-
 .progress-bar {
   background-color: $mainColor;
 }

src/utils/mixins/text-ellipsis.scss

@@ -1,5 +0,0 @@
-@mixin text-ellipsis() {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}