From f8f1f49250dc26a2cb4b48bf707a684f0c75337a Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 18:31:47 -0400
Subject: [PATCH 1/7] feat: Move Badges to common component

---
 src/shared/components/common/badges.tsx     | 113 ++++++++++++++++++++
 src/shared/components/community/sidebar.tsx | 101 ++---------------
 src/shared/components/home/site-sidebar.tsx | 104 +-----------------
 3 files changed, 124 insertions(+), 194 deletions(-)
 create mode 100644 src/shared/components/common/badges.tsx

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
new file mode 100644
index 00000000..188d92ce
--- /dev/null
+++ b/src/shared/components/common/badges.tsx
@@ -0,0 +1,113 @@
+import { Link } from "inferno-router";
+import {
+  CommunityAggregates,
+  CommunityView,
+  SiteAggregates,
+} from "lemmy-js-client";
+import { i18n } from "../../i18next";
+import { numToSI } from "../../utils";
+
+interface BadgesProps {
+  counts: CommunityAggregates | SiteAggregates;
+  online: number;
+  community_view?: CommunityView;
+}
+
+const isCommunityAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is CommunityAggregates => {
+  return "subscribers" in counts;
+};
+
+export const Badges = ({ counts, community_view, online }: BadgesProps) => {
+  return (
+    <ul className="my-1 list-inline">
+      <li className="list-inline-item badge badge-secondary">
+        {i18n.t("number_online", {
+          count: online,
+          formattedCount: numToSI(online),
+        })}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_day", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_day),
+          formattedCount: numToSI(counts.users_active_day),
+        })}{" "}
+        / {i18n.t("day")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_week", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_week),
+          formattedCount: numToSI(counts.users_active_week),
+        })}{" "}
+        / {i18n.t("week")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_month", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_month),
+          formattedCount: numToSI(counts.users_active_month),
+        })}{" "}
+        / {i18n.t("month")}
+      </li>
+      <li
+        className="list-inline-item badge badge-secondary pointer"
+        data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}
+      >
+        {i18n.t("number_of_users", {
+          count: Number(counts.users_active_half_year),
+          formattedCount: numToSI(counts.users_active_half_year),
+        })}{" "}
+        / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
+      </li>
+      {isCommunityAggregates(counts) && (
+        <li className="list-inline-item badge badge-secondary">
+          {i18n.t("number_of_subscribers", {
+            count: Number(counts.subscribers),
+            formattedCount: numToSI(counts.subscribers),
+          })}
+        </li>
+      )}
+      <li className="list-inline-item badge badge-secondary">
+        {i18n.t("number_of_posts", {
+          count: Number(counts.posts),
+          formattedCount: numToSI(counts.posts),
+        })}
+      </li>
+      <li className="list-inline-item badge badge-secondary">
+        {i18n.t("number_of_comments", {
+          count: Number(counts.comments),
+          formattedCount: numToSI(counts.comments),
+        })}
+      </li>
+      <li className="list-inline-item">
+        <Link
+          className="badge badge-primary"
+          to={`/modlog/${community_view ?? community_view?.community.id}`}
+        >
+          {i18n.t("modlog")}
+        </Link>
+      </li>
+    </ul>
+  );
+};
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 57400f48..7023d133 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -24,8 +24,8 @@ import {
   hostname,
   mdToHtml,
   myAuthRequired,
-  numToSI,
 } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon, PurgeWarning, Spinner } from "../common/icon";
 import { CommunityForm } from "../community/community-form";
@@ -158,7 +158,11 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
         <div className="card border-secondary mb-3">
           <div className="card-body">
             {this.description()}
-            {this.badges()}
+            <Badges
+              online={this.props.online}
+              community_view={this.props.community_view}
+              counts={this.props.community_view.counts}
+            />
             {this.mods()}
           </div>
         </div>
@@ -232,99 +236,6 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
     );
   }
 
-  badges() {
-    const community_view = this.props.community_view;
-    const counts = community_view.counts;
-    return (
-      <ul className="my-1 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: this.props.online,
-            formattedCount: numToSI(this.props.online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_subscribers", {
-            count: Number(counts.subscribers),
-            formattedCount: numToSI(counts.subscribers),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link
-            className="badge badge-primary"
-            to={`/modlog/${this.props.community_view.community.id}`}
-          >
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   mods() {
     return (
       <ul className="list-inline small">
diff --git a/src/shared/components/home/site-sidebar.tsx b/src/shared/components/home/site-sidebar.tsx
index 051c3afd..5f32e59e 100644
--- a/src/shared/components/home/site-sidebar.tsx
+++ b/src/shared/components/home/site-sidebar.tsx
@@ -1,8 +1,8 @@
 import { Component, linkEvent } from "inferno";
-import { Link } from "inferno-router";
 import { PersonView, Site, SiteAggregates } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { mdToHtml, numToSI } from "../../utils";
+import { mdToHtml } from "../../utils";
+import { Badges } from "../common/badges";
 import { BannerIconHeader } from "../common/banner-icon-header";
 import { Icon } from "../common/icon";
 import { PersonListing } from "../person/person-listing";
@@ -72,7 +72,9 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
       <div>
         {site.description && <h6>{site.description}</h6>}
         {site.sidebar && this.siteSidebar(site.sidebar)}
-        {this.props.counts && this.badges(this.props.counts)}
+        {this.props.counts && (
+          <Badges online={this.props.online ?? 1} counts={this.props.counts} />
+        )}
         {this.props.admins && this.admins(this.props.admins)}
       </div>
     );
@@ -97,102 +99,6 @@ export class SiteSidebar extends Component<SiteSidebarProps, SiteSidebarState> {
     );
   }
 
-  badges(siteAggregates: SiteAggregates) {
-    const counts = siteAggregates;
-    const online = this.props.online ?? 1;
-    return (
-      <ul className="my-2 list-inline">
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_online", {
-            count: online,
-            formattedCount: numToSI(online),
-          })}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_day", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_day),
-            formattedCount: numToSI(counts.users_active_day),
-          })}{" "}
-          / {i18n.t("day")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_week", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_week),
-            formattedCount: numToSI(counts.users_active_week),
-          })}{" "}
-          / {i18n.t("week")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_month", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_month),
-            formattedCount: numToSI(counts.users_active_month),
-          })}{" "}
-          / {i18n.t("month")}
-        </li>
-        <li
-          className="list-inline-item badge badge-secondary pointer"
-          data-tippy-content={i18n.t("active_users_in_the_last_six_months", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}
-        >
-          {i18n.t("number_of_users", {
-            count: Number(counts.users_active_half_year),
-            formattedCount: numToSI(counts.users_active_half_year),
-          })}{" "}
-          / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_users", {
-            count: Number(counts.users),
-            formattedCount: numToSI(counts.users),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_communities", {
-            count: Number(counts.communities),
-            formattedCount: numToSI(counts.communities),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_posts", {
-            count: Number(counts.posts),
-            formattedCount: numToSI(counts.posts),
-          })}
-        </li>
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_comments", {
-            count: Number(counts.comments),
-            formattedCount: numToSI(counts.comments),
-          })}
-        </li>
-        <li className="list-inline-item">
-          <Link className="badge badge-primary" to="/modlog">
-            {i18n.t("modlog")}
-          </Link>
-        </li>
-      </ul>
-    );
-  }
-
   handleCollapseSidebar(i: SiteSidebar) {
     i.setState({ collapsed: !i.state.collapsed });
   }

From cb72180f9728991a8f0b1937ef43735d96dee87e Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 20:54:13 -0400
Subject: [PATCH 2/7] fix: Fix broken link

---
 src/shared/components/common/badges.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 44278950..2024ad2c 100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -9,7 +9,7 @@ import { numToSI } from "../../utils";
 
 interface BadgesProps {
   counts: CommunityAggregates | SiteAggregates;
-  community_view?: CommunityView;
+  community_view: CommunityView;
 }
 
 const isCommunityAggregates = (
@@ -96,7 +96,9 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
       <li className="list-inline-item">
         <Link
           className="badge badge-primary"
-          to={`/modlog/${!!community_view ?? community_view?.community.id}`}
+          to={`/modlog${
+            community_view ? `/${community_view.community.id}` : ""
+          }`}
         >
           {i18n.t("modlog")}
         </Link>

From fe64edd2fc26ec46fa5512f7ee13923b2ca6fae9 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 20:56:01 -0400
Subject: [PATCH 3/7] fix: Re-add 'number of communities' to site sidebar

---
 src/shared/components/common/badges.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 2024ad2c..56390342 100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -18,6 +18,12 @@ const isCommunityAggregates = (
   return "subscribers" in counts;
 };
 
+const isSiteAggregates = (
+  counts: CommunityAggregates | SiteAggregates
+): counts is SiteAggregates => {
+  return "communities" in counts;
+};
+
 export const Badges = ({ counts, community_view }: BadgesProps) => {
   return (
     <ul className="my-1 list-inline">
@@ -81,6 +87,14 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
           })}
         </li>
       )}
+      {isSiteAggregates(counts) && (
+        <li className="list-inline-item badge badge-secondary">
+          {i18n.t("number_of_communities", {
+            count: Number(counts.communities),
+            formattedCount: numToSI(counts.communities),
+          })}
+        </li>
+      )}
       <li className="list-inline-item badge badge-secondary">
         {i18n.t("number_of_posts", {
           count: Number(counts.posts),

From f7f8ddcd7ca18ca4a1a6688c69766f275871a0a8 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 21:44:45 -0400
Subject: [PATCH 4/7] fix: Add total users in site sidebar

---
 src/shared/components/common/badges.tsx | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 56390342..858b9864 100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -79,6 +79,22 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
         })}{" "}
         / {i18n.t("number_of_months", { count: 6, formattedCount: 6 })}
       </li>
+      {isSiteAggregates(counts) && (
+        <>
+          <li className="list-inline-item badge badge-secondary">
+            {i18n.t("number_of_users", {
+              count: Number(counts.users),
+              formattedCount: numToSI(counts.users),
+            })}
+          </li>
+          <li className="list-inline-item badge badge-secondary">
+            {i18n.t("number_of_communities", {
+              count: Number(counts.communities),
+              formattedCount: numToSI(counts.communities),
+            })}
+          </li>
+        </>
+      )}
       {isCommunityAggregates(counts) && (
         <li className="list-inline-item badge badge-secondary">
           {i18n.t("number_of_subscribers", {
@@ -87,14 +103,6 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
           })}
         </li>
       )}
-      {isSiteAggregates(counts) && (
-        <li className="list-inline-item badge badge-secondary">
-          {i18n.t("number_of_communities", {
-            count: Number(counts.communities),
-            formattedCount: numToSI(counts.communities),
-          })}
-        </li>
-      )}
       <li className="list-inline-item badge badge-secondary">
         {i18n.t("number_of_posts", {
           count: Number(counts.posts),

From d951fb57dab3e8e763f93ea4326d6fc4a4bd9e98 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 22:24:32 -0400
Subject: [PATCH 5/7] fix: Fix missing prop

---
 src/shared/components/common/badges.tsx     | 10 ++++------
 src/shared/components/community/sidebar.tsx |  2 +-
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/common/badges.tsx b/src/shared/components/common/badges.tsx
index 858b9864..49c0888b 100644
--- a/src/shared/components/common/badges.tsx
+++ b/src/shared/components/common/badges.tsx
@@ -1,7 +1,7 @@
 import { Link } from "inferno-router";
 import {
   CommunityAggregates,
-  CommunityView,
+  CommunityId,
   SiteAggregates,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
@@ -9,7 +9,7 @@ import { numToSI } from "../../utils";
 
 interface BadgesProps {
   counts: CommunityAggregates | SiteAggregates;
-  community_view: CommunityView;
+  communityId?: CommunityId;
 }
 
 const isCommunityAggregates = (
@@ -24,7 +24,7 @@ const isSiteAggregates = (
   return "communities" in counts;
 };
 
-export const Badges = ({ counts, community_view }: BadgesProps) => {
+export const Badges = ({ counts, communityId }: BadgesProps) => {
   return (
     <ul className="my-1 list-inline">
       <li
@@ -118,9 +118,7 @@ export const Badges = ({ counts, community_view }: BadgesProps) => {
       <li className="list-inline-item">
         <Link
           className="badge badge-primary"
-          to={`/modlog${
-            community_view ? `/${community_view.community.id}` : ""
-          }`}
+          to={`/modlog${communityId ? `/${communityId}` : ""}`}
         >
           {i18n.t("modlog")}
         </Link>
diff --git a/src/shared/components/community/sidebar.tsx b/src/shared/components/community/sidebar.tsx
index 711ab5e6..720e596f 100644
--- a/src/shared/components/community/sidebar.tsx
+++ b/src/shared/components/community/sidebar.tsx
@@ -159,7 +159,7 @@ export class Sidebar extends Component<SidebarProps, SidebarState> {
             <div className="card-body">
               {this.description()}
               <Badges
-                community_view={this.props.community_view}
+                communityId={this.props.community_view.community.id}
                 counts={this.props.community_view.counts}
               />
               {this.mods()}

From 133951bc84900aa1990fd1b2595f46e21b3a3d86 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 22:43:46 -0400
Subject: [PATCH 6/7] fix: Remove inline styles and use Bootstrap classes

---
 .../components/common/markdown-textarea.tsx   | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index ef7ba018..1a06d3db 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -146,18 +146,8 @@ export class MarkdownTextArea extends Component<
         />
         <div className="form-group row">
           <div className="col-12">
-            <div
-              className="rounded bg-light overflow-hidden"
-              style={{
-                border: "1px solid var(--medium-light)",
-              }}
-            >
-              <div
-                className="d-flex flex-wrap"
-                style={{
-                  "border-bottom": "1px solid var(--medium-light)",
-                }}
-              >
+            <div className="rounded bg-light border border-light">
+              <div className="d-flex flex-wrap border-bottom border-light">
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -219,9 +209,12 @@ export class MarkdownTextArea extends Component<
               <div>
                 <textarea
                   id={this.id}
-                  className={classNames("form-control border-0 rounded-0", {
-                    "d-none": this.state.previewMode,
-                  })}
+                  className={classNames(
+                    "form-control border-0 rounded-bottom",
+                    {
+                      "d-none": this.state.previewMode,
+                    }
+                  )}
                   value={this.state.content}
                   onInput={linkEvent(this, this.handleContentChange)}
                   onPaste={linkEvent(this, this.handleImageUploadPaste)}

From ab92d7264d547c2c49e5a6a530fd8db85a4a5f3a Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 23:14:39 -0400
Subject: [PATCH 7/7] fix: Sass files don't need to refer to full node_modules
 path

---
 src/assets/css/themes/darkly-red.scss | 2 +-
 src/assets/css/themes/darkly.scss     | 2 +-
 src/assets/css/themes/litely-red.scss | 2 +-
 src/assets/css/themes/litely.scss     | 2 +-
 src/shared/components/app/styles.scss | 8 ++++----
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/assets/css/themes/darkly-red.scss b/src/assets/css/themes/darkly-red.scss
index f6dfb3df..f6579a3a 100644
--- a/src/assets/css/themes/darkly-red.scss
+++ b/src/assets/css/themes/darkly-red.scss
@@ -1,2 +1,2 @@
 @import "variables.darkly-red";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";
diff --git a/src/assets/css/themes/darkly.scss b/src/assets/css/themes/darkly.scss
index ef808d56..657344fc 100644
--- a/src/assets/css/themes/darkly.scss
+++ b/src/assets/css/themes/darkly.scss
@@ -1,2 +1,2 @@
 @import "variables.darkly";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";
diff --git a/src/assets/css/themes/litely-red.scss b/src/assets/css/themes/litely-red.scss
index 388d70bd..400b6cea 100644
--- a/src/assets/css/themes/litely-red.scss
+++ b/src/assets/css/themes/litely-red.scss
@@ -1,2 +1,2 @@
 @import "variables.litely-red";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";
diff --git a/src/assets/css/themes/litely.scss b/src/assets/css/themes/litely.scss
index 061bcc48..8001586b 100644
--- a/src/assets/css/themes/litely.scss
+++ b/src/assets/css/themes/litely.scss
@@ -1,2 +1,2 @@
 @import "variables.litely";
-@import "../../../../node_modules/bootstrap-v4/scss/bootstrap";
+@import "bootstrap-v4/scss/bootstrap";
diff --git a/src/shared/components/app/styles.scss b/src/shared/components/app/styles.scss
index 559f619f..4d764cde 100644
--- a/src/shared/components/app/styles.scss
+++ b/src/shared/components/app/styles.scss
@@ -1,6 +1,6 @@
 // Custom css
-@import "../../../../node_modules/tributejs/dist/tribute.css";
-@import "../../../../node_modules/toastify-js/src/toastify.css";
-@import "../../../../node_modules/tippy.js/dist/tippy.css";
-@import "../../../../node_modules/bootstrap/dist/css/bootstrap-utilities.min.css";
+@import "tributejs/dist/tribute.css";
+@import "toastify-js/src/toastify.css";
+@import "tippy.js/dist/tippy.css";
+@import "bootstrap/dist/css/bootstrap-utilities.min.css";
 @import "../../../assets/css/main.css";