Demo component updates

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor

@@ -12,7 +12,7 @@
                 </Tooltip>
             </div>
         </div>
-         <div class="highlight">
+        <div class="highlight border border-top-0">
              <pre>
                 <code class="@LanguageCode.ToLanguageCssClass()">
                     @if (snippet is not null)
@@ -27,7 +27,7 @@
 else if (!Tabs)
 {
     <div class="bd-example-snippet bd-code-snippet">
-        <div class="bb-example">
+        <div class="bb-example border">
             <DynamicComponent Type="this.Type"/>
         </div>
         <div class="d-flex align-items-center highlight-toolbar px-4 py-2 border border-top-0">
@@ -38,7 +38,7 @@ else if (!Tabs)
                 </Tooltip>
             </div>
         </div>
-        <div class="highlight">
+        <div class="highlight border border-top-0">
             <pre>
                 <code class="@LanguageCode.ToLanguageCssClass()">
                     @if (snippet is not null)
@@ -58,7 +58,7 @@ else // Tabs = true
                 <Icon Name="IconName.Display" Class="me-2" /><b>Example</b>
             </TitleTemplate>
             <Content>
-                <div class="bb-example border-top-0 mt-0">
+                <div class="bb-example border border-top-0 mt-0">
                     <DynamicComponent Type="this.Type"/>
                 </div>
             </Content>

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs

@@ -4,7 +4,7 @@ public partial class Demo : ComponentBase
 {
     #region Fields and Constants
 
-    private IconColor clipboardTooltipIconColor = IconColor.Dark;
+    private IconColor clipboardTooltipIconColor = IconColor.None;
 
     private IconName clipboardTooltipIconName = IconName.Clipboard;
 
@@ -92,7 +92,7 @@ public void ResetCopyStatusJS()
     {
         clipboardTooltipTitle = "Copy to clipboard";
         clipboardTooltipIconName = IconName.Clipboard;
-        clipboardTooltipIconColor = IconColor.Dark;
+        clipboardTooltipIconColor = IconColor.None;
 
         StateHasChanged();
     }

BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.css

@@ -1,4 +1,6 @@
 .highlight-toolbar {
-    color: #212529;
-    background-color: #f8f9fa;
+    /*color: #212529;*/
+    /*background-color: #f8f9fa;*/
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
 }

BlazorBootstrap.Demo.RCL/wwwroot/css/blazorbootstrap.demo.rcl.css

@@ -316,7 +316,8 @@ h1:focus-visible {
 .highlight {
     padding: 1rem;
     margin-bottom: 1rem;
-    background-color: #f8f9fa;
+    /*background-color: #f8f9fa;*/
+    background-color: var(--bs-body-bg);
     border: solid #dee2e6;
     border-width: 0 1px 1px 1px;
     border-bottom-left-radius: .25rem;

blazorbootstrap/wwwroot/blazor.bootstrap.css

@@ -51,8 +51,8 @@
     --bb-table-sticky-background-color: var(--bs-body-bg);
     --bb-table-freeze-column-background-color: var(--bs-body-bg);
     --bb-table-selected-row-color: #000;
-    --bb-table-selected-row-hover-color: #000;
     --bb-table-selected-row-background-color: rgba(0,0,0,0.075);
+    --bb-table-selected-row-hover-color: #000;
     --bb-table-selected-row-hover-background-color: rgba(0,0,0,0.075);
     /* enum filter */
     --bb-grid-filter-dropdown-max-height: 300px;