From af190ac210e1762bbfb6172798e24ad2d5365c61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Thu, 29 Sep 2022 22:26:10 -0400
Subject: [PATCH] fix tagsinput to look like bs5 inputs

---
 public/scss/admin/admin.scss    | 21 ++++++++++++++++-----
 public/scss/admin/settings.scss | 16 ----------------
 public/scss/generics.scss       | 12 ++++++++++++
 src/meta/css.js                 |  6 +++---
 4 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/public/scss/admin/admin.scss b/public/scss/admin/admin.scss
index 73d20c8edf..b1e0007cde 100644
--- a/public/scss/admin/admin.scss
+++ b/public/scss/admin/admin.scss
@@ -75,11 +75,6 @@ body {
 		background: $primary !important;
 	}
 
-	.user-img {
-		width:24px;
-		height:24px;
-	}
-
 	.nodebb-logo {
 		img {
 			height: 31px;
@@ -177,6 +172,22 @@ body {
 	.ui-autocomplete {
 		z-index: $zindex-popover;
 	}
+
+	.bootstrap-tagsinput {
+		width: 100%;
+		border: 0;
+		box-shadow: none;
+		padding-left: 0;
+
+		input {
+			width: 100%;
+			margin-left: 1px;
+			margin-top: 9px;
+			border-bottom: 1px dotted #ccc !important;
+			padding-bottom: 5px;
+			padding-left: 0;
+		}
+	}
 }
 
 // Allowing text to the right of an image-type brand
diff --git a/public/scss/admin/settings.scss b/public/scss/admin/settings.scss
index a0bdb22b48..e760d71787 100644
--- a/public/scss/admin/settings.scss
+++ b/public/scss/admin/settings.scss
@@ -17,20 +17,4 @@
 			}
 		}
 	}
-
-	.bootstrap-tagsinput {
-		width: 100%;
-		border: 0;
-		box-shadow: none;
-		padding-left: 0;
-
-		input {
-			width: 100%;
-			margin-left: 1px;
-			margin-top: 9px;
-			border-bottom: 1px dotted #ccc !important;
-			padding-bottom: 5px;
-			padding-left: 0;
-		}
-	}
 }
\ No newline at end of file
diff --git a/public/scss/generics.scss b/public/scss/generics.scss
index 6747a522c6..0b85436e0d 100644
--- a/public/scss/generics.scss
+++ b/public/scss/generics.scss
@@ -29,6 +29,18 @@
 	min-height: 200px;
 }
 
+.bootstrap-tagsinput {
+	background-color: $input-bg;
+	padding: $input-padding-y $input-padding-x;
+	width: 100%;
+	input {
+		&::placeholder{
+			color: $input-placeholder-color;
+		}
+		color: $input-color;
+	}
+}
+
 .category-list {
 	padding: 0;
 
diff --git a/src/meta/css.js b/src/meta/css.js
index 8a82cdbd6c..e02c2ea4e3 100644
--- a/src/meta/css.js
+++ b/src/meta/css.js
@@ -28,12 +28,12 @@ const buildImports = {
 		return [
 			'@import "mixins";',
 			'@import "fontawesome";',
+			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			boostrapImport(themeData),
 			'@import "generics";',
 			'@import "responsive-utilities";',
 			source,
 			'@import "jquery-ui";',
-			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			'@import "cropperjs/dist/cropper";',
 			'@import "client";',
 		].join('\n');
@@ -45,13 +45,13 @@ const buildImports = {
 			'@import "bootstrap/scss/bootstrap";',
 			'@import "bootswatch/dist/materia/bootswatch";',
 			'@import "mixins";',
+			'@import "fontawesome";',
+			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			'@import "generics";',
 			'@import "responsive-utilities";',
-			'@import "fontawesome";',
 			'@import "admin/admin";',
 			source,
 			'@import "jquery-ui";',
-			'@import "@adactive/bootstrap-tagsinput/src/bootstrap-tagsinput";',
 			'@import "../public/vendor/mdl/material";',
 		].join('\n');
 	},