From 121c2e9f7ac551f47e2e28f9ddff02602ae4dffa Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 00:20:05 +0530 Subject: [PATCH 1/4] fix: update new project dialog colors to match darker theme Align all background colors in the new project dialog with the new darker sidebar theme. Update gamepad SVG colors for visibility on dark backgrounds. --- src/assets/new-project/assets/css/style.css | 40 +++++++++---------- .../new-project/images/video-game-gamepad.svg | 6 +-- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/assets/new-project/assets/css/style.css b/src/assets/new-project/assets/css/style.css index 1b16c0bfd0..7faa4bc126 100644 --- a/src/assets/new-project/assets/css/style.css +++ b/src/assets/new-project/assets/css/style.css @@ -30,7 +30,7 @@ body { } #download-phcode-banner { - background-color: #2e3031; + background-color: #1e1e1e; color: white; border-radius: 10px; margin-top: 26px; @@ -40,7 +40,7 @@ body { } #download-phcode-banner:hover { - background-color: #505357; + background-color: #333333; } p { @@ -87,7 +87,7 @@ img { } .side-nav { - background: #5D5F60; + background: #252525; height: 100vh; position: fixed; right: 0; @@ -134,7 +134,7 @@ img { outline: 0; height: 100%; overflow-y: auto; - background: #3C3F41; + background: #252525; box-shadow: -61px 0px 93px 8px rgb(0 0 0 / 51%); border-radius: 20px 0px 0px 20px; padding: 30px 50px; @@ -173,14 +173,14 @@ img { .modal-nav-tabs .nav-item.show .nav-link, .modal-nav-tabs .nav-link.active { color: #fff; - background-color: #2E3031; + background-color: #1e1e1e; border-color: #dee2e6 #dee2e6 #fff; border-bottom: 2px solid #016DC4 !important; } .ex-input input { - background: #555555; + background: #333333; border-radius: 4px; height: 46px; width: calc(100% - 20px); @@ -287,7 +287,7 @@ img { .ex-tabs .nav-item.show .nav-link, .ex-tabs .nav-link.active { color: #fff; - background-color: #2E3031; + background-color: #1e1e1e; border-color: #016DC4; } @@ -304,7 +304,7 @@ img { } .project-card { - background: #333535; + background: #2a2a2a; border-radius: 5px; padding: 20px 15px; height: 220px; @@ -314,11 +314,11 @@ img { } .project-card:hover { - background: #292b2b; + background: #1e1e1e; } .project-card-active { - background: #292b2b; + background: #1e1e1e; } .project-list { @@ -401,7 +401,7 @@ img { .btn-remove { width: 74px; height: 26px; - background: #3F3F3F; + background: #2a2a2a; border-radius: 3px; font-weight: 600; font-size: 12px; @@ -646,7 +646,7 @@ img { } .code-editor-card { - background: #3C3F41; + background: #252525; box-shadow: 0px 0px 93px rgba(0, 0, 0, 0.51); padding: 35px 50px; height: 100%; @@ -679,7 +679,7 @@ img { .close-btn { width: 35px; height: 35px; - background: #3F3F3F; + background: #2a2a2a; border: 1px solid #202020; border-radius: 4px; padding: 5px; @@ -754,7 +754,7 @@ img { .project-type-list li a.active { color: #fff; - background-color: #2E3031; + background-color: #1e1e1e; border-color: #016DC4; } @@ -769,14 +769,14 @@ img { } .recent-project-card { - background: #2E3031; + background: #1e1e1e; border-radius: 10px; max-height: 370px; padding: 20px 30px; } .no-project-card { - background: #2E3031; + background: #1e1e1e; border-radius: 10px; max-height: 370px; padding: 20px 30px; @@ -854,7 +854,7 @@ img { } .recent-project-list li:hover { - background: #3F3F3F; + background: #2a2a2a; cursor: pointer; } @@ -949,7 +949,7 @@ img { } .website-detail input { - background: #555555; + background: #333333; border: 1px solid transparent; border-radius: 2px; height: 48px; @@ -991,7 +991,7 @@ img { } .create-btn:disabled { - background: #555555; + background: #333333; cursor: unset; } @@ -1010,7 +1010,7 @@ img { } .preview-box { - background: #2E3031; + background: #1e1e1e; border-radius: 5px; width: 100%; height: 95%; diff --git a/src/assets/new-project/images/video-game-gamepad.svg b/src/assets/new-project/images/video-game-gamepad.svg index 564e395d8c..9a12beb0e2 100644 --- a/src/assets/new-project/images/video-game-gamepad.svg +++ b/src/assets/new-project/images/video-game-gamepad.svg @@ -2,8 +2,8 @@ .st0{fill:#4CAF50;} .st1{fill:#2196F3;} .st2{fill:#F44336;} - .st3{fill:#262626;} + .st3{fill:#505050;} .st4{fill:#FFD54F;} - .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#262626;} - .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;} + .st5{fill-rule:evenodd;clip-rule:evenodd;fill:#333333;} + .st6{fill-rule:evenodd;clip-rule:evenodd;fill:#aaaaaa;} ]]> \ No newline at end of file From b2f1881a790a2ce9a2bc85a2217e7f4bd7ee0579 Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 00:23:07 +0530 Subject: [PATCH 2/4] fix: soften body text color in new project dialog for less harsh contrast --- src/assets/new-project/assets/css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/assets/new-project/assets/css/style.css b/src/assets/new-project/assets/css/style.css index 7faa4bc126..682fa83dc1 100644 --- a/src/assets/new-project/assets/css/style.css +++ b/src/assets/new-project/assets/css/style.css @@ -20,6 +20,7 @@ body { overflow: hidden; background-color: #fff; height: 100%; + color: #cccccc; } .even-layout { From 7f973542f16c9e1e184fdf107b5a03b85e17f2d1 Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 00:28:29 +0530 Subject: [PATCH 3/4] fix: use CSS vars for text colors in new project dialog Add --text-heading and --text-body CSS vars for consistent, tunable text colors. Soften all heading text from #FFFFFF to #e0e0e0 to reduce harsh contrast on dark backgrounds. --- src/assets/new-project/assets/css/style.css | 58 +++++++++++---------- 1 file changed, 30 insertions(+), 28 deletions(-) diff --git a/src/assets/new-project/assets/css/style.css b/src/assets/new-project/assets/css/style.css index 682fa83dc1..143528270b 100644 --- a/src/assets/new-project/assets/css/style.css +++ b/src/assets/new-project/assets/css/style.css @@ -1,5 +1,7 @@ :root { --sansFontFamily: 'SourceSansPro', Helvetica, Arial, "Meiryo UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; + --text-heading: #e0e0e0; + --text-body: #cccccc; } /* SourceSansPro Regular */ @@ -20,7 +22,7 @@ body { overflow: hidden; background-color: #fff; height: 100%; - color: #cccccc; + color: var(--text-body); } .even-layout { @@ -32,7 +34,7 @@ body { #download-phcode-banner { background-color: #1e1e1e; - color: white; + color: var(--text-heading); border-radius: 10px; margin-top: 26px; cursor: pointer; @@ -84,7 +86,7 @@ img { color: #8A8A8A; } .recent-project-remove:hover { - color: white; + color: var(--text-heading); } .side-nav { @@ -173,7 +175,7 @@ img { } .modal-nav-tabs .nav-item.show .nav-link, .modal-nav-tabs .nav-link.active { - color: #fff; + color: var(--text-heading); background-color: #1e1e1e; border-color: #dee2e6 #dee2e6 #fff; border-bottom: 2px solid #016DC4 !important; @@ -218,7 +220,7 @@ img { font-size: 14px; line-height: 17px; text-align: center; - color: #FFFFFF; + color: var(--text-heading); padding: 10px; transition: all .6s ease-in-out; cursor: pointer; @@ -233,7 +235,7 @@ img { font-size: 16px; line-height: 19px; - color: #FFFFFF; + color: var(--text-heading); margin-bottom: 20px; } @@ -265,7 +267,7 @@ img { font-size: 13px; line-height: 14px; - color: #FFFFFF; + color: var(--text-heading); margin-top: 10px; display: block; opacity: 1; @@ -287,7 +289,7 @@ img { } .ex-tabs .nav-item.show .nav-link, .ex-tabs .nav-link.active { - color: #fff; + color: var(--text-heading); background-color: #1e1e1e; border-color: #016DC4; } @@ -337,7 +339,7 @@ img { font-size: 16px; line-height: 19px; - color: #FFFFFF; + color: var(--text-heading); margin-bottom: 3px; } @@ -394,7 +396,7 @@ img { font-weight: 600; font-size: 12px; line-height: 14px; - color: #FFFFFF; + color: var(--text-heading); border: none; cursor: pointer; } @@ -559,7 +561,7 @@ img { font-size: 13px; line-height: 16px; - color: #FFFFFF; + color: var(--text-heading); margin-right: 15px; display: block; } @@ -584,7 +586,7 @@ img { } .view-all select option { - color: #fff; + color: var(--text-heading); font-weight: 500; font-size: 16px; background: rgba(0, 0, 0, 1); @@ -624,12 +626,12 @@ img { .on-hover-text h6 { font-size: 12px; - color: #fff; + color: var(--text-heading); margin-bottom: 2px; } .review-star .fa { - color: #fff; + color: var(--text-heading); margin: 0px 1px; font-size: 15px; } @@ -666,7 +668,7 @@ img { font-size: 25px; line-height: 25px; text-align: left; - color: #FFFFFF; + color: var(--text-heading); margin-bottom: 10px; } @@ -689,7 +691,7 @@ img { line-height: 17px; text-align: center; cursor: pointer; - color: #FFFFFF; + color: var(--text-heading); transition: all .2s ease-in-out; } @@ -745,7 +747,7 @@ img { font-weight: 500; font-size: 13px; line-height: 14px; - color: #FFFFFF; + color: var(--text-heading); margin-top: 10px; display: block; opacity: 1; @@ -754,7 +756,7 @@ img { } .project-type-list li a.active { - color: #fff; + color: var(--text-heading); background-color: #1e1e1e; border-color: #016DC4; } @@ -818,7 +820,7 @@ img { font-weight: 600; font-size: 14px; line-height: 17px; - color: #FFFFFF; + color: var(--text-heading); text-align: center; } @@ -826,14 +828,14 @@ img { font-weight: 600; font-size: 14px; line-height: 17px; - color: #FFFFFF; + color: var(--text-heading); text-align: center; } .no-project-card span { font-size: 14px; line-height: 17px; - color: #FFFFFF; + color: var(--text-heading); } .project-content-right { @@ -844,7 +846,7 @@ img { font-weight: 500; font-size: 13px; line-height: 14px; - color: #FFFFFF; + color: var(--text-heading); } .recent-project-list li { @@ -896,7 +898,7 @@ img { font-weight: bold; font-size: 20px; line-height: 24px; - color: #FFFFFF; + color: var(--text-heading); } .back-btn { @@ -987,7 +989,7 @@ img { font-size: 14px; line-height: 17px; text-align: center; - color: #FFFFFF; + color: var(--text-heading); cursor: pointer; } @@ -1034,7 +1036,7 @@ img { font-weight: 600; font-size: 16px; line-height: 19px; - color: #FFFFFF; + color: var(--text-heading); } .full-screen-btn { @@ -1080,7 +1082,7 @@ img { line-height: 19px; margin-bottom: 0; - color: #FFFFFF; + color: var(--text-heading); } .lity-close-big { @@ -1134,7 +1136,7 @@ img { color: #333; } a:hover { - color: white; + color: var(--text-heading); } } .notification-ui-hidden { @@ -1186,7 +1188,7 @@ img { /* Links inside the dropdown */ .dropdown-content div { - color: white; + color: var(--text-heading); padding: 3px 5px; text-decoration: none; text-align: left; From cea4938ca09650c86a588631c7aba59266d1cc89 Mon Sep 17 00:00:00 2001 From: abose Date: Fri, 20 Mar 2026 01:02:56 +0530 Subject: [PATCH 4/4] feat: add woosh-to-target close/open animation for dialogs Add closeToElement parameter to showModalDialogUsingTemplate() that animates dialogs opening from and closing toward a target element. The new project dialog uses this to woosh to/from the #newProject button, replacing the old notification popup with a natural visual cue. - Remove _showNewProjectNotification() from guided-tour.js - Remove unused NEW_PROJECT_NOTIFICATION string and new_project.png - Add landing pulse animation on target element after close --- .../Phoenix/guided-tour.js | 26 ----- .../Phoenix/new-project.js | 2 +- src/nls/root/strings.js | 1 - src/styles/brackets_patterns_override.less | 12 +++ src/styles/images/new_project.png | Bin 2900 -> 0 bytes src/widgets/Dialogs.js | 101 +++++++++++++++++- 6 files changed, 110 insertions(+), 32 deletions(-) delete mode 100644 src/styles/images/new_project.png diff --git a/src/extensionsIntegrated/Phoenix/guided-tour.js b/src/extensionsIntegrated/Phoenix/guided-tour.js index cba969224b..d2ac70b8eb 100644 --- a/src/extensionsIntegrated/Phoenix/guided-tour.js +++ b/src/extensionsIntegrated/Phoenix/guided-tour.js @@ -89,31 +89,6 @@ define(function (require, exports, module) { editorContextMenu.on(Menus.EVENT_BEFORE_CONTEXT_MENU_OPEN, _showNotification); } - // 3. When user changes file by clicking on files panel, we show "click here to open new project window" - // Only shown once. - function _showNewProjectNotification() { - if(userAlreadyDidAction.newProjectShown){ - return; - } - if(currentlyShowingNotification){ - setTimeout(_showNewProjectNotification, NOTIFICATION_BACKOFF); - return; - } - userAlreadyDidAction.newProjectShown = true; - PhStore.setItem(GUIDED_TOUR_LOCAL_STORAGE_KEY, JSON.stringify(userAlreadyDidAction)); - Metrics.countEvent(Metrics.EVENT_TYPE.UI, "guide", "newProj"); - currentlyShowingNotification = NotificationUI.createFromTemplate( - Strings.START_PROJECT, Strings.NEW_PROJECT_NOTIFICATION, - "newProject", { - allowedPlacements: ['top', 'bottom'], - autoCloseTimeS: 15, - dismissOnClick: true} - ); - currentlyShowingNotification.done(()=>{ - currentlyShowingNotification = null; - }); - } - function _showFirstUseSurvey(surveyURL, delayOverride, title, useDialog) { let surveyVersion = 6; // increment this if you want to show this again if(userAlreadyDidAction.generalSurveyShownVersion === surveyVersion) { @@ -302,7 +277,6 @@ define(function (require, exports, module) { return; } tourStarted = true; - _showNewProjectNotification(); _showBeautifyNotification(); _showSurveys(); }; diff --git a/src/extensionsIntegrated/Phoenix/new-project.js b/src/extensionsIntegrated/Phoenix/new-project.js index 78859fa458..57838002d0 100644 --- a/src/extensionsIntegrated/Phoenix/new-project.js +++ b/src/extensionsIntegrated/Phoenix/new-project.js @@ -85,7 +85,7 @@ define(function (require, exports, module) { newProjectURL: `${window.Phoenix.baseURL}assets/new-project/code-editor.html` }; let dialogueContents = Mustache.render(newProjectTemplate, templateVars); - newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true); + newProjectDialogueObj = Dialogs.showModalDialogUsingTemplate(dialogueContents, true, "#newProject"); _focusContentWindow(); Metrics.countEvent(Metrics.EVENT_TYPE.NEW_PROJECT, "dialogue", "open"); return newProjectDialogueObj; diff --git a/src/nls/root/strings.js b/src/nls/root/strings.js index 421764934d..7e80380063 100644 --- a/src/nls/root/strings.js +++ b/src/nls/root/strings.js @@ -1336,7 +1336,6 @@ define({ "PREVIEW": "Preview", "BUILD_WEBSITE": "Build Website", "VIEW_MORE": "View More...", - "NEW_PROJECT_NOTIFICATION": "Click this icon to open the `Start Project` window again.
See Recent Projects, Open Folder or start projects from templates.
", "BEAUTIFY_CODE_NOTIFICATION": "Click here or press `{0}` to beautify code.
", "DEFAULT_PROJECT_NOTIFICATION": "Open the Default Project in {APP_NAME} to get started quickly (ideal as a scratch pad).

Or, open a folder from your computer with the Open Folder icon below.
ok", "DIRECTORY_REPLACE_MESSAGE": "The selected folder {0} is not empty. Are you sure you want to replace the folder contents with the project?", diff --git a/src/styles/brackets_patterns_override.less b/src/styles/brackets_patterns_override.less index b8ad1471a8..5e6085c579 100644 --- a/src/styles/brackets_patterns_override.less +++ b/src/styles/brackets_patterns_override.less @@ -1046,6 +1046,18 @@ a:focus { vertical-align: middle; } +@keyframes dialog-woosh-land-pulse { + 0% { transform: scale(1); } + 25% { transform: scale(1.5); } + 50% { transform: scale(0.9); } + 75% { transform: scale(1.15); } + 100% { transform: scale(1); } +} + +.dialog-woosh-land { + animation: dialog-woosh-land-pulse 600ms ease-in-out; +} + .modal { background-color: @bc-panel-bg; border: 1px solid @bc-panel-border; diff --git a/src/styles/images/new_project.png b/src/styles/images/new_project.png deleted file mode 100644 index 589701faab74fbfbc9662b6bbdc5f267554a0dfb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2900 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 yM$2D%fYI