diff --git a/CREDITS.md b/CREDITS.md
index 1d1f12cb2..910c67368 100644
--- a/CREDITS.md
+++ b/CREDITS.md
@@ -336,3 +336,4 @@
* [Fork-Awesome](https://github.com/ForkAwesome/Fork-Awesome)
* `playlist add` by Material UI
* `language` by Aaron Jin
+ * `npm` by Boboss74
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 1a177de72..a2d0fde08 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -10,22 +10,19 @@
-
-
{{ plugin.description }}
+
+
+
+
+
+
+
+
+
+
{{ plugin.description }}
+
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
index 5f18028c9..fac81bd26 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.html
@@ -37,25 +37,26 @@
{{ plugin.latestVersion }}
- Installed
-
+
+
+
-
-
{{ plugin.description }}
+
+
+
+
+
Installed
+
+
+
{{ plugin.description }}
+
diff --git a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
index ed06825c8..20f169e13 100644
--- a/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
+++ b/client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss
@@ -25,5 +25,5 @@
.badge {
font-size: 13px;
font-weight: $font-semibold;
- margin-left: 5px;
+ margin-left: 15px;
}
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
index 87a709b00..3f4fad7b9 100644
--- a/client/src/app/+admin/plugins/shared/plugin-list.component.scss
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -7,6 +7,8 @@
}
.first-row {
+ display: flex;
+ align-items: center;
margin-bottom: 10px;
.plugin-name {
@@ -18,6 +20,26 @@
.plugin-version {
opacity: 0.6;
}
+
+ .plugin-icon {
+ margin-left: 10px;
+
+ my-global-icon {
+ @include apply-svg-color($grey-foreground-color);
+
+ &[iconName="npm"] {
+ @include fill-svg-color($grey-foreground-color);
+ }
+ }
+ }
+
+ .buttons {
+ margin-left: auto;
+ width: max-content;
+ > *:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
}
.second-row {
@@ -29,13 +51,6 @@
.description {
opacity: 0.8
}
-
- .buttons {
- margin-left: 10px;
- > *:not(:last-child) {
- margin-right: 10px;
- }
- }
}
.action-button {
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index e83daf077..a2e2b719d 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -53,7 +53,8 @@ const icons = {
'p2p': require('!!raw-loader?!../../../assets/images/menu/p2p.svg'),
'users': require('!!raw-loader?!../../../assets/images/global/users.svg'),
'search': require('!!raw-loader?!../../../assets/images/global/search.svg'),
- 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg')
+ 'refresh': require('!!raw-loader?!../../../assets/images/global/refresh.svg'),
+ 'npm': require('!!raw-loader?!../../../assets/images/global/npm.svg')
}
export type GlobalIconName = keyof typeof icons
diff --git a/client/src/assets/images/global/npm.svg b/client/src/assets/images/global/npm.svg
new file mode 100644
index 000000000..ec8f41243
--- /dev/null
+++ b/client/src/assets/images/global/npm.svg
@@ -0,0 +1,6 @@
+