mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-28 14:14:08 +00:00
Dark theme for Explorer (#2185)
* First dark theme commits for command bar * Updated theme on sidebar * Updated tabs, sidebar, splash screen * settings theme changes * Dark theme applied to Monaco editor * Dark theme to stored procedures * Fixed sidebar scroll * Updated scroll issue in sidebar * Command bar items fixed * Fixed lint errors * fixed lint errors * settings side panel fixed * Second last iteration for css * Fixed all the issues of css * Updated the theme icon for now on DE to change the theme from portal/DE itself * Formatting issue resolved * Remove CloudShellTerminalComponent changes - revert to master version * Fixed test issue * Fixed formatting issue * Fix tests: update snapshots and revert xterm imports for compatibility * Fix xterm imports in CloudShellTerminalComponent to use @xterm packages * Fix Cloud Shell component imports for compatibility * Update test snapshots * Fix xterm package consistency across all CloudShell components * Fix TypeScript compilation errors in CloudShell components and query Documents - Standardized xterm package imports across CloudShell components to use legacy 'xterm' package - Fixed Terminal type compatibility issues in CommonUtils.tsx - Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations - Applied code formatting to ensure consistency * Update failing snapshot tests - Updated TreeNodeComponent snapshot tests for loading states - Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000) - All snapshot tests now pass * Fixed test issue * Fixed test issue * Updated the buttons for theme * Updated the Theme changes based on portal theme changes * Updated review comments * Updated the duplicate code and fixed the fabric react error * Few places styling added and resolving few comments * Fixed errors * Fixed comments * Fixed comments * Fixed comments * Fixed full text policy issue for mongoru accounts * Resolved comments for class Name and few others * Added css for homepage in ru accounts * Final commit with all the feedback issues resolved * Lint error resolved * Updated the review comments and few Ui issues * Resolved review comments and changed header bg and active state color * Moved svg code to different file and imported * css fixed for the hpome page boxed for ru account * Lint errors * Fixed boxes issue in ru accounts * Handled the initial theme from the portal * Updated snap * Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests * Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation * Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component --------- Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
GitHub
@@ -4,7 +4,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
|
||||
color: var(--colorNeutralForeground2);
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
.panelMainContent {
|
||||
flex-grow: 1;
|
||||
padding: 0 34px;
|
||||
@@ -25,19 +26,31 @@
|
||||
margin: auto 0 auto @SmallSpace;
|
||||
cursor: default;
|
||||
vertical-align: middle;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.panelTextBold {
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.panelTextField {
|
||||
font-size: @mediumFontSize;
|
||||
border: 1px solid #605e5c;
|
||||
color: #000;
|
||||
border: 1px solid var(--colorNeutralStroke1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
background-color: var(--colorNeutralBackground2);
|
||||
padding: 4px 10px;
|
||||
width: @newCollectionPaneInputWidth;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--colorNeutralForeground3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--colorCompoundBrandStroke1);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.panelRadioBtn {
|
||||
@@ -47,6 +60,7 @@
|
||||
.panelRadioBtnLabel {
|
||||
font-size: @mediumFontSize;
|
||||
padding: 0 @LargeSpace 0 @SmallSpace;
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.panelSectionSpinner {
|
||||
@@ -55,6 +69,44 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.ms-Dropdown {
|
||||
.ms-Dropdown-title {
|
||||
background-color: var(--colorNeutralBackground2);
|
||||
border-color: var(--colorNeutralStroke1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
|
||||
.ms-Dropdown-caretDownWrapper {
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
}
|
||||
|
||||
.ms-Checkbox {
|
||||
.ms-Checkbox-label {
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
}
|
||||
|
||||
.ms-TextField {
|
||||
.ms-TextField-fieldGroup {
|
||||
background-color: var(--colorNeutralBackground2);
|
||||
border-color: var(--colorNeutralStroke1);
|
||||
}
|
||||
|
||||
.ms-TextField-field {
|
||||
background-color: var(--colorNeutralBackground2);
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
&::placeholder {
|
||||
color: var(--colorNeutralForeground3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ms-Text {
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@@ -67,13 +119,14 @@
|
||||
}
|
||||
|
||||
.panelHeader {
|
||||
color: @BaseDark;
|
||||
color: var(--colorNeutralForeground1);
|
||||
font-size: @largeFontSize;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.panelInfoErrorContainer {
|
||||
background-color: @BaseLow;
|
||||
background-color: var(--colorNeutralBackground3);
|
||||
color: var(--colorNeutralForeground1);
|
||||
padding: @DefaultSpace;
|
||||
display: inline-flex;
|
||||
margin: 20px 34px 0 34px;
|
||||
@@ -85,15 +138,15 @@
|
||||
}
|
||||
|
||||
.panelWarningIcon {
|
||||
color: @WarningIconColor;
|
||||
color: var(--colorPaletteYellowForeground1);
|
||||
}
|
||||
|
||||
.panelErrorIcon {
|
||||
color: @ErrorIconColor;
|
||||
color: var(--colorPaletteRedForeground1);
|
||||
}
|
||||
|
||||
.panelLargeInfoIcon {
|
||||
color: @InfoIconColor;
|
||||
color: var(--colorBrandForeground1);
|
||||
}
|
||||
|
||||
.panelWarningErrorDetailsLinkContainer {
|
||||
@@ -102,16 +155,22 @@
|
||||
padding-left: @MediumSpace;
|
||||
|
||||
.paneErrorLink {
|
||||
color: @LinkColor;
|
||||
color: var(--colorBrandForeground1);
|
||||
cursor: pointer;
|
||||
font-size: @mediumFontSize;
|
||||
}
|
||||
|
||||
.panelWarningErrorMessage {
|
||||
color: var(--colorNeutralForeground1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panelFooter {
|
||||
padding: 16px 34px;
|
||||
border-top: solid 1px #bbbbbb;
|
||||
border-top: solid 1px var(--colorNeutralStroke1);
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
color: var(--colorNeutralForeground1);
|
||||
|
||||
& button {
|
||||
height: 30px;
|
||||
@@ -133,7 +192,8 @@
|
||||
|
||||
.addRemoveIcon [alt="editEntity"]:focus,
|
||||
.addRemoveIconLabel [alt="editEntity"]:focus {
|
||||
border: 1px dashed #605e5c;
|
||||
border: 1px dashed var(--colorNeutralStroke1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.addNewParamStyle {
|
||||
@@ -175,7 +235,7 @@
|
||||
}
|
||||
|
||||
.removeIcon {
|
||||
color: @InfoIconColor;
|
||||
color: "var(--colorNeutralForeground1)";
|
||||
}
|
||||
|
||||
.backImageIcon {
|
||||
@@ -183,7 +243,8 @@
|
||||
}
|
||||
|
||||
[alt="back"]:focus {
|
||||
border: 1px solid #605e5c;
|
||||
border: 1px solid var(--colorCompoundBrandStroke1);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.addEntityDatePicker {
|
||||
@@ -203,5 +264,32 @@
|
||||
}
|
||||
|
||||
.panelSeparator::before {
|
||||
background-color: #edebe9;
|
||||
}
|
||||
background-color: var(--colorNeutralStroke1);
|
||||
}
|
||||
|
||||
.themed-panel {
|
||||
&.ms-Panel {
|
||||
.ms-Panel-main {
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
}
|
||||
|
||||
.ms-Panel-overlay {
|
||||
background-color: var(--overlayBackground);
|
||||
}
|
||||
|
||||
.ms-Panel-content {
|
||||
background-color: var(--colorNeutralBackground1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ms-Panel-root {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ms-Panel-overlay {
|
||||
background-color: var(--overlayBackground);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user