From 914efc6a643965b21a44a36ac9a064de65da4607 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Mon, 7 Aug 2023 20:43:05 +0200
Subject: [PATCH] Relocate stylesheets to their proper component

---
 .../src/Main.scss                                      | 10 +++++-----
 shlink-web-component/src/Main.tsx                      | 10 +++++-----
 shlink-web-component/src/index.scss                    |  2 ++
 .../src/tags}/react-tag-autocomplete.scss              |  0
 src/common/ShlinkWebComponentContainer.tsx             |  1 -
 src/index.scss                                         |  7 +------
 src/utils/mixins/text-ellipsis.scss                    |  5 -----
 7 files changed, 13 insertions(+), 22 deletions(-)
 rename src/common/ShlinkWebComponentContainer.scss => shlink-web-component/src/Main.scss (71%)
 create mode 100644 shlink-web-component/src/index.scss
 rename {src/common => shlink-web-component/src/tags}/react-tag-autocomplete.scss (100%)
 delete mode 100644 src/utils/mixins/text-ellipsis.scss

diff --git a/src/common/ShlinkWebComponentContainer.scss b/shlink-web-component/src/Main.scss
similarity index 71%
rename from src/common/ShlinkWebComponentContainer.scss
rename to shlink-web-component/src/Main.scss
index 52ad43f0..03d3545c 100644
--- a/src/common/ShlinkWebComponentContainer.scss
+++ b/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%;
 
diff --git a/shlink-web-component/src/Main.tsx b/shlink-web-component/src/Main.tsx
index 64791ef7..ca02c054 100644
--- a/shlink-web-component/src/Main.tsx
+++ b/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" />} />
diff --git a/shlink-web-component/src/index.scss b/shlink-web-component/src/index.scss
new file mode 100644
index 00000000..07792cf4
--- /dev/null
+++ b/shlink-web-component/src/index.scss
@@ -0,0 +1,2 @@
+@import './tags/react-tag-autocomplete';
+@import './utils/StickyCardPaginator.scss';
diff --git a/src/common/react-tag-autocomplete.scss b/shlink-web-component/src/tags/react-tag-autocomplete.scss
similarity index 100%
rename from src/common/react-tag-autocomplete.scss
rename to shlink-web-component/src/tags/react-tag-autocomplete.scss
diff --git a/src/common/ShlinkWebComponentContainer.tsx b/src/common/ShlinkWebComponentContainer.tsx
index b1a653de..7060a793 100644
--- a/src/common/ShlinkWebComponentContainer.tsx
+++ b/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;
diff --git a/src/index.scss b/src/index.scss
index ce376d04..13204c5c 100644
--- a/src/index.scss
+++ b/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;
 }
diff --git a/src/utils/mixins/text-ellipsis.scss b/src/utils/mixins/text-ellipsis.scss
deleted file mode 100644
index ff44b434..00000000
--- a/src/utils/mixins/text-ellipsis.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@mixin text-ellipsis() {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}