From 3d1937e76e5526a898a1911c1fe293d5f047d60e Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:39:46 +0530 Subject: [PATCH 01/54] fix: color for do not deploy --- .../details/triggerView/workflow/nodes/workflow.utils.tsx | 2 +- src/css/themeUtils.scss | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/app/details/triggerView/workflow/nodes/workflow.utils.tsx b/src/components/app/details/triggerView/workflow/nodes/workflow.utils.tsx index c1222e2c21..903712228b 100644 --- a/src/components/app/details/triggerView/workflow/nodes/workflow.utils.tsx +++ b/src/components/app/details/triggerView/workflow/nodes/workflow.utils.tsx @@ -48,7 +48,7 @@ export const getNodeSideHeadingAndClass = ( } if (isDeploymentBlocked) { - return { heading: DO_NOT_DEPLOY, className: 'bcy-5 cn-9 dc__opacity-1' } + return { heading: DO_NOT_DEPLOY, className: 'bcy-5 text__black--imp dc__opacity-1' } } return { heading: triggerType, className: '' } diff --git a/src/css/themeUtils.scss b/src/css/themeUtils.scss index 5990e2631c..1d2d450dfb 100644 --- a/src/css/themeUtils.scss +++ b/src/css/themeUtils.scss @@ -28,6 +28,14 @@ &__white { color: var(--white); } + + &__black { + color: var(--black); + + &--imp { + color: var(--black) !important; + } + } } .icon-fill { From 324b55b09e0bb1004bb2b2d7d0b591421fcf0695 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 13:43:56 +0530 Subject: [PATCH 02/54] feat: add token for shimmer loader --- src/css/base.scss | 81 +++++++++++++-------------------------- src/css/colorPalette.scss | 2 + 2 files changed, 29 insertions(+), 54 deletions(-) diff --git a/src/css/base.scss b/src/css/base.scss index 8b7c0f9b46..fd162569b9 100644 --- a/src/css/base.scss +++ b/src/css/base.scss @@ -1596,29 +1596,40 @@ button.anchor { right: 10px !important; } -.shimmer { - background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%); - background-repeat: no-repeat; - background-size: 800px 104px; - display: inline-block; - position: relative; - animation-duration: 1s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: placeholderShimmer; - animation-timing-function: linear; -} - -@keyframes placeholderShimmer { +@keyframes shimmer-loading { 0% { - background-position: -468px 0; + background-position: 0% 0%; + } + + 25% { + background-position: 50% 0%; + } + + 50% { + background-position: 100% 0%; + } + + 75% { + background-position: 50% 0%; } 100% { - background-position: 468px 0; + background-position: 0% 0%; } } +.shimmer, .child-shimmer-loading, .shimmer-loading { + background: var(--bg-shimmer-loader); + border-radius: 4px; + opacity: 0.5; + background-repeat: no-repeat; + background-size: 200% 100%; + display: inline-block; + position: relative; + animation: shimmer-loading 1s infinite linear; + min-height: 16px; +} + .dc__resizable-textarea { resize: none; border-radius: 4px; @@ -4628,44 +4639,6 @@ textarea::placeholder { z-index: 20; } -.show-shimmer-loading { - .child-shimmer-loading { - animation-duration: 2s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: shimmer-loading; - animation-timing-function: linear; - background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%); - background-size: 800px 104px; - position: relative; - height: 16px; - border-radius: 2px; - margin-top: 4px; - } -} - -.shimmer-loading { - animation-duration: 2s; - animation-fill-mode: forwards; - animation-iteration-count: infinite; - animation-name: shimmer-loading; - animation-timing-function: linear; - background: linear-gradient(90deg, var(--N100) 30%, var(--N0) 60%, var(--N100) 100%); - background-size: 800px 104px; - position: relative; - border-radius: 2px; -} - -@keyframes shimmer-loading { - 0% { - background-position: -800px 0; - } - - 100% { - background-position: 800px 0; - } -} - .dc__place-abs-shimmer-center { position: absolute; top: 50%; diff --git a/src/css/colorPalette.scss b/src/css/colorPalette.scss index 14f740500b..9442f49e79 100644 --- a/src/css/colorPalette.scss +++ b/src/css/colorPalette.scss @@ -103,6 +103,7 @@ --bg-tooltip-black: var(--N900); --bg-toast: var(--N800); --bg-sidebar: #0066cc; + --bg-shimmer-loader: linear-gradient(90deg, var(--N200) 0%, var(--N50) 50%, var(--N200) 80%); } &__dark { @@ -178,6 +179,7 @@ --bg-tooltip-black: var(--N200); --bg-toast: var(--N300); --bg-sidebar: #2E3142; + --bg-shimmer-loader: linear-gradient(90deg, var(--N50) 0%, var(--N200) 50%, var(--N50) 80%); } } } From c2cad4ea95a98d246e7ae759be303bae3e9449fc Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 15:51:06 +0530 Subject: [PATCH 03/54] feat: add support for theming in app metrics --- .../components/AppPermissions/constants.ts | 8 +- .../Authorization/constants.ts | 4 +- .../Shared/LinkedCIDetailsModal/constants.ts | 4 +- .../app/details/appDetails/AppMetrics.tsx | 65 ++++++++--- .../app/details/appDetails/GraphsModal.tsx | 109 ++++++++++-------- .../app/details/appDetails/types.ts | 13 +++ .../app/details/appDetails/utils.tsx | 22 ++-- .../dockerRegistry/creatableStyles.ts | 4 +- 8 files changed, 147 insertions(+), 82 deletions(-) create mode 100644 src/components/app/details/appDetails/types.ts diff --git a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts index 2d6743a3df..9f54478fc1 100644 --- a/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts +++ b/src/Pages/GlobalConfigurations/Authorization/Shared/components/AppPermissions/constants.ts @@ -15,6 +15,7 @@ */ import { ACCESS_TYPE_MAP, EntityTypes, SelectPickerOptionType } from '@devtron-labs/devtron-fe-common-lib' +import { StylesConfig } from 'react-select' import { SELECT_ALL_VALUE } from '../../../../../../config' import { ActionTypes, authorizationSelectStyles } from '../../../constants' import { getDefaultStatusAndTimeout } from '../../../libUtils' @@ -72,12 +73,13 @@ export enum DirectPermissionFieldName { status = 'status', } -export const roleSelectStyles = { +export const roleSelectStyles: StylesConfig = { ...authorizationSelectStyles, - valueContainer: (base) => ({ - ...authorizationSelectStyles.valueContainer(base), + valueContainer: (base, state) => ({ + ...authorizationSelectStyles.valueContainer(base, state), display: 'flex', flexWrap: 'nowrap', + // flexWrap: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap', diff --git a/src/Pages/GlobalConfigurations/Authorization/constants.ts b/src/Pages/GlobalConfigurations/Authorization/constants.ts index a67f95008d..2b1b5c2230 100644 --- a/src/Pages/GlobalConfigurations/Authorization/constants.ts +++ b/src/Pages/GlobalConfigurations/Authorization/constants.ts @@ -76,8 +76,8 @@ export const authorizationSelectStyles = { ..._selectStyles.control(base, state), height: '36px', }), - valueContainer: (base) => ({ - ..._selectStyles.valueContainer(base), + valueContainer: (base, state) => ({ + ..._selectStyles.valueContainer(base, state), maxHeight: '100%', }), option: (base, state) => ({ diff --git a/src/Pages/Shared/LinkedCIDetailsModal/constants.ts b/src/Pages/Shared/LinkedCIDetailsModal/constants.ts index 57800f2a42..13ffd5ed63 100644 --- a/src/Pages/Shared/LinkedCIDetailsModal/constants.ts +++ b/src/Pages/Shared/LinkedCIDetailsModal/constants.ts @@ -47,8 +47,8 @@ export const environmentFilterDropdownStyles = { height: 32, minHeight: 32, }), - menu: (base) => ({ - ...commonStyles.menu(base), + menu: (base, state) => ({ + ...commonStyles.menu(base, state), zIndex: 5, }), } diff --git a/src/components/app/details/appDetails/AppMetrics.tsx b/src/components/app/details/appDetails/AppMetrics.tsx index a4e479bc72..63e2c0c35e 100644 --- a/src/components/app/details/appDetails/AppMetrics.tsx +++ b/src/components/app/details/appDetails/AppMetrics.tsx @@ -15,11 +15,17 @@ */ import React, { useState, useEffect } from 'react' -import { not, Progressing, ToastManager, ToastVariantType, useAsync } from '@devtron-labs/devtron-fe-common-lib' +import { not, Progressing, ToastManager, ToastVariantType, useAsync, useTheme } from '@devtron-labs/devtron-fe-common-lib' import { useParams, Link, NavLink } from 'react-router-dom' import moment, { Moment } from 'moment' import Tippy from '@tippyjs/react' -import { getIframeSrc, ThroughputSelect, getCalendarValue, isK8sVersionValid, LatencySelect } from './utils' +import { + getIframeSrc, + ThroughputSelect, + getCalendarValue, + isK8sVersionValid, + LatencySelect, +} from './utils' import { ChartTypes, AppMetricsTab, @@ -31,7 +37,7 @@ import { CalendarFocusInputType, AppDetailsPathParams, } from './appDetails.type' -import { GraphModal } from './GraphsModal' +import { GraphModal, GraphModalProps } from './GraphsModal' import { DatePickerType2 as DateRangePicker } from '../../../common' import { ReactComponent as GraphIcon } from '../../../../assets/icons/ic-graph.svg' import { ReactComponent as Fullscreen } from '../../../../assets/icons/ic-fullscreen-2.svg' @@ -59,6 +65,7 @@ export const AppMetrics: React.FC<{ k8sVersion addExtraSpace: boolean }> = ({ appName, environment, podMap, k8sVersion, addExtraSpace }) => { + const { appTheme } = useTheme() const { appMetrics, environmentName, infraMetrics } = environment const [calendar, setDateRange] = useState<{ startDate: Moment; endDate: Moment }>({ startDate: moment().subtract(5, 'minute'), @@ -162,6 +169,11 @@ export const AppMetrics: React.FC<{ setCalendarValue(str) } + const getIframeSrcWrapper: GraphModalProps['getIframeSrcWrapper'] = (params) => getIframeSrc({ + ...params, + grafanaTheme: appTheme, + }) + function handleStatusChange(selected): void { if (!isK8sVersionValid(k8sVersion)) { k8sVersion = DEFAULTK8SVERSION @@ -173,7 +185,14 @@ export const AppMetrics: React.FC<{ newPodHash, k8sVersion, } - const throughput = getIframeSrc(appInfo, ChartType.Status, calendarInputs, tab, true, selected.value) + const throughput = getIframeSrcWrapper({ + appInfo, + chartName: ChartType.Status, + calendarInputs, + tab, + isLegendRequired: true, + statusCode: selected.value + }) setStatusCode(selected.value) setGraphs({ ...graphs, @@ -192,7 +211,9 @@ export const AppMetrics: React.FC<{ newPodHash, k8sVersion, } - const latency = getIframeSrc(appInfo, ChartType.Latency, calendarInputs, tab, true, undefined, selected.value) + const latency = getIframeSrcWrapper({ + appInfo, chartName: ChartType.Latency, calendarInputs, tab, isLegendRequired: true, statusCode: undefined, latency: selected.value + }) setLatency(selected.value) setGraphs({ ...graphs, @@ -222,18 +243,29 @@ export const AppMetrics: React.FC<{ newPodHash, k8sVersion, } - const cpu = getIframeSrc(appInfo, ChartType.Cpu, calendarInputs, newTab, true) - const ram = getIframeSrc(appInfo, ChartType.Ram, calendarInputs, newTab, true) - const latency = getIframeSrc( + const cpu = getIframeSrcWrapper({ + appInfo, chartName: ChartType.Cpu, calendarInputs, tab: newTab, isLegendRequired: true + }) + const ram = getIframeSrcWrapper({ + appInfo, chartName: ChartType.Ram, calendarInputs, tab: newTab, isLegendRequired: true + }) + const latency = getIframeSrcWrapper({ appInfo, - ChartType.Latency, + chartName: ChartType.Latency, calendarInputs, - newTab, - true, - undefined, - selectedLatency, - ) - const throughput = getIframeSrc(appInfo, ChartType.Status, calendarInputs, newTab, true, StatusType.Throughput) + tab: newTab, + isLegendRequired: true, + statusCode: undefined, + latency: selectedLatency, + }) + const throughput = getIframeSrcWrapper({ + appInfo, + chartName: ChartType.Status, + calendarInputs, + tab: newTab, + isLegendRequired: true, + statusCode: StatusType.Throughput + }) setGraphs({ cpu, ram, @@ -254,7 +286,7 @@ export const AppMetrics: React.FC<{ useEffect(() => { getNewGraphs(tab) - }, [datasource, calendarValue]) + }, [datasource, calendarValue, appTheme]) // @ts-ignore if (grafanaModuleStatus?.result?.status !== ModuleStatus.INSTALLED) { @@ -325,6 +357,7 @@ export const AppMetrics: React.FC<{ k8sVersion={k8sVersion} selectedLatency={selectedLatency} close={() => setChartName(null)} + getIframeSrcWrapper={getIframeSrcWrapper} /> ) : null} diff --git a/src/components/app/details/appDetails/GraphsModal.tsx b/src/components/app/details/appDetails/GraphsModal.tsx index 94c0c6ca26..0d76e36d2d 100644 --- a/src/components/app/details/appDetails/GraphsModal.tsx +++ b/src/components/app/details/appDetails/GraphsModal.tsx @@ -20,7 +20,13 @@ import { VisibleModal } from '@devtron-labs/devtron-fe-common-lib' import { ReactComponent as Close } from '../../../../assets/icons/ic-close.svg' import { DatePickerType2 as DateRangePicker } from '../../../common' import { AppMetricsTabType, ChartType, StatusType, ChartTypes, StatusTypes, AppMetricsTab } from './appDetails.type' -import { getIframeSrc, isK8sVersionValid, ThroughputSelect, getCalendarValue, LatencySelect } from './utils' +import { + getIframeSrc, + isK8sVersionValid, + ThroughputSelect, + getCalendarValue, + LatencySelect, +} from './utils' import { ReactComponent as GraphIcon } from '../../../../assets/icons/ic-graph.svg' import { DEFAULTK8SVERSION } from '../../../../config' @@ -47,6 +53,9 @@ export interface GraphModalProps { k8sVersion: string selectedLatency: number close: () => void + getIframeSrcWrapper: ( + params: Omit[0], 'grafanaTheme'>, + ) => ReturnType } interface GraphModalState { @@ -133,58 +142,62 @@ export class GraphModal extends Component { k8sVersion, } - const cpu = getIframeSrc(appInfo, ChartType.Cpu, this.state.calendarInputs, tab, false) - const ram = getIframeSrc(appInfo, ChartType.Ram, this.state.calendarInputs, tab, false) - const latency = getIframeSrc( + const cpu = this.props.getIframeSrcWrapper({ + appInfo, chartName: ChartType.Cpu, calendarInputs: this.state.calendarInputs, tab, isLegendRequired: false + }) + const ram = this.props.getIframeSrcWrapper({ + appInfo, chartName: ChartType.Ram, calendarInputs: this.state.calendarInputs, tab, isLegendRequired: false + }) + const latency = this.props.getIframeSrcWrapper({ appInfo, - ChartType.Latency, - this.state.calendarInputs, + chartName: ChartType.Latency, + calendarInputs: this.state.calendarInputs, tab, - false, - undefined, - this.state.selectedLatency, - ) - const status2xx = getIframeSrc( + isLegendRequired: false, + statusCode: undefined, + latency: this.state.selectedLatency, + }) + const status2xx = this.props.getIframeSrcWrapper({ appInfo, - ChartType.Status, - this.state.calendarInputs, + chartName: ChartType.Status, + calendarInputs: this.state.calendarInputs, tab, - false, - StatusType.status2xx, - ) - const status4xx = getIframeSrc( + isLegendRequired: false, + statusCode: StatusType.status2xx, + }) + const status4xx = this.props.getIframeSrcWrapper({ appInfo, - ChartType.Status, - this.state.calendarInputs, + chartName: ChartType.Status, + calendarInputs: this.state.calendarInputs, tab, - false, - StatusType.status4xx, - ) - const status5xx = getIframeSrc( + isLegendRequired: false, + statusCode: StatusType.status4xx, + }) + const status5xx = this.props.getIframeSrcWrapper({ appInfo, - ChartType.Status, - this.state.calendarInputs, + chartName: ChartType.Status, + calendarInputs: this.state.calendarInputs, tab, - false, - StatusType.status5xx, - ) - const throughput = getIframeSrc( + isLegendRequired: false, + statusCode: StatusType.status5xx, + }) + const throughput = this.props.getIframeSrcWrapper({ appInfo, - ChartType.Status, - this.state.calendarInputs, + chartName: ChartType.Status, + calendarInputs: this.state.calendarInputs, tab, - false, - StatusType.Throughput, - ) - const mainChartUrl = getIframeSrc( + isLegendRequired: false, + statusCode: StatusType.Throughput, + }) + const mainChartUrl = this.props.getIframeSrcWrapper({ appInfo, - this.state.mainChartName, - this.state.calendarInputs, + chartName: this.state.mainChartName, + calendarInputs: this.state.calendarInputs, tab, - true, - this.state.statusCode, - this.state.selectedLatency, - ) + isLegendRequired: true, + statusCode: this.state.statusCode, + latency: this.state.selectedLatency, + }) return { cpu, ram, throughput, status2xx, status4xx, status5xx, latency, mainChartUrl } } @@ -309,15 +322,15 @@ export class GraphModal extends Component { newPodHash: this.props.newPodHash, k8sVersion, } - return getIframeSrc( + return this.props.getIframeSrcWrapper({ appInfo, - chartType, - this.state.calendarInputs, - this.state.tab, - true, + chartName: chartType, + calendarInputs: this.state.calendarInputs, + tab: this.state.tab, + isLegendRequired: true, statusCode, - selectedLatency, - ) + latency: selectedLatency, + }) } render() { diff --git a/src/components/app/details/appDetails/types.ts b/src/components/app/details/appDetails/types.ts new file mode 100644 index 0000000000..cd45474e4b --- /dev/null +++ b/src/components/app/details/appDetails/types.ts @@ -0,0 +1,13 @@ +import { AppMetricsTabType, ChartTypes, StatusTypes } from './appDetails.type' +import { AppInfo } from './utils' + +export interface GetIFrameSrcParamsType { + appInfo: AppInfo + chartName: ChartTypes + calendarInputs + tab: AppMetricsTabType + isLegendRequired: boolean + statusCode?: StatusTypes + latency?: number + grafanaTheme: 'light' | 'dark' +} diff --git a/src/components/app/details/appDetails/utils.tsx b/src/components/app/details/appDetails/utils.tsx index c5b5742d14..c289ba2c77 100644 --- a/src/components/app/details/appDetails/utils.tsx +++ b/src/components/app/details/appDetails/utils.tsx @@ -21,6 +21,7 @@ import { AggregationKeys } from '../../types' import { getVersionArr, isVersionLessThanOrEqualToTarget, DayPickerRangeControllerPresets } from '../../../common' import { ChartTypes, AppMetricsTabType, StatusType, StatusTypes } from './appDetails.type' import { ZERO_TIME_STRING, Nodes, NodeType, ACTION_STATE, ButtonStyleType, SelectPicker, SelectPickerProps, SelectPickerVariantType } from '@devtron-labs/devtron-fe-common-lib' +import { GetIFrameSrcParamsType } from './types' export function getAggregator(nodeType: NodeType, defaultAsOtherResources?: boolean): AggregationKeys { switch (nodeType) { @@ -172,15 +173,16 @@ export interface AppInfo { k8sVersion: string } -export function getIframeSrc( - appInfo: AppInfo, - chartName: ChartTypes, +export function getIframeSrc({ + appInfo, + chartName, calendarInputs, - tab: AppMetricsTabType, - isLegendRequired: boolean, - statusCode?: StatusTypes, - latency?: number, -): string { + tab, + isLegendRequired, + statusCode, + latency, + grafanaTheme = 'light', +}: GetIFrameSrcParamsType): string { const baseURL = getGrafanaBaseURL(chartName) let grafanaURL = addChartNameExtensionToBaseURL(baseURL, appInfo.k8sVersion, chartName, statusCode) grafanaURL = addQueryParamToGrafanaURL( @@ -193,6 +195,7 @@ export function getIframeSrc( calendarInputs, tab, isLegendRequired, + grafanaTheme, statusCode, latency, ) @@ -300,6 +303,7 @@ export function addQueryParamToGrafanaURL( calendarInputs, tab: AppMetricsTabType, isLegendRequired: boolean, + grafanaTheme: GetIFrameSrcParamsType['grafanaTheme'], statusCode?: StatusTypes, latency?: number, ): string { @@ -333,7 +337,7 @@ export function addQueryParamToGrafanaURL( panelId = tab === 'aggregate' ? 4 : 5 } url += `&from=${startTime}&to=${endTime}` - url += `&panelId=${panelId}` + url += `&panelId=${panelId}&theme=${grafanaTheme}` return url } diff --git a/src/components/dockerRegistry/creatableStyles.ts b/src/components/dockerRegistry/creatableStyles.ts index 95a42f537e..4ea70d9c3b 100644 --- a/src/components/dockerRegistry/creatableStyles.ts +++ b/src/components/dockerRegistry/creatableStyles.ts @@ -37,8 +37,8 @@ export const creatableSelectStyles = { ...base, height: '34px', }), - valueContainer: (base) => ({ - ...baseStyles.valueContainer(base), + valueContainer: (base, state) => ({ + ...baseStyles.valueContainer(base, state), maxHeight: '100%', gap: '4px', paddingBlock: '4px', From 2682198f0e3b879898ebfacd5ba07f5f1f4c157d Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 16:16:49 +0530 Subject: [PATCH 04/54] feat: add svg__no-override to svg images --- src/assets/gif/ic-no-eligible-commit.svg | 2 +- src/assets/ic-info-filled-border.svg | 28 ---------------------- src/assets/icons/ic-secure.svg | 3 +-- src/assets/img/bug_fixing.svg | 2 +- src/assets/img/ic-empty-tests.svg | 2 +- src/assets/img/ic-help-outline.svg | 2 +- src/assets/img/ic-mechanical-operation.svg | 2 +- src/assets/img/ic-not-authorized.svg | 2 +- src/assets/img/mail-icon.svg | 2 +- src/assets/img/nav-logo.svg | 2 +- src/assets/img/no-offending-pipeline.svg | 2 +- src/assets/img/warning-medium.svg | 2 +- src/assets/img/webhook.svg | 2 +- 13 files changed, 12 insertions(+), 41 deletions(-) delete mode 100644 src/assets/ic-info-filled-border.svg diff --git a/src/assets/gif/ic-no-eligible-commit.svg b/src/assets/gif/ic-no-eligible-commit.svg index 37c73ceefc..360ca8a054 100644 --- a/src/assets/gif/ic-no-eligible-commit.svg +++ b/src/assets/gif/ic-no-eligible-commit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/ic-info-filled-border.svg b/src/assets/ic-info-filled-border.svg deleted file mode 100644 index f1f02c2e1d..0000000000 --- a/src/assets/ic-info-filled-border.svg +++ /dev/null @@ -1,28 +0,0 @@ - - - - - - - - - - - - - - diff --git a/src/assets/icons/ic-secure.svg b/src/assets/icons/ic-secure.svg index d4d952cf3e..ed097c9754 100644 --- a/src/assets/icons/ic-secure.svg +++ b/src/assets/icons/ic-secure.svg @@ -14,8 +14,7 @@ - limitations under the License. --> - - + diff --git a/src/assets/img/bug_fixing.svg b/src/assets/img/bug_fixing.svg index 66263294a0..6a1e509040 100644 --- a/src/assets/img/bug_fixing.svg +++ b/src/assets/img/bug_fixing.svg @@ -14,4 +14,4 @@ - limitations under the License. --> -bug fixing \ No newline at end of file +bug fixing \ No newline at end of file diff --git a/src/assets/img/ic-empty-tests.svg b/src/assets/img/ic-empty-tests.svg index 060752cc5f..f287060cc6 100644 --- a/src/assets/img/ic-empty-tests.svg +++ b/src/assets/img/ic-empty-tests.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + ic-empty-tests diff --git a/src/assets/img/ic-help-outline.svg b/src/assets/img/ic-help-outline.svg index 5f3a6bee22..b49a8f41da 100644 --- a/src/assets/img/ic-help-outline.svg +++ b/src/assets/img/ic-help-outline.svg @@ -14,6 +14,6 @@ - limitations under the License. --> - + diff --git a/src/assets/img/ic-mechanical-operation.svg b/src/assets/img/ic-mechanical-operation.svg index a4ba40bbd6..5dbb739617 100644 --- a/src/assets/img/ic-mechanical-operation.svg +++ b/src/assets/img/ic-mechanical-operation.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - diff --git a/src/assets/img/ic-not-authorized.svg b/src/assets/img/ic-not-authorized.svg index 19e23c9115..6effc2bd19 100644 --- a/src/assets/img/ic-not-authorized.svg +++ b/src/assets/img/ic-not-authorized.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + diff --git a/src/assets/img/mail-icon.svg b/src/assets/img/mail-icon.svg index a15c527a66..6b066d63ee 100644 --- a/src/assets/img/mail-icon.svg +++ b/src/assets/img/mail-icon.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + ic-mail Created with Sketch. diff --git a/src/assets/img/nav-logo.svg b/src/assets/img/nav-logo.svg index 5f4584b5d7..3818b93249 100644 --- a/src/assets/img/nav-logo.svg +++ b/src/assets/img/nav-logo.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + ic-nav-logo Created with Sketch. diff --git a/src/assets/img/no-offending-pipeline.svg b/src/assets/img/no-offending-pipeline.svg index 7888fa3d52..92f1c94530 100644 --- a/src/assets/img/no-offending-pipeline.svg +++ b/src/assets/img/no-offending-pipeline.svg @@ -1 +1 @@ - + diff --git a/src/assets/img/warning-medium.svg b/src/assets/img/warning-medium.svg index 96ffd441d8..5a35da42e3 100644 --- a/src/assets/img/warning-medium.svg +++ b/src/assets/img/warning-medium.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + diff --git a/src/assets/img/webhook.svg b/src/assets/img/webhook.svg index 355da2048f..266ceebb5a 100644 --- a/src/assets/img/webhook.svg +++ b/src/assets/img/webhook.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + From 0712fd87edc6289d6f7e56b6cb8897efec24171b Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 17:25:29 +0530 Subject: [PATCH 05/54] feat: add stroke hex to var map --- src/assets/icons/ic-smiley-party.svg | 4 +-- src/css/application.scss | 1 + src/css/iconTheming.scss | 49 ++++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 src/css/iconTheming.scss diff --git a/src/assets/icons/ic-smiley-party.svg b/src/assets/icons/ic-smiley-party.svg index d58c726210..ffb566a1b6 100644 --- a/src/assets/icons/ic-smiley-party.svg +++ b/src/assets/icons/ic-smiley-party.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + ic-smiley-party @@ -70,4 +70,4 @@ - \ No newline at end of file + diff --git a/src/css/application.scss b/src/css/application.scss index bab132d573..c24ae7cf6b 100644 --- a/src/css/application.scss +++ b/src/css/application.scss @@ -2,6 +2,7 @@ @import './colorPalette.scss'; @import './patternfly.scss'; @import './normalize.scss'; +@import 'iconTheming.scss'; @import './themeUtils.scss'; @import './base.scss'; @import './formulae.scss'; diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss new file mode 100644 index 0000000000..5dd2c12da8 --- /dev/null +++ b/src/css/iconTheming.scss @@ -0,0 +1,49 @@ +$svg-stroke-hex-to-var: ( + "#FFBF00": --Y500, + "white": --white, + "#FF5656": --R500, + "#596168": --N700, + "#fff": --white, + "#0066CC": --B500, + "#3B444C": --N700, + "#767d84": --N900, + "#000A14": --N900, + "#664BEE": --V500, + "#1DAD70": --G500, + "#959BA1": --N400, + "#D0D4D9": --N200, + "#767D84": --N500, + "#404040": --N700, + "#F33E3E": --R500, + "#06C": --B500, + "#F32E2E": --R500, + "#5865F2": --V500, + "#B1B7BC": --N300, + "#C58D36": --Y600, + "#8C6324": --Y700, + "#423BD1": --V600, + "#D2D2D2": --N200, + "#FDE7E7": --R100, + "#FF7E5B": --O500, + "#231F20": --N900, + "#AFAFAF": --N300, + "#ABCFF3": --B200, + "#3b444c": --N700, + "#E6EEFC": --N100, + "#1D2730": --N800, + "#106240": --G700, + "#B21212": --R700, + "#B23412": --O700, + "#FF9900": --Y500, + "#3989D9": --B400, + "#FFB549": --Y500, + "#E9FBF4": --G100, +); + +svg:not(.svg__no-override) { + @each $hex, $var in $svg-stroke-hex-to-var { + *[stroke="#{$hex}" i] { + stroke: var($var); + } + } +} From 67dbd9272e78d729bc2ca0188c4554c91b927dc8 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 17:48:35 +0530 Subject: [PATCH 06/54] feat: add color map for fill --- src/css/iconTheming.scss | 216 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index 5dd2c12da8..3e40ee330d 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -40,10 +40,226 @@ $svg-stroke-hex-to-var: ( "#E9FBF4": --G100, ); +$svg-fill-hex-to-var: ( + "#4285F4": --B400, + "#34A853": --G500, + "#FBBC05": --Y500, + "#EB4335": --R500, + "#1A1919": --N900, + "#F25022": --O500, + "#80BA01": --G400, + "#02A4EF": --B300, + "#FFB902": --Y500, + "#F8931E": --O500, + "#B3B3B3": --N300, + "#C22133": --R600, + "#DB212E": --R600, + "#EB2126": --R600, + "#AD213B": --R700, + "#BA2133": --R700, + "#CB2026": --R600, + "#A91E23": --R700, + "#FC6D26": --O600, + "#E24329": --O600, + "#FCA326": --O500, + "#D0D4D9": --N200, + "#E5F2FF": --B100, + "#72ACE6": --B300, + "#ABCFF3": --B200, + "#3989D9": --B400, + "#0066CC": --B500, + "#596168": --N600, + "#2E5AD3": --B400, + "#EB9246": --O600, + "white": --white, + "#0F1689": --V700, + "#FE636E": --R400, + "#FFD659": --Y400, + "#FB2A39": --R500, + "#FFBF00": --Y500, + "#99B4CD": --B200, + "#06C": --B500, + "#FFF": --white, + "#6C9ABB": --B200, + "#EBEBEB": --N200, + "#0053A6": --B600, + "#8898A6": --N400, + "#F4910D": --O500, + "#66757F": --N500, + "#423BD1": --V600, + "#FF2D6B": --R400, + "#4A4A4A": --N700, + "#959BA1": --N400, + "#999": --N400, + "#D8D8D8": --N200, + "#F33E3E": --R500, + "#E6F5F8": --B100, + "#E9654B": --O600, + "#B6CFEA": --B200, + "#D0E8F0": --B100, + "#EE794B": --O600, + "#E34E3B": --O600, + "#FBDFC3": --Y200, + "#010101": --N900, + "#767D84": --N500, + "#000A14": --N900, + "#876929": --Y700, + "#D9A741": --Y600, + "#0078D4": --B500, + "#1D2730": --N800, + "#979797": --N400, + "#8C6324": --Y700, + "#FF6D00": --O600, + "#DD2E44": --R600, + "#EA596E": --R400, + "#A0041E": --R700, + "#AA8DD8": --V200, + "#77B255": --G400, + "#5C913B": --G600, + "#9266CC": --V500, + "#FFCC4D": --Y400, + "#3B444C": --N700, + "#29CC7A": --G400, + "#06c": --B500, + "#F7FAFC": --N50, + "#56A3D9": --B300, + "#F1626E": --R400, + "#3b444c": --N700, + "#1DAD70": --G500, + "#EBE8F8": --V100, + "#664BEE": --V500, + "#5865F2": --V500, + "#EDF1F5": --N100, + "#0091E2": --B400, + "#3385D6": --B400, + "#767d84": --N500, + "#FDE7E7": --R100, + "#f33e3e": --R500, + "#E6EEFF": --B100, + "#326CE5": --B400, + "#C1D2F7": --B200, + "#000": --N900, + "#B1B7BC": --N300, + "#6b778c": --N500, + "#023E8A": --B700, + "#0077B6": --B600, + "#0096C7": --B400, + "#00B4D8": --B300, + "#48CAE4": --B300, + "#2589C7": --B400, + "#0E71AF": --B600, + "#53ABDB": --B300, + "#1E85C5": --B400, + "#6DC4F3": --B200, + "#FFB549": --Y500, + "#FFE5BE": --Y200, + "#FFFFFF": --N0, + "#CDD0EE": --B200, + "#FFF5E5": --Y100, + "#40B4E5": --B300, + "#003764": --B700, + "#B486C0": --V200, + "#F0F5FF": --B50, + "#202020": --N900, + "#F3A29D": --R300, + "#FAB6AF": --R200, + "#222768": --V700, + "#FBB4AD": --R200, + "#F04C49": --R500, + "#ffffff": --N0, + "#D2D2D2": --N200, + "#428DFB": --B400, + "#23286B": --V700, + "#FF7E5B": --O500, + "#FBB823": --Y600, + "#50433E": --N700, + "#F05B25": --O600, + "#3CBDF4": --B300, + "#2498CA": --B300, + "#18BC9C": --G300, + "#E6FBFF": --B50, + "#F3F0FF": --V100, + "#FFEDF2": --R50, + "#EB456D": --R400, + "red": --R500, + "#E9FBF4": --G100, + "#4D4D4D": --N700, + "#C58D36": --Y600, + "#FFCB5D": --Y400, + "#E01E5A": --R600, + "#36C5F0": --B300, + "#2EB67D": --G400, + "#ECB22E": --Y400, + "#de350b": --R700, + "#80AEF2": --B200, + "#94BBF8": --B200, + "#1D225F": --V700, + "#98BDF9": --B200, + "#2174DB": --B400, + "#D6D7D8": --N200, + "#E9E9E9": --N200, + "#E94A47": --R500, + "#7E604A": --N600, + "#AC825A": --Y700, + "#FF9900": --Y500, + "#FAD52A": --Y300, + "#D83249": --R500, + "#FF4F59": --R400, + "#F4511E": --O600, + "#080A2D": --N900, + "#FFC639": --Y500, + "#428DFC": --B400, + "#DDDEE3": --N200, + "#E4E4E8": --N200, + "#D8E4FC": --B100, + "#ECEEF0": --N100, + "#EFEFEF": --N100, + "#93B3EF": --B200, + "#D4D6D8": --N200, + "#E1EAFC": --B100, + "#E6EEFC": --B100, + "#EAF1FD": --B100, + "#E0E0E1": --N200, + "#FFBEB6": --R200, + "#1C2868": --V700, + "#151A4F": --V700, + "#78A9EF": --B300, + "#965353": --N700, + "#A0D468": --G300, + "#007CA6": --B600, + "#434A54": --N700, + "#22637D": --B600, + "#3BAFDA": --B300, + "#4FC2E9": --B300, + "#556080": --N600, + "#FABE73": --O300, + "#34BA92": --G300, + "#B0C6DF": --B200, + "#434B5D": --N700, + "#4F5E7E": --N600, + "#6FAEDE": --B200, + "#7BB1ED": --B200, + "#81B4F6": --B200, + "#77B7FF": --B200, + "#5BAFF0": --B300, + "#6C91B3": --N500, + "#FFC63D": --Y500, + "#FC636E": --R400, + "#FF8982": --R300, + "#00C48F": --G300, + "#80B7E0": --B200, +); + svg:not(.svg__no-override) { @each $hex, $var in $svg-stroke-hex-to-var { *[stroke="#{$hex}" i] { stroke: var($var); } } + + @each $hex, $var in $svg-fill-hex-to-var { + *[fill="#{$hex}" i] { + fill: var($var); + } + } } From abec348f0e693f8874c9d594c1fe2f03c524a576 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 17:48:56 +0530 Subject: [PATCH 07/54] fix: specificity issue --- src/css/formulae.scss | 4 ++-- src/css/iconTheming.scss | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/css/formulae.scss b/src/css/formulae.scss index ea934d5856..1added083c 100644 --- a/src/css/formulae.scss +++ b/src/css/formulae.scss @@ -180,7 +180,7 @@ $color-suffix: 00; .sc#{to-lower-case($color)}-#{$i} { stroke: var(--#{$color}#{$i * 100}); - path { + path, path[stroke] { stroke: var(--#{$color}#{$i * 100}); } } @@ -188,7 +188,7 @@ $color-suffix: 00; .fc#{to-lower-case($color)}-#{$i} { fill: var(--#{$color}#{$i * 100}); - path { + path, path[fill] { fill: var(--#{$color}#{$i * 100}); } } diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index 3e40ee330d..165197009a 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -250,15 +250,15 @@ $svg-fill-hex-to-var: ( "#80B7E0": --B200, ); -svg:not(.svg__no-override) { +:not(.svg__no-override) { @each $hex, $var in $svg-stroke-hex-to-var { - *[stroke="#{$hex}" i] { + [stroke="#{$hex}" i] { stroke: var($var); } } @each $hex, $var in $svg-fill-hex-to-var { - *[fill="#{$hex}" i] { + [fill="#{$hex}" i] { fill: var($var); } } From 0c32a81742ad75c6bebe5cb6357b9b91ac60fc79 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 18:06:00 +0530 Subject: [PATCH 08/54] fix: update n100 hex code --- src/css/colorPalette.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/colorPalette.scss b/src/css/colorPalette.scss index 9442f49e79..7fc87d9836 100644 --- a/src/css/colorPalette.scss +++ b/src/css/colorPalette.scss @@ -129,7 +129,7 @@ --N400: #61676f; --N300: #4c515a; --N200: #373b46; - --N100: #222531; + --N100: #272b36; --N50: #181a26; --N0: #0d0f1c; --G700: #afddb3; From ca83cd785b70b99e75db9026aa73d7ba3104d60b Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Tue, 14 Jan 2025 23:58:13 +0530 Subject: [PATCH 09/54] fix: loading card alignment issue --- src/components/app/details/appDetails/LoadingCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/app/details/appDetails/LoadingCard.tsx b/src/components/app/details/appDetails/LoadingCard.tsx index c8c5569f8a..42cb6a9fc7 100644 --- a/src/components/app/details/appDetails/LoadingCard.tsx +++ b/src/components/app/details/appDetails/LoadingCard.tsx @@ -20,7 +20,7 @@ const LoadingCard = ({ wider }: LoadingCardType) => (
-
+
From 6863a16a5bcb09ab1642db5634d9971c55fb243b Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 00:08:56 +0530 Subject: [PATCH 10/54] fix: color variable name changes --- src/css/iconTheming.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index 165197009a..ab73d52d4a 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -120,7 +120,6 @@ $svg-fill-hex-to-var: ( "#FFCC4D": --Y400, "#3B444C": --N700, "#29CC7A": --G400, - "#06c": --B500, "#F7FAFC": --N50, "#56A3D9": --B300, "#F1626E": --R400, @@ -166,7 +165,7 @@ $svg-fill-hex-to-var: ( "#222768": --V700, "#FBB4AD": --R200, "#F04C49": --R500, - "#ffffff": --N0, + "#FFFFFF": --N0, "#D2D2D2": --N200, "#428DFB": --B400, "#23286B": --V700, @@ -190,7 +189,7 @@ $svg-fill-hex-to-var: ( "#36C5F0": --B300, "#2EB67D": --G400, "#ECB22E": --Y400, - "#de350b": --R700, + "#DE350B": --R700, "#80AEF2": --B200, "#94BBF8": --B200, "#1D225F": --V700, From 549c928de7ebc5828aca31e7bd1cbeecda84ea7a Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 11:10:12 +0530 Subject: [PATCH 11/54] fix: slack logo --- src/assets/icons/slack-logo.svg | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/assets/icons/slack-logo.svg b/src/assets/icons/slack-logo.svg index e51d271211..c3496593f7 100644 --- a/src/assets/icons/slack-logo.svg +++ b/src/assets/icons/slack-logo.svg @@ -14,7 +14,7 @@ - limitations under the License. --> - + ic-slack Created with Sketch. @@ -43,4 +43,4 @@ - \ No newline at end of file + From ac9508225a9d1787bed20174455e71039906ec92 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:26:44 +0530 Subject: [PATCH 12/54] fix: svg specifity issue --- src/css/formulae.scss | 4 ++-- src/css/iconTheming.scss | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/css/formulae.scss b/src/css/formulae.scss index 1added083c..ea934d5856 100644 --- a/src/css/formulae.scss +++ b/src/css/formulae.scss @@ -180,7 +180,7 @@ $color-suffix: 00; .sc#{to-lower-case($color)}-#{$i} { stroke: var(--#{$color}#{$i * 100}); - path, path[stroke] { + path { stroke: var(--#{$color}#{$i * 100}); } } @@ -188,7 +188,7 @@ $color-suffix: 00; .fc#{to-lower-case($color)}-#{$i} { fill: var(--#{$color}#{$i * 100}); - path, path[fill] { + path { fill: var(--#{$color}#{$i * 100}); } } diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index ab73d52d4a..d7f9d8351c 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -165,7 +165,6 @@ $svg-fill-hex-to-var: ( "#222768": --V700, "#FBB4AD": --R200, "#F04C49": --R500, - "#FFFFFF": --N0, "#D2D2D2": --N200, "#428DFB": --B400, "#23286B": --V700, @@ -249,7 +248,7 @@ $svg-fill-hex-to-var: ( "#80B7E0": --B200, ); -:not(.svg__no-override) { +:where(svg:not(.svg__no-override)) { @each $hex, $var in $svg-stroke-hex-to-var { [stroke="#{$hex}" i] { stroke: var($var); From f5678e57abd0c88f009d6446d32f3fd88e4f865f Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:27:08 +0530 Subject: [PATCH 13/54] fix: chart ground bg color --- src/components/charts/list/list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/charts/list/list.scss b/src/components/charts/list/list.scss index a00fa6ee8d..d3989c94dc 100644 --- a/src/components/charts/list/list.scss +++ b/src/components/charts/list/list.scss @@ -517,6 +517,7 @@ .chart-group-list-page__body { height: 100%; overflow: auto; + background-color: var(--bg-secondary); } } From e5745052b643b0f4a46f35908542ca1854a179f4 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:27:37 +0530 Subject: [PATCH 14/54] fix: clean up fill map --- src/css/iconTheming.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index d7f9d8351c..d09aaa5058 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -184,10 +184,6 @@ $svg-fill-hex-to-var: ( "#4D4D4D": --N700, "#C58D36": --Y600, "#FFCB5D": --Y400, - "#E01E5A": --R600, - "#36C5F0": --B300, - "#2EB67D": --G400, - "#ECB22E": --Y400, "#DE350B": --R700, "#80AEF2": --B200, "#94BBF8": --B200, From 049651e30d9f0962de2d632283369d2f37a171d7 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:37:32 +0530 Subject: [PATCH 15/54] fix: clean up fill map --- src/css/iconTheming.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index d09aaa5058..2e9c0ccccd 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -59,9 +59,6 @@ $svg-fill-hex-to-var: ( "#BA2133": --R700, "#CB2026": --R600, "#A91E23": --R700, - "#FC6D26": --O600, - "#E24329": --O600, - "#FCA326": --O500, "#D0D4D9": --N200, "#E5F2FF": --B100, "#72ACE6": --B300, From 042326af4be3be3b36f49dade9302d2c0e820e69 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 12:46:23 +0530 Subject: [PATCH 16/54] feat: comment out the fill variables --- src/css/iconTheming.scss | 352 +++++++++++++++++++-------------------- 1 file changed, 174 insertions(+), 178 deletions(-) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index 2e9c0ccccd..d2d269e2ef 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -6,7 +6,6 @@ $svg-stroke-hex-to-var: ( "#fff": --white, "#0066CC": --B500, "#3B444C": --N700, - "#767d84": --N900, "#000A14": --N900, "#664BEE": --V500, "#1DAD70": --G500, @@ -28,7 +27,6 @@ $svg-stroke-hex-to-var: ( "#231F20": --N900, "#AFAFAF": --N300, "#ABCFF3": --B200, - "#3b444c": --N700, "#E6EEFC": --N100, "#1D2730": --N800, "#106240": --G700, @@ -41,24 +39,25 @@ $svg-stroke-hex-to-var: ( ); $svg-fill-hex-to-var: ( - "#4285F4": --B400, - "#34A853": --G500, - "#FBBC05": --Y500, - "#EB4335": --R500, - "#1A1919": --N900, - "#F25022": --O500, - "#80BA01": --G400, - "#02A4EF": --B300, - "#FFB902": --Y500, - "#F8931E": --O500, - "#B3B3B3": --N300, - "#C22133": --R600, - "#DB212E": --R600, - "#EB2126": --R600, - "#AD213B": --R700, - "#BA2133": --R700, - "#CB2026": --R600, - "#A91E23": --R700, + "#0F1689": --V700, + // "#4285F4": --B400, + // "#34A853": --G500, + // "#FBBC05": --Y500, + // "#EB4335": --R500, + // "#1A1919": --N900, + // "#F25022": --O500, + // "#80BA01": --G400, + // "#02A4EF": --B300, + // "#FFB902": --Y500, + // "#F8931E": --O500, + // "#B3B3B3": --N300, + // "#C22133": --R600, + // "#DB212E": --R600, + // "#EB2126": --R600, + // "#AD213B": --R700, + // "#BA2133": --R700, + // "#CB2026": --R600, + // "#A91E23": --R700, "#D0D4D9": --N200, "#E5F2FF": --B100, "#72ACE6": --B300, @@ -66,179 +65,176 @@ $svg-fill-hex-to-var: ( "#3989D9": --B400, "#0066CC": --B500, "#596168": --N600, - "#2E5AD3": --B400, - "#EB9246": --O600, - "white": --white, - "#0F1689": --V700, - "#FE636E": --R400, - "#FFD659": --Y400, - "#FB2A39": --R500, - "#FFBF00": --Y500, - "#99B4CD": --B200, - "#06C": --B500, - "#FFF": --white, - "#6C9ABB": --B200, - "#EBEBEB": --N200, - "#0053A6": --B600, - "#8898A6": --N400, - "#F4910D": --O500, - "#66757F": --N500, - "#423BD1": --V600, - "#FF2D6B": --R400, - "#4A4A4A": --N700, + // "#2E5AD3": --B400, + // "#EB9246": --O600, + // "white": --white, + // "#0F1689": --V700, + // "#FE636E": --R400, + // "#FFD659": --Y400, + // "#FB2A39": --R500, + // "#FFBF00": --Y500, + // "#99B4CD": --B200, + // "#06C": --B500, + // "#FFF": --white, + // "#6C9ABB": --B200, + // "#EBEBEB": --N200, + // "#0053A6": --B600, + // "#8898A6": --N400, + // "#F4910D": --O500, + // "#66757F": --N500, + // "#423BD1": --V600, + // "#FF2D6B": --R400, + // "#4A4A4A": --N700, "#959BA1": --N400, - "#999": --N400, - "#D8D8D8": --N200, + // "#999": --N400, + // "#D8D8D8": --N200, "#F33E3E": --R500, - "#E6F5F8": --B100, - "#E9654B": --O600, - "#B6CFEA": --B200, - "#D0E8F0": --B100, - "#EE794B": --O600, - "#E34E3B": --O600, - "#FBDFC3": --Y200, - "#010101": --N900, + // "#E6F5F8": --B100, + // "#E9654B": --O600, + // "#B6CFEA": --B200, + // "#D0E8F0": --B100, + // "#EE794B": --O600, + // "#E34E3B": --O600, + // "#FBDFC3": --Y200, + // "#010101": --N900, "#767D84": --N500, - "#000A14": --N900, - "#876929": --Y700, - "#D9A741": --Y600, - "#0078D4": --B500, + // "#000A14": --N900, + // "#876929": --Y700, + // "#D9A741": --Y600, + // "#0078D4": --B500, "#1D2730": --N800, - "#979797": --N400, + // "#979797": --N400, "#8C6324": --Y700, - "#FF6D00": --O600, - "#DD2E44": --R600, - "#EA596E": --R400, - "#A0041E": --R700, - "#AA8DD8": --V200, - "#77B255": --G400, - "#5C913B": --G600, - "#9266CC": --V500, - "#FFCC4D": --Y400, + // "#FF6D00": --O600, + // "#DD2E44": --R600, + // "#EA596E": --R400, + // "#A0041E": --R700, + // "#AA8DD8": --V200, + // "#77B255": --G400, + // "#5C913B": --G600, + // "#9266CC": --V500, + // "#FFCC4D": --Y400, "#3B444C": --N700, - "#29CC7A": --G400, + // "#29CC7A": --G400, "#F7FAFC": --N50, - "#56A3D9": --B300, - "#F1626E": --R400, - "#3b444c": --N700, + // "#56A3D9": --B300, + // "#F1626E": --R400, "#1DAD70": --G500, - "#EBE8F8": --V100, + // "#EBE8F8": --V100, "#664BEE": --V500, - "#5865F2": --V500, + // "#5865F2": --V500, "#EDF1F5": --N100, - "#0091E2": --B400, - "#3385D6": --B400, - "#767d84": --N500, - "#FDE7E7": --R100, - "#f33e3e": --R500, - "#E6EEFF": --B100, - "#326CE5": --B400, - "#C1D2F7": --B200, - "#000": --N900, + // "#0091E2": --B400, + // "#3385D6": --B400, + // "#FDE7E7": --R100, + // "#E6EEFF": --B100, + // "#326CE5": --B400, + // "#C1D2F7": --B200, + // "#000": --N900, "#B1B7BC": --N300, - "#6b778c": --N500, - "#023E8A": --B700, - "#0077B6": --B600, - "#0096C7": --B400, - "#00B4D8": --B300, - "#48CAE4": --B300, - "#2589C7": --B400, - "#0E71AF": --B600, - "#53ABDB": --B300, - "#1E85C5": --B400, - "#6DC4F3": --B200, + // "#6b778c": --N500, + // "#023E8A": --B700, + // "#0077B6": --B600, + // "#0096C7": --B400, + // "#00B4D8": --B300, + // "#48CAE4": --B300, + // "#2589C7": --B400, + // "#0E71AF": --B600, + // "#53ABDB": --B300, + // "#1E85C5": --B400, + // "#6DC4F3": --B200, "#FFB549": --Y500, - "#FFE5BE": --Y200, - "#FFFFFF": --N0, - "#CDD0EE": --B200, - "#FFF5E5": --Y100, - "#40B4E5": --B300, - "#003764": --B700, - "#B486C0": --V200, - "#F0F5FF": --B50, - "#202020": --N900, - "#F3A29D": --R300, - "#FAB6AF": --R200, - "#222768": --V700, - "#FBB4AD": --R200, - "#F04C49": --R500, - "#D2D2D2": --N200, - "#428DFB": --B400, - "#23286B": --V700, + // "#FFE5BE": --Y200, + "#FFFFFF": --white, + // "#CDD0EE": --B200, + // "#FFF5E5": --Y100, + // "#40B4E5": --B300, + // "#003764": --B700, + // "#B486C0": --V200, + // "#F0F5FF": --B50, + // "#202020": --N900, + // "#F3A29D": --R300, + // "#FAB6AF": --R200, + // "#222768": --V700, + // "#FBB4AD": --R200, + // "#F04C49": --R500, + // "#D2D2D2": --N200, + // "#428DFB": --B400, + // "#23286B": --V700, "#FF7E5B": --O500, - "#FBB823": --Y600, - "#50433E": --N700, - "#F05B25": --O600, - "#3CBDF4": --B300, - "#2498CA": --B300, - "#18BC9C": --G300, - "#E6FBFF": --B50, + // "#FBB823": --Y600, + // "#50433E": --N700, + // "#F05B25": --O600, + // "#3CBDF4": --B300, + // "#2498CA": --B300, + // "#18BC9C": --G300, + // "#E6FBFF": --B50, "#F3F0FF": --V100, - "#FFEDF2": --R50, - "#EB456D": --R400, - "red": --R500, + // "#FFEDF2": --R50, + // "#EB456D": --R400, + // "red": --R500, "#E9FBF4": --G100, - "#4D4D4D": --N700, - "#C58D36": --Y600, - "#FFCB5D": --Y400, - "#DE350B": --R700, - "#80AEF2": --B200, - "#94BBF8": --B200, - "#1D225F": --V700, - "#98BDF9": --B200, - "#2174DB": --B400, - "#D6D7D8": --N200, - "#E9E9E9": --N200, - "#E94A47": --R500, - "#7E604A": --N600, - "#AC825A": --Y700, - "#FF9900": --Y500, - "#FAD52A": --Y300, - "#D83249": --R500, - "#FF4F59": --R400, - "#F4511E": --O600, - "#080A2D": --N900, - "#FFC639": --Y500, - "#428DFC": --B400, - "#DDDEE3": --N200, - "#E4E4E8": --N200, - "#D8E4FC": --B100, - "#ECEEF0": --N100, - "#EFEFEF": --N100, - "#93B3EF": --B200, - "#D4D6D8": --N200, - "#E1EAFC": --B100, - "#E6EEFC": --B100, - "#EAF1FD": --B100, - "#E0E0E1": --N200, - "#FFBEB6": --R200, - "#1C2868": --V700, - "#151A4F": --V700, - "#78A9EF": --B300, - "#965353": --N700, - "#A0D468": --G300, - "#007CA6": --B600, - "#434A54": --N700, - "#22637D": --B600, - "#3BAFDA": --B300, - "#4FC2E9": --B300, - "#556080": --N600, - "#FABE73": --O300, - "#34BA92": --G300, - "#B0C6DF": --B200, - "#434B5D": --N700, - "#4F5E7E": --N600, - "#6FAEDE": --B200, - "#7BB1ED": --B200, - "#81B4F6": --B200, - "#77B7FF": --B200, - "#5BAFF0": --B300, - "#6C91B3": --N500, - "#FFC63D": --Y500, - "#FC636E": --R400, - "#FF8982": --R300, - "#00C48F": --G300, - "#80B7E0": --B200, + // "#4D4D4D": --N700, + // "#C58D36": --Y600, + // "#FFCB5D": --Y400, + // "#DE350B": --R700, + // "#80AEF2": --B200, + // "#94BBF8": --B200, + // "#1D225F": --V700, + // "#98BDF9": --B200, + // "#2174DB": --B400, + // "#D6D7D8": --N200, + // "#E9E9E9": --N200, + // "#E94A47": --R500, + // "#7E604A": --N600, + // "#AC825A": --Y700, + // "#FF9900": --Y500, + // "#FAD52A": --Y300, + // "#D83249": --R500, + // "#FF4F59": --R400, + // "#F4511E": --O600, + // "#080A2D": --N900, + // "#FFC639": --Y500, + // "#428DFC": --B400, + // "#DDDEE3": --N200, + // "#E4E4E8": --N200, + // "#D8E4FC": --B100, + // "#ECEEF0": --N100, + // "#EFEFEF": --N100, + // "#93B3EF": --B200, + // "#D4D6D8": --N200, + // "#E1EAFC": --B100, + // "#E6EEFC": --B100, + // "#EAF1FD": --B100, + // "#E0E0E1": --N200, + // "#FFBEB6": --R200, + // "#1C2868": --V700, + // "#151A4F": --V700, + // "#78A9EF": --B300, + // "#965353": --N700, + // "#A0D468": --G300, + // "#007CA6": --B600, + // "#434A54": --N700, + // "#22637D": --B600, + // "#3BAFDA": --B300, + // "#4FC2E9": --B300, + // "#556080": --N600, + // "#FABE73": --O300, + // "#34BA92": --G300, + // "#B0C6DF": --B200, + // "#434B5D": --N700, + // "#4F5E7E": --N600, + // "#6FAEDE": --B200, + // "#7BB1ED": --B200, + // "#81B4F6": --B200, + // "#77B7FF": --B200, + // "#5BAFF0": --B300, + // "#6C91B3": --N500, + // "#FFC63D": --Y500, + // "#FC636E": --R400, + // "#FF8982": --R300, + // "#00C48F": --G300, + // "#80B7E0": --B200, ); :where(svg:not(.svg__no-override)) { From 7f759191f08f036103b86e65028e6add973f4322 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 13:00:41 +0530 Subject: [PATCH 17/54] refactor: remove unused classes --- .../app/details/appDetails/appDetails.scss | 2 +- src/components/app/list/list.scss | 13 ------------- src/components/cluster/Cluster.tsx | 3 ++- .../globalConfigurations/globalConfigurations.scss | 14 -------------- 4 files changed, 3 insertions(+), 29 deletions(-) diff --git a/src/components/app/details/appDetails/appDetails.scss b/src/components/app/details/appDetails/appDetails.scss index aad262c810..92003b18ff 100644 --- a/src/components/app/details/appDetails/appDetails.scss +++ b/src/components/app/details/appDetails/appDetails.scss @@ -1774,7 +1774,7 @@ table.resource-tree { .dc__app-summary__icon { &.healthy { background-size: contain, contain; - background: url(../../../../assets/icons/appstatus/ic-heart-green.svg), transparent; + background: url('../../../../assets/icons/appstatus/ic-heart-green.svg'), transparent; } } diff --git a/src/components/app/list/list.scss b/src/components/app/list/list.scss index c9ba84cb53..31d882b306 100644 --- a/src/components/app/list/list.scss +++ b/src/components/app/list/list.scss @@ -182,15 +182,6 @@ color: var(--B500); } -.app-list__cell--status { - position: relative; - overflow: visible; -} - -.app-list__cell--status .bg { - background-image: url('../../../assets/icons/appstatus/bg-white.svg'); -} - .app-list__cell--env, .app-list__cell--cluster, .app-list__cell--namespace, @@ -361,10 +352,6 @@ background-color: var(--bg-secondary); } -.app-list__row:hover .app-list__cell--status .bg { - background-image: url('../../../assets/icons/appstatus/bg-gray.svg'); -} - .app-list__row:hover .cell__link { color: var(--B500); font-weight: 600; diff --git a/src/components/cluster/Cluster.tsx b/src/components/cluster/Cluster.tsx index 5ec75990dc..ba4c67b636 100644 --- a/src/components/cluster/Cluster.tsx +++ b/src/components/cluster/Cluster.tsx @@ -653,7 +653,8 @@ const Cluster = ({
diff --git a/src/components/globalConfigurations/globalConfigurations.scss b/src/components/globalConfigurations/globalConfigurations.scss index 842765eb8e..2120b2787a 100644 --- a/src/components/globalConfigurations/globalConfigurations.scss +++ b/src/components/globalConfigurations/globalConfigurations.scss @@ -256,20 +256,6 @@ overflow: hidden; background: var(--bg-primary); } - - &.collapsed-list--create { - .add-icon { - background: url('../../assets/icons/ic-add.svg'); - width: 24px; - height: 24px; - background-size: contain; - } - - .list__title { - color: var(--B500); - font-weight: 600; - } - } } .form__row--auth-type { From 20d10a470773a7b50ef54a4265f15c95dab9b068 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 13:30:05 +0530 Subject: [PATCH 18/54] fix: icon color --- src/css/iconTheming.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css/iconTheming.scss b/src/css/iconTheming.scss index d2d269e2ef..a2ee2bd6c4 100644 --- a/src/css/iconTheming.scss +++ b/src/css/iconTheming.scss @@ -98,7 +98,7 @@ $svg-fill-hex-to-var: ( // "#FBDFC3": --Y200, // "#010101": --N900, "#767D84": --N500, - // "#000A14": --N900, + "#000A14": --N800, // "#876929": --Y700, // "#D9A741": --Y600, // "#0078D4": --B500, From e010e1105d8a475d6b0aa1c53fc2b1d24a4e4a06 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 15:01:48 +0530 Subject: [PATCH 19/54] fix: linked ci pipeline select --- src/components/ciPipeline/LinkedCIPipelineEdit.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ciPipeline/LinkedCIPipelineEdit.tsx b/src/components/ciPipeline/LinkedCIPipelineEdit.tsx index 4aa3a97f16..a428af98f9 100644 --- a/src/components/ciPipeline/LinkedCIPipelineEdit.tsx +++ b/src/components/ciPipeline/LinkedCIPipelineEdit.tsx @@ -168,11 +168,11 @@ export default class LinkedCIPipeline extends Component ({ - ...base, + ...multiSelectStyles.control(base, state), cursor: 'pointer', }), menu: (base, state) => ({ - ...base, + ...multiSelectStyles.menu(base, state), marginTop: 'auto', zIndex: 4, }), @@ -185,7 +185,7 @@ export default class LinkedCIPipeline extends Component ({ - ...base, + ...multiSelectStyles.valueContainer(base, state), color: 'var(--N900)', background: state.isDisabled ? 'var(--N100) !important' : 'var(--N50) !important', }), From 9502ba88f31b66b141ecfa1f58bdc0eb7417a894 Mon Sep 17 00:00:00 2001 From: Eshank Vaish <48060426+eshankvaish@users.noreply.github.com> Date: Wed, 15 Jan 2025 15:31:21 +0530 Subject: [PATCH 20/54] feat: style the date picker --- .../common/DatePickers/Calender.tsx | 2 +- .../DatePickers/DayPickerRangeController.tsx | 8 ++-- .../common/DatePickers/calendar.css | 45 ++++++++++++++++++- 3 files changed, 49 insertions(+), 6 deletions(-) diff --git a/src/components/common/DatePickers/Calender.tsx b/src/components/common/DatePickers/Calender.tsx index 17dac12f2d..51a6cdded6 100644 --- a/src/components/common/DatePickers/Calender.tsx +++ b/src/components/common/DatePickers/Calender.tsx @@ -73,7 +73,7 @@ const styless = { }, PresetDateRangePicker_button: { width: '178px', - background: 'var(--bg-primary)', + background: 'var(--transparent)', border: 'none', color: 'var(--N900)', padding: '8px', diff --git a/src/components/common/DatePickers/DayPickerRangeController.tsx b/src/components/common/DatePickers/DayPickerRangeController.tsx index fdff154551..7ec1314c30 100644 --- a/src/components/common/DatePickers/DayPickerRangeController.tsx +++ b/src/components/common/DatePickers/DayPickerRangeController.tsx @@ -78,7 +78,7 @@ const styless = { }, PresetDateRangePicker_button: { width: '188px', - background: 'var(--bg-primary)', + background: 'var(--transparent)', border: 'none', color: 'var(--N900)', padding: '8px', @@ -152,13 +152,13 @@ export class DatePickerType2 extends Component { }} >
-

Pick timerange

+

Pick time range