BL-7198 Add Page B.Enterprise mods

* Add "BE" to template pages that require enterprise
* make the page Preview a React component
* get Material UI going in the add page dialog
* get rid of as much Segoe UI as possible

Author: gmartin7

DistFiles/localization/en/Bloom.xlf

@@ -1605,6 +1605,11 @@
         <source xml:lang="en">You cannot put anything in there while making an original book.</source>
         <note>ID: EditTab.ReadOnlyInAuthorMode</note>
       </trans-unit>
+      <trans-unit id="EditTab.RequiresEnterprise" sil:dynamic="true">
+        <source xml:lang="en">This feature requires a Bloom Enterprise subscription</source>
+        <note>ID: EditTab.RequiresEnterprise</note>
+        <note>Appears in notice (possibly obscuring other controls when they may not be used) because no Bloom Enterprise project has been selected.</note>
+      </trans-unit>
       <trans-unit id="EditTab.SavingNotification" sil:dynamic="true">
         <source xml:lang="en">Saving...</source>
         <note>ID: EditTab.SavingNotification</note>
@@ -2041,11 +2046,6 @@
         <source xml:lang="en">More...</source>
         <note>ID: EditTab.Toolbox.More</note>
       </trans-unit>
-      <trans-unit id="EditTab.Toolbox.RequiresEnterprise" sil:dynamic="true">
-        <source xml:lang="en">This feature requires Bloom Enterprise.</source>
-        <note>ID: EditTab.Toolbox.RequiresEnterprise</note>
-        <note>Appears in notice obscuring other controls when they may not be used because no Bloom Enterprise project has been selected.</note>
-      </trans-unit>
       <trans-unit id="EditTab.Toolbox.Settings.Unlock" sil:dynamic="true">
         <source xml:lang="en">Allow changes to this shellbook</source>
         <note>ID: EditTab.Toolbox.Settings.Unlock</note>

src/BloomBrowserUI/bloomMaterialUITheme.js

@@ -24,7 +24,8 @@ const theme = createMuiTheme({
         warning: { main: "#F3AA18" }
     },
     typography: {
-        fontSize: 12
+        fontSize: 12,
+        fontFamily: ["NotoSans", "Roboto", "sans-serif"]
     },
     props: {
         MuiLink: {

src/BloomBrowserUI/bloomUI.less

@@ -140,3 +140,15 @@ input[type="checkbox"]:indeterminate::after {
     -ms-user-select: text; // Edge/Internet Explorer
     user-select: text; // Chrome
 }
+
+// Moved from toolbox.less to here so it can be used by templatePagePreview
+.enterprise-only-flag::after {
+    content: "BE";
+    cursor: default;
+    color: @bloom-purple;
+    margin-left: 4px;
+    vertical-align: super;
+    font-style: italic;
+    font-weight: bold;
+    font-size: smaller;
+}

src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less

@@ -5,9 +5,6 @@
 
 @styleSelectWidth: 190px;
 #format-toolbar {
-    * {
-        font-family: "Segoe UI", Arial, sans-serif;
-    }
     h2 {
         font-size: 10pt;
     }

src/BloomBrowserUI/bookEdit/css/bloomDialog.less

@@ -1,4 +1,5 @@
 @import (reference) "../../bookLayout/basePage";
+@import "../../bloomWebFonts.less";
 // Common styles to be applied to htm-js-css dialogs in Bloom
 @backgroundColorWhite: rgb(255, 255, 255);
 @backgroundColorLight: rgb(240, 240, 240);
@@ -130,25 +131,27 @@
 .bloomDialogContainer .control-section {
     margin: 0 0 12px 0;
 }
-.bloomDialogContainer button,
-.bloomDialogContainer input {
-    background: linear-gradient(@backgroundColorLight, @backgroundColorDark);
-}
+// Interferes with Material UI background-color
+// .bloomDialogContainer button,
+// .bloomDialogContainer input {
+//     background: linear-gradient(@backgroundColorLight, @backgroundColorDark);
+// }
 .bloomDialogContainer button {
     .bdRounded;
     border: 1px solid @buttonBorder;
     box-shadow: 1px 2px 7px @buttonShadow;
 }
-.bloomDialogContainer button:hover,
-.bloomDialogContainer input:hover,
-.bloomDialogContainer select:hover,
-.bloomDialogContainer .select2-container--default:hover,
-.bloomDialogContainer .select2-container--focus {
-    background: linear-gradient(
-        @backgroundColorHoverLight,
-        @backgroundColorHoverDark
-    );
-}
+// Interferes with Material UI background-color
+// .bloomDialogContainer button:hover,
+// .bloomDialogContainer input:hover,
+// .bloomDialogContainer select:hover,
+// .bloomDialogContainer .select2-container--default:hover,
+// .bloomDialogContainer .select2-container--focus {
+//     background: linear-gradient(
+//         @backgroundColorHoverLight,
+//         @backgroundColorHoverDark
+//     );
+// }
 .bloomDialogContainer button[disabled] {
     border: 1px solid @disabledText;
     background: @backgroundColorLight;
@@ -170,7 +173,7 @@
     z-index: @dialogZindex;
     position: absolute;
     line-height: 1.8;
-    font-family: Segoe UI, Open Sans, Arial, sans-serif;
+    font-family: @UIFontStack;
 }
 .bloomDialogContainer .bloomDialogTitleBar {
     background-color: @backgroundColorTitleBar;
@@ -185,7 +188,6 @@
 .bloomDialogContainer .bloomDialogMainPage {
     background: @backgroundColorWhite;
     margin-left: 1em;
-    font-family: Segoe UI, Open Sans, Arial, sans-serif;
     font-size: 10pt;
 }
 

src/BloomBrowserUI/bookEdit/css/editMode.less

@@ -77,7 +77,6 @@ div.bloom-imageContainer {
     left: 5mm;
     top: @PageLabelVerticalDisplacement;
     float: left;
-    font-family: "Segoe UI", "Open Sans", Arial, sans-serif;
     &[contenteditable="true"] {
         color: @ControlColor;
         padding: 0 2px;
@@ -499,7 +498,6 @@ div.bloom-editable.Heading2-style {
     /*Same grey color as pageLabel*/
     color: rgba(0, 0, 0, 0.2);
     font-size: small;
-    font-family: Arial, sans-serif; /* Arial matches .qtip-content */
     font-style: normal;
     font-weight: normal;
     line-height: 1; //else it will draw up in the box somewhere if the font is large

src/BloomBrowserUI/bookEdit/css/editPaneGlobal.less

@@ -1,6 +1,4 @@
-@import "../../bloomWebFonts.less";
-
-/* Unless otherwise noted, these rules have been moved from editMode.css
+/* Unless otherwise noted, these rules have been moved from editMode.css
     BODY is not within the scoped css DIV */
 
 body {
@@ -18,11 +16,6 @@ To handling the mis-match.*/
     z-index: 20000;
 }
 
-/* Qtip won't work if these rules are inside the scoped DIV */
-.qtip-content {
-    font-family: @UIFontStack; // for xmatter field definition bubbles
-}
-
 div.ui-tooltip-title {
     text-align: justify;
     margin-left: -9px;

src/BloomBrowserUI/bookEdit/css/origami.less

@@ -6,15 +6,14 @@
 // origamiEditing.less. The initial goal of splitting them up was to avoid
 // getting the origami editing behaviors while reading in BloomReader.
 @import (inline) "../../lib/split-pane/split-pane.css";
-@import (reference) "../../bloomUI.less";
+@import "../../bloomUI.less";
 
 @flowerPetalGrey: #7e7e7e; // shouldn't this just be @bloom-gray?
 @inactiveColor: @bloom-buff;
-@font: "Segoe UI", "Open Sans", Arial, sans-serif;
 
 .origami-ui {
     visibility: hidden;
-    font-family: @font;
+    font-family: @UIFontStack;
 }
 .origami-layout-mode .origami-ui {
     visibility: visible;

src/BloomBrowserUI/bookEdit/css/origamiEditing.less

@@ -10,8 +10,6 @@
 @DarkSwitch: @bloom-panelBackground;
 @ActiveSwitchColor: @ControlColor;
 
-@font: "Segoe UI", "Open Sans", Arial, sans-serif;
-
 @ToggleRightOffset: 19px;
 @ToggleVerticalOffset: -30px;
 @TogglePartsRadius: 8px;
@@ -101,7 +99,6 @@
     top: @ToggleVerticalOffset;
     line-height: 1em;
     color: @DisabledColor;
-    font-family: @font;
     div {
         color: @ActiveSwitchColor;
     }

src/BloomBrowserUI/bookEdit/pageThumbnailList/pageThumbnailList.less

@@ -238,7 +238,7 @@ body > #menuIconHolder {
 }
 
 #toast-container {
-    font-family: "Segoe UI", "sans-serif";
+    font-family: @UIFontStack;
     font-size: 9pt;
 }