Feature/upgrade to Bootstrap 5 (#5385)

* Upgrade to bootstraps 5

* Refactor css files

* Switch to single css and js entry point

* Switch to single css and js entry point

* Improvements to theme code

* Improve css code

* More improvements to css code

* Add Left Off Canvas

* More UI Improvements

* Complete right offcanvas

* Work on Review Page Options

* Complete UI Updates

* Complete UI Updates

* Update TypeScript, remove JQuery UI

* Resolve Minor Bugs

src/dotnet/APIView/APIViewUITests/SmokeTests.cs

@@ -100,9 +100,9 @@ public async Task SmokeTest_CSharp()
                 driver.Manage().Timeouts().ImplicitWait = TimeSpan.FromSeconds(WaitTime);
                 driver.Navigate().GoToUrl(_fixture._endpoint);
 
-                var createReviewBtn = driver.FindElement(By.XPath("//button[@data-target='#uploadModel']"));
+                var createReviewBtn = driver.FindElement(By.XPath("//button[@data-bs-target='#uploadModel']"));
                 createReviewBtn.Click();
-                var fileSelector = driver.FindElement(By.Id("Upload_Files"));
+                var fileSelector = driver.FindElement(By.Id("uploadReviewFile"));
                 fileSelector.SendKeys(fileAPath);
                 var uploadBtn = driver.FindElement(By.XPath("//div[@class='modal-footer']/button[@type='submit']"));
                 uploadBtn.Click();
@@ -120,7 +120,7 @@ public async Task SmokeTest_CSharp()
                 Assert.Equal("Reviews - apiview.dev", driver.Title);
 
                 // Select C# language
-                var languageSelector = driver.FindElement(By.Id("language-filter-bootstraps-select"));
+                var languageSelector = driver.FindElement(By.Id("language-filter-select"));
                 var languageSelectElement = new SelectElement(languageSelector);
                 languageSelectElement.SelectByText("C#");
                 var reviewNames = driver.FindElements(By.ClassName("review-name"));

src/dotnet/APIView/APIViewWeb/Client/css/main.scss

@@ -0,0 +1,19 @@
+@import "./shared/layout.scss";
+@import "./shared/theme-colors.scss";
+@import "./shared/mixins.scss";
+@import "./shared/sumo-select.scss";
+@import "./shared/bootstraps-overrides.scss";
+@import "./shared/off-canvas.scss";
+@import "./shared/icons.scss";
+@import "./shared/codeline-navigation.scss";
+@import "./shared/codeline.scss";
+@import "./shared/comments.scss";
+@import "./pages/conversation.scss";
+@import "./pages/delete.scss";
+@import "./pages/index.scss";
+@import "./pages/legacy-review.scss";
+@import "./pages/profile.scss";
+@import "./pages/requested-reviews.scss";
+@import "./pages/review.scss";
+@import "./pages/revisions.scss";
+@import "./pages/samples.scss";

src/dotnet/APIView/APIViewWeb/Client/css/pages/conversation.scss

@@ -0,0 +1,13 @@
+@import "../shared/mixins.scss";
+
+#conversation-main-container {
+    @include fixed-page-heights;
+    color: var(--base-text-color);
+    padding-right: 0px;
+    padding-left: 0px;
+}
+
+.conversiation-center {
+    overflow: auto;
+    color: var(--base-text-color);
+}

src/dotnet/APIView/APIViewWeb/Client/css/pages/index.scss

@@ -0,0 +1,64 @@
+@import "../shared/mixins.scss";
+
+#create-review-button {
+    @include bottom-right-floating;
+    @include btn-circle;
+    @include btn-circle-xl;
+}
+
+#reviews-table {
+    td {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid var(--border-color);
+    }
+
+    thead th {
+        border-bottom: 2px solid var(--border-color);
+    }
+
+    tr:hover {
+        color: var(--base-text-color);
+    }
+
+    .cst-bdr-left {
+        border-left: 1px solid var(--border-color);
+    }
+
+    color: var(--base-text-color);
+}
+
+#reviews-table-container {
+    border: 1px solid var(--border-color);
+    box-shadow: var(--box-shadow-sm);
+    background-color: var(--base-fg-color);
+}
+
+#reviews-table-search-container {
+    width: 90%;
+}
+
+#reviews-table-search-box {
+    border: 1px solid var(--primary-color);
+}
+
+#index-main-container {
+    @include main-content-container;
+}
+
+#index-offcanvas-menu-content {
+    padding: 130px 60px 10px 20px;
+    min-height: calc(100vh - 40px);
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+}
+
+#index-offcanvas-menu-content > .input-group {
+    flex-wrap: unset;
+}
+
+.nav-cst-theme {
+    background-color: var(--base-bg-color);
+    box-shadow: var(--box-shadow-sm);
+}

src/dotnet/APIView/APIViewWeb/Client/css/pages/requested-reviews.scss

@@ -0,0 +1,2 @@
+body {
+}

src/dotnet/APIView/APIViewWeb/Client/css/pages/review.scss

@@ -0,0 +1,88 @@
+@import "../shared/mixins.scss";
+
+#review-info-bar > .SumoSelect {
+    width: 20%;
+}
+
+#revision-select ~ .optWrapper {
+    width: auto;
+    min-width: 250px;
+}
+
+#diff-select ~ .optWrapper {
+    width: auto;
+    min-width: 250px;
+}
+
+#revision-select {
+    width: 20%;
+}
+
+#diff-select {
+    width: 20%;
+}
+
+#review-left {
+    max-width: none;
+    min-width: 10px;
+    height: calc(100vh - 220px);
+    overflow: auto;
+    max-height: 100vh;
+    padding: 5px 0px 5px 10px;
+    background-color: var(--base-fg-color);
+}
+
+#review-main-container {
+    @include main-content-container;
+}
+
+#review-right {
+    max-width: 100%;
+    min-width: 100px;
+    height: calc(100vh - 220px);
+    padding: 0px;
+    overflow: auto;
+    background-color: var(--base-fg-color);
+    scroll-behavior: smooth;
+    contain: size layout paint;
+}
+
+#review-offcanvas-menu-content {
+    padding: 10px 20px 10px 20px;
+    min-height: calc(100vh - 190px);
+    max-height: calc(100vh - 190px);
+    overflow-y: auto;
+    margin-top: 150px;
+}
+
+.review-approved {
+    border: solid 2px var(--success-color);
+    box-shadow: var(--box-shadow-success);
+    border-radius: 3px;
+}
+
+.show-diffonly-switch, .show-documentation-switch {
+    color: var(--base-text-color) !important;
+}
+
+.gutter {
+    &:hover {
+        background-color: var(--base-fg-color);
+    }
+
+    &.gutter-horizontal {
+        cursor: col-resize;
+    }
+}
+
+.option-approved > label, .option-pending > label {
+    font-size: small;
+}
+
+.option-approved > label::after {
+    content: "";
+    font-family: "FontAwesome";
+    margin-left: 10px;
+    color: var(--success-color);
+    font-size: medium;
+}

src/dotnet/APIView/APIViewWeb/Client/css/pages/revisions.scss

@@ -0,0 +1,13 @@
+@import "../shared/mixins.scss";
+
+#add-revision-button {
+    @include bottom-right-floating;
+    @include btn-circle;
+    @include btn-circle-xl;
+}
+
+#revisions-main-container {
+    @include fixed-page-heights;
+    padding-right: 0px;
+    padding-left: 0px;
+}

src/dotnet/APIView/APIViewWeb/Client/css/pages/samples.scss

@@ -0,0 +1,36 @@
+@import "../shared/mixins.scss";
+
+#add-sample-button {
+    @include bottom-right-floating;
+    @include btn-circle;
+    @include btn-circle-xl;
+}
+
+#samples-main-container {
+    @include fixed-page-heights;
+    padding-right: 0px;
+    padding-left: 0px;
+}
+
+.samples-center {
+    overflow: auto;
+}
+
+.usage-sample + .border + .rounded {
+    margin-top: 15px !important;
+}
+
+.usage-sample .code-line {
+    padding: 0px;
+    margin: 0px;
+    font-size: 85%;
+    line-height: 10px;
+}
+
+.usage-sample .line-number {
+    font-size: 125%;
+}
+
+.usage-sample .internal {
+    display: inline-block;
+}