Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows merged PR #8294: URL: https://github.com/apache/nifi/pull/8294 -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1471257727 ## 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: ## @@ -0,0 +1,63 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { +// Get the color config from the theme. +$color-config: mat.get-color-config($material-theme); +$canvas-color-config: mat.get-color-config($canvas-theme); + +// Get the color palette from the color-config. +$primary-palette: map.get($color-config, 'primary'); +$canvas-primary-palette: map.get($canvas-color-config, 'primary'); + +// Get hues from palette +$primary-palette-700: mat.get-color-from-palette($primary-palette, 700); +$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); +$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 { +background-color: $canvas-primary-palette-900; + +.axis path, +.axis line { +fill: none; +stroke: $canvas-primary-palette-A100; Review Comment: Let's just come back to this in the future. This PR is too big to keep rebasing over and over. -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1471227264 ## 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: ## @@ -0,0 +1,63 @@ +/*! + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($material-theme, $canvas-theme) { +// Get the color config from the theme. +$color-config: mat.get-color-config($material-theme); +$canvas-color-config: mat.get-color-config($canvas-theme); + +// Get the color palette from the color-config. +$primary-palette: map.get($color-config, 'primary'); +$canvas-primary-palette: map.get($canvas-color-config, 'primary'); + +// Get hues from palette +$primary-palette-700: mat.get-color-from-palette($primary-palette, 700); +$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); +$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 { +background-color: $canvas-primary-palette-900; + +.axis path, +.axis line { +fill: none; +stroke: $canvas-primary-palette-A100; Review Comment: This translates into a transparent stroke for the chart axis lines (invisible). New UI, no x or y axis: https://github.com/apache/nifi/assets/713866/05fd832e-5051-458c-b0b5-0149dd203944";> Old UI, both x and y axis https://github.com/apache/nifi/assets/713866/c3dd91cd-d1e3-4435-a061-c942d908db97";> -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on PR #8294: URL: https://github.com/apache/nifi/pull/8294#issuecomment-1915986287 > Create Process Group dialog isn't right. Its inlined, the form elements should be on separate lines: https://private-user-images.githubusercontent.com/713866/300623646-89d83559-a08c-4308-9329-44843b0fe492.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDY1NzEwOTgsIm5iZiI6MTcwNjU3MDc5OCwicGF0aCI6Ii83MTM4NjYvMzAwNjIzNjQ2LTg5ZDgzNTU5LWEwOGMtNDMwOC05MzI5LTQ0ODQzYjBmZTQ5Mi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwMTI5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDEyOVQyMzI2MzhaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1mYjVhMGMwYzczODFjYTE3ZmQzOTA1ZTEyNGQxNWQwMjE5Yzc1NWI2MTFhN2U0NjYwNTMzNTAwNjY2YmFjOTg4JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.yZ6Uc5r7P9-IUj7T-tAesoGch9BEnbTjTKCWm7Jbej8";> This is fixed in my latest commit. -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1470525304 ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss: ## @@ -122,341 +169,332 @@ $appFontPath: '~roboto-fontface/fonts'; @tailwind components; @tailwind utilities; -$nifi-primary-palette: ( -50: #eef1f3, -100: #d5dde1, -200: #b9c7cd, -300: #9cb0b9, -400: #879faa, -500: #728e9b, -600: #6a8693, -700: #5f7b89, -800: #55717f, -900: #425f6d, -A100: #c7ecff, -A200: #94daff, -A400: #61c9ff, -A700: #47c0ff, -contrast: ( -50: #00, -100: #00, -200: #00, -300: #00, -400: #00, -500: #00, -600: #ff, -700: #ff, -800: #ff, -900: #ff, -A100: #00, -A200: #00, -A400: #00, -A700: #00 -) -); - -$nifi-accent-palette: ( -50: #fcfcfd, -100: #f7f8f9, -200: #f1f4f5, -300: #ebeff1, -400: #e7ebee, -500: #e3e8eb, -600: #e0e5e9, -700: #dce2e5, -800: #d8dee2, -900: #d0d8dd, -A100: #ff, -A200: #ff, -A400: #ff, -A700: #ff, -contrast: ( -50: #00, -100: #00, -200: #00, -300: #00, -400: #00, -500: #00, -600: #00, -700: #00, -800: #00, -900: #00, -A100: #00, -A200: #00, -A400: #00, -A700: #00 -) -); - -// Define the palettes for your theme using the Material Design palettes available in palette.scss -// (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://material.io/design/color/ -$nifi-primary: mat.define-palette($nifi-primary-palette); -$nifi-accent: mat.define-palette($nifi-accent-palette); - -//#728e9b -//#aabbc3 -//#e3e8eb - -// The warn palette is optional (defaults to red). -$nifi-warn: mat.define-palette(mat.$red-palette); - -// Create the theme object. A theme consists of configurations for individual -// theming systems such as "color" or "typography". -$nifi-theme: mat.define-light-theme( -( -color: ( -primary: $nifi-primary, -accent: $nifi-accent, -warn: $nifi-warn -), -//typography: mat.define-typography-config(), -density: -3 -) -); - -// Include theme styles for core and each component used in your app. -// Alternatively, you can import and @include the theme mixins for each component -// that you are using. -@include mat.all-component-themes($nifi-theme); - -/* You can add global styles to this file, and also import other style files */ - -html, -body { -height: 100%; -} - -body { -margin: 0; -//font-family: Roboto, 'Helvetica Neue', sans-serif; -} - -a { -font-size: 13px; -cursor: pointer; -color: #004849; -font-weight: normal; -display: inline-block; -font-family: Roboto; -text-decoration: underline; -text-decoration-color: #ccdadb; -text-underline-offset: 3px; -} +//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... +@mixin theme($material-theme, $canvas-theme) { +// Get the color config from the theme. +$color-config: mat.get-color-config($material-theme); +$canvas-color-config: mat.get-color-config($canvas-theme); + +// Get the color palette from the color-config. +$primary-palette: map.get($color-config, 'primary'); +$accent-palette: map.get($color-config, 'accent'); +$warn-palette: map.get($color-config, 'warn'); +$canvas-primary-palette: map.get($canvas-color-config, 'primary'); + +// Get hues from palette +$primary-palette-50: mat.get-color-from-palette($primary-palette, 50); +$primary-palette-200: mat.get-color-from-palette($primary-palette, 200); +$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); +$primary-palette-A100: mat.get-color-from-palette($primary-palette, 'A100'); +$primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200'); +$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); +$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); +$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); +$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); +$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); +$accent-palette-200: mat.get-color-from-palette($accent-palette, 200); +$accent-palette-400: mat.get-color-from-palette($accent-palette, 400); +$accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1470330696 ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/styles.scss: ## @@ -122,341 +169,332 @@ $appFontPath: '~roboto-fontface/fonts'; @tailwind components; @tailwind utilities; -$nifi-primary-palette: ( -50: #eef1f3, -100: #d5dde1, -200: #b9c7cd, -300: #9cb0b9, -400: #879faa, -500: #728e9b, -600: #6a8693, -700: #5f7b89, -800: #55717f, -900: #425f6d, -A100: #c7ecff, -A200: #94daff, -A400: #61c9ff, -A700: #47c0ff, -contrast: ( -50: #00, -100: #00, -200: #00, -300: #00, -400: #00, -500: #00, -600: #ff, -700: #ff, -800: #ff, -900: #ff, -A100: #00, -A200: #00, -A400: #00, -A700: #00 -) -); - -$nifi-accent-palette: ( -50: #fcfcfd, -100: #f7f8f9, -200: #f1f4f5, -300: #ebeff1, -400: #e7ebee, -500: #e3e8eb, -600: #e0e5e9, -700: #dce2e5, -800: #d8dee2, -900: #d0d8dd, -A100: #ff, -A200: #ff, -A400: #ff, -A700: #ff, -contrast: ( -50: #00, -100: #00, -200: #00, -300: #00, -400: #00, -500: #00, -600: #00, -700: #00, -800: #00, -900: #00, -A100: #00, -A200: #00, -A400: #00, -A700: #00 -) -); - -// Define the palettes for your theme using the Material Design palettes available in palette.scss -// (imported above). For each palette, you can optionally specify a default, lighter, and darker -// hue. Available color palettes: https://material.io/design/color/ -$nifi-primary: mat.define-palette($nifi-primary-palette); -$nifi-accent: mat.define-palette($nifi-accent-palette); - -//#728e9b -//#aabbc3 -//#e3e8eb - -// The warn palette is optional (defaults to red). -$nifi-warn: mat.define-palette(mat.$red-palette); - -// Create the theme object. A theme consists of configurations for individual -// theming systems such as "color" or "typography". -$nifi-theme: mat.define-light-theme( -( -color: ( -primary: $nifi-primary, -accent: $nifi-accent, -warn: $nifi-warn -), -//typography: mat.define-typography-config(), -density: -3 -) -); - -// Include theme styles for core and each component used in your app. -// Alternatively, you can import and @include the theme mixins for each component -// that you are using. -@include mat.all-component-themes($nifi-theme); - -/* You can add global styles to this file, and also import other style files */ - -html, -body { -height: 100%; -} - -body { -margin: 0; -//font-family: Roboto, 'Helvetica Neue', sans-serif; -} - -a { -font-size: 13px; -cursor: pointer; -color: #004849; -font-weight: normal; -display: inline-block; -font-family: Roboto; -text-decoration: underline; -text-decoration-color: #ccdadb; -text-underline-offset: 3px; -} +//General status styles. TODO - Reconsider this... separating canvas/style styles from html styles... +@mixin theme($material-theme, $canvas-theme) { +// Get the color config from the theme. +$color-config: mat.get-color-config($material-theme); +$canvas-color-config: mat.get-color-config($canvas-theme); + +// Get the color palette from the color-config. +$primary-palette: map.get($color-config, 'primary'); +$accent-palette: map.get($color-config, 'accent'); +$warn-palette: map.get($color-config, 'warn'); +$canvas-primary-palette: map.get($canvas-color-config, 'primary'); + +// Get hues from palette +$primary-palette-50: mat.get-color-from-palette($primary-palette, 50); +$primary-palette-200: mat.get-color-from-palette($primary-palette, 200); +$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); +$primary-palette-A100: mat.get-color-from-palette($primary-palette, 'A100'); +$primary-palette-A200: mat.get-color-from-palette($primary-palette, 'A200'); +$primary-palette-A400: mat.get-color-from-palette($primary-palette, 'A400'); +$canvas-primary-palette-50: mat.get-color-from-palette($canvas-primary-palette, 50); +$canvas-primary-palette-200: mat.get-color-from-palette($canvas-primary-palette, 200); +$canvas-primary-palette-400: mat.get-color-from-palette($canvas-primary-palette, 400); +$canvas-primary-palette-900: mat.get-color-from-palette($canvas-primary-palette, 900); +$accent-palette-200: mat.get-color-from-palette($accent-palette, 200); +$accent-palette-400: mat.get-color-from-palette($accent-palette, 400); +$accent-palette-A200: mat.get-color-from-palette($accent-palette, 'A200
Re: [PR] [NIFI-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1470034592 ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts: ## @@ -669,20 +669,20 @@ export class ProcessorManager { // update the run status updated .select('text.run-status-icon') -.attr('fill', function (d: any) { -let fill: string = '#728e9b'; +.attr('class', function (d: any) { +let clazz: string = 'primary-500'; if (d.status.aggregateSnapshot.runStatus === 'Validating') { -fill = '#a8a8a8'; +clazz = 'warn-contrast-300'; } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') { -fill = '#cf9f5d'; +clazz = 'accent-A200'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { -fill = '#7dc7a0'; +clazz = 'accent-200'; } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { -fill = '#d18686'; +clazz = 'warn-200'; } -return fill; +return clazz; Review Comment: Great catch! I have updated these in my latest commit. Thanks! -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1466795410 ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/process-group-manager.service.ts: ## @@ -1075,22 +1075,22 @@ export class ProcessGroupManager { const versionControl = processGroup .select('text.version-control') .style('visibility', self.isUnderVersionControl(processGroupData) ? 'visible' : 'hidden') -.style('fill', function () { +.style('class', function () { Review Comment: i think you intended this to be ```suggestion .attr('class', function () { ``` however, when doing that, it would wipe out the `version-control` class on the same element (used when determining the selection on line 1076. Might need to return both with this approach or find a way to concat with the existing class(es) ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/service/manager/processor-manager.service.ts: ## @@ -669,20 +669,20 @@ export class ProcessorManager { // update the run status updated .select('text.run-status-icon') -.attr('fill', function (d: any) { -let fill: string = '#728e9b'; +.attr('class', function (d: any) { +let clazz: string = 'primary-500'; if (d.status.aggregateSnapshot.runStatus === 'Validating') { -fill = '#a8a8a8'; +clazz = 'warn-contrast-300'; } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') { -fill = '#cf9f5d'; +clazz = 'accent-A200'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { -fill = '#7dc7a0'; +clazz = 'accent-200'; } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { -fill = '#d18686'; +clazz = 'warn-200'; } -return fill; +return clazz; Review Comment: I think this is overwriting the `run-status-icon` class already on this element. It seems to be preventing the icon from updating when the processor is started/stopped. Ports have the same issue. probably want something like: ``` .attr('class', function (d: any) { let clazz: string = 'primary-500'; if (d.status.aggregateSnapshot.runStatus === 'Validating') { clazz = 'warn-contrast-300'; } else if (d.status.aggregateSnapshot.runStatus === 'Invalid') { clazz = 'accent-A200'; } else if (d.status.aggregateSnapshot.runStatus === 'Running') { clazz = 'accent-200'; } else if (d.status.aggregateSnapshot.runStatus === 'Stopped') { clazz = 'warn-200'; } return `run-status-icon ${clazz}`; }) ``` -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
scottyaslan commented on PR #8294: URL: https://github.com/apache/nifi/pull/8294#issuecomment-1910695264 > Looks pretty good to me. Left a couple of comments inline. The only thing that really stands out to me but I didn't understand how it all works to really comment inline... the text on primary buttons is too dark IMO. Makes the text hard to read. Can we customize the text color in those scenarios? Let me take a look and see what else we can do here... -- 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-12655] theme NiFi following Material Design spec and leveraging Angular Material themes [nifi]
rfellows commented on code in PR #8294: URL: https://github.com/apache/nifi/pull/8294#discussion_r1465526272 ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/header/flow-status/_flow-status.component-theme.scss: ## @@ -0,0 +1,70 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +@use 'sass:map'; +@use '@angular/material' as mat; + +@mixin theme($theme) { +// Get the color config from the theme. +$color-config: mat.get-color-config($theme); + +// Get the color palette from the color-config. +$primary-palette: map.get($color-config, 'primary'); +$accent-palette: map.get($color-config, 'accent'); +$warn-palette: map.get($color-config, 'warn'); + +// Get hues from palette +$primary-palette-300: mat.get-color-from-palette($primary-palette, 300); +$primary-palette-500: mat.get-color-from-palette($primary-palette, 500); +$primary-palette-contrast-900: mat.get-color-from-palette($primary-palette, '900-contrast'); +$accent-palette-400: mat.get-color-from-palette($accent-palette, 400); +$warn-palette-A400: mat.get-color-from-palette($warn-palette, 'A400'); + +.flow-status { +border-bottom: 1px solid $primary-palette-300; +box-sizing: content-box; +font-size: 15px; + +.fa, +.icon { +font-size: 15px; +font-style: normal; +color: $primary-palette-500; +} + +.status-value { +white-space: nowrap; +font-weight: 500; +color: $warn-palette-A400; +text-shadow: none; +} + +.controller-bulletins { +border-left: 1px solid $primary-palette-300; +background-color: $primary-palette-500; +cursor: default; +} + +.controller-bulletins.has-bulletins { +background-color: $accent-palette-400; Review Comment: this is showing as a green bulletin icon. i think we need: ```suggestion background-color: $warn-light-400; ``` ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml: ## @@ -32,6 +32,11 @@ v20.5.1 ${basedir}/src/main/nifi ${project.build.directory}/frontend-working-directory + +purple Review Comment: This should default to `nifi`. To override during the build, you can just pass in an override to set it (`-Dfrontend.theme=<>`)... ``` mvn -T 2 install -Dfrontend.theme=purple -DskipTests -P\!minify-and-compress,avoid-archive-formats,include-new-ui ``` ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/access-policies/ui/common/add-tenant-to-policy-dialog/add-tenant-to-policy-dialog.component.html: ## @@ -42,7 +42,7 @@ Add Users/Groups To Policy -Cancel +Cancel Review Comment: we shouldn't have 2 primary buttons on the same dialog. this one should probably be: ```suggestion Cancel ``` ## nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/pom.xml: ## @@ -87,6 +92,27 @@ + +com.coderplus.maven.plugins +copy-rename-maven-plugin +1.0 Review Comment: should probably variablize this version, just to be consistent. -- 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