From bf604003f68be8d6aab12d288ad8e3acbdb3c99d Mon Sep 17 00:00:00 2001
From: Simon Davies <simon.davies@nexusmods.com>
Date: Mon, 15 Jan 2024 08:31:02 +0000
Subject: [PATCH] bbcode style tag created and dialog styles updated (#15141)

---
 src/stylesheets/bootstrap-override.scss       |  3 ++-
 .../bootstrap/bootstrap/_modals.scss          |  7 ++++---
 src/stylesheets/details.scss                  |  4 ++--
 src/stylesheets/variables.scss                |  8 ++++++++
 src/util/bbcode.ts                            |  4 +++-
 src/util/bbcode/StyleTag.tsx                  | 20 +++++++++++++++++++
 6 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 src/util/bbcode/StyleTag.tsx

diff --git a/src/stylesheets/bootstrap-override.scss b/src/stylesheets/bootstrap-override.scss
index 75dde22ca..106ec7432 100644
--- a/src/stylesheets/bootstrap-override.scss
+++ b/src/stylesheets/bootstrap-override.scss
@@ -245,12 +245,13 @@ textarea {
 }
 
 .modal-header, .modal-footer {
-  margin: 0 $gutter-width;
+  margin: 0;
 }
 
 .modal-content {
   border: $border-width solid $modal-content-border-color;
   width: 100%;
+  border-radius: 8px;
 }
 
 .pager li > a {
diff --git a/src/stylesheets/bootstrap/bootstrap/_modals.scss b/src/stylesheets/bootstrap/bootstrap/_modals.scss
index 31e2ab918..330588a0b 100644
--- a/src/stylesheets/bootstrap/bootstrap/_modals.scss
+++ b/src/stylesheets/bootstrap/bootstrap/_modals.scss
@@ -77,7 +77,7 @@
 // Modal header
 // Top section of the modal w/ title and dismiss
 .modal-header {
-  padding: $modal-title-padding 0;
+  padding: $modal-inner-padding ($modal-inner-padding * 2);
   border-bottom: 1px solid $modal-header-border-color;
   @include clearfix;
 }
@@ -96,14 +96,15 @@
 // Where all modal content resides (sibling of .modal-header and .modal-footer)
 .modal-body {
   position: relative;
-  padding: $modal-inner-padding;
+  padding: $modal-inner-padding ($modal-inner-padding * 2);
 }
 
 // Footer (for actions)
 .modal-footer {
-  padding: $modal-inner-padding 0;
+  padding: $modal-inner-padding ($modal-inner-padding * 2);
   text-align: right; // right align buttons
   border-top: 1px solid $modal-footer-border-color;
+  background-color: $gray-lighter;
   @include clearfix; // clear it in case folks use .pull-* classes on buttons
 
   // Properly space out buttons
diff --git a/src/stylesheets/details.scss b/src/stylesheets/details.scss
index 3f654161a..0023664f6 100644
--- a/src/stylesheets/details.scss
+++ b/src/stylesheets/details.scss
@@ -339,8 +339,8 @@ $modal-content-bg:                             $brand-menu;
 $modal-content-border-color:                   $border-color;
 $modal-content-fallback-border-color:          $gray-light;
 
-$modal-backdrop-bg:           #000;
-$modal-backdrop-opacity:      .5;
+$modal-backdrop-bg:           #000000;
+$modal-backdrop-opacity:      0.8;
 $modal-header-border-color:   $border-color;
 $modal-footer-border-color:   $modal-header-border-color;
 
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
index 18fcd18a8..b7752e749 100644
--- a/src/stylesheets/variables.scss
+++ b/src/stylesheets/variables.scss
@@ -16,10 +16,18 @@ $gray-lighter:           #18181B;
 
 $brand-primary:         #C87B28;
 $brand-highlight:       #1D4ED8;
+
 $brand-success:         #166534;
+$brand-success-lighter: #22C55E;
+
 $brand-info:            #1D4ED8;
+$brand-info-lighter:    #60A5FA;
+
 $brand-warning:         #FACC15;
+$brand-warning-lighter: #FEF08A;
+
 $brand-danger:          #991B1B;
+$brand-danger-lighter:  #EF4444;
 
 $brand-bg:              $gray-lighter;
 $brand-menu:            $gray-light;
diff --git a/src/util/bbcode.ts b/src/util/bbcode.ts
index 263d8a024..af11bc6ff 100644
--- a/src/util/bbcode.ts
+++ b/src/util/bbcode.ts
@@ -7,6 +7,7 @@ import LinkTag from './bbcode/LinkTag';
 import MoreTag from './bbcode/MoreTag';
 import SizeTag from './bbcode/SizeTag';
 import SpoilerTag from './bbcode/SpoilerTag';
+import StyleTag from './bbcode/StyleTag';
 import SvgTag from './bbcode/SvgTag';
 import TooltipTag from './bbcode/TooltipTag';
 import YoutubeTag from './bbcode/YoutubeTag';
@@ -49,11 +50,12 @@ fullParser.registerTag('heading', HeadingTag);
 fullParser.registerTag('svg', SvgTag);
 fullParser.registerTag('more', MoreTag);
 fullParser.registerTag('tooltip', TooltipTag);
+fullParser.registerTag('style', StyleTag);
 
 const stripParser = new bbcode.Parser();
 stripParser.registerTag('br', BrTag);
 ['size', 'email', 'font', 'link', 'url', 'spoiler',
- 'font', 'youtube', 'line', 'heading', 'svg', 'b', 'u']
+ 'font', 'youtube', 'line', 'heading', 'svg', 'b', 'u', 'style']
  .forEach(tag => stripParser.registerTag(tag, IdentityTag));
 
 let convertDiv: HTMLDivElement;
diff --git a/src/util/bbcode/StyleTag.tsx b/src/util/bbcode/StyleTag.tsx
new file mode 100644
index 000000000..eac704151
--- /dev/null
+++ b/src/util/bbcode/StyleTag.tsx
@@ -0,0 +1,20 @@
+import { Tag } from 'bbcode-to-react';
+import * as React from 'react';
+
+class StyleTag extends Tag {
+  public toHTML(): string[] {
+    const style = this.params.style;
+
+    return [`<span class="${style}">`, this.getContent(), '</span>'];
+  }
+
+  public toReact() {
+    const style = this.params.style;
+
+    return (
+      <span className={ style }>{this.getComponents()}</span>
+    );
+  }
+}
+
+export default StyleTag;
\ No newline at end of file