Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows merged PR #8320:
URL: https://github.com/apache/nifi/pull/8320


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1921862901

   > > 4. The error (red) color is very bright and jumps off the screen a bit 
too much IMO.
   > > 
   > > https://private-user-images.githubusercontent.com/713866/301533319-f0b30b73-6720-42d5-8d1d-4cbf2c0bf2ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTMzMzE5LWYwYjMwYjczLTY3MjAtNDJkNS04ZDFkLTRjYmYyYzBiZjJhZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MjVhZjEwNDMzYzM1ZWY4ODc0NWYzMTc0MTk0ODliNDE5MTY1MTExZWFjOTBmZTUxN2FkYTYxNTY5ZjUxOGI1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.UzBocogFPlRNSbTjlxLtIFzsNfeWPWEgq_LNKJRQ7y8;>
   > 
   > I pushed a fix for this. Let me know what you think.
   
   I like it more. Maybe a bit too muted, but i prefer it this way compared to 
the other. I won't hold up the PR for it. We can address these kinds of things 
later.
   
   > 
   > > 5. The text color in the Provenance graph is hard to read
   > > 
   > > https://private-user-images.githubusercontent.com/713866/301543574-e383275a-f12f-4b42-a5e3-c162983cbfe9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTQzNTc0LWUzODMyNzVhLWYxMmYtNGI0Mi1hNWUzLWMxNjI5ODNjYmZlOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT00YTZjZjg5MWZiYmQyMDc1NDM0Y2E5NWZlYTBiMjFiMGJhMTcwMDc1NmI2MGQxMTIyMGZjZjJhMjM0Mjg3YWQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.VqCrs-nBDdAF43UtKR_e0EzaNbAJZXFh67v86_gljOY;>
   > 
   > I pushed a fix for this too.
   
   Looks good now!
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474853232


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
 )
 );
 
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes 
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+// 50 -> 900 are the PRIMARY colors 
(mat.define-palette($material-primary-dark-palette, 300);) defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+50: rgb(30, 45, 54), // .context-menu
+100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also 
.global-menu:hover, .navigation-control-header:hover, 
.operation-control-header:hover, .new-canvas-item.icon.hovering, table 
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, 
.process-group-details-banner, remote-process-group-details-banner, 
.remote-process-group-last-refresh-rect,
+200: #30444d, // .processor-stats-border, .process-group-stats-border, 
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner, 
.a, button.nifi-button, button.nifi-button:disabled
+300: #3e5762, // .breadcrumb-container, .navigation-control, 
.operation-control, .flow-status, .controller-bulletins, 
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+400: #4d6b78, // Default hue for this palette (color="primary").
+500: #587a89, // .disabled, .not-transmitting, .splash, 
.access-policies-header, .operation-context-type, .bulletin-board-header, 
.counter-header, .stats-info, .active-thread-count-icon, .processor-type, 
.port-transmission-icon, .operation-context-type, .flow-status.fa, 
.flow-status.icon, .controller-bulletins, .prioritizers-list, 
.controller-services-header, .login-title, .parameter-context-header, 
.parameter-context-inheritance-list, .provenance-header, .flowfile-header, 
.queue-listing-header, .settings-header, .summary-header, .user-header, table 
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, 
.section-header,
+600: #718d9a, // .breadcrumb-container, .birdseye-brush
+700: #8aa2ad, // "darker" hue for this palette. Also 
#status-history-chart-container text, #status-history-chart-control-container 
text
+800: #abbcc5,
+900: #abbcc5,
+
+// A100 -> A700 are the ACCENT color 
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These 
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+// These colors are also used by some custom canvas components that 
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+A100: #2cd5d5, // .zero

Review Comment:
   I like it better  .



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


scottyaslan commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1921775225

   > Overall, this is AWESOME! Thanks @scottyaslan. I did find a handful of 
things that could be addressed, but I'm happy if we want to include those in 
some follow-up commit for dark-mode. Let me know what you think...
   > 
   > 1. The skeleton loaders might need some love. They flash pretty quick, but 
if you force them to stay on they are really bright.
   > 
   > https://private-user-images.githubusercontent.com/713866/301528553-da082f80-63e8-40b0-91c6-00c85ae0d796.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTI4NTUzLWRhMDgyZjgwLTYzZTgtNDBiMC05MWM2LTAwYzg1YWUwZDc5Ni5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kYTU1ZDQ2MzUwZGZhMTMxN2U0ZWM2MzA4ZDc5MzY3MTk3M2VjZWRkMGEwN2Q5NTI4ZThhNWRlZjBlMWE5MmE5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Tz7YXUlEpQV88Oe3nHU7cFOi3c5zVCRrVNs3bOpipYg;>
   
   https://issues.apache.org/jira/browse/NIFI-12720
   
   > 2. When a disabled button is directly on a really dark background it is 
hard to read. In most cases, we only have them on a slightly lighter background 
(dialogs) and it looks fine.
   > 
   > https://private-user-images.githubusercontent.com/713866/301530373-1422ecd1-65ff-4018-8b86-e05cb15578de.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTMwMzczLTE0MjJlY2QxLTY1ZmYtNDAxOC04Yjg2LWUwNWNiMTU1NzhkZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jOGE2M2YzMzdhYmNmZjI5ZGU4NzY3NzUxYmZhMDY3ZjRiYzRhN2YyNWYzZjYwNzAxNTA2MzhkYmRkNmI4NjcwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.l1ITR1LqfAcbsmmIPapv1o2Ne8Lk4nx1Jut_Tkudokg;>
 vs. https://private-user-images.githubusercon
 
tent.com/713866/301530877-360e7e1e-c03f-432a-bbd6-201fec4fad5d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTMwODc3LTM2MGU3ZTFlLWMwM2YtNDMyYS1iYmQ2LTIwMWZlYzRmYWQ1ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02ZTBjNmE1NzkwMmUyOTkwMzRlZDMxMWNiN2I1MmVkZDBkMjg3ZTgzMjNmZWE3ZjhiYTc4NTI2NzFmMzBkNTIzJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.b6WZaVNSAqI58lgt8j3UCSRTs6YS0_OSB--nRvg3tzc">
   
   https://issues.apache.org/jira/browse/NIFI-12721
   
   > 3. The tables are a bit hard on my eyes. Its not terrible, but it the text 
seems too bright, especially when bold. The outline is also bright. Icons in a 
selected row are hard to look at:
   > 
   > https://private-user-images.githubusercontent.com/713866/301532459-5b7a4d48-59a1-4726-b94e-11c6d04b8b72.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY4MDIzMzcsIm5iZiI6MTcwNjgwMjAzNywicGF0aCI6Ii83MTM4NjYvMzAxNTMyNDU5LTViN2E0ZDQ4LTU5YTEtNDcyNi1iOTRlLTExYzZkMDRiOGI3Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMjAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDIwMVQxNTQwMzdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05ZmQ4Y2E0YjFmMzQxZThjNTczMWZmOWE1MWQxY2VlMzE2ZTdjMmE1YTU2NTJjMzRiYjQzNWJkODY4NDNjNTZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.FSYlzBZe3e7zLM_3gIpPWM_12Qfj-ABVB2eHx-bPZoE;>
   
   https://issues.apache.org/jira/browse/NIFI-12722
   
   > 4. The error (red) color is very bright and jumps off the screen a bit too 
much IMO.
   > 
   >

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


scottyaslan commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474750822


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss:
##
@@ -33,20 +33,15 @@
 $canvas-primary-palette-A100: 
mat.get-color-from-palette($canvas-primary-palette, 'A100');
 $canvas-primary-palette-A700: 
mat.get-color-from-palette($canvas-primary-palette, 'A700');
 
-#status-history-chart-container,
-#status-history-chart-control-container {
+:host ::ng-deep #status-history-chart-container,
+:host ::ng-deep #status-history-chart-control-container {

Review Comment:
   fixed



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


scottyaslan commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474750138


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
 )
 );
 
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes 
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+// 50 -> 900 are the PRIMARY colors 
(mat.define-palette($material-primary-dark-palette, 300);) defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+50: rgb(30, 45, 54), // .context-menu
+100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also 
.global-menu:hover, .navigation-control-header:hover, 
.operation-control-header:hover, .new-canvas-item.icon.hovering, table 
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, 
.process-group-details-banner, remote-process-group-details-banner, 
.remote-process-group-last-refresh-rect,
+200: #30444d, // .processor-stats-border, .process-group-stats-border, 
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner, 
.a, button.nifi-button, button.nifi-button:disabled
+300: #3e5762, // .breadcrumb-container, .navigation-control, 
.operation-control, .flow-status, .controller-bulletins, 
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+400: #4d6b78, // Default hue for this palette (color="primary").
+500: #587a89, // .disabled, .not-transmitting, .splash, 
.access-policies-header, .operation-context-type, .bulletin-board-header, 
.counter-header, .stats-info, .active-thread-count-icon, .processor-type, 
.port-transmission-icon, .operation-context-type, .flow-status.fa, 
.flow-status.icon, .controller-bulletins, .prioritizers-list, 
.controller-services-header, .login-title, .parameter-context-header, 
.parameter-context-inheritance-list, .provenance-header, .flowfile-header, 
.queue-listing-header, .settings-header, .summary-header, .user-header, table 
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, 
.section-header,
+600: #718d9a, // .breadcrumb-container, .birdseye-brush
+700: #8aa2ad, // "darker" hue for this palette. Also 
#status-history-chart-container text, #status-history-chart-control-container 
text
+800: #abbcc5,
+900: #abbcc5,
+
+// A100 -> A700 are the ACCENT color 
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These 
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+// These colors are also used by some custom canvas components that 
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+A100: #2cd5d5, // .zero

Review Comment:
   @rfellows I pushed a commit for this. See what you think.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474731942


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
 )
 );
 
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes 
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+// 50 -> 900 are the PRIMARY colors 
(mat.define-palette($material-primary-dark-palette, 300);) defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+50: rgb(30, 45, 54), // .context-menu
+100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also 
.global-menu:hover, .navigation-control-header:hover, 
.operation-control-header:hover, .new-canvas-item.icon.hovering, table 
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, 
.process-group-details-banner, remote-process-group-details-banner, 
.remote-process-group-last-refresh-rect,
+200: #30444d, // .processor-stats-border, .process-group-stats-border, 
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner, 
.a, button.nifi-button, button.nifi-button:disabled
+300: #3e5762, // .breadcrumb-container, .navigation-control, 
.operation-control, .flow-status, .controller-bulletins, 
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+400: #4d6b78, // Default hue for this palette (color="primary").
+500: #587a89, // .disabled, .not-transmitting, .splash, 
.access-policies-header, .operation-context-type, .bulletin-board-header, 
.counter-header, .stats-info, .active-thread-count-icon, .processor-type, 
.port-transmission-icon, .operation-context-type, .flow-status.fa, 
.flow-status.icon, .controller-bulletins, .prioritizers-list, 
.controller-services-header, .login-title, .parameter-context-header, 
.parameter-context-inheritance-list, .provenance-header, .flowfile-header, 
.queue-listing-header, .settings-header, .summary-header, .user-header, table 
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, 
.section-header,
+600: #718d9a, // .breadcrumb-container, .birdseye-brush
+700: #8aa2ad, // "darker" hue for this palette. Also 
#status-history-chart-container text, #status-history-chart-control-container 
text
+800: #abbcc5,
+900: #abbcc5,
+
+// A100 -> A700 are the ACCENT color 
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These 
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+// These colors are also used by some custom canvas components that 
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+A100: #2cd5d5, // .zero

Review Comment:
   I think the red in light-mode is fine. muting the dark-mode colors would be 
good IMO.



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


scottyaslan commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474721812


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
 )
 );
 
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes 
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+// 50 -> 900 are the PRIMARY colors 
(mat.define-palette($material-primary-dark-palette, 300);) defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+50: rgb(30, 45, 54), // .context-menu
+100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also 
.global-menu:hover, .navigation-control-header:hover, 
.operation-control-header:hover, .new-canvas-item.icon.hovering, table 
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, 
.process-group-details-banner, remote-process-group-details-banner, 
.remote-process-group-last-refresh-rect,
+200: #30444d, // .processor-stats-border, .process-group-stats-border, 
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner, 
.a, button.nifi-button, button.nifi-button:disabled
+300: #3e5762, // .breadcrumb-container, .navigation-control, 
.operation-control, .flow-status, .controller-bulletins, 
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+400: #4d6b78, // Default hue for this palette (color="primary").
+500: #587a89, // .disabled, .not-transmitting, .splash, 
.access-policies-header, .operation-context-type, .bulletin-board-header, 
.counter-header, .stats-info, .active-thread-count-icon, .processor-type, 
.port-transmission-icon, .operation-context-type, .flow-status.fa, 
.flow-status.icon, .controller-bulletins, .prioritizers-list, 
.controller-services-header, .login-title, .parameter-context-header, 
.parameter-context-inheritance-list, .provenance-header, .flowfile-header, 
.queue-listing-header, .settings-header, .summary-header, .user-header, table 
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, 
.section-header,
+600: #718d9a, // .breadcrumb-container, .birdseye-brush
+700: #8aa2ad, // "darker" hue for this palette. Also 
#status-history-chart-container text, #status-history-chart-control-container 
text
+800: #abbcc5,
+900: #abbcc5,
+
+// A100 -> A700 are the ACCENT color 
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These 
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+// These colors are also used by some custom canvas components that 
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+A100: #2cd5d5, // .zero

Review Comment:
   This color is used for the .zero class. If we look around the code we see 
that is used for the flow status icons and the canvas component icons when 
their counts are '0'. The tricky part for these colors is that I think we need 
to better meet color contrast ratios especially in dark mode. I am open to 
suggestions on what we want this color to be. I think it kind of follows your 
comment above about the red stopped icon being too bright as well. Maybe we 
just need to mute these colors a bit in dark mode?
   
   Do you think the red stopped icon in light mode is too muted?
   
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on code in PR #8320:
URL: https://github.com/apache/nifi/pull/8320#discussion_r1474561240


##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/themes/nifi.scss:
##
@@ -65,6 +65,53 @@ $material-primary-light-palette: (
 )
 );
 
+// The $material-primary-dark-palette define the PRIMARY AND ACCENT palettes 
for all Angular Material components used throughout Apache NiFi
+$material-primary-dark-palette: (
+// 50 -> 900 are the PRIMARY colors 
(mat.define-palette($material-primary-dark-palette, 300);) defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+50: rgb(30, 45, 54), // .context-menu
+100: rgba(32, 47, 54, 1), // "lighter" hue for this palette. Also 
.global-menu:hover, .navigation-control-header:hover, 
.operation-control-header:hover, .new-canvas-item.icon.hovering, table 
tr:hover, .CodeMirror.blank, .remote-banner, .process-group-details-banner, 
.process-group-details-banner, remote-process-group-details-banner, 
.remote-process-group-last-refresh-rect,
+200: #30444d, // .processor-stats-border, .process-group-stats-border, 
.context-menu-item:hover, .process-group-banner, .remote-process-group-banner, 
.a, button.nifi-button, button.nifi-button:disabled
+300: #3e5762, // .breadcrumb-container, .navigation-control, 
.operation-control, .flow-status, .controller-bulletins, 
.component-button-grip, .search-container, .nifi-navigation, .CodeMirror.blank
+400: #4d6b78, // Default hue for this palette (color="primary").
+500: #587a89, // .disabled, .not-transmitting, .splash, 
.access-policies-header, .operation-context-type, .bulletin-board-header, 
.counter-header, .stats-info, .active-thread-count-icon, .processor-type, 
.port-transmission-icon, .operation-context-type, .flow-status.fa, 
.flow-status.icon, .controller-bulletins, .prioritizers-list, 
.controller-services-header, .login-title, .parameter-context-header, 
.parameter-context-inheritance-list, .provenance-header, .flowfile-header, 
.queue-listing-header, .settings-header, .summary-header, .user-header, table 
th, button.global-menu-item.fa, button.global-menu-item.icon, .event-header, 
.section-header,
+600: #718d9a, // .breadcrumb-container, .birdseye-brush
+700: #8aa2ad, // "darker" hue for this palette. Also 
#status-history-chart-container text, #status-history-chart-control-container 
text
+800: #abbcc5,
+900: #abbcc5,
+
+// A100 -> A700 are the ACCENT color 
(mat.define-palette($material-primary-dark-palette, A400, A100, A700);). These 
color are the ANALOGOUS (or possibly the TRIADIC??) colors as defined by 
https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
 for primary color #728e9b
+// These colors are also used by some custom canvas components that 
display the ANALOGOUS color for things like buttons, links, borders, info, etc.
+A100: #2cd5d5, // .zero

Review Comment:
   This color stands out a bit too much. In "light-mode" icons using this class 
are almost disabled looking. This bright blue/teal doesn't convey that same 
feeling. for start and stop it is ok, since those are green/red when non-zero 
so it is obvious the teal color isn't it, but the disabled and other icons it 
isn't as obvious by the coloring of the icon.
   https://github.com/apache/nifi/assets/713866/85036b8d-9f20-412f-9b92-c19a9a736d4c;>
   vs.
   https://github.com/apache/nifi/assets/713866/75c37e50-5d17-464b-8fe1-711487fd3cb2;>
   
   



##
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/_status-history.component-theme.scss:
##
@@ -33,20 +33,15 @@
 $canvas-primary-palette-A100: 
mat.get-color-from-palette($canvas-primary-palette, 'A100');
 $canvas-primary-palette-A700: 
mat.get-color-from-palette($canvas-primary-palette, 'A700');
 
-#status-history-chart-container,
-#status-history-chart-control-container {
+:host ::ng-deep #status-history-chart-container,
+:host ::ng-deep #status-history-chart-control-container {

Review Comment:
   Not sure if these are to blame or not, but the 2 charts in the status 
history component have different background colors.
   https://github.com/apache/nifi/assets/713866/7ded2ee1-5645-4bac-9868-df5e66e8a7f4;>
   



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


scottyaslan commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1921580141

   Thanks @joewitt and thanks @rfellows for the reviews! I have pushed a fix 
for the extension creation dialog input field styles. I also noticed that the 
canvas search input field was experiencing the same issue so I fixed it too. 
All other inputs LGTM ATM.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1921351175

   > When you drag a processor on the graph then start typing in a name to 
filter on the text is not visible when in dark mode.
   
   @scottyaslan this input in question isn't wrapped in a ``. 
Once we do that, the invisible text issue goes away.
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-02-01 Thread via GitHub 


rfellows commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1921282451

   reviewing...


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-01-31 Thread via GitHub 


joewitt commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1920203567

   happens whether purple theme is activated or not


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org

Re: [PR] [NIFI-12698] dark mode, [NIFI-12687] status history axis label fix [nifi]

2024-01-31 Thread via GitHub 


joewitt commented on PR #8320:
URL: https://github.com/apache/nifi/pull/8320#issuecomment-1920192095

   Very cool.
   
   When you drag a processor on the graph then start typing in a name to filter 
on the text is not visible when in dark mode.
   
   This is with the purple theme activated


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscr...@nifi.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org