From 8db11493a17d165ebbe9271c7bd7d33d386e3473 Mon Sep 17 00:00:00 2001
From: Sakshi Gupta <sakshig@microsoft.com>
Date: Thu, 28 Aug 2025 12:09:58 +0530
Subject: [PATCH] updated scroll issue in sidebar

---
 src/Explorer/Panes/PanelComponent.less | 252 ++++++++++++++++++++++++-
 1 file changed, 242 insertions(+), 10 deletions(-)

diff --git a/src/Explorer/Panes/PanelComponent.less b/src/Explorer/Panes/PanelComponent.less
index 998201a09..e52a8c947 100644
--- a/src/Explorer/Panes/PanelComponent.less
+++ b/src/Explorer/Panes/PanelComponent.less
@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: column;
   min-height: 100%;
+  background-color: var(--colorNeutralBackground1, @BaseLight);
+  color: var(--colorNeutralForeground1, @BaseHigh);
 
   .panelMainContent {
     flex-grow: 1;
@@ -25,19 +27,31 @@
       margin: auto 0 auto @SmallSpace;
       cursor: default;
       vertical-align: middle;
+      color: var(--colorNeutralForeground1, @BaseHigh);
     }
 
     .panelTextBold {
       font-weight: 600;
       line-height: 20px;
+      color: var(--colorNeutralForeground1, @BaseHigh);
     }
 
     .panelTextField {
       font-size: @mediumFontSize;
-      border: 1px solid #605e5c;
-      color: #000;
+      border: 1px solid var(--colorNeutralStroke1, #605e5c);
+      color: var(--colorNeutralForeground1, @BaseHigh);
+      background-color: var(--colorNeutralBackground2, @BaseLight);
       padding: 4px 10px;
       width: @newCollectionPaneInputWidth;
+
+      &::placeholder {
+        color: var(--colorNeutralForeground3, @BaseMediumHigh);
+      }
+
+      &:focus {
+        border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
+        outline: none;
+      }
     }
 
     .panelRadioBtn {
@@ -47,6 +61,7 @@
     .panelRadioBtnLabel {
       font-size: @mediumFontSize;
       padding: 0 @LargeSpace 0 @SmallSpace;
+      color: var(--colorNeutralForeground1, @BaseHigh);
     }
 
     .panelSectionSpinner {
@@ -55,17 +70,61 @@
       left: 50%;
       transform: translate(-50%, -50%);
     }
+
+    // Override Fluent UI component styles to use theme variables
+    .ms-Dropdown {
+      .ms-Dropdown-title {
+        background-color: var(--colorNeutralBackground2, @BaseLight);
+        border-color: var(--colorNeutralStroke1, #605e5c);
+        color: var(--colorNeutralForeground1, @BaseHigh);
+      }
+
+      .ms-Dropdown-caretDownWrapper {
+        color: var(--colorNeutralForeground1, @BaseHigh);
+      }
+    }
+
+    .ms-Checkbox {
+      .ms-Checkbox-label {
+        color: var(--colorNeutralForeground1, @BaseHigh);
+      }
+    }
+
+    .ms-TextField {
+      .ms-TextField-fieldGroup {
+        background-color: var(--colorNeutralBackground2, @BaseLight);
+        border-color: var(--colorNeutralStroke1, #605e5c);
+      }
+
+      .ms-TextField-field {
+        background-color: var(--colorNeutralBackground2, @BaseLight);
+        color: var(--colorNeutralForeground1, @BaseHigh);
+
+        &::placeholder {
+          color: var(--colorNeutralForeground3, @BaseMediumHigh);
+        }
+      }
+    }
+
+    .ms-Text {
+      color: var(--colorNeutralForeground1, @BaseHigh);
+    }
+
+    span, label {
+      color: var(--colorNeutralForeground1, @BaseHigh);
+    }
   }
 }
 
 .panelHeader {
-  color: @BaseDark;
+  color: var(--colorNeutralForeground1, @BaseDark);
   font-size: @largeFontSize;
   font-weight: 400;
 }
 
 .panelInfoErrorContainer {
-  background-color: @BaseLow;
+  background-color: var(--colorNeutralBackground3, @BaseLow);
+  color: var(--colorNeutralForeground1, @BaseHigh);
   padding: @DefaultSpace;
   display: inline-flex;
   margin: 20px 34px 0 34px;
@@ -77,15 +136,15 @@
   }
 
   .panelWarningIcon {
-    color: @WarningIconColor;
+    color: var(--colorPaletteYellowForeground1, @WarningIconColor);
   }
 
   .panelErrorIcon {
-    color: @ErrorIconColor;
+    color: var(--colorPaletteRedForeground1, @ErrorIconColor);
   }
 
   .panelLargeInfoIcon {
-    color: @InfoIconColor;
+    color: var(--colorBrandForeground1, @InfoIconColor);
   }
 
   .panelWarningErrorDetailsLinkContainer {
@@ -94,16 +153,22 @@
     padding-left: @MediumSpace;
 
     .paneErrorLink {
-      color: @LinkColor;
+      color: var(--colorBrandForeground1, @LinkColor);
       cursor: pointer;
       font-size: @mediumFontSize;
     }
+
+    .panelWarningErrorMessage {
+      color: var(--colorNeutralForeground1, @BaseHigh);
+    }
   }
 }
 
 .panelFooter {
   padding: 16px 34px;
-  border-top: solid 1px #bbbbbb;
+  border-top: solid 1px var(--colorNeutralStroke1, #bbbbbb);
+  background-color: var(--colorNeutralBackground1, @BaseLight);
+  color: var(--colorNeutralForeground1, @BaseHigh);
 
   & button {
     height: 30px;
@@ -178,5 +243,172 @@
   margin: 20px 0px 0px 0px;
 }
 .panelSeparator::before {
-  background-color: #edebe9;
+  background-color: var(--colorNeutralStroke1, #edebe9);
 }
+
+// Override mandatory star color using theme variables
+.mandatoryStar {
+  color: var(--colorPaletteRedForeground1, #d13438) !important;
+}
+
+// Override Fluent UI Panel component to use theme variables consistently
+.ms-Panel {
+  background-color: var(--colorNeutralBackground1, @BaseLight);
+  color: var(--colorNeutralForeground1, @BaseHigh);
+
+  .ms-Panel-main {
+    background-color: var(--colorNeutralBackground1, @BaseLight);
+  }
+
+  .ms-Panel-contentInner {
+    background-color: var(--colorNeutralBackground1, @BaseLight);
+  }
+
+  .ms-Panel-header {
+    background-color: var(--colorNeutralBackground1, @BaseLight);
+    color: var(--colorNeutralForeground1, @BaseHigh);
+  }
+
+  .ms-Panel-headerText {
+    color: var(--colorNeutralForeground1, @BaseHigh);
+  }
+
+  .ms-Panel-closeButton {
+    color: var(--colorNeutralForeground1, @BaseHigh);
+
+    &:hover {
+      background-color: var(--colorNeutralBackground1Hover, @BaseLow);
+    }
+  }
+}
+
+// Dark theme overrides when body has isDarkMode class
+body.isDarkMode {
+  .panelFormWrapper {
+    background-color: var(--colorNeutralBackground1, #1e1e1e);
+    color: var(--colorNeutralForeground1, #ffffff);
+
+    .panelMainContent {
+      .panelInfoIcon {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+
+      .panelTextBold {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+
+      .panelTextField {
+        border: 1px solid var(--colorNeutralStroke1, #484848);
+        color: var(--colorNeutralForeground1, #ffffff);
+        background-color: var(--colorNeutralBackground2, #2d2d2d);
+
+        &::placeholder {
+          color: var(--colorNeutralForeground3, #a0a0a0);
+        }
+
+        &:focus {
+          border-color: var(--colorCompoundBrandStroke1, #4db6e8);
+        }
+      }
+
+      .panelRadioBtnLabel {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+
+      // Dark theme Fluent UI component overrides
+      .ms-Dropdown {
+        .ms-Dropdown-title {
+          background-color: var(--colorNeutralBackground2, #2d2d2d);
+          border-color: var(--colorNeutralStroke1, #484848);
+          color: var(--colorNeutralForeground1, #ffffff);
+        }
+
+        .ms-Dropdown-caretDownWrapper {
+          color: var(--colorNeutralForeground1, #ffffff);
+        }
+      }
+
+      .ms-Checkbox {
+        .ms-Checkbox-label {
+          color: var(--colorNeutralForeground1, #ffffff);
+        }
+      }
+
+      .ms-TextField {
+        .ms-TextField-fieldGroup {
+          background-color: var(--colorNeutralBackground2, #2d2d2d);
+          border-color: var(--colorNeutralStroke1, #484848);
+        }
+
+        .ms-TextField-field {
+          background-color: var(--colorNeutralBackground2, #2d2d2d);
+          color: var(--colorNeutralForeground1, #ffffff);
+
+          &::placeholder {
+            color: var(--colorNeutralForeground3, #a0a0a0);
+          }
+        }
+      }
+
+      .ms-Text {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+
+      span, label {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+    }
+  }
+
+  .panelHeader {
+    color: var(--colorNeutralForeground1, #ffffff);
+  }
+
+  .panelInfoErrorContainer {
+    background-color: var(--colorNeutralBackground3, #404040);
+    color: var(--colorNeutralForeground1, #ffffff);
+
+    .panelWarningErrorDetailsLinkContainer {
+      .panelWarningErrorMessage {
+        color: var(--colorNeutralForeground1, #ffffff);
+      }
+    }
+  }
+
+  .panelFooter {
+    background-color: var(--colorNeutralBackground1, #1e1e1e);
+    color: var(--colorNeutralForeground1, #ffffff);
+    border-top: solid 1px var(--colorNeutralStroke1, #484848);
+  }
+
+  // Dark theme Panel component overrides
+  .ms-Panel {
+    background-color: var(--colorNeutralBackground1, #1e1e1e);
+    color: var(--colorNeutralForeground1, #ffffff);
+
+    .ms-Panel-main {
+      background-color: var(--colorNeutralBackground1, #1e1e1e);
+    }
+
+    .ms-Panel-contentInner {
+      background-color: var(--colorNeutralBackground1, #1e1e1e);
+    }
+
+    .ms-Panel-header {
+      background-color: var(--colorNeutralBackground1, #1e1e1e);
+      color: var(--colorNeutralForeground1, #ffffff);
+    }
+
+    .ms-Panel-headerText {
+      color: var(--colorNeutralForeground1, #ffffff);
+    }
+
+    .ms-Panel-closeButton {
+      color: var(--colorNeutralForeground1, #ffffff);
+
+      &:hover {
+        background-color: var(--colorNeutralBackground1Hover, #404040);
+      }
+    }
+  }
+}
\ No newline at end of file