random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-24 04:04:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dark theme for Explorer (#2185)

Browse Source 
* 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
2025-12-16 12:21:58 +05:30
committed by GitHub
parent bc7e8a71ca
commit 2c31ec2a8d
100 changed files with 7344 additions and 1929 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/Explorer/SplashScreen/SplashScreen.less
View File

@@ -1,30 +1,5 @@
@import "../../../less/Common/Constants";
.splashScreenContainer {
width: 100%;
overflow-y: auto;
overflow-x: hidden;
.splashScreen {
.flex-display();
.flex-direction();
text-align: left;
margin: auto;
padding-left: 21px;
padding-right: 16px;
max-width: 1168px;
> .title {
position: relative; // To attach FeaturePanelLauncher as absolute
color: @BaseHigh;
font-size: 48px;
padding-left: 0px;
margin: 16px auto;
text-align: center;
}
> .subtitle {
color: @BaseHigh;
font-size: 18px;
padding-left: 0px;
margin: 0px auto;
@@ -45,149 +20,40 @@
width: 85% !important;
}
}
.legendContainer{
margin-left: 16px;
text-align: left;
.legend{
font-size: 18px;
font-size: 18px;
font-family: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
}
.newDescription {
font-size: 13px;
}
.legendColorBox{
width: 16px;
height: 16px;
margin-right: 8px;
border: 1px solid var(--colorNeutralStroke1);
}
}
.mainButton {
border: 1px solid var(--colorNeutralStroke1);
min-width: 124px;
max-width: 296px;
padding: 32px 16px;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
}
.mainButtonsContainer {
.flex-display();
text-align: center;
cursor: pointer;
margin: 40px auto;
width: 84%;
> .mainButton {
min-width: 124px;
max-width: 296px;
padding: 32px 16px;
background-color: @BaseLight;
border: 1px solid #949494;
box-sizing: border-box;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 4px;
> .legendContainer {
margin-left: 16px;
text-align: left;
.legend {
font-family: @SemiboldFont;
font-size: 18px;
}
.description {
font-size: 10px;
}
.newDescription {
font-size: 13px;
}
}
}
> :nth-child(n + 2) {
margin-left: 32px;
}
display: flex;
gap: 0 16px;
margin-bottom: 10px
}
.moreStuffContainer {
.flex-display();
justify-content: space-between;
.moreStuffColumn {
flex-grow: 1;
flex-basis: 0;
min-width: 124px;
max-width: 296px;
> .title {
font-size: 18px;
font-family: @SemiboldFont;
color: @BaseDark;
padding: 0px;
margin-bottom: 16px;
}
> ul {
list-style: none;
padding-left: 0px;
margin-bottom: 0px;
li {
padding: @DefaultSpace;
.flex-display();
align-items: flex-start;
> img {
margin-right: @DefaultSpace;
width: 24px;
height: 24px;
}
.oneLineContent {
margin-top: 4px;
}
.description {
font-size: 10px;
color: @BaseMediumHigh;
}
}
}
.tipContainer {
padding: 8px 16px;
width: 100%;
cursor: pointer;
.flex-display();
.flex-direction();
> .title {
color: @BaseDark;
padding: 0px;
font-size: 12px;
}
> .description {
color: @BaseDark;
}
&:not(:hover):not(:focus) {
background-color: @BaseLow;
}
}
&.commonTasks {
li {
cursor: pointer;
}
}
&.tipsContainer {
li {
margin: 2px 0px;
}
}
}
}
.focusable {
&:hover {
.hover();
}
&:focus {
.focus();
}
&:active {
.active();
}
}
.notebookSplashScreenItem {
padding: 12px 0 12px 12px;
.itemText {
margin-left: 12px;
font-family: @SemiboldFont;
}
}
}
}