bbcode style tag created and dialog styles updated (#15141)

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 {

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

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;
 

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;

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;

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;