From 24e67c9011096fb34dfffa713adcf209880cd80e 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: Tue, 10 Oct 2023 10:57:18 -0400
Subject: [PATCH 1/2] update for nbb3.x

bootstrap 5 updates
  panel is removed switch to card
  labels have form-label class
  form-group class removed use spacing via mb-3
  btn-default remove use outline button
use scss instead of less file
---
 client/acp/view/rule-create.js   |  6 +++---
 client/acp/view/rule-details.js  |  6 +++---
 client/acp/view/rule-form.js     | 16 ++++++++--------
 client/acp/view/rules.js         |  6 +++---
 client/acp/view/utils.js         |  8 ++++----
 plugin.json                      |  4 ++--
 plugin/index.js                  |  4 +++-
 style/{forum.less => forum.scss} |  0
 8 files changed, 26 insertions(+), 24 deletions(-)
 rename style/{forum.less => forum.scss} (100%)

diff --git a/client/acp/view/rule-create.js b/client/acp/view/rule-create.js
index 27dac2e..1fb101a 100644
--- a/client/acp/view/rule-create.js
+++ b/client/acp/view/rule-create.js
@@ -8,9 +8,9 @@ export const RuleCreate = props => {
     let valid = isRuleValid(props.rule.name, props.rule.displayName, props.rule.regex, props.rule.replacement);
 
     return (
-        <div className="panel panel-default">
-            <div className="panel-heading">Create Rule</div>
-            <div className="panel-body">
+        <div className="card">
+            <div className="card-header">Create Rule</div>
+            <div className="card-body">
                 <RuleForm
                     propDidChange={(property, value) => props.newRuleFieldWillChange(property, value)}
                     {...props}/>
diff --git a/client/acp/view/rule-details.js b/client/acp/view/rule-details.js
index b372e3a..281bfe3 100644
--- a/client/acp/view/rule-details.js
+++ b/client/acp/view/rule-details.js
@@ -7,9 +7,9 @@ export const RuleDetails = props => {
     let name = 'Rule: ' + props.rule.displayName;
 
     return (
-        <div className="panel panel-default">
-            <div className="panel-heading">{name}</div>
-            <div className="panel-body">
+        <div className="card">
+            <div className="card-header">{name}</div>
+            <div className="card-body">
                 <RuleForm
                     propDidChange={(property, value) => props.fieldWillChange(props.rule, property, value)}
                     {...props}/>
diff --git a/client/acp/view/rule-form.js b/client/acp/view/rule-form.js
index 689188f..b7fead7 100644
--- a/client/acp/view/rule-form.js
+++ b/client/acp/view/rule-form.js
@@ -5,8 +5,8 @@ export const RuleForm = props => {
         <div>
             <div className="row">
                 <div className="col-md-6">
-                    <div className="form-group">
-                        <label htmlFor="labelName">Name</label>
+                    <div className="mb-3">
+                        <label className="form-label" htmlFor="labelName">Name</label>
                         <input
                             id="labelName"
                             type="text"
@@ -17,8 +17,8 @@ export const RuleForm = props => {
                     </div>
                 </div>
                 <div className="col-md-6">
-                    <div className="form-group">
-                        <label htmlFor="labelDisplayName">Display Name</label>
+                    <div className="mb-3">
+                        <label className="form-label" htmlFor="labelDisplayName">Display Name</label>
                         <input
                             id="labelDisplayName"
                             type="text"
@@ -32,8 +32,8 @@ export const RuleForm = props => {
 
             <div className="row">
                 <div className="col-md-12">
-                    <div className="form-group">
-                        <label htmlFor="labelWatch">Watch</label>
+                    <div className="mb-3">
+                        <label className="form-label" htmlFor="labelWatch">Watch</label>
                         <input
                             id="labelWatch"
                             type="text"
@@ -47,8 +47,8 @@ export const RuleForm = props => {
 
             <div className="row">
                 <div className="col-md-12">
-                    <div className="form-group">
-                        <label htmlFor="labelReplace">Replace</label>
+                    <div className="mb-3">
+                        <label className="form-label" htmlFor="labelReplace">Replace</label>
                         <textarea
                             id="labelReplace"
                             className="form-control"
diff --git a/client/acp/view/rules.js b/client/acp/view/rules.js
index df53609..490de0c 100644
--- a/client/acp/view/rules.js
+++ b/client/acp/view/rules.js
@@ -40,9 +40,9 @@ export const Rules = () => {
     }
 
     return (
-        <div className="panel panel-default">
-            <div className="panel-heading">Installed Rules</div>
-            <div className="panel-body">
+        <div className="card">
+            <div className="card-header">Installed Rules</div>
+            <div className="card-body">
                 <div className="rules">
                     {renderRules(rules)}
                 </div>
diff --git a/client/acp/view/utils.js b/client/acp/view/utils.js
index de79d6d..9618d5e 100644
--- a/client/acp/view/utils.js
+++ b/client/acp/view/utils.js
@@ -2,9 +2,9 @@ import React from 'react';
 
 export const Utils = props => {
     return (
-        <div className="panel panel-default">
-            <div className="panel-heading">Utils</div>
-            <div className="panel-body">
+        <div className="card">
+            <div className="card-header">Utils</div>
+            <div className="card-body">
                 <p className="utils-info">
                     Install rules that are shipped with plugin: Youtube, Vimeo, etc. Please,
                     check plugin documentation for the full list. If rule with the same name is installed already,
@@ -12,7 +12,7 @@ export const Utils = props => {
                 </p>
 
                 <button
-                    className="btn btn-default btn-block"
+                    className="btn btn-outline-secondary btn-block"
                     onClick={() => props.installDefaultRules()}
                     type="button">
                     Install Default Rules
diff --git a/plugin.json b/plugin.json
index e2de136..95e2852 100644
--- a/plugin.json
+++ b/plugin.json
@@ -31,8 +31,8 @@
       "method": "hooks.filters.sanitizeConfig"
     }
   ],
-  "less": [
-    "style/forum.less"
+  "scss": [
+    "style/forum.scss"
   ],
   "modules": {
     "../admin/plugins/embed.js": "./public/js/acp.js"
diff --git a/plugin/index.js b/plugin/index.js
index eea18bf..586256f 100644
--- a/plugin/index.js
+++ b/plugin/index.js
@@ -19,7 +19,9 @@
                     apiUri      = '/api' + pluginUri,
                     renderAdmin = function (req, res, next) {
                         res.render(
-                            'admin/plugins/embed', {}
+                            'admin/plugins/embed', {
+                                title:'Embed',
+                            }
                         );
                     };
 
diff --git a/style/forum.less b/style/forum.scss
similarity index 100%
rename from style/forum.less
rename to style/forum.scss

From 360c0abdd484dbd0cd6654d65f1ef6fd7017039a 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: Tue, 10 Oct 2023 10:57:44 -0400
Subject: [PATCH 2/2] update compat string

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 927ec47..7ad31e0 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,6 @@
     "sass": "^1.34.0"
   },
   "nbbpm": {
-    "compatibility": "~2.2.x"
+    "compatibility": "^3.0.0"
   }
 }