diff options
61 files changed, 959 insertions, 1128 deletions
diff --git a/server/sonar-web/config/jest/SetupTestEnvironment.ts b/server/sonar-web/config/jest/SetupTestEnvironment.ts index e82edbb84a7..fd9e66bb063 100644 --- a/server/sonar-web/config/jest/SetupTestEnvironment.ts +++ b/server/sonar-web/config/jest/SetupTestEnvironment.ts @@ -17,17 +17,9 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import * as theme from '../../src/main/js/app/theme'; -import ThemeContext from '../../src/main/js/components/theme'; - const content = document.createElement('div'); content.id = 'content'; document.documentElement.appendChild(content); const baseUrl = ''; (window as any).baseUrl = baseUrl; - -// Hack : override the default value of the context used for theme by emotion -// This allows tests to get the theme value without specifiying a theme provider -ThemeContext['_currentValue'] = theme; -ThemeContext['_currentValue2'] = theme; diff --git a/server/sonar-web/config/jest/testTheme.ts b/server/sonar-web/config/jest/testTheme.ts deleted file mode 100644 index d1fffad306b..00000000000 --- a/server/sonar-web/config/jest/testTheme.ts +++ /dev/null @@ -1,180 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2021 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -const grid = 8; - -export default { - colors: { - blue: '#4b9fd5', - veryLightBlue: '#f2faff', - lightBlue: '#cae3f2', - darkBlue: '#236a97', - veryDarkBlue: '#0E516F', - green: '#00aa00', - lightGreen: '#b0d513', - veryLightGreen: '#f5f9fc', - yellow: '#eabe06', - orange: '#ed7d20', - red: '#d4333f', - purple: '#9139d4', - white: '#ffffff', - - gray94: '#efefef', - gray80: '#cdcdcd', - gray71: '#b4b4b4', - gray67: '#aaa', - gray60: '#999', - gray40: '#404040', - - transparentWhite: 'rgba(255,255,255,0.62)', - transparentGray: 'rgba(200, 200, 200, 0.5)', - transparentBlack: 'rgba(0, 0, 0, 0.25)', - - disableGrayText: '#bbb', - disableGrayBorder: '#ddd', - disableGrayBg: '#ebebeb', - - barBackgroundColor: '#f3f3f3', - barBackgroundColorHighlight: '#f8f8f8', - barBorderColor: '#e6e6e6', - - globalNavBarBg: '#262626', - - // fonts - baseFontColor: '#444', - secondFontColor: '#777', - - // forms - mandatoryFieldColor: '#a4030f', - - // leak - leakPrimaryColor: '#fbf3d5', - leakSecondaryColor: '#f1e8cb', - - // issues - issueBgColor: '#f2dede', - hotspotBgColor: '#eeeff4', - issueLocationSelected: '#f4b1b0', - issueLocationHighlighted: '#e1e1f2', - conciseIssueRed: '#d18582', - conciseIssueRedSelected: '#a4030f', - - // coverage - lineCoverageRed: '#a4030f', - lineCoverageGreen: '#b4dd78', - - // alerts - warningIconColor: '#eabe06', - - alertBorderError: '#f4b1b0', - alertBackgroundError: '#f2dede', - alertTextError: '#862422', - alertIconError: '#a4030f', - - alertBorderWarning: '#faebcc', - alertBackgroundWarning: '#fcf8e3', - alertTextWarning: '#6f4f17', - alertIconWarning: '#db781a', - - alertBorderSuccess: '#d6e9c6', - alertBackgroundSuccess: '#dff0d8', - alertTextSuccess: '#215821', - alertIconSuccess: '#6d9867', - - alertBorderInfo: '#b1dff3', - alertBackgroundInfo: '#d9edf7', - alertTextInfo: '#0e516f', - alertIconInfo: '#0271b9' - }, - - sizes: { - gridSize: `${grid}px`, - - baseFontSize: '13px', - verySmallFontSize: '10px', - smallFontSize: '12px', - mediumFontSize: '14px', - bigFontSize: '16px', - hugeFontSize: '24px', - - hugeControlHeight: `${5 * grid}px`, - largeControlHeight: `${4 * grid}px`, - controlHeight: `${3 * grid}px`, - smallControlHeight: `${2.5 * grid}px`, - tinyControlHeight: `${2 * grid}px`, - - globalNavHeight: `${6 * grid}px`, - - globalNavContentHeight: `${4 * grid}px`, - - maxPageWidth: '1320px', - minPageWidth: '1080px', - pagePadding: '20px' - }, - - rawSizes: { - grid, - globalNavHeightRaw: 6 * grid, - globalNavContentHeightRaw: 4 * grid, - contextNavHeightRaw: 9 * grid - }, - - fonts: { - baseFontFamily: "'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif", - systemFontFamily: - "-apple-system,'BlinkMacSystemFont','Segoe UI','Helvetica','Arial',sans-serif", - sonarcloudFontFamily: - "Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" - }, - - // z-index - // ======= - // 1 - 100 for page elements (e.g. sidebars, panels) - // 101 - 500 for generic page fixed elements (e.g. navigation, workspace) - // 501 - 3000 for page ui elements - // 3001 - 8000 for generic ui elements (e.g. dropdowns, tooltips) - zIndexes: { - // common - aboveNormalZIndex: '3', - normalZIndex: '2', - belowNormalZIndex: '1', - - // page elements - pageMainZIndex: '50', - - // generic page fixed elements - contextbarZIndex: '420', - - // generic ui elements - popupZIndex: '5000', - - modalZIndex: '6001', - modalOverlayZIndex: '6000', - - processContainerZIndex: '7000', - - dropdownMenuZIndex: '7500', - - tooltipZIndex: '8000' - }, - - others: { - defaultShadow: '0 6px 12px rgba(0, 0, 0, 0.175)' - } -}; diff --git a/server/sonar-web/package.json b/server/sonar-web/package.json index 1f98e9808e4..1d43bc32d11 100644 --- a/server/sonar-web/package.json +++ b/server/sonar-web/package.json @@ -19,7 +19,6 @@ "d3-zoom": "1.8.3", "date-fns": "1.30.1", "dompurify": "2.2.7", - "emotion-theming": "10.0.27", "formik": "1.2.0", "history": "3.3.0", "keymaster": "1.6.2", diff --git a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx index cad20bda7b1..c1f983a73d9 100644 --- a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx +++ b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx @@ -62,13 +62,11 @@ import webAPIRoutes from '../../apps/web-api/routes'; import webhooksRoutes from '../../apps/webhooks/routes'; import withIndexationGuard from '../../components/hoc/withIndexationGuard'; import { lazyLoadComponent } from '../../components/lazyLoadComponent'; -import { ThemeProvider } from '../../components/theme'; import getHistory from '../../helpers/getHistory'; import App from '../components/App'; import GlobalContainer from '../components/GlobalContainer'; import { PageContext } from '../components/indexation/PageUnavailableDueToIndexation'; import MigrationContainer from '../components/MigrationContainer'; -import * as theme from '../theme'; import getStore from './getStore'; function handleUpdate(this: { state: { location: Location } }) { @@ -261,95 +259,91 @@ export default function startReactApp( <HelmetProvider> <Provider store={store}> <IntlProvider defaultLocale={lang} locale={lang}> - <ThemeProvider theme={theme}> - <Router history={history} onUpdate={handleUpdate}> - {renderRedirects()} + <Router history={history} onUpdate={handleUpdate}> + {renderRedirects()} - <Route - path="formatting/help" - component={lazyLoadComponent(() => import('../components/FormattingHelp'))} - /> - - <Route component={lazyLoadComponent(() => import('../components/SimpleContainer'))}> - <Route path="maintenance">{maintenanceRoutes}</Route> - <Route path="setup">{setupRoutes}</Route> - </Route> - - <Route component={MigrationContainer}> - <Route - component={lazyLoadComponent(() => - import('../components/SimpleSessionsContainer') - )}> - <RouteWithChildRoutes path="/sessions" childRoutes={sessionsRoutes} /> - </Route> + <Route + path="formatting/help" + component={lazyLoadComponent(() => import('../components/FormattingHelp'))} + /> - <Route path="/" component={App}> - <IndexRoute - component={lazyLoadComponent(() => import('../components/Landing'))} - /> + <Route component={lazyLoadComponent(() => import('../components/SimpleContainer'))}> + <Route path="maintenance">{maintenanceRoutes}</Route> + <Route path="setup">{setupRoutes}</Route> + </Route> - <Route component={GlobalContainer}> - <RouteWithChildRoutes path="about" childRoutes={aboutRoutes} /> - <RouteWithChildRoutes path="account" childRoutes={accountRoutes} /> - <RouteWithChildRoutes path="coding_rules" childRoutes={codingRulesRoutes} /> - <RouteWithChildRoutes path="documentation" childRoutes={documentationRoutes} /> - <Route - path="extension/:pluginKey/:extensionKey" - component={lazyLoadComponent(() => - import('../components/extensions/GlobalPageExtension') - )} - /> - <Route - path="issues" - component={withIndexationGuard(Issues, PageContext.Issues)} - /> - <RouteWithChildRoutes path="projects" childRoutes={projectsRoutes} /> - <RouteWithChildRoutes path="quality_gates" childRoutes={qualityGatesRoutes} /> - <Route - path="portfolios" - component={lazyLoadComponent(() => - import('../components/extensions/PortfoliosPage') - )} - /> - <RouteWithChildRoutes path="profiles" childRoutes={qualityProfilesRoutes} /> - <RouteWithChildRoutes path="web_api" childRoutes={webAPIRoutes} /> + <Route component={MigrationContainer}> + <Route + component={lazyLoadComponent(() => + import('../components/SimpleSessionsContainer') + )}> + <RouteWithChildRoutes path="/sessions" childRoutes={sessionsRoutes} /> + </Route> - {renderComponentRoutes()} + <Route path="/" component={App}> + <IndexRoute component={lazyLoadComponent(() => import('../components/Landing'))} /> - {renderAdminRoutes()} - </Route> - <Route - // We don't want this route to have any menu. - // That is why we can not have it under the accountRoutes - path="account/reset_password" - component={lazyLoadComponent(() => import('../components/ResetPassword'))} - /> + <Route component={GlobalContainer}> + <RouteWithChildRoutes path="about" childRoutes={aboutRoutes} /> + <RouteWithChildRoutes path="account" childRoutes={accountRoutes} /> + <RouteWithChildRoutes path="coding_rules" childRoutes={codingRulesRoutes} /> + <RouteWithChildRoutes path="documentation" childRoutes={documentationRoutes} /> <Route - // We don't want this route to have any menu. This is why we define it here - // rather than under the admin routes. - path="admin/change_admin_password" + path="extension/:pluginKey/:extensionKey" component={lazyLoadComponent(() => - import('../../apps/change-admin-password/ChangeAdminPasswordApp') + import('../components/extensions/GlobalPageExtension') )} /> <Route - // We don't want this route to have any menu. This is why we define it here - // rather than under the admin routes. - path="admin/plugin_risk_consent" - component={lazyLoadComponent(() => import('../components/PluginRiskConsent'))} + path="issues" + component={withIndexationGuard(Issues, PageContext.Issues)} /> + <RouteWithChildRoutes path="projects" childRoutes={projectsRoutes} /> + <RouteWithChildRoutes path="quality_gates" childRoutes={qualityGatesRoutes} /> <Route - path="not_found" - component={lazyLoadComponent(() => import('../components/NotFound'))} - /> - <Route - path="*" - component={lazyLoadComponent(() => import('../components/NotFound'))} + path="portfolios" + component={lazyLoadComponent(() => + import('../components/extensions/PortfoliosPage') + )} /> + <RouteWithChildRoutes path="profiles" childRoutes={qualityProfilesRoutes} /> + <RouteWithChildRoutes path="web_api" childRoutes={webAPIRoutes} /> + + {renderComponentRoutes()} + + {renderAdminRoutes()} </Route> + <Route + // We don't want this route to have any menu. + // That is why we can not have it under the accountRoutes + path="account/reset_password" + component={lazyLoadComponent(() => import('../components/ResetPassword'))} + /> + <Route + // We don't want this route to have any menu. This is why we define it here + // rather than under the admin routes. + path="admin/change_admin_password" + component={lazyLoadComponent(() => + import('../../apps/change-admin-password/ChangeAdminPasswordApp') + )} + /> + <Route + // We don't want this route to have any menu. This is why we define it here + // rather than under the admin routes. + path="admin/plugin_risk_consent" + component={lazyLoadComponent(() => import('../components/PluginRiskConsent'))} + /> + <Route + path="not_found" + component={lazyLoadComponent(() => import('../components/NotFound'))} + /> + <Route + path="*" + component={lazyLoadComponent(() => import('../components/NotFound'))} + /> </Route> - </Router> - </ThemeProvider> + </Route> + </Router> </IntlProvider> </Provider> </HelmetProvider>, diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/App-test.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/App-test.tsx index cd2df7079ef..c0299fee5f1 100644 --- a/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/App-test.tsx +++ b/server/sonar-web/src/main/js/apps/coding-rules/components/__tests__/App-test.tsx @@ -49,6 +49,7 @@ jest.mock('../../../../api/quality-profiles', () => ({ })); jest.mock('../../../../helpers/system', () => ({ + getReactDomContainerSelector: () => '#content', isSonarCloud: jest.fn().mockResolvedValue(false) })); diff --git a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx index 6263de1a6a6..31430bf4599 100644 --- a/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx +++ b/server/sonar-web/src/main/js/components/charts/AdvancedTimeline.tsx @@ -23,8 +23,8 @@ import { scaleLinear, scalePoint, scaleTime, ScaleTime } from 'd3-scale'; import { area, curveBasis, line as d3Line } from 'd3-shape'; import { flatten, isEqual, sortBy, throttle, uniq } from 'lodash'; import * as React from 'react'; +import { colors, rawSizes } from '../../app/theme'; import { isDefined } from '../../helpers/types'; -import { Theme, ThemeConsumer } from '../theme'; import './AdvancedTimeline.css'; import './LineChart.css'; @@ -366,14 +366,14 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State> ); }; - renderNewCodeLegend = (params: { leakStart: number; leakWidth: number; theme: Theme }) => { - const { leakStart, leakWidth, theme } = params; + renderNewCodeLegend = (params: { leakStart: number; leakWidth: number }) => { + const { leakStart, leakWidth } = params; const { leakLegendTextWidth, xScale, yScale } = this.state; const yRange = yScale.range(); const xRange = xScale.range(); - const legendMinWidth = (leakLegendTextWidth || 0) + theme.rawSizes.grid; - const legendPadding = theme.rawSizes.grid / 2; + const legendMinWidth = (leakLegendTextWidth || 0) + rawSizes.grid; + const legendPadding = rawSizes.grid / 2; let legendBackgroundPosition; let legendBackgroundWidth; @@ -390,7 +390,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State> } else { legendBackgroundWidth = legendMinWidth; legendBackgroundPosition = xRange[xRange.length - 1] - legendBackgroundWidth; - legendMargin = theme.rawSizes.grid / 2; + legendMargin = rawSizes.grid / 2; legendPosition = xRange[xRange.length - 1] - legendPadding; legendTextAnchor = 'end'; } @@ -398,7 +398,7 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State> return ( <> <rect - fill={theme.colors.leakPrimaryColor} + fill={colors.leakPrimaryColor} height={LEGEND_LINE_HEIGHT} width={legendBackgroundWidth} x={legendBackgroundPosition} @@ -435,21 +435,17 @@ export default class AdvancedTimeline extends React.PureComponent<Props, State> } return ( - <ThemeConsumer> - {theme => ( - <> - {displayNewCodeLegend && this.renderNewCodeLegend({ leakStart, leakWidth, theme })} - <rect - className="leak-chart-rect" - fill={theme.colors.leakPrimaryColor} - height={yRange[0] - yRange[yRange.length - 1]} - width={leakWidth} - x={leakStart} - y={yRange[yRange.length - 1]} - /> - </> - )} - </ThemeConsumer> + <> + {displayNewCodeLegend && this.renderNewCodeLegend({ leakStart, leakWidth })} + <rect + className="leak-chart-rect" + fill={colors.leakPrimaryColor} + height={yRange[0] - yRange[yRange.length - 1]} + width={leakWidth} + x={leakStart} + y={yRange[yRange.length - 1]} + /> + </> ); }; diff --git a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx index 9cfc0f92203..47fafb71366 100644 --- a/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx +++ b/server/sonar-web/src/main/js/components/charts/ColorGradientLegend.tsx @@ -19,7 +19,7 @@ */ import { ScaleLinear, ScaleOrdinal } from 'd3-scale'; import * as React from 'react'; -import { ThemeConsumer } from '../theme'; +import { colors } from '../../app/theme'; import './ColorGradientLegend.css'; interface Props { @@ -51,83 +51,73 @@ export default function ColorGradientLegend({ const widthNoPadding = width - padding[1]; const rectHeight = height - padding[0]; return ( - <ThemeConsumer> - {({ colors }) => ( - <svg className={className} height={height} width={width}> - <defs> - <linearGradient id="gradient-legend"> - {colorRange.map((color, idx) => ( - // eslint-disable-next-line react/no-array-index-key - <stop key={idx} offset={idx / lastColorIdx} stopColor={String(color)} /> - ))} - </linearGradient> + <svg className={className} height={height} width={width}> + <defs> + <linearGradient id="gradient-legend"> + {colorRange.map((color, idx) => ( + // eslint-disable-next-line react/no-array-index-key + <stop key={idx} offset={idx / lastColorIdx} stopColor={String(color)} /> + ))} + </linearGradient> - <pattern - id="stripes" - width="30" - height="30" - patternTransform="rotate(45 0 0)" - patternUnits="userSpaceOnUse"> - {NA_GRADIENT_LINE_INCREMENTS.map(i => ( - <React.Fragment key={i}> - <line - x1={i} - y1="0" - x2={i} - y2="30" - style={{ stroke: colors.gray71, strokeWidth: NA_SPACING }} - /> - <line - x1={i + NA_SPACING} - y1="0" - x2={i + NA_SPACING} - y2="30" - style={{ stroke: colors.gray60, strokeWidth: NA_SPACING }} - /> - </React.Fragment> - ))} - </pattern> - </defs> - <g transform={`translate(${padding[3]}, ${padding[0]})`}> - <rect - fill="url(#gradient-legend)" - height={rectHeight} - width={widthNoPadding} - x={0} - y={0} - /> - {colorDomain.map((d, idx) => ( - <text - className="gradient-legend-text" - dy="-2px" - // eslint-disable-next-line react/no-array-index-key - key={idx} - x={widthNoPadding * (idx / lastDomainIdx)} - y={0}> - {d} - </text> - ))} - </g> - {showColorNA && ( - <g transform={`translate(${widthNoPadding}, ${padding[0]})`}> - <rect - fill="url(#stripes)" - height={rectHeight} - width={padding[1] - NA_SPACING} - x={NA_SPACING} - y={0} + <pattern + id="stripes" + width="30" + height="30" + patternTransform="rotate(45 0 0)" + patternUnits="userSpaceOnUse"> + {NA_GRADIENT_LINE_INCREMENTS.map(i => ( + <React.Fragment key={i}> + <line + x1={i} + y1="0" + x2={i} + y2="30" + style={{ stroke: colors.gray71, strokeWidth: NA_SPACING }} /> - <text - className="gradient-legend-na" - dy="-2px" - x={NA_SPACING + (padding[1] - NA_SPACING) / 2} - y={0}> - N/A - </text> - </g> - )} - </svg> + <line + x1={i + NA_SPACING} + y1="0" + x2={i + NA_SPACING} + y2="30" + style={{ stroke: colors.gray60, strokeWidth: NA_SPACING }} + /> + </React.Fragment> + ))} + </pattern> + </defs> + <g transform={`translate(${padding[3]}, ${padding[0]})`}> + <rect fill="url(#gradient-legend)" height={rectHeight} width={widthNoPadding} x={0} y={0} /> + {colorDomain.map((d, idx) => ( + <text + className="gradient-legend-text" + dy="-2px" + // eslint-disable-next-line react/no-array-index-key + key={idx} + x={widthNoPadding * (idx / lastDomainIdx)} + y={0}> + {d} + </text> + ))} + </g> + {showColorNA && ( + <g transform={`translate(${widthNoPadding}, ${padding[0]})`}> + <rect + fill="url(#stripes)" + height={rectHeight} + width={padding[1] - NA_SPACING} + x={NA_SPACING} + y={0} + /> + <text + className="gradient-legend-na" + dy="-2px" + x={NA_SPACING + (padding[1] - NA_SPACING) / 2} + y={0}> + N/A + </text> + </g> )} - </ThemeConsumer> + </svg> ); } diff --git a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx index 8b37a6a2587..f4f2742eb75 100644 --- a/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx +++ b/server/sonar-web/src/main/js/components/charts/ZoomTimeLine.tsx @@ -24,7 +24,7 @@ import { area, curveBasis, line as d3Line } from 'd3-shape'; import { flatten, sortBy, throttle } from 'lodash'; import * as React from 'react'; import Draggable, { DraggableBounds, DraggableCore, DraggableData } from 'react-draggable'; -import { ThemeConsumer } from '../theme'; +import { colors } from '../../app/theme'; import './LineChart.css'; import './ZoomTimeLine.css'; @@ -219,17 +219,13 @@ export default class ZoomTimeLine extends React.PureComponent<Props, State> { } const yRange = yScale.range(); return ( - <ThemeConsumer> - {theme => ( - <rect - fill={theme.colors.leakPrimaryColor} - height={yRange[0] - yRange[yRange.length - 1]} - width={xScale.range()[1] - xScale(leakPeriodDate)} - x={xScale(leakPeriodDate)} - y={yRange[yRange.length - 1]} - /> - )} - </ThemeConsumer> + <rect + fill={colors.leakPrimaryColor} + height={yRange[0] - yRange[yRange.length - 1]} + width={xScale.range()[1] - xScale(leakPeriodDate)} + x={xScale(leakPeriodDate)} + y={yRange[yRange.length - 1]} + /> ); }; diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx index 77f2aafcceb..47a07318c08 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx +++ b/server/sonar-web/src/main/js/components/charts/__tests__/AdvancedTimeline-test.tsx @@ -19,7 +19,6 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import { ThemeConsumer } from '../../theme'; import AdvancedTimeline from '../AdvancedTimeline'; const newCodeLegendClass = '.new-code-legend'; @@ -53,10 +52,7 @@ it('should render correctly', () => { it('should render leak correctly', () => { const wrapper = shallowRender({ leakPeriodDate: new Date('2019-10-02') }); - const leakNode = wrapper - .find(ThemeConsumer) - .dive() - .find('.leak-chart-rect'); + const leakNode = wrapper.find('.leak-chart-rect'); expect(leakNode.exists()).toBe(true); expect(leakNode.getElement().props.width).toBe(15); }); @@ -67,7 +63,7 @@ it('should render leak legend correctly', () => { leakPeriodDate: new Date('2019-10-02') }); - const leakNode = wrapper.find(ThemeConsumer).dive(); + const leakNode = wrapper; expect(leakNode.find(newCodeLegendClass).exists()).toBe(true); expect(leakNode.find(newCodeLegendClass).props().textAnchor).toBe('start'); expect(leakNode).toMatchSnapshot(); @@ -88,7 +84,7 @@ it('should render leak legend correctly for small leak', () => { ] }); - const leakNode = wrapper.find(ThemeConsumer).dive(); + const leakNode = wrapper; expect(leakNode.find(newCodeLegendClass).exists()).toBe(true); expect(leakNode.find(newCodeLegendClass).props().textAnchor).toBe('end'); }); @@ -110,10 +106,7 @@ it('should set leakLegendTextWidth correctly', () => { it('should render old leak correctly', () => { const wrapper = shallowRender({ leakPeriodDate: new Date('2014-10-02') }); - const leakNode = wrapper - .find(ThemeConsumer) - .dive() - .find('.leak-chart-rect'); + const leakNode = wrapper.find('.leak-chart-rect'); expect(leakNode.exists()).toBe(true); expect(leakNode.getElement().props.width).toBe(30); }); diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx index b9d0bb216a0..922ff0836c9 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx +++ b/server/sonar-web/src/main/js/components/charts/__tests__/ColorGradientLegend-test.tsx @@ -20,10 +20,9 @@ import { scaleLinear } from 'd3-scale'; import { shallow } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; +import { colors } from '../../../app/theme'; import ColorGradientLegend from '../ColorGradientLegend'; -const { colors } = testTheme; const COLORS = [colors.green, colors.lightGreen, colors.yellow, colors.orange, colors.red]; it('should render properly', () => { @@ -39,5 +38,5 @@ it('should render properly', () => { width={200} /> ); - expect(wrapper.dive()).toMatchSnapshot(); + expect(wrapper).toMatchSnapshot(); }); diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx index 415accfd48d..3086a15386b 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx +++ b/server/sonar-web/src/main/js/components/charts/__tests__/ZoomTimeLine-test.tsx @@ -20,7 +20,7 @@ import { scaleTime } from 'd3-scale'; import { shallow } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; +import { colors } from '../../../app/theme'; import ZoomTimeLine from '../ZoomTimeLine'; const series = [ @@ -65,9 +65,7 @@ it('should be zoomable', () => { it('should render a leak period', () => { expect( shallowRender({ leakPeriodDate: new Date('2020-01-01') }) - .find('ContextConsumer') - .dive() - .find(`rect[fill="${testTheme.colors.leakPrimaryColor}"]`) + .find(`rect[fill="${colors.leakPrimaryColor}"]`) .exists() ).toBe(true); }); diff --git a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap index f4569f0f9fa..50770e9e759 100644 --- a/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/charts/__tests__/__snapshots__/AdvancedTimeline-test.tsx.snap @@ -1381,29 +1381,325 @@ exports[`should render correctly: no height 1`] = `<div />`; exports[`should render correctly: no width 1`] = `<div />`; exports[`should render leak legend correctly 1`] = ` -<Fragment> - <rect - fill="#fbf3d5" - height={16} - width={15} - x={15} - y={-16} - /> - <text - className="new-code-legend" - textAnchor="start" - x={19} - y={-4} +<svg + className="line-chart" + height={100} + width={100} +> + <g + transform="translate(60, 26)" > - new code - </text> - <rect - className="leak-chart-rect" - fill="#fbf3d5" - height={24} - width={15} - x={15} - y={0} - /> -</Fragment> + <rect + fill="#fbf3d5" + height={16} + width={15} + x={15} + y={-16} + /> + <text + className="new-code-legend" + textAnchor="start" + x={19} + y={-4} + > + new code + </text> + <rect + className="leak-chart-rect" + fill="#fbf3d5" + height={24} + width={15} + x={15} + y={0} + /> + <g> + <g + key="0" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={24} + y2={24} + /> + </g> + <g + key="0.2" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={22.4} + y2={22.4} + /> + </g> + <g + key="0.4" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={20.8} + y2={20.8} + /> + </g> + <g + key="0.6" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={19.200000000000003} + y2={19.200000000000003} + /> + </g> + <g + key="0.8" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={17.6} + y2={17.6} + /> + </g> + <g + key="1" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={16} + y2={16} + /> + </g> + <g + key="1.2" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={14.400000000000002} + y2={14.400000000000002} + /> + </g> + <g + key="1.4" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={12.800000000000002} + y2={12.800000000000002} + /> + </g> + <g + key="1.6" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={11.2} + y2={11.2} + /> + </g> + <g + key="1.8" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={9.600000000000001} + y2={9.600000000000001} + /> + </g> + <g + key="2" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={8} + y2={8} + /> + </g> + <g + key="2.2" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={6.399999999999999} + y2={6.399999999999999} + /> + </g> + <g + key="2.4" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={4.800000000000002} + y2={4.800000000000002} + /> + </g> + <g + key="2.6" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={3.1999999999999993} + y2={3.1999999999999993} + /> + </g> + <g + key="2.8" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={1.6000000000000023} + y2={1.6000000000000023} + /> + </g> + <g + key="3" + > + <line + className="line-chart-grid" + x1={0} + x2={30} + y1={0} + y2={0} + /> + </g> + </g> + <g + transform="translate(0, 20)" + > + <text + className="line-chart-tick" + key="0" + textAnchor="end" + transform="rotate(-35, 1.875, 24)" + x={1.875} + y={24} + > + October + </text> + <text + className="line-chart-tick" + key="1" + textAnchor="end" + transform="rotate(-35, 5.625, 24)" + x={5.625} + y={24} + > + 06 AM + </text> + <text + className="line-chart-tick" + key="2" + textAnchor="end" + transform="rotate(-35, 9.375, 24)" + x={9.375} + y={24} + > + 12 PM + </text> + <text + className="line-chart-tick" + key="3" + textAnchor="end" + transform="rotate(-35, 13.125, 24)" + x={13.125} + y={24} + > + 06 PM + </text> + <text + className="line-chart-tick" + key="4" + textAnchor="end" + transform="rotate(-35, 16.875, 24)" + x={16.875} + y={24} + > + Wed 02 + </text> + <text + className="line-chart-tick" + key="5" + textAnchor="end" + transform="rotate(-35, 20.625, 24)" + x={20.625} + y={24} + > + 06 AM + </text> + <text + className="line-chart-tick" + key="6" + textAnchor="end" + transform="rotate(-35, 24.375, 24)" + x={24.375} + y={24} + > + 12 PM + </text> + <text + className="line-chart-tick" + key="7" + textAnchor="end" + transform="rotate(-35, 28.125, 24)" + x={28.125} + y={24} + > + 06 PM + </text> + </g> + <g> + <path + className="line-chart-path line-chart-path-0" + d="M0,16L15,8" + key="test-1" + /> + <path + className="line-chart-path line-chart-path-1" + d="M30,0Z" + key="test-2" + /> + </g> + <g> + <circle + className="line-chart-dot line-chart-dot-1" + cx={30} + cy={0} + key="test-20" + r="2" + /> + </g> + <rect + className="chart-mouse-events-overlay" + height={24} + width={30} + /> + </g> +</svg> `; diff --git a/server/sonar-web/src/main/js/components/controls/BackButton.tsx b/server/sonar-web/src/main/js/components/controls/BackButton.tsx index 3a4010a7a86..3a20870d89d 100644 --- a/server/sonar-web/src/main/js/components/controls/BackButton.tsx +++ b/server/sonar-web/src/main/js/components/controls/BackButton.tsx @@ -19,8 +19,8 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { colors } from '../../app/theme'; import { translate } from '../../helpers/l10n'; -import { ThemeConsumer } from '../theme'; import Tooltip from './Tooltip'; interface Props { @@ -40,16 +40,12 @@ export default class BackButton extends React.PureComponent<Props> { }; renderIcon = () => ( - <ThemeConsumer> - {theme => ( - <svg height="24" viewBox="0 0 21 24" width="21"> - <path - d="M3.845 12.9992l5.993 5.993.052.056c.049.061.093.122.129.191.082.159.121.339.111.518-.006.102-.028.203-.064.298-.149.39-.537.652-.954.644-.102-.002-.204-.019-.301-.052-.148-.05-.273-.135-.387-.241l-8.407-8.407 8.407-8.407.056-.052c.061-.048.121-.092.19-.128.116-.06.237-.091.366-.108.076-.004.075-.004.153-.003.155.015.3.052.437.129.088.051.169.115.239.19.246.266.33.656.214.999-.051.149-.135.273-.241.387l-5.983 5.984c5.287-.044 10.577-.206 15.859.013.073.009.091.009.163.027.187.047.359.15.49.292.075.081.136.175.18.276.044.101.072.209.081.319.032.391-.175.775-.521.962-.097.052-.202.089-.311.107-.073.012-.091.01-.165.013H3.845z" - fill={this.props.disabled ? theme.colors.disableGrayText : theme.colors.secondFontColor} - /> - </svg> - )} - </ThemeConsumer> + <svg height="24" viewBox="0 0 21 24" width="21"> + <path + d="M3.845 12.9992l5.993 5.993.052.056c.049.061.093.122.129.191.082.159.121.339.111.518-.006.102-.028.203-.064.298-.149.39-.537.652-.954.644-.102-.002-.204-.019-.301-.052-.148-.05-.273-.135-.387-.241l-8.407-8.407 8.407-8.407.056-.052c.061-.048.121-.092.19-.128.116-.06.237-.091.366-.108.076-.004.075-.004.153-.003.155.015.3.052.437.129.088.051.169.115.239.19.246.266.33.656.214.999-.051.149-.135.273-.241.387l-5.983 5.984c5.287-.044 10.577-.206 15.859.013.073.009.091.009.163.027.187.047.359.15.49.292.075.081.136.175.18.276.044.101.072.209.081.319.032.391-.175.775-.521.962-.097.052-.202.089-.311.107-.073.012-.091.01-.165.013H3.845z" + fill={this.props.disabled ? colors.disableGrayText : colors.secondFontColor} + /> + </svg> ); render() { diff --git a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx index 4429741e96b..a67ae6a96ef 100644 --- a/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx +++ b/server/sonar-web/src/main/js/components/controls/BoxedTabs.tsx @@ -17,8 +17,9 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import styled from '@emotion/styled'; import * as React from 'react'; -import { styled, themeColor, ThemedProps, themeSize } from '../theme'; +import { colors, sizes } from '../../app/theme'; export interface BoxedTabsProps<K> { className?: string; @@ -32,17 +33,17 @@ const TabContainer = styled.div` flex-direction: row; `; -const baseBorder = ({ theme }: ThemedProps) => `1px solid ${theme.colors.barBorderColor}`; +const baseBorder = () => `1px solid ${colors.barBorderColor}`; -const highlightHoverMixin = ({ theme }: ThemedProps) => ` +const highlightHoverMixin = () => ` &:hover { - background-color: ${theme.colors.barBackgroundColorHighlight}; + background-color: ${colors.barBackgroundColorHighlight}; } `; const StyledTab = styled.button<{ active: boolean }>` position: relative; - background-color: ${props => (props.active ? 'white' : props.theme.colors.barBackgroundColor)}; + background-color: ${props => (props.active ? 'white' : colors.barBackgroundColor)}; border-top: ${baseBorder}; border-left: ${baseBorder}; border-right: none; @@ -52,7 +53,7 @@ const StyledTab = styled.button<{ active: boolean }>` min-height: 56px; ${props => !props.active && 'cursor: pointer;'} outline: 0; - padding: calc(2 * ${themeSize('gridSize')}); + padding: calc(2 * ${sizes.gridSize}); ${props => (!props.active ? highlightHoverMixin : null)} @@ -63,7 +64,7 @@ const StyledTab = styled.button<{ active: boolean }>` const ActiveBorder = styled.div<{ active: boolean }>` display: ${props => (props.active ? 'block' : 'none')}; - background-color: ${themeColor('blue')}; + background-color: ${colors.blue}; height: 3px; width: 100%; position: absolute; diff --git a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx index 8a68c914bda..b2d5b1d21dd 100644 --- a/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx +++ b/server/sonar-web/src/main/js/components/controls/GlobalMessages.tsx @@ -18,9 +18,10 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import { keyframes } from '@emotion/core'; +import styled from '@emotion/styled'; import * as React from 'react'; +import { colors, sizes, zIndexes } from '../../app/theme'; import { cutLongWords } from '../../helpers/path'; -import { styled, themeGet, themeSize } from '../theme'; import { ClearButton } from './buttons'; interface Message { @@ -50,7 +51,7 @@ export default function GlobalMessages({ closeGlobalMessage, messages }: GlobalM const MessagesContainer = styled.div` position: fixed; - z-index: ${themeGet('zIndexes', 'processContainerZIndex')}; + z-index: ${zIndexes.processContainerZIndex}; top: 0; left: 50%; width: 350px; @@ -96,29 +97,28 @@ const appearAnim = keyframes` const Message = styled.div<Pick<Message, 'level'>>` position: relative; padding: 0 30px 0 10px; - line-height: ${themeSize('controlHeight')}; + line-height: ${sizes.controlHeight}; border-radius: 0 0 3px 3px; box-sizing: border-box; color: #ffffff; - background-color: ${({ level, theme }) => - level === 'SUCCESS' ? theme.colors.green : theme.colors.red}; + background-color: ${({ level }) => (level === 'SUCCESS' ? colors.green : colors.red)}; text-align: center; opacity: 0; animation: ${appearAnim} 0.2s ease forwards; & + & { - margin-top: calc(${themeSize('gridSize')} / 2); + margin-top: calc(${sizes.gridSize} / 2); border-radius: 3px; } `; const CloseButton = styled(ClearButton)<Pick<Message, 'level'>>` position: absolute; - top: calc(${themeSize('gridSize')} / 4); - right: calc(${themeSize('gridSize')} / 4); + top: calc(${sizes.gridSize} / 4); + right: calc(${sizes.gridSize} / 4); &:hover svg, &:focus svg { - color: ${({ level, theme }) => (level === 'SUCCESS' ? theme.colors.green : theme.colors.red)}; + color: ${({ level }) => (level === 'SUCCESS' ? colors.green : colors.red)}; } `; diff --git a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx index a046f726147..cc927c4075c 100644 --- a/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/HelpTooltip.tsx @@ -19,9 +19,9 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { colors } from '../../app/theme'; import HelpIcon from '../icons/HelpIcon'; import { IconProps } from '../icons/Icon'; -import { ThemeConsumer } from '../theme'; import './HelpTooltip.css'; import Tooltip, { Placement } from './Tooltip'; @@ -42,11 +42,7 @@ export default function HelpTooltip({ size = 12, ...props }: Props) { overlay={props.overlay} placement={props.placement}> <span className="display-inline-flex-center"> - {props.children || ( - <ThemeConsumer> - {theme => <HelpIcon fill={theme.colors.gray71} size={size} />} - </ThemeConsumer> - )} + {props.children || <HelpIcon fill={colors.gray71} size={size} />} </span> </Tooltip> </div> @@ -56,11 +52,7 @@ export default function HelpTooltip({ size = 12, ...props }: Props) { export function DarkHelpTooltip({ size = 12, ...props }: Omit<Props, 'children'>) { return ( <HelpTooltip {...props}> - <ThemeConsumer> - {({ colors }) => ( - <HelpIcon fill={colors.transparentBlack} fillInner={colors.white} size={size} /> - )} - </ThemeConsumer> + <HelpIcon fill={colors.transparentBlack} fillInner={colors.white} size={size} /> </HelpTooltip> ); } diff --git a/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx b/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx index 1ab7a529fd5..134f43303dc 100644 --- a/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx +++ b/server/sonar-web/src/main/js/components/controls/ReloadButton.tsx @@ -19,8 +19,8 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { colors } from '../../app/theme'; import { translate } from '../../helpers/l10n'; -import { ThemeConsumer } from '../theme'; import Tooltip from './Tooltip'; interface Props { @@ -45,16 +45,12 @@ export default class ReloadButton extends React.PureComponent<Props> { href="#" onClick={this.handleClick}> { - <ThemeConsumer> - {theme => ( - <svg height="24" viewBox="0 0 18 24" width="18"> - <path - d="M16.6454 8.1084c-.3-.5-.9-.7-1.4-.4-.5.3-.7.9-.4 1.4.9 1.6 1.1 3.4.6 5.1-.5 1.7-1.7 3.2-3.2 4-3.3 1.8-7.4.6-9.1-2.7-1.8-3.1-.8-6.9 2.1-8.8v3.3h2v-7h-7v2h3.9c-3.7 2.5-5 7.5-2.8 11.4 1.6 3 4.6 4.6 7.7 4.6 1.4 0 2.8-.3 4.2-1.1 2-1.1 3.5-3 4.2-5.2.6-2.2.3-4.6-.8-6.6z" - fill={theme.colors.secondFontColor} - /> - </svg> - )} - </ThemeConsumer> + <svg height="24" viewBox="0 0 18 24" width="18"> + <path + d="M16.6454 8.1084c-.3-.5-.9-.7-1.4-.4-.5.3-.7.9-.4 1.4.9 1.6 1.1 3.4.6 5.1-.5 1.7-1.7 3.2-3.2 4-3.3 1.8-7.4.6-9.1-2.7-1.8-3.1-.8-6.9 2.1-8.8v3.3h2v-7h-7v2h3.9c-3.7 2.5-5 7.5-2.8 11.4 1.6 3 4.6 4.6 7.7 4.6 1.4 0 2.8-.3 4.2-1.1 2-1.1 3.5-3 4.2-5.2.6-2.2.3-4.6-.8-6.6z" + fill={colors.secondFontColor} + /> + </svg> } </a> </Tooltip> diff --git a/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx b/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx index 0065201d22e..6aa05387ac5 100644 --- a/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx +++ b/server/sonar-web/src/main/js/components/controls/ScreenPositionFixer.tsx @@ -20,7 +20,7 @@ import { throttle } from 'lodash'; import * as React from 'react'; import { findDOMNode } from 'react-dom'; -import { Theme, withTheme } from '../theme'; +import { rawSizes } from '../../app/theme'; interface Props { /** @@ -36,7 +36,6 @@ interface Props { * - when you load content asynchronously */ ready?: boolean; - theme: Theme; } interface Fixes { @@ -44,7 +43,7 @@ interface Fixes { topFix?: number; } -export class ScreenPositionFixer extends React.Component<Props, Fixes> { +export default class ScreenPositionFixer extends React.Component<Props, Fixes> { throttledPosition: () => void; constructor(props: Props) { @@ -83,7 +82,7 @@ export class ScreenPositionFixer extends React.Component<Props, Fixes> { }; position = () => { - const edgeMargin = 0.5 * this.props.theme.rawSizes.grid; + const edgeMargin = 0.5 * rawSizes.grid; // eslint-disable-next-line react/no-find-dom-node const node = findDOMNode(this); @@ -113,5 +112,3 @@ export class ScreenPositionFixer extends React.Component<Props, Fixes> { return this.props.children(this.state); } } - -export default withTheme(ScreenPositionFixer); diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx index 7f21fcf7c49..802541ad1bc 100644 --- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx +++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx @@ -20,7 +20,7 @@ import { throttle } from 'lodash'; import * as React from 'react'; import { createPortal, findDOMNode } from 'react-dom'; -import ThemeContext from '../theme'; +import { rawSizes } from '../../app/theme'; import ScreenPositionFixer from './ScreenPositionFixer'; import './Tooltip.css'; @@ -141,8 +141,6 @@ export class TooltipInner extends React.Component<TooltipProps, State> { this.clearTimeouts(); } - static contextType = ThemeContext; - addEventListeners = () => { window.addEventListener('resize', this.throttledPositionTooltip); window.addEventListener('scroll', this.throttledPositionTooltip); @@ -292,7 +290,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> { // We can live with a tooltip that's slightly positioned over the toggle // node. Only trigger if it really starts overlapping, as the re-positioning // is quite expensive, needing 2 re-renders. - const threshold = this.context.rawSizes.grid; + const threshold = rawSizes.grid; switch (this.getPlacement()) { case 'left': case 'right': diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/BackButton-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/BackButton-test.tsx index ba9cff070af..85eeea04581 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/BackButton-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/BackButton-test.tsx @@ -19,15 +19,12 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; import { click } from '../../../helpers/testUtils'; -import { ThemeProvider } from '../../theme'; import BackButton from '../BackButton'; it('should render properly', () => { const wrapper = shallowRender(); expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('ContextConsumer').dive()).toMatchSnapshot(); }); it('should handle click', () => { @@ -39,10 +36,5 @@ it('should handle click', () => { }); function shallowRender(props: Partial<BackButton['props']> = {}) { - return shallow<BackButton>(<BackButton onClick={jest.fn()} {...props} />, { - wrappingComponent: ThemeProvider, - wrappingComponentProps: { - theme: testTheme - } - }); + return shallow<BackButton>(<BackButton onClick={jest.fn()} {...props} />); } diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/Dropdown-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/Dropdown-test.tsx index e08d8293fba..5903d04efa0 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/Dropdown-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/Dropdown-test.tsx @@ -100,13 +100,7 @@ describe('DropdownOverlay', () => { ); expect(wrapper.is(ScreenPositionFixer)).toBe(true); - expect( - wrapper - .dive() - .dive() - .dive() - .is(Popup) - ).toBe(true); + expect(wrapper.dive().is(Popup)).toBe(true); }); it('should render overlay without screen fixer', () => { diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx index 84560d0ee49..a2a914febfa 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/GlobalMessages-test.tsx @@ -20,7 +20,7 @@ import { shallow } from 'enzyme'; import { matchers } from 'jest-emotion'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; +import { colors } from '../../../app/theme'; import GlobalMessages, { GlobalMessagesProps } from '../GlobalMessages'; expect.extend(matchers); @@ -54,14 +54,14 @@ it('should render with correct css', () => { .find('GlobalMessage') .first() .render() - ).toHaveStyleRule('background-color', testTheme.colors.red); + ).toHaveStyleRule('background-color', colors.red); expect( wrapper .find('GlobalMessage') .last() .render() - ).toHaveStyleRule('background-color', testTheme.colors.green); + ).toHaveStyleRule('background-color', colors.green); }); function shallowRender(props: Partial<GlobalMessagesProps> = {}) { diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/HelpTooltip-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/HelpTooltip-test.tsx index b5d8e534566..eefb01368a3 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/HelpTooltip-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/HelpTooltip-test.tsx @@ -19,44 +19,14 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; -import { ThemeProvider } from '../../theme'; import HelpTooltip, { DarkHelpTooltip } from '../HelpTooltip'; it('should render properly', () => { - const wrapper = shallow(<HelpTooltip overlay={<div className="my-overlay" />} />, { - wrappingComponent: ThemeProvider, - wrappingComponentProps: { - theme: testTheme - } - }); + const wrapper = shallow(<HelpTooltip overlay={<div className="my-overlay" />} />); expect(wrapper).toMatchSnapshot('default'); - expect(wrapper.find('ContextConsumer').dive()).toMatchSnapshot('default icon'); - - wrapper.setProps({ size: 18 }); - expect( - wrapper - .find('ContextConsumer') - .dive() - .prop('size') - ).toBe(18); }); it('should render dark helptooltip properly', () => { - const wrapper = shallow(<DarkHelpTooltip overlay={<div className="my-overlay" />} size={14} />, { - wrappingComponent: ThemeProvider, - wrappingComponentProps: { - theme: testTheme - } - }); + const wrapper = shallow(<DarkHelpTooltip overlay={<div className="my-overlay" />} size={14} />); expect(wrapper).toMatchSnapshot('dark'); - expect(wrapper.find('ContextConsumer').dive()).toMatchSnapshot('dark icon'); - - wrapper.setProps({ size: undefined }); - expect( - wrapper - .find('ContextConsumer') - .dive() - .prop('size') - ).toBe(12); }); diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ReloadButton-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ReloadButton-test.tsx index 46ff72d8432..a12d4a1e010 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/ReloadButton-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/ReloadButton-test.tsx @@ -19,15 +19,12 @@ */ import { shallow } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; import { click } from '../../../helpers/testUtils'; -import { ThemeProvider } from '../../theme'; import ReloadButton from '../ReloadButton'; it('should render properly', () => { const wrapper = shallowRender(); expect(wrapper).toMatchSnapshot(); - expect(wrapper.find('ContextConsumer').dive()).toMatchSnapshot(); }); it('should handle click', () => { @@ -39,10 +36,5 @@ it('should handle click', () => { }); function shallowRender(props: Partial<ReloadButton['props']> = {}) { - return shallow<ReloadButton>(<ReloadButton onClick={jest.fn()} {...props} />, { - wrappingComponent: ThemeProvider, - wrappingComponentProps: { - theme: testTheme - } - }); + return shallow<ReloadButton>(<ReloadButton onClick={jest.fn()} {...props} />); } diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx index 94aaf9a840d..d7424e4ba0f 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/ScreenPositionFixer-test.tsx @@ -19,9 +19,8 @@ */ import { mount } from 'enzyme'; import * as React from 'react'; -import testTheme from '../../../../../../config/jest/testTheme'; import { resizeWindowTo, setNodeRect } from '../../../helpers/testUtils'; -import { ScreenPositionFixer } from '../ScreenPositionFixer'; +import ScreenPositionFixer from '../ScreenPositionFixer'; jest.mock('lodash', () => { const lodash = jest.requireActual('lodash'); @@ -91,5 +90,5 @@ it('should re-position when window is resized', () => { function mountRender(props: Partial<ScreenPositionFixer['props']>) { // eslint-disable-next-line react/no-children-prop - return mount(<ScreenPositionFixer theme={testTheme} children={() => <div />} {...props} />); + return mount(<ScreenPositionFixer children={() => <div />} {...props} />); } diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BackButton-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BackButton-test.tsx.snap index 57a5f2c6135..3822c058327 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BackButton-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/BackButton-test.tsx.snap @@ -9,9 +9,16 @@ exports[`should handle click 1`] = ` href="#" onClick={[Function]} > - <ContextConsumer> - <Component /> - </ContextConsumer> + <svg + height="24" + viewBox="0 0 21 24" + width="21" + > + <path + d="M3.845 12.9992l5.993 5.993.052.056c.049.061.093.122.129.191.082.159.121.339.111.518-.006.102-.028.203-.064.298-.149.39-.537.652-.954.644-.102-.002-.204-.019-.301-.052-.148-.05-.273-.135-.387-.241l-8.407-8.407 8.407-8.407.056-.052c.061-.048.121-.092.19-.128.116-.06.237-.091.366-.108.076-.004.075-.004.153-.003.155.015.3.052.437.129.088.051.169.115.239.19.246.266.33.656.214.999-.051.149-.135.273-.241.387l-5.983 5.984c5.287-.044 10.577-.206 15.859.013.073.009.091.009.163.027.187.047.359.15.49.292.075.081.136.175.18.276.044.101.072.209.081.319.032.391-.175.775-.521.962-.097.052-.202.089-.311.107-.073.012-.091.01-.165.013H3.845z" + fill="#666" + /> + </svg> </a> </Tooltip> `; @@ -25,22 +32,16 @@ exports[`should render properly 1`] = ` href="#" onClick={[Function]} > - <ContextConsumer> - <Component /> - </ContextConsumer> + <svg + height="24" + viewBox="0 0 21 24" + width="21" + > + <path + d="M3.845 12.9992l5.993 5.993.052.056c.049.061.093.122.129.191.082.159.121.339.111.518-.006.102-.028.203-.064.298-.149.39-.537.652-.954.644-.102-.002-.204-.019-.301-.052-.148-.05-.273-.135-.387-.241l-8.407-8.407 8.407-8.407.056-.052c.061-.048.121-.092.19-.128.116-.06.237-.091.366-.108.076-.004.075-.004.153-.003.155.015.3.052.437.129.088.051.169.115.239.19.246.266.33.656.214.999-.051.149-.135.273-.241.387l-5.983 5.984c5.287-.044 10.577-.206 15.859.013.073.009.091.009.163.027.187.047.359.15.49.292.075.081.136.175.18.276.044.101.072.209.081.319.032.391-.175.775-.521.962-.097.052-.202.089-.311.107-.073.012-.091.01-.165.013H3.845z" + fill="#666" + /> + </svg> </a> </Tooltip> `; - -exports[`should render properly 2`] = ` -<svg - height="24" - viewBox="0 0 21 24" - width="21" -> - <path - d="M3.845 12.9992l5.993 5.993.052.056c.049.061.093.122.129.191.082.159.121.339.111.518-.006.102-.028.203-.064.298-.149.39-.537.652-.954.644-.102-.002-.204-.019-.301-.052-.148-.05-.273-.135-.387-.241l-8.407-8.407 8.407-8.407.056-.052c.061-.048.121-.092.19-.128.116-.06.237-.091.366-.108.076-.004.075-.004.153-.003.155.015.3.052.437.129.088.051.169.115.239.19.246.266.33.656.214.999-.051.149-.135.273-.241.387l-5.983 5.984c5.287-.044 10.577-.206 15.859.013.073.009.091.009.163.027.187.047.359.15.49.292.075.081.136.175.18.276.044.101.072.209.081.319.032.391-.175.775-.521.962-.097.052-.202.089-.311.107-.073.012-.091.01-.165.013H3.845z" - fill="#777" - /> -</svg> -`; diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap index abf28dfdd32..480c575013f 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/HelpTooltip-test.tsx.snap @@ -8,20 +8,14 @@ exports[`should render dark helptooltip properly: dark 1`] = ` /> } > - <ContextConsumer> - <Component /> - </ContextConsumer> + <HelpIcon + fill="rgba(0, 0, 0, 0.25)" + fillInner="#ffffff" + size={14} + /> </HelpTooltip> `; -exports[`should render dark helptooltip properly: dark icon 1`] = ` -<HelpIcon - fill="rgba(0, 0, 0, 0.25)" - fillInner="#ffffff" - size={14} -/> -`; - exports[`should render properly: default 1`] = ` <div className="help-tooltip" @@ -37,17 +31,11 @@ exports[`should render properly: default 1`] = ` <span className="display-inline-flex-center" > - <ContextConsumer> - <Component /> - </ContextConsumer> + <HelpIcon + fill="#b4b4b4" + size={12} + /> </span> </Tooltip> </div> `; - -exports[`should render properly: default icon 1`] = ` -<HelpIcon - fill="#b4b4b4" - size={12} -/> -`; diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ReloadButton-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ReloadButton-test.tsx.snap index 9510ca69cca..96a3a37d1d1 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ReloadButton-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/ReloadButton-test.tsx.snap @@ -9,9 +9,16 @@ exports[`should handle click 1`] = ` href="#" onClick={[Function]} > - <ContextConsumer> - <Component /> - </ContextConsumer> + <svg + height="24" + viewBox="0 0 18 24" + width="18" + > + <path + d="M16.6454 8.1084c-.3-.5-.9-.7-1.4-.4-.5.3-.7.9-.4 1.4.9 1.6 1.1 3.4.6 5.1-.5 1.7-1.7 3.2-3.2 4-3.3 1.8-7.4.6-9.1-2.7-1.8-3.1-.8-6.9 2.1-8.8v3.3h2v-7h-7v2h3.9c-3.7 2.5-5 7.5-2.8 11.4 1.6 3 4.6 4.6 7.7 4.6 1.4 0 2.8-.3 4.2-1.1 2-1.1 3.5-3 4.2-5.2.6-2.2.3-4.6-.8-6.6z" + fill="#666" + /> + </svg> </a> </Tooltip> `; @@ -25,22 +32,16 @@ exports[`should render properly 1`] = ` href="#" onClick={[Function]} > - <ContextConsumer> - <Component /> - </ContextConsumer> + <svg + height="24" + viewBox="0 0 18 24" + width="18" + > + <path + d="M16.6454 8.1084c-.3-.5-.9-.7-1.4-.4-.5.3-.7.9-.4 1.4.9 1.6 1.1 3.4.6 5.1-.5 1.7-1.7 3.2-3.2 4-3.3 1.8-7.4.6-9.1-2.7-1.8-3.1-.8-6.9 2.1-8.8v3.3h2v-7h-7v2h3.9c-3.7 2.5-5 7.5-2.8 11.4 1.6 3 4.6 4.6 7.7 4.6 1.4 0 2.8-.3 4.2-1.1 2-1.1 3.5-3 4.2-5.2.6-2.2.3-4.6-.8-6.6z" + fill="#666" + /> + </svg> </a> </Tooltip> `; - -exports[`should render properly 2`] = ` -<svg - height="24" - viewBox="0 0 18 24" - width="18" -> - <path - d="M16.6454 8.1084c-.3-.5-.9-.7-1.4-.4-.5.3-.7.9-.4 1.4.9 1.6 1.1 3.4.6 5.1-.5 1.7-1.7 3.2-3.2 4-3.3 1.8-7.4.6-9.1-2.7-1.8-3.1-.8-6.9 2.1-8.8v3.3h2v-7h-7v2h3.9c-3.7 2.5-5 7.5-2.8 11.4 1.6 3 4.6 4.6 7.7 4.6 1.4 0 2.8-.3 4.2-1.1 2-1.1 3.5-3 4.2-5.2.6-2.2.3-4.6-.8-6.6z" - fill="#777" - /> -</svg> -`; diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap index 786b1bfe0ad..de3df03b6e5 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/controls/__tests__/__snapshots__/Tooltip-test.tsx.snap @@ -30,11 +30,11 @@ exports[`should render 2`] = ` onMouseLeave={[Function]} /> <TooltipPortal> - <WithTheme(ScreenPositionFixer) + <ScreenPositionFixer ready={false} > <Component /> - </WithTheme(ScreenPositionFixer)> + </ScreenPositionFixer> </TooltipPortal> </Fragment> `; diff --git a/server/sonar-web/src/main/js/components/controls/__tests__/buttons-test.tsx b/server/sonar-web/src/main/js/components/controls/__tests__/buttons-test.tsx index c199c5778cc..36f822e3e72 100644 --- a/server/sonar-web/src/main/js/components/controls/__tests__/buttons-test.tsx +++ b/server/sonar-web/src/main/js/components/controls/__tests__/buttons-test.tsx @@ -72,6 +72,6 @@ describe('ButtonIcon', () => { <ButtonIcon tooltip="my tooltip" tooltipProps={{ visible: true }} {...props}> <i /> </ButtonIcon> - ).dive(); + ); } }); diff --git a/server/sonar-web/src/main/js/components/controls/buttons.tsx b/server/sonar-web/src/main/js/components/controls/buttons.tsx index 742b50f1191..ec5b58dbb74 100644 --- a/server/sonar-web/src/main/js/components/controls/buttons.tsx +++ b/server/sonar-web/src/main/js/components/controls/buttons.tsx @@ -19,12 +19,12 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; +import { colors } from '../../app/theme'; import ChevronRightIcon from '../icons/ChevronRightIcon'; import ClearIcon, { ClearIconProps } from '../icons/ClearIcon'; import DeleteIcon from '../icons/DeleteIcon'; import EditIcon from '../icons/EditIcon'; import { IconProps } from '../icons/Icon'; -import { ThemeConsumer } from '../theme'; import './buttons.css'; import Tooltip, { TooltipProps } from './Tooltip'; @@ -113,18 +113,14 @@ export interface ButtonIconProps extends ButtonProps { export function ButtonIcon(props: ButtonIconProps) { const { className, color, tooltip, tooltipProps, ...other } = props; return ( - <ThemeConsumer> - {theme => ( - <Tooltip mouseEnterDelay={0.4} overlay={tooltip} {...tooltipProps}> - <Button - className={classNames(className, 'button-icon')} - stopPropagation={true} - style={{ color: color || theme.colors.darkBlue }} - {...other} - /> - </Tooltip> - )} - </ThemeConsumer> + <Tooltip mouseEnterDelay={0.4} overlay={tooltip} {...tooltipProps}> + <Button + className={classNames(className, 'button-icon')} + stopPropagation={true} + style={{ color: color || colors.darkBlue }} + {...other} + /> + </Tooltip> ); } @@ -136,13 +132,9 @@ interface ClearButtonProps extends ButtonIconProps { export function ClearButton({ color, iconProps = {}, ...props }: ClearButtonProps) { return ( - <ThemeConsumer> - {theme => ( - <ButtonIcon color={color || theme.colors.gray60} {...props}> - <ClearIcon {...iconProps} /> - </ButtonIcon> - )} - </ThemeConsumer> + <ButtonIcon color={color || colors.gray60} {...props}> + <ClearIcon {...iconProps} /> + </ButtonIcon> ); } @@ -154,13 +146,9 @@ interface ActionButtonProps extends ButtonIconProps { export function DeleteButton({ iconProps = {}, ...props }: ActionButtonProps) { return ( - <ThemeConsumer> - {theme => ( - <ButtonIcon color={theme.colors.red} {...props}> - <DeleteIcon {...iconProps} /> - </ButtonIcon> - )} - </ThemeConsumer> + <ButtonIcon color={colors.red} {...props}> + <DeleteIcon {...iconProps} /> + </ButtonIcon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx index c6c71782d7a..d043997528f 100644 --- a/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/AlertErrorIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function AlertErrorIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M11.402 10.018q0-0.232-0.17-0.402l-1.616-1.616 1.616-1.616q0.17-0.17 0.17-0.402 0-0.241-0.17-0.411l-0.804-0.804q-0.17-0.17-0.411-0.17-0.232 0-0.402 0.17l-1.616 1.616-1.616-1.616q-0.17-0.17-0.402-0.17-0.241 0-0.411 0.17l-0.804 0.804q-0.17 0.17-0.17 0.411 0 0.232 0.17 0.402l1.616 1.616-1.616 1.616q-0.17 0.17-0.17 0.402 0 0.241 0.17 0.411l0.804 0.804q0.17 0.17 0.411 0.17 0.232 0 0.402-0.17l1.616-1.616 1.616 1.616q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l0.804-0.804q0.17-0.17 0.17-0.411zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z" - style={{ fill: fill || theme.colors.red }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M11.402 10.018q0-0.232-0.17-0.402l-1.616-1.616 1.616-1.616q0.17-0.17 0.17-0.402 0-0.241-0.17-0.411l-0.804-0.804q-0.17-0.17-0.411-0.17-0.232 0-0.402 0.17l-1.616 1.616-1.616-1.616q-0.17-0.17-0.402-0.17-0.241 0-0.411 0.17l-0.804 0.804q-0.17 0.17-0.17 0.411 0 0.232 0.17 0.402l1.616 1.616-1.616 1.616q-0.17 0.17-0.17 0.402 0 0.241 0.17 0.411l0.804 0.804q0.17 0.17 0.411 0.17 0.232 0 0.402-0.17l1.616-1.616 1.616 1.616q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l0.804-0.804q0.17-0.17 0.17-0.411zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z" + style={{ fill: fill || colors.red }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx index 707d0f9e9f6..8af1622fbf9 100644 --- a/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/AlertSuccessIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function AlertSuccessIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M12.607 6.554q0-0.25-0.161-0.411l-0.813-0.804q-0.17-0.17-0.402-0.17t-0.402 0.17l-3.643 3.634-2.018-2.018q-0.17-0.17-0.402-0.17t-0.402 0.17l-0.813 0.804q-0.161 0.161-0.161 0.411 0 0.241 0.161 0.402l3.232 3.232q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l4.848-4.848q0.161-0.161 0.161-0.402zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z" - style={{ fill: fill || theme.colors.green }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M12.607 6.554q0-0.25-0.161-0.411l-0.813-0.804q-0.17-0.17-0.402-0.17t-0.402 0.17l-3.643 3.634-2.018-2.018q-0.17-0.17-0.402-0.17t-0.402 0.17l-0.813 0.804q-0.161 0.161-0.161 0.411 0 0.241 0.161 0.402l3.232 3.232q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l4.848-4.848q0.161-0.161 0.161-0.402zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z" + style={{ fill: fill || colors.green }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx b/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx index 7dc322657d2..ef6e6b967b5 100644 --- a/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/AlertWarnIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function AlertWarnIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 1.143q1.866 0 3.442.92t2.496 2.496.92 3.442-.92 3.442-2.496 2.496-3.442.92-3.442-.92-2.496-2.496-.92-3.442.92-3.442 2.496-2.496T8 1.143zm1.143 11.134v-1.696q0-.125-.08-.21t-.196-.085H7.153q-.116 0-.205.089t-.089.205v1.696q0 .116.089.205t.205.089h1.714q.116 0 .196-.085t.08-.21zm-.018-3.072l.161-5.545q0-.107-.089-.161-.089-.071-.214-.071H7.019q-.125 0-.214.071-.089.054-.089.161l.152 5.545q0 .089.089.156t.214.067h1.652q.125 0 .21-.067t.094-.156z" - style={{ fill: fill || theme.colors.orange }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 1.143q1.866 0 3.442.92t2.496 2.496.92 3.442-.92 3.442-2.496 2.496-3.442.92-3.442-.92-2.496-2.496-.92-3.442.92-3.442 2.496-2.496T8 1.143zm1.143 11.134v-1.696q0-.125-.08-.21t-.196-.085H7.153q-.116 0-.205.089t-.089.205v1.696q0 .116.089.205t.205.089h1.714q.116 0 .196-.085t.08-.21zm-.018-3.072l.161-5.545q0-.107-.089-.161-.089-.071-.214-.071H7.019q-.125 0-.214.071-.089.054-.089.161l.152 5.545q0 .089.089.156t.214.067h1.652q.125 0 .21-.067t.094-.156z" + style={{ fill: fill || colors.orange }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx index b6e9207cc58..df8a8e0fcb8 100644 --- a/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/BranchIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function BranchIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M12.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C3.5 3 4.1 3.8 5 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M12.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C3.5 3 4.1 3.8 5 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx b/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx index af23676da6a..9052020e9f6 100644 --- a/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/BranchLikeIcon.tsx @@ -31,7 +31,6 @@ export interface BranchLikeIconProps extends IconProps { export default function BranchLikeIcon({ branchLike, ...props }: BranchLikeIconProps) { if (isPullRequest(branchLike)) { return <PullRequestIcon {...props} />; - } else { - return <BranchIcon {...props} />; } + return <BranchIcon {...props} />; } diff --git a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx index 4d4d305190a..2fde9c108bf 100644 --- a/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/ChartLegendIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon from './Icon'; interface Props { className?: string; @@ -27,17 +28,13 @@ interface Props { } export default function ChartLegendIcon({ index, ...iconProps }: Props) { + const COLORS = [colors.blue, colors.darkBlue, '#24c6e0']; return ( - <ThemedIcon {...iconProps}> - {({ theme }) => { - const COLORS = [theme.colors.blue, theme.colors.darkBlue, '#24c6e0']; - return ( - <path - d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z" - style={{ fill: COLORS[index] || COLORS[0] }} - /> - ); - }} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14.325 7.143v1.714q0 0.357-0.25 0.607t-0.607 0.25h-10.857q-0.357 0-0.607-0.25t-0.25-0.607v-1.714q0-0.357 0.25-0.607t0.607-0.25h10.857q0.357 0 0.607 0.25t0.25 0.607z" + style={{ fill: COLORS[index] || COLORS[0] }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx b/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx index 76af77cd4cc..217601d5cb7 100644 --- a/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/FavoriteIcon.tsx @@ -19,7 +19,7 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; -import { ThemeConsumer } from '../theme'; +import { colors } from '../../app/theme'; import Icon, { IconProps } from './Icon'; interface Props extends IconProps { @@ -28,17 +28,13 @@ interface Props extends IconProps { export default function FavoriteIcon({ className, favorite, fill, ...iconProps }: Props) { return ( - <ThemeConsumer> - {theme => ( - <Icon - className={classNames('icon-outline', { 'is-filled': favorite }, className)} - style={{ color: fill || theme.colors.orange }} - {...iconProps}> - <g transform="matrix(0.988024,0,0,0.988024,0.0957953,0.717719)"> - <path d="M15.428,5.777C15.428,5.908 15.35,6.051 15.195,6.205L11.954,9.366L12.722,13.83C12.728,13.872 12.731,13.932 12.731,14.009C12.731,14.134 12.7,14.24 12.637,14.326C12.575,14.412 12.484,14.455 12.365,14.455C12.252,14.455 12.133,14.42 12.008,14.348L7.999,12.241L3.99,14.348C3.859,14.42 3.74,14.455 3.633,14.455C3.508,14.455 3.414,14.412 3.352,14.326C3.289,14.24 3.258,14.134 3.258,14.009C3.258,13.973 3.264,13.914 3.276,13.83L4.044,9.366L0.794,6.205C0.645,6.045 0.57,5.902 0.57,5.777C0.57,5.557 0.737,5.42 1.07,5.366L5.552,4.714L7.561,0.652C7.674,0.408 7.82,0.286 7.999,0.286C8.177,0.286 8.323,0.408 8.436,0.652L10.445,4.714L14.927,5.366C15.261,5.42 15.427,5.557 15.427,5.777L15.428,5.777Z" /> - </g> - </Icon> - )} - </ThemeConsumer> + <Icon + className={classNames('icon-outline', { 'is-filled': favorite }, className)} + style={{ color: fill || colors.orange }} + {...iconProps}> + <g transform="matrix(0.988024,0,0,0.988024,0.0957953,0.717719)"> + <path d="M15.428,5.777C15.428,5.908 15.35,6.051 15.195,6.205L11.954,9.366L12.722,13.83C12.728,13.872 12.731,13.932 12.731,14.009C12.731,14.134 12.7,14.24 12.637,14.326C12.575,14.412 12.484,14.455 12.365,14.455C12.252,14.455 12.133,14.42 12.008,14.348L7.999,12.241L3.99,14.348C3.859,14.42 3.74,14.455 3.633,14.455C3.508,14.455 3.414,14.412 3.352,14.326C3.289,14.24 3.258,14.134 3.258,14.009C3.258,13.973 3.264,13.914 3.276,13.83L4.044,9.366L0.794,6.205C0.645,6.045 0.57,5.902 0.57,5.777C0.57,5.557 0.737,5.42 1.07,5.366L5.552,4.714L7.561,0.652C7.674,0.408 7.82,0.286 7.999,0.286C8.177,0.286 8.323,0.408 8.436,0.652L10.445,4.714L14.927,5.366C15.261,5.42 15.427,5.557 15.427,5.777L15.428,5.777Z" /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx b/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx index 9efe35a17ab..bbe6d88db56 100644 --- a/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/GroupIcon.tsx @@ -18,19 +18,18 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function GroupIcon({ fill, size = 36, ...iconProps }: IconProps) { return ( - <ThemedIcon viewBox="0 0 36 36" {...iconProps}> - {({ theme }) => ( - <g transform="matrix(0.0625,0,0,0.0625,3,4)"> - <path - d="M148.25,224C121.25,224.833 99.167,235.5 82,256L48.5,256C34.833,256 23.333,252.625 14,245.875C4.667,239.125 0,229.25 0,216.25C0,157.417 10.333,128 31,128C32,128 35.625,129.75 41.875,133.25C48.125,136.75 56.25,140.292 66.25,143.875C76.25,147.458 86.167,149.25 96,149.25C107.167,149.25 118.25,147.333 129.25,143.5C128.417,149.667 128,155.167 128,160C128,183.167 134.75,204.5 148.25,224ZM416,383.25C416,403.25 409.917,419.042 397.75,430.625C385.583,442.208 369.417,448 349.25,448L130.75,448C110.583,448 94.417,442.208 82.25,430.625C70.083,419.042 64,403.25 64,383.25C64,374.417 64.292,365.792 64.875,357.375C65.458,348.958 66.625,339.875 68.375,330.125C70.125,320.375 72.333,311.333 75,303C77.667,294.667 81.25,286.542 85.75,278.625C90.25,270.708 95.417,263.958 101.25,258.375C107.083,252.792 114.208,248.333 122.625,245C131.042,241.667 140.333,240 150.5,240C152.167,240 155.75,241.792 161.25,245.375C166.75,248.958 172.833,252.958 179.5,257.375C186.167,261.792 195.083,265.792 206.25,269.375C217.417,272.958 228.667,274.75 240,274.75C251.333,274.75 262.583,272.958 273.75,269.375C284.917,265.792 293.833,261.792 300.5,257.375C307.167,252.958 313.25,248.958 318.75,245.375C324.25,241.792 327.833,240 329.5,240C339.667,240 348.958,241.667 357.375,245C365.792,248.333 372.917,252.792 378.75,258.375C384.583,263.958 389.75,270.708 394.25,278.625C398.75,286.542 402.333,294.667 405,303C407.667,311.333 409.875,320.375 411.625,330.125C413.375,339.875 414.542,348.958 415.125,357.375C415.708,365.792 416,374.417 416,383.25ZM160,64C160,81.667 153.75,96.75 141.25,109.25C128.75,121.75 113.667,128 96,128C78.333,128 63.25,121.75 50.75,109.25C38.25,96.75 32,81.667 32,64C32,46.333 38.25,31.25 50.75,18.75C63.25,6.25 78.333,0 96,0C113.667,0 128.75,6.25 141.25,18.75C153.75,31.25 160,46.333 160,64ZM336,160C336,186.5 326.625,209.125 307.875,227.875C289.125,246.625 266.5,256 240,256C213.5,256 190.875,246.625 172.125,227.875C153.375,209.125 144,186.5 144,160C144,133.5 153.375,110.875 172.125,92.125C190.875,73.375 213.5,64 240,64C266.5,64 289.125,73.375 307.875,92.125C326.625,110.875 336,133.5 336,160ZM480,216.25C480,229.25 475.333,239.125 466,245.875C456.667,252.625 445.167,256 431.5,256L398,256C380.833,235.5 358.75,224.833 331.75,224C345.25,204.5 352,183.167 352,160C352,155.167 351.583,149.667 350.75,143.5C361.75,147.333 372.833,149.25 384,149.25C393.833,149.25 403.75,147.458 413.75,143.875C423.75,140.292 431.875,136.75 438.125,133.25C444.375,129.75 448,128 449,128C469.667,128 480,157.417 480,216.25ZM448,64C448,81.667 441.75,96.75 429.25,109.25C416.75,121.75 401.667,128 384,128C366.333,128 351.25,121.75 338.75,109.25C326.25,96.75 320,81.667 320,64C320,46.333 326.25,31.25 338.75,18.75C351.25,6.25 366.333,0 384,0C401.667,0 416.75,6.25 429.25,18.75C441.75,31.25 448,46.333 448,64Z" - style={{ fill: fill || theme.colors.gray67 }} - /> - </g> - )} - </ThemedIcon> + <Icon viewBox="0 0 36 36" {...iconProps}> + <g transform="matrix(0.0625,0,0,0.0625,3,4)"> + <path + d="M148.25,224C121.25,224.833 99.167,235.5 82,256L48.5,256C34.833,256 23.333,252.625 14,245.875C4.667,239.125 0,229.25 0,216.25C0,157.417 10.333,128 31,128C32,128 35.625,129.75 41.875,133.25C48.125,136.75 56.25,140.292 66.25,143.875C76.25,147.458 86.167,149.25 96,149.25C107.167,149.25 118.25,147.333 129.25,143.5C128.417,149.667 128,155.167 128,160C128,183.167 134.75,204.5 148.25,224ZM416,383.25C416,403.25 409.917,419.042 397.75,430.625C385.583,442.208 369.417,448 349.25,448L130.75,448C110.583,448 94.417,442.208 82.25,430.625C70.083,419.042 64,403.25 64,383.25C64,374.417 64.292,365.792 64.875,357.375C65.458,348.958 66.625,339.875 68.375,330.125C70.125,320.375 72.333,311.333 75,303C77.667,294.667 81.25,286.542 85.75,278.625C90.25,270.708 95.417,263.958 101.25,258.375C107.083,252.792 114.208,248.333 122.625,245C131.042,241.667 140.333,240 150.5,240C152.167,240 155.75,241.792 161.25,245.375C166.75,248.958 172.833,252.958 179.5,257.375C186.167,261.792 195.083,265.792 206.25,269.375C217.417,272.958 228.667,274.75 240,274.75C251.333,274.75 262.583,272.958 273.75,269.375C284.917,265.792 293.833,261.792 300.5,257.375C307.167,252.958 313.25,248.958 318.75,245.375C324.25,241.792 327.833,240 329.5,240C339.667,240 348.958,241.667 357.375,245C365.792,248.333 372.917,252.792 378.75,258.375C384.583,263.958 389.75,270.708 394.25,278.625C398.75,286.542 402.333,294.667 405,303C407.667,311.333 409.875,320.375 411.625,330.125C413.375,339.875 414.542,348.958 415.125,357.375C415.708,365.792 416,374.417 416,383.25ZM160,64C160,81.667 153.75,96.75 141.25,109.25C128.75,121.75 113.667,128 96,128C78.333,128 63.25,121.75 50.75,109.25C38.25,96.75 32,81.667 32,64C32,46.333 38.25,31.25 50.75,18.75C63.25,6.25 78.333,0 96,0C113.667,0 128.75,6.25 141.25,18.75C153.75,31.25 160,46.333 160,64ZM336,160C336,186.5 326.625,209.125 307.875,227.875C289.125,246.625 266.5,256 240,256C213.5,256 190.875,246.625 172.125,227.875C153.375,209.125 144,186.5 144,160C144,133.5 153.375,110.875 172.125,92.125C190.875,73.375 213.5,64 240,64C266.5,64 289.125,73.375 307.875,92.125C326.625,110.875 336,133.5 336,160ZM480,216.25C480,229.25 475.333,239.125 466,245.875C456.667,252.625 445.167,256 431.5,256L398,256C380.833,235.5 358.75,224.833 331.75,224C345.25,204.5 352,183.167 352,160C352,155.167 351.583,149.667 350.75,143.5C361.75,147.333 372.833,149.25 384,149.25C393.833,149.25 403.75,147.458 413.75,143.875C423.75,140.292 431.875,136.75 438.125,133.25C444.375,129.75 448,128 449,128C469.667,128 480,157.417 480,216.25ZM448,64C448,81.667 441.75,96.75 429.25,109.25C416.75,121.75 401.667,128 384,128C366.333,128 351.25,121.75 338.75,109.25C326.25,96.75 320,81.667 320,64C320,46.333 326.25,31.25 338.75,18.75C351.25,6.25 366.333,0 384,0C401.667,0 416.75,6.25 429.25,18.75C441.75,31.25 448,46.333 448,64Z" + style={{ fill: fill || colors.gray67 }} + /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx b/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx index c7814d90ed7..47a91692e76 100644 --- a/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/HomeIcon.tsx @@ -19,7 +19,7 @@ */ import * as classNames from 'classnames'; import * as React from 'react'; -import { ThemeConsumer } from '../theme'; +import { colors } from '../../app/theme'; import Icon, { IconProps } from './Icon'; interface Props extends IconProps { @@ -28,17 +28,13 @@ interface Props extends IconProps { export default function HomeIcon({ className, fill, filled = false, ...iconProps }: Props) { return ( - <ThemeConsumer> - {theme => ( - <Icon - className={classNames(className, 'icon-outline', { 'is-filled': filled })} - style={{ color: fill || theme.colors.orange }} - {...iconProps}> - <g transform="matrix(0.870918,0,0,0.870918,0.978227,0.978227)"> - <path d="M15.9,7.8L8.2,0.1C8.1,0 7.9,0 7.8,0.1L0.1,7.8C0,7.9 0,8.1 0.1,8.2C0.2,8.3 0.2,8.3 0.3,8.3L2.2,8.3L2.2,15.8C2.2,15.9 2.2,15.9 2.3,16C2.3,16 2.4,16.1 2.5,16.1L6.2,16.1C6.3,16.1 6.5,16 6.5,15.8L6.5,10.5L9.7,10.5L9.7,15.8C9.7,15.9 9.8,16.1 10,16.1L13.7,16.1C13.8,16.1 14,16 14,15.8L14,8.2L15.9,8.2C16,8.2 16,8.2 16.1,8.1C16,8 16.1,7.9 15.9,7.8Z" /> - </g> - </Icon> - )} - </ThemeConsumer> + <Icon + className={classNames(className, 'icon-outline', { 'is-filled': filled })} + style={{ color: fill || colors.orange }} + {...iconProps}> + <g transform="matrix(0.870918,0,0,0.870918,0.978227,0.978227)"> + <path d="M15.9,7.8L8.2,0.1C8.1,0 7.9,0 7.8,0.1L0.1,7.8C0,7.9 0,8.1 0.1,8.2C0.2,8.3 0.2,8.3 0.3,8.3L2.2,8.3L2.2,15.8C2.2,15.9 2.2,15.9 2.3,16C2.3,16 2.4,16.1 2.5,16.1L6.2,16.1C6.3,16.1 6.5,16 6.5,15.8L6.5,10.5L9.7,10.5L9.7,15.8C9.7,15.9 9.8,16.1 10,16.1L13.7,16.1C13.8,16.1 14,16 14,15.8L14,8.2L15.9,8.2C16,8.2 16,8.2 16.1,8.1C16,8 16.1,7.9 15.9,7.8Z" /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/Icon.tsx b/server/sonar-web/src/main/js/components/icons/Icon.tsx index c47b1bd5391..1922a0abbb2 100644 --- a/server/sonar-web/src/main/js/components/icons/Icon.tsx +++ b/server/sonar-web/src/main/js/components/icons/Icon.tsx @@ -18,7 +18,6 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { Theme, ThemeConsumer } from '../theme'; export interface IconProps extends React.AriaAttributes { className?: string; @@ -69,13 +68,3 @@ export default function Icon({ </svg> ); } - -interface ThemedProps extends Props { - children: (themeContext: { theme: Theme }) => React.ReactNode; -} - -export function ThemedIcon({ children, ...iconProps }: ThemedProps) { - return ( - <ThemeConsumer>{theme => <Icon {...iconProps}>{children({ theme })}</Icon>}</ThemeConsumer> - ); -} diff --git a/server/sonar-web/src/main/js/components/icons/LongLivingBranchIcon.tsx b/server/sonar-web/src/main/js/components/icons/LongLivingBranchIcon.tsx index 893c07178e4..0ef05c8859a 100644 --- a/server/sonar-web/src/main/js/components/icons/LongLivingBranchIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/LongLivingBranchIcon.tsx @@ -18,19 +18,18 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function LongLivingBranchIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <g transform="translate(5, 0)"> - <path - d="M4.5 8c0-.9-.6-1.7-1.5-1.9V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v2.1C1.1 6.3.5 7.1.5 8s.6 1.7 1.5 2v2.1c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9V10c.9-.3 1.5-1 1.5-2zm-3-5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm0 5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm2 6c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .5 1 1z" - style={{ fill: fill || theme.colors.blue }} - /> - </g> - )} - </ThemedIcon> + <Icon {...iconProps}> + <g transform="translate(5, 0)"> + <path + d="M4.5 8c0-.9-.6-1.7-1.5-1.9V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v2.1C1.1 6.3.5 7.1.5 8s.6 1.7 1.5 2v2.1c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9V10c.9-.3 1.5-1 1.5-2zm-3-5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm0 5.9c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.4-1-1zm2 6c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .5 1 1z" + style={{ fill: fill || colors.blue }} + /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/NotificationIcon.tsx b/server/sonar-web/src/main/js/components/icons/NotificationIcon.tsx index 10bf7da86d9..41d65db2424 100644 --- a/server/sonar-web/src/main/js/components/icons/NotificationIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/NotificationIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; interface Props extends IconProps { hasUnread?: boolean; @@ -30,23 +31,21 @@ export default function NotificationIcon({ ...iconProps }: Props) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => - hasUnread ? ( - <> - <path - d="M8 1a.875.875 0 0 0-.875.875v.57c-2.009.418-3.498 2.118-3.498 4.242 0 2.798-.987 3.652-1.516 4.22a.856.856 0 0 0-.236.593.875.875 0 0 0 .877.875h10.496a.875.875 0 0 0 .877-.875.854.854 0 0 0-.236-.594c-.497-.534-1.388-1.342-1.494-3.76a2.814 2.814 0 0 1-.768.108A2.814 2.814 0 0 1 8.814 4.44a2.814 2.814 0 0 1 .665-1.818 4.543 4.543 0 0 0-.604-.178v-.57A.875.875 0 0 0 8 1zM6.25 13.25a1.75 1.75 0 0 0 3.5 0h-3.5z" - style={{ fill }} - /> - <circle cx="11.627" cy="4.441" r="2" style={{ fill: theme.colors.blue }} /> - </> - ) : ( + <Icon {...iconProps}> + {hasUnread ? ( + <> <path - d="M8 15a1.75 1.75 0 0 0 1.75-1.75h-3.5c0 .967.784 1.75 1.75 1.75zm5.89-4.094c-.529-.567-1.517-1.421-1.517-4.218 0-2.125-1.49-3.826-3.499-4.243v-.57a.875.875 0 1 0-1.748 0v.57c-2.01.417-3.499 2.118-3.499 4.243 0 2.797-.988 3.65-1.517 4.218a.854.854 0 0 0-.235.594.876.876 0 0 0 .878.875h10.494a.876.876 0 0 0 .878-.875.853.853 0 0 0-.235-.594z" + d="M8 1a.875.875 0 0 0-.875.875v.57c-2.009.418-3.498 2.118-3.498 4.242 0 2.798-.987 3.652-1.516 4.22a.856.856 0 0 0-.236.593.875.875 0 0 0 .877.875h10.496a.875.875 0 0 0 .877-.875.854.854 0 0 0-.236-.594c-.497-.534-1.388-1.342-1.494-3.76a2.814 2.814 0 0 1-.768.108A2.814 2.814 0 0 1 8.814 4.44a2.814 2.814 0 0 1 .665-1.818 4.543 4.543 0 0 0-.604-.178v-.57A.875.875 0 0 0 8 1zM6.25 13.25a1.75 1.75 0 0 0 3.5 0h-3.5z" style={{ fill }} /> - ) - } - </ThemedIcon> + <circle cx="11.627" cy="4.441" r="2" style={{ fill: colors.blue }} /> + </> + ) : ( + <path + d="M8 15a1.75 1.75 0 0 0 1.75-1.75h-3.5c0 .967.784 1.75 1.75 1.75zm5.89-4.094c-.529-.567-1.517-1.421-1.517-4.218 0-2.125-1.49-3.826-3.499-4.243v-.57a.875.875 0 1 0-1.748 0v.57c-2.01.417-3.499 2.118-3.499 4.243 0 2.797-.988 3.65-1.517 4.218a.854.854 0 0 0-.235.594.876.876 0 0 0 .878.875h10.494a.876.876 0 0 0 .878-.875.853.853 0 0 0-.235-.594z" + style={{ fill }} + /> + )} + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/OnboardingAddMembersIcon.tsx b/server/sonar-web/src/main/js/components/icons/OnboardingAddMembersIcon.tsx index 255c2d8f391..919affa1373 100644 --- a/server/sonar-web/src/main/js/components/icons/OnboardingAddMembersIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/OnboardingAddMembersIcon.tsx @@ -18,27 +18,26 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function OnboardingAddMembersIcon({ fill, size = 64, ...iconProps }: IconProps) { return ( - <ThemedIcon height={(size / 64) * 80} viewBox="0 0 64 80" width={size} {...iconProps}> - {({ theme }) => ( - <g> - <path - d="M49 34c0 9.389-7.611 17-17 17s-17-7.611-17-17 7.611-17 17-17 17 7.611 17 17z" - style={{ fill: 'none', stroke: fill || theme.colors.darkBlue, strokeWidth: 2 }} - /> - <path - d="M36 32c0 2.2-1.8 4-4 4s-4-1.8-4-4v-1c0-2.2 1.8-4 4-4s4 1.8 4 4v1zm4 39a8 8 0 1 1-16 0 8 8 0 0 1 16 0z" - style={{ fill: 'none', stroke: fill || theme.colors.darkBlue, strokeWidth: 2 }} - /> - <path - d="M33 70h2v2h-2v2h-2v-2h-2v-2h2v-2h2v2zm-5-14l-.072-.001c-1.521-.054-2.834-1.337-2.925-2.855L25 50h2c0 1.745-.532 3.91.952 3.999L28 54h8v.002l.072-.005c.506-.042.922-.489.928-1.003V50h2c0 1.024.011 2.048-.001 3.072-.054 1.518-1.337 2.834-2.855 2.925l-.072.002L36 56v8h-2v-7.982c-1.333.007-2.667.007-4 0V64h-2v-8zm-7 0H1V10 0h62v56H43v-2h18V10H3v44h18v2zm38-4H43v-2h14V14H7v36h14v2H5V12h54v40zm-19-9l1 .017c-.03 1.79-2.454 2.506-3.918 2.717-4.074.584-8.503.911-12.176-.477-.949-.358-1.887-1.119-1.906-2.24l.191-.017H23v-3.566l5.38-3.228.913-.913 1.414 1.414-1.087 1.087L25 40.566v2.438c.067 1.304 10.98 2.117 13.844.157.076-.052.152-.172.156-.178v-2.417l-4.62-2.772-1.087-1.087 1.414-1.414.913.913L41 39.434V43h-1zm14-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm42-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm42-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm20.198-10.999c3.529.062 6.837 1.669 9.386 4.169l-1.289 1.539c-4.178-4.152-11.167-5.254-16.359-.228l-.231.228-1.41-1.418c2.633-2.617 6.031-4.313 9.903-4.29zM3 2v6h58V2H3zm56 4H17V4h42v2zM11 6H9V4h2v2zM7 6H5V4h2v2zm8 0h-2V4h2v2z" - style={{ fill: fill || theme.colors.darkBlue, fillRule: 'nonzero' }} - /> - </g> - )} - </ThemedIcon> + <Icon height={(size / 64) * 80} viewBox="0 0 64 80" width={size} {...iconProps}> + <g> + <path + d="M49 34c0 9.389-7.611 17-17 17s-17-7.611-17-17 7.611-17 17-17 17 7.611 17 17z" + style={{ fill: 'none', stroke: fill || colors.darkBlue, strokeWidth: 2 }} + /> + <path + d="M36 32c0 2.2-1.8 4-4 4s-4-1.8-4-4v-1c0-2.2 1.8-4 4-4s4 1.8 4 4v1zm4 39a8 8 0 1 1-16 0 8 8 0 0 1 16 0z" + style={{ fill: 'none', stroke: fill || colors.darkBlue, strokeWidth: 2 }} + /> + <path + d="M33 70h2v2h-2v2h-2v-2h-2v-2h2v-2h2v2zm-5-14l-.072-.001c-1.521-.054-2.834-1.337-2.925-2.855L25 50h2c0 1.745-.532 3.91.952 3.999L28 54h8v.002l.072-.005c.506-.042.922-.489.928-1.003V50h2c0 1.024.011 2.048-.001 3.072-.054 1.518-1.337 2.834-2.855 2.925l-.072.002L36 56v8h-2v-7.982c-1.333.007-2.667.007-4 0V64h-2v-8zm-7 0H1V10 0h62v56H43v-2h18V10H3v44h18v2zm38-4H43v-2h14V14H7v36h14v2H5V12h54v40zm-19-9l1 .017c-.03 1.79-2.454 2.506-3.918 2.717-4.074.584-8.503.911-12.176-.477-.949-.358-1.887-1.119-1.906-2.24l.191-.017H23v-3.566l5.38-3.228.913-.913 1.414 1.414-1.087 1.087L25 40.566v2.438c.067 1.304 10.98 2.117 13.844.157.076-.052.152-.172.156-.178v-2.417l-4.62-2.772-1.087-1.087 1.414-1.414.913.913L41 39.434V43h-1zm14-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm42-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm42-4h-2v-2h2v2zm-42 0h-2v-2h2v2zm20.198-10.999c3.529.062 6.837 1.669 9.386 4.169l-1.289 1.539c-4.178-4.152-11.167-5.254-16.359-.228l-.231.228-1.41-1.418c2.633-2.617 6.031-4.313 9.903-4.29zM3 2v6h58V2H3zm56 4H17V4h42v2zM11 6H9V4h2v2zM7 6H5V4h2v2zm8 0h-2V4h2v2z" + style={{ fill: fill || colors.darkBlue, fillRule: 'nonzero' }} + /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/OnboardingProjectIcon.tsx b/server/sonar-web/src/main/js/components/icons/OnboardingProjectIcon.tsx index 79fedae1598..36aaaec1dbc 100644 --- a/server/sonar-web/src/main/js/components/icons/OnboardingProjectIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/OnboardingProjectIcon.tsx @@ -18,18 +18,17 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function OnboardingProjectIcon({ fill, size = 64, ...iconProps }: IconProps) { return ( - <ThemedIcon size={size} viewBox="0 0 64 64" {...iconProps}> - {({ theme }) => ( - <g fill="none" fillRule="evenodd" stroke={fill || theme.colors.darkBlue} strokeWidth="2"> - <path d="M2 59h60V13H2zm0-46h60V5H2zm3-4h2m2 0h2m2 0h2m2 0h42" /> - <path d="M59 34h-6l-2-4h-6l-2 5h-6l-2 2h-6l-2-4h-6l-2 5h-6l-2 4H5m1 14v-9m4 9v-6m4 6V43m4 13V45m4 11V42m4 14V39m4 17V41m4 15V46m4 10V40m4 16V44m4 12V37m4 19V38m4 18V43m4 13V39m-3-18h-2m-2 0h-2m-2 0h-2M9 29h14M9 33h7m17-12h8m-14 4h8m-8-4h4m-21 4h12v-4H10z" /> - <path d="M58 31V17H6v22" /> - </g> - )} - </ThemedIcon> + <Icon size={size} viewBox="0 0 64 64" {...iconProps}> + <g fill="none" fillRule="evenodd" stroke={fill || colors.darkBlue} strokeWidth="2"> + <path d="M2 59h60V13H2zm0-46h60V5H2zm3-4h2m2 0h2m2 0h2m2 0h42" /> + <path d="M59 34h-6l-2-4h-6l-2 5h-6l-2 2h-6l-2-4h-6l-2 5h-6l-2 4H5m1 14v-9m4 9v-6m4 6V43m4 13V45m4 11V42m4 14V39m4 17V41m4 15V46m4 10V40m4 16V44m4 12V37m4 19V38m4 18V43m4 13V39m-3-18h-2m-2 0h-2m-2 0h-2M9 29h14M9 33h7m17-12h8m-14 4h8m-8-4h4m-21 4h12v-4H10z" /> + <path d="M58 31V17H6v22" /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/OnboardingTeamIcon.tsx b/server/sonar-web/src/main/js/components/icons/OnboardingTeamIcon.tsx index be4ab97b640..4bb4b12fd2d 100644 --- a/server/sonar-web/src/main/js/components/icons/OnboardingTeamIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/OnboardingTeamIcon.tsx @@ -18,18 +18,17 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function OnboardingTeamIcon({ fill, size = 64, ...iconProps }: IconProps) { return ( - <ThemedIcon size={size} viewBox="0 0 64 64" {...iconProps}> - {({ theme }) => ( - <g fill="none" fillRule="evenodd" stroke={fill || theme.colors.darkBlue} strokeWidth="2"> - <path d="M32 9v5M11.5195 43.0898l7.48-4.091m33.481-18.0994l-7.48 4.1m-33.481-4.1l7.48 4.1M45 38.999l7.48 4.101M32 50v5m15-23c0 8.284-6.715 15-15 15s-15-6.716-15-15c0-8.285 6.715-15 15-15s15 6.715 15 15z" /> - <path d="M40 38c0 1.656-3.58 2-8 2s-8-.344-8-2m16 0v-3l-5-3-1-1m-10 7v-3l5-3 1-1m6-4c0 2.2-1.8 4-4 4s-4-1.8-4-4v-1c0-2.2 1.8-4 4-4s4 1.8 4 4v1zm-.0098-21.71c7.18 1.069 13.439 4.96 17.609 10.51m-17.609 42.91c7.18-1.07 13.439-4.96 17.609-10.51M6.6299 41.25c-1.06-2.88-1.63-6-1.63-9.25s.57-6.37 1.63-9.25m3.7705-6.9502c4.17-5.55 10.43-9.44 17.609-10.51m-17.609 42.9104c4.17 5.55 10.43 9.439 17.609 10.51M57.3701 22.75c1.06 2.88 1.63 6 1.63 9.25s-.57 6.37-1.63 9.25" /> - <path d="M36 5c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M12 19c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2m51 0c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M12 45c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2m51 0c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M36 59c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2" /> - </g> - )} - </ThemedIcon> + <Icon size={size} viewBox="0 0 64 64" {...iconProps}> + <g fill="none" fillRule="evenodd" stroke={fill || colors.darkBlue} strokeWidth="2"> + <path d="M32 9v5M11.5195 43.0898l7.48-4.091m33.481-18.0994l-7.48 4.1m-33.481-4.1l7.48 4.1M45 38.999l7.48 4.101M32 50v5m15-23c0 8.284-6.715 15-15 15s-15-6.716-15-15c0-8.285 6.715-15 15-15s15 6.715 15 15z" /> + <path d="M40 38c0 1.656-3.58 2-8 2s-8-.344-8-2m16 0v-3l-5-3-1-1m-10 7v-3l5-3 1-1m6-4c0 2.2-1.8 4-4 4s-4-1.8-4-4v-1c0-2.2 1.8-4 4-4s4 1.8 4 4v1zm-.0098-21.71c7.18 1.069 13.439 4.96 17.609 10.51m-17.609 42.91c7.18-1.07 13.439-4.96 17.609-10.51M6.6299 41.25c-1.06-2.88-1.63-6-1.63-9.25s.57-6.37 1.63-9.25m3.7705-6.9502c4.17-5.55 10.43-9.44 17.609-10.51m-17.609 42.9104c4.17 5.55 10.43 9.439 17.609 10.51M57.3701 22.75c1.06 2.88 1.63 6 1.63 9.25s-.57 6.37-1.63 9.25" /> + <path d="M36 5c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M12 19c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2m51 0c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M12 45c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2m51 0c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2M36 59c0 2.209-1.79 4-4 4-2.209 0-4-1.791-4-4 0-2.21 1.791-4 4-4 2.21 0 4 1.79 4 4zm-5 0h2" /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx b/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx index 437abb33a70..4bda7f005fb 100644 --- a/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/PendingIcon.tsx @@ -18,19 +18,18 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function PendingIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)"> - <path - d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z" - style={{ fill: fill || theme.colors.gray67 }} - /> - </g> - )} - </ThemedIcon> + <Icon {...iconProps}> + <g transform="matrix(0.0364583,0,0,0.0364583,1,-0.166667)"> + <path + d="M224,136L224,248C224,250.333 223.25,252.25 221.75,253.75C220.25,255.25 218.333,256 216,256L136,256C133.667,256 131.75,255.25 130.25,253.75C128.75,252.25 128,250.333 128,248L128,232C128,229.667 128.75,227.75 130.25,226.25C131.75,224.75 133.667,224 136,224L192,224L192,136C192,133.667 192.75,131.75 194.25,130.25C195.75,128.75 197.667,128 200,128L216,128C218.333,128 220.25,128.75 221.75,130.25C223.25,131.75 224,133.667 224,136ZM328,224C328,199.333 321.917,176.583 309.75,155.75C297.583,134.917 281.083,118.417 260.25,106.25C239.417,94.083 216.667,88 192,88C167.333,88 144.583,94.083 123.75,106.25C102.917,118.417 86.417,134.917 74.25,155.75C62.083,176.583 56,199.333 56,224C56,248.667 62.083,271.417 74.25,292.25C86.417,313.083 102.917,329.583 123.75,341.75C144.583,353.917 167.333,360 192,360C216.667,360 239.417,353.917 260.25,341.75C281.083,329.583 297.583,313.083 309.75,292.25C321.917,271.417 328,248.667 328,224ZM384,224C384,258.833 375.417,290.958 358.25,320.375C341.083,349.792 317.792,373.083 288.375,390.25C258.958,407.417 226.833,416 192,416C157.167,416 125.042,407.417 95.625,390.25C66.208,373.083 42.917,349.792 25.75,320.375C8.583,290.958 0,258.833 0,224C0,189.167 8.583,157.042 25.75,127.625C42.917,98.208 66.208,74.917 95.625,57.75C125.042,40.583 157.167,32 192,32C226.833,32 258.958,40.583 288.375,57.75C317.792,74.917 341.083,98.208 358.25,127.625C375.417,157.042 384,189.167 384,224Z" + style={{ fill: fill || colors.gray67 }} + /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx index dc249a94b71..7e710c8050d 100644 --- a/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/PullRequestIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function PullRequestIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx index c95948b878c..9044dd99080 100644 --- a/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/QualifierIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; const qualifierIcons: T.Dict<(props: IconProps) => React.ReactElement> = { app: ApplicationIcon, @@ -56,130 +57,110 @@ export default function QualifierIcon(props: QualifierIconProps) { function ApplicationIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function DeveloperIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function DirectoryIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14 12.286V5.703a.673.673 0 0 0-.195-.5.644.644 0 0 0-.49-.203H6.704a.686.686 0 0 1-.5-.214.707.707 0 0 1-.203-.51v-.57c0-.2-.07-.363-.207-.502A.679.679 0 0 0 5.29 3H2.707a.672.672 0 0 0-.5.204.683.683 0 0 0-.206.5v8.582c0 .2.07.367.206.506.137.14.304.208.5.208h10.61a.66.66 0 0 0 .49-.208.685.685 0 0 0 .194-.506H14zm1-6.598v6.65c0 .458-.152.83-.475 1.16-.324.326-.7.502-1.15.502H2.647c-.452 0-.84-.175-1.162-.503a1.572 1.572 0 0 1-.486-1.158V3.654a1.6 1.6 0 0 1 .486-1.17A1.578 1.578 0 0 1 2.648 2h2.7c.45 0 .84.157 1.164.485.324.328.488.714.488 1.17V4h6.373c.452 0 .83.174 1.152.5.323.33.475.73.475 1.187v.001z" - style={{ fill: fill || theme.colors.orange }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14 12.286V5.703a.673.673 0 0 0-.195-.5.644.644 0 0 0-.49-.203H6.704a.686.686 0 0 1-.5-.214.707.707 0 0 1-.203-.51v-.57c0-.2-.07-.363-.207-.502A.679.679 0 0 0 5.29 3H2.707a.672.672 0 0 0-.5.204.683.683 0 0 0-.206.5v8.582c0 .2.07.367.206.506.137.14.304.208.5.208h10.61a.66.66 0 0 0 .49-.208.685.685 0 0 0 .194-.506H14zm1-6.598v6.65c0 .458-.152.83-.475 1.16-.324.326-.7.502-1.15.502H2.647c-.452 0-.84-.175-1.162-.503a1.572 1.572 0 0 1-.486-1.158V3.654a1.6 1.6 0 0 1 .486-1.17A1.578 1.578 0 0 1 2.648 2h2.7c.45 0 .84.157 1.164.485.324.328.488.714.488 1.17V4h6.373c.452 0 .83.174 1.152.5.323.33.475.73.475 1.187v.001z" + style={{ fill: fill || colors.orange }} + /> + </Icon> ); } function FileIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function LibraryIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M1 13h4V3H1v10zm3-1H2v-2h2v2zM2 4h2v4H2V4zm4 9h4V3H6v10zm3-1H7v-2h2v2zM7 4h2v4H7V4zm4 9h4V3h-4v10zm3-1h-2v-2h2v2zm-2-8h2v4h-2V4z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M1 13h4V3H1v10zm3-1H2v-2h2v2zM2 4h2v4H2V4zm4 9h4V3H6v10zm3-1H7v-2h2v2zM7 4h2v4H7V4zm4 9h4V3h-4v10zm3-1h-2v-2h2v2zm-2-8h2v4h-2V4z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function PortfolioIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function ProjectIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function SubPortfolioIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function SubProjectIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 9V8h6v1h1v1h1v6H6v-6h1V9h1zm7 2H7v4h8v-4zm-1-7v3h-1V5H1v7h4v1H0V4h14zm-1-2v1.5h-1V3H2v.5H1V2h12zm-1-2v1.5h-1V1H3v.5H2V0h10z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 9V8h6v1h1v1h1v6H6v-6h1V9h1zm7 2H7v4h8v-4zm-1-7v3h-1V5H1v7h4v1H0V4h14zm-1-2v1.5h-1V3H2v.5H1V2h12zm-1-2v1.5h-1V1H3v.5H2V0h10z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } function UnitTestIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z" - style={{ fill: fill || theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z" + style={{ fill: fill || colors.blue }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx b/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx index dbf482baa8d..6fc6042d705 100644 --- a/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/SeverityIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; interface Props extends IconProps { severity: string | null | undefined; @@ -43,65 +44,55 @@ export default function SeverityIcon({ severity, ...iconProps }: Props) { function BlockerSeverityIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z" - style={{ fill: theme.colors.red, fillRule: 'nonzero' }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z" + style={{ fill: colors.red, fillRule: 'nonzero' }} + /> + </Icon> ); } function CriticalSeverityIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 10V7.414l1.893 1.893c.13.124.282.216.457.261a1.006 1.006 0 0 0 1.176-.591 1.01 1.01 0 0 0 .01-.729 1.052 1.052 0 0 0-.229-.355c-1.212-1.212-2.394-2.456-3.638-3.636a1.073 1.073 0 0 0-.169-.123 1.05 1.05 0 0 0-.448-.133h-.104a1.053 1.053 0 0 0-.493.16 1.212 1.212 0 0 0-.162.132C6.08 5.505 4.836 6.687 3.656 7.932a.994.994 0 0 0-.051 1.275c.208.271.548.42.888.389.198-.019.378-.098.535-.218.041-.035.04-.034.079-.071L7 7.414V12h2z" - style={{ fill: theme.colors.red, fillRule: 'nonzero' }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 10V7.414l1.893 1.893c.13.124.282.216.457.261a1.006 1.006 0 0 0 1.176-.591 1.01 1.01 0 0 0 .01-.729 1.052 1.052 0 0 0-.229-.355c-1.212-1.212-2.394-2.456-3.638-3.636a1.073 1.073 0 0 0-.169-.123 1.05 1.05 0 0 0-.448-.133h-.104a1.053 1.053 0 0 0-.493.16 1.212 1.212 0 0 0-.162.132C6.08 5.505 4.836 6.687 3.656 7.932a.994.994 0 0 0-.051 1.275c.208.271.548.42.888.389.198-.019.378-.098.535-.218.041-.035.04-.034.079-.071L7 7.414V12h2z" + style={{ fill: colors.red, fillRule: 'nonzero' }} + /> + </Icon> ); } function MajorSeverityIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm.08 2.903c.071.008.14.019.208.039.138.042.26.114.37.205 1.244 1.146 2.426 2.357 3.639 3.536.1.103.181.218.234.352a1.01 1.01 0 0 1 .001.728 1.002 1.002 0 0 1-1.169.609 1.042 1.042 0 0 1-.46-.255L8 7.295l-2.903 2.822c-.039.036-.039.036-.08.07a1.002 1.002 0 0 1-1.604-.947c.032-.196.122-.37.253-.519C4.847 7.51 6.09 6.362 7.303 5.183c.052-.048.106-.093.167-.131a1.041 1.041 0 0 1 .61-.149z" - style={{ fill: theme.colors.red }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm.08 2.903c.071.008.14.019.208.039.138.042.26.114.37.205 1.244 1.146 2.426 2.357 3.639 3.536.1.103.181.218.234.352a1.01 1.01 0 0 1 .001.728 1.002 1.002 0 0 1-1.169.609 1.042 1.042 0 0 1-.46-.255L8 7.295l-2.903 2.822c-.039.036-.039.036-.08.07a1.002 1.002 0 0 1-1.604-.947c.032-.196.122-.37.253-.519C4.847 7.51 6.09 6.362 7.303 5.183c.052-.048.106-.093.167-.131a1.041 1.041 0 0 1 .61-.149z" + style={{ fill: colors.red }} + /> + </Icon> ); } function MinorSeverityIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 6.586V4H7v4.586L5.107 6.693a1.178 1.178 0 0 0-.165-.134 1.041 1.041 0 0 0-.662-.152 1 1 0 0 0-.587 1.7c1.212 1.212 2.394 2.456 3.638 3.636.094.08.195.146.311.191a1.008 1.008 0 0 0 1.065-.227c1.213-1.212 2.457-2.394 3.637-3.639a.994.994 0 0 0 .051-1.275 1.012 1.012 0 0 0-.888-.389 1.041 1.041 0 0 0-.535.218c-.04.034-.04.034-.079.071L9 8.586z" - style={{ fill: theme.colors.lightGreen }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 6.586V4H7v4.586L5.107 6.693a1.178 1.178 0 0 0-.165-.134 1.041 1.041 0 0 0-.662-.152 1 1 0 0 0-.587 1.7c1.212 1.212 2.394 2.456 3.638 3.636.094.08.195.146.311.191a1.008 1.008 0 0 0 1.065-.227c1.213-1.212 2.457-2.394 3.637-3.639a.994.994 0 0 0 .051-1.275 1.012 1.012 0 0 0-.888-.389 1.041 1.041 0 0 0-.535.218c-.04.034-.04.034-.079.071L9 8.586z" + style={{ fill: colors.lightGreen }} + /> + </Icon> ); } function InfoSeverityIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 5H7v5h2V7zm0-3H7v2h2V4z" - style={{ fill: theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 2c3.311 0 6 2.689 6 6s-2.689 6-6 6-6-2.689-6-6 2.689-6 6-6zm1 5H7v5h2V7zm0-3H7v2h2V4z" + style={{ fill: colors.blue }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/ShortLivingBranchIcon.tsx b/server/sonar-web/src/main/js/components/icons/ShortLivingBranchIcon.tsx index 388bc50a262..e00870b429b 100644 --- a/server/sonar-web/src/main/js/components/icons/ShortLivingBranchIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/ShortLivingBranchIcon.tsx @@ -18,19 +18,18 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function ShortLivingBranchIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <g transform="translate(3, 0)"> - <path - d="M9.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" - style={{ fill: fill || theme.colors.blue }} - /> - </g> - )} - </ThemedIcon> + <Icon {...iconProps}> + <g transform="translate(3, 0)"> + <path + d="M9.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C.5 3 1.1 3.8 2 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z" + style={{ fill: fill || colors.blue }} + /> + </g> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx b/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx index 70f2219c2b8..06b6e01ebe5 100644 --- a/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/StatusIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; interface Props extends IconProps { status: string; @@ -42,65 +43,55 @@ export default function StatusIcon({ status, ...iconProps }: Props) { function OpenStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 3.75c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57.77 0 1.482-.19 2.133-.57a4.242 4.242 0 0 0 1.547-1.547c.38-.65.57-1.362.57-2.133 0-.77-.19-1.482-.57-2.133a4.25 4.25 0 0 0-1.547-1.547A4.153 4.153 0 0 0 8 3.75zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 3.75c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57.77 0 1.482-.19 2.133-.57a4.242 4.242 0 0 0 1.547-1.547c.38-.65.57-1.362.57-2.133 0-.77-.19-1.482-.57-2.133a4.25 4.25 0 0 0-1.547-1.547A4.153 4.153 0 0 0 8 3.75zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.blue }} + /> + </Icon> ); } function ConfirmedStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M10 8c0 .552-.195 1.023-.586 1.414-.39.39-.862.586-1.414.586a1.926 1.926 0 0 1-1.414-.586A1.928 1.928 0 0 1 6 8c0-.552.195-1.023.586-1.414C6.976 6.196 7.448 6 8 6c.552 0 1.023.195 1.414.586.39.39.586.862.586 1.414zM8 3.75c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57.77 0 1.482-.19 2.133-.57a4.242 4.242 0 0 0 1.547-1.547c.38-.65.57-1.362.57-2.133 0-.77-.19-1.482-.57-2.133a4.25 4.25 0 0 0-1.547-1.547A4.153 4.153 0 0 0 8 3.75zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M10 8c0 .552-.195 1.023-.586 1.414-.39.39-.862.586-1.414.586a1.926 1.926 0 0 1-1.414-.586A1.928 1.928 0 0 1 6 8c0-.552.195-1.023.586-1.414C6.976 6.196 7.448 6 8 6c.552 0 1.023.195 1.414.586.39.39.586.862.586 1.414zM8 3.75c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57.77 0 1.482-.19 2.133-.57a4.242 4.242 0 0 0 1.547-1.547c.38-.65.57-1.362.57-2.133 0-.77-.19-1.482-.57-2.133a4.25 4.25 0 0 0-1.547-1.547A4.153 4.153 0 0 0 8 3.75zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.blue }} + /> + </Icon> ); } function ReopenedStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 12.25v-8.5c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.blue }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 12.25v-8.5c-.77 0-1.482.19-2.133.57A4.25 4.25 0 0 0 4.32 5.867c-.38.65-.57 1.362-.57 2.133 0 .77.19 1.482.57 2.133.38.65.896 1.167 1.547 1.547.65.38 1.362.57 2.133.57zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.blue }} + /> + </Icon> ); } function ResolvedStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M12.03 6.734a.49.49 0 0 0-.14-.36l-.71-.702a.48.48 0 0 0-.352-.15.474.474 0 0 0-.35.15l-3.19 3.18-1.765-1.766a.479.479 0 0 0-.35-.15.479.479 0 0 0-.353.15l-.71.703a.482.482 0 0 0-.14.358c0 .14.046.258.14.352l2.828 2.828c.098.1.216.15.35.15.142 0 .26-.05.36-.15l4.243-4.242a.475.475 0 0 0 .14-.352l-.001.001zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.baseFontColor }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M12.03 6.734a.49.49 0 0 0-.14-.36l-.71-.702a.48.48 0 0 0-.352-.15.474.474 0 0 0-.35.15l-3.19 3.18-1.765-1.766a.479.479 0 0 0-.35-.15.479.479 0 0 0-.353.15l-.71.703a.482.482 0 0 0-.14.358c0 .14.046.258.14.352l2.828 2.828c.098.1.216.15.35.15.142 0 .26-.05.36-.15l4.243-4.242a.475.475 0 0 0 .14-.352l-.001.001zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.baseFontColor }} + /> + </Icon> ); } function ClosedStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.baseFontColor }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.baseFontColor }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx b/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx index f555a85cffc..f7bd5ff5843 100644 --- a/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/TestStatusIcon.tsx @@ -18,7 +18,8 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; interface Props extends IconProps { status: string; @@ -38,52 +39,44 @@ export default function TestStatusIcon({ status, ...iconProps }: Props) { function OkTestStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M12.03 6.734a.49.49 0 0 0-.14-.36l-.71-.702a.48.48 0 0 0-.352-.15.474.474 0 0 0-.35.15l-3.19 3.18-1.765-1.766a.479.479 0 0 0-.35-.15.479.479 0 0 0-.353.15l-.71.703a.482.482 0 0 0-.14.358c0 .14.046.258.14.352l2.828 2.828c.098.1.216.15.35.15.142 0 .26-.05.36-.15l4.243-4.242a.475.475 0 0 0 .14-.352l-.001.001zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" - style={{ fill: theme.colors.green }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M12.03 6.734a.49.49 0 0 0-.14-.36l-.71-.702a.48.48 0 0 0-.352-.15.474.474 0 0 0-.35.15l-3.19 3.18-1.765-1.766a.479.479 0 0 0-.35-.15.479.479 0 0 0-.353.15l-.71.703a.482.482 0 0 0-.14.358c0 .14.046.258.14.352l2.828 2.828c.098.1.216.15.35.15.142 0 .26-.05.36-.15l4.243-4.242a.475.475 0 0 0 .14-.352l-.001.001zM14 8c0 1.09-.268 2.092-.805 3.012a5.96 5.96 0 0 1-2.183 2.183A5.863 5.863 0 0 1 8 14a5.863 5.863 0 0 1-3.012-.805 5.96 5.96 0 0 1-2.183-2.183A5.863 5.863 0 0 1 2 8c0-1.09.268-2.092.805-3.012a5.96 5.96 0 0 1 2.183-2.183A5.863 5.863 0 0 1 8 2c1.09 0 2.092.268 3.012.805a5.96 5.96 0 0 1 2.183 2.183C13.732 5.908 14 6.91 14 8z" + style={{ fill: colors.green }} + /> + </Icon> ); } function FailureTestStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z" - style={{ fill: theme.colors.orange, fillRule: 'nonzero' }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M8 14c-3.311 0-6-2.689-6-6s2.689-6 6-6 6 2.689 6 6-2.689 6-6 6zM7 9h2V4H7v5zm0 3h2v-2H7v2z" + style={{ fill: colors.orange, fillRule: 'nonzero' }} + /> + </Icon> ); } function ErrorTestStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M10.977 9.766a.497.497 0 0 0-.149-.352L9.414 8l1.414-1.414a.497.497 0 0 0 0-.711l-.703-.703a.497.497 0 0 0-.71 0L8 6.586 6.586 5.172a.497.497 0 0 0-.711 0l-.703.703a.497.497 0 0 0 0 .71L6.586 8 5.172 9.414a.497.497 0 0 0 0 .711l.703.703a.497.497 0 0 0 .71 0L8 9.414l1.414 1.414a.497.497 0 0 0 .711 0l.703-.703a.515.515 0 0 0 .149-.36zM14 8c0 3.313-2.688 6-6 6-3.313 0-6-2.688-6-6 0-3.313 2.688-6 6-6 3.313 0 6 2.688 6 6z" - style={{ fill: theme.colors.red, fillRule: 'nonzero' }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M10.977 9.766a.497.497 0 0 0-.149-.352L9.414 8l1.414-1.414a.497.497 0 0 0 0-.711l-.703-.703a.497.497 0 0 0-.71 0L8 6.586 6.586 5.172a.497.497 0 0 0-.711 0l-.703.703a.497.497 0 0 0 0 .71L6.586 8 5.172 9.414a.497.497 0 0 0 0 .711l.703.703a.497.497 0 0 0 .71 0L8 9.414l1.414 1.414a.497.497 0 0 0 .711 0l.703-.703a.515.515 0 0 0 .149-.36zM14 8c0 3.313-2.688 6-6 6-3.313 0-6-2.688-6-6 0-3.313 2.688-6 6-6 3.313 0 6 2.688 6 6z" + style={{ fill: colors.red, fillRule: 'nonzero' }} + /> + </Icon> ); } function SkippedTestStatusIcon(iconProps: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M11.5 8.5v-1c0-.273-.227-.5-.5-.5H5c-.273 0-.5.227-.5.5v1c0 .273.227.5.5.5h6c.273 0 .5-.227.5-.5zM14 8c0 3.313-2.688 6-6 6-3.313 0-6-2.688-6-6 0-3.313 2.688-6 6-6 3.313 0 6 2.688 6 6z" - style={{ fill: theme.colors.gray71, fillRule: 'nonzero' }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M11.5 8.5v-1c0-.273-.227-.5-.5-.5H5c-.273 0-.5.227-.5.5v1c0 .273.227.5.5.5h6c.273 0 .5-.227.5-.5zM14 8c0 3.313-2.688 6-6 6-3.313 0-6-2.688-6-6 0-3.313 2.688-6 6-6 3.313 0 6 2.688 6 6z" + style={{ fill: colors.gray71, fillRule: 'nonzero' }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx b/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx index ceda2ea90ae..1fdf22d9ae3 100644 --- a/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx +++ b/server/sonar-web/src/main/js/components/icons/WarningIcon.tsx @@ -18,17 +18,16 @@ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ import * as React from 'react'; -import { IconProps, ThemedIcon } from './Icon'; +import { colors } from '../../app/theme'; +import Icon, { IconProps } from './Icon'; export default function WarningIcon({ fill, ...iconProps }: IconProps) { return ( - <ThemedIcon {...iconProps}> - {({ theme }) => ( - <path - d="M9 12.242v-1.484c0-.14-.11-.258-.25-.258h-1.5c-.14 0-.25.117-.25.258v1.484c0 .14.11.258.25.258h1.5c.14 0 .25-.117.25-.258zM8.984 9.32l.141-3.586a.189.189 0 0 0-.078-.148C9 5.546 8.93 5.5 8.859 5.5H7.141c-.07 0-.141.047-.188.086-.055.039-.078.117-.078.164l.133 3.57c0 .102.117.18.265.18H8.72c.14 0 .258-.078.265-.18zm-.109-7.297l6 11A1 1 0 0 1 14 14.5H2a1 1 0 0 1-.875-1.477l6-11a.994.994 0 0 1 1.75 0z" - style={{ fill: fill || theme.colors.warningIconColor }} - /> - )} - </ThemedIcon> + <Icon {...iconProps}> + <path + d="M9 12.242v-1.484c0-.14-.11-.258-.25-.258h-1.5c-.14 0-.25.117-.25.258v1.484c0 .14.11.258.25.258h1.5c.14 0 .25-.117.25-.258zM8.984 9.32l.141-3.586a.189.189 0 0 0-.078-.148C9 5.546 8.93 5.5 8.859 5.5H7.141c-.07 0-.141.047-.188.086-.055.039-.078.117-.078.164l.133 3.57c0 .102.117.18.265.18H8.72c.14 0 .258-.078.265-.18zm-.109-7.297l6 11A1 1 0 0 1 14 14.5H2a1 1 0 0 1-.875-1.477l6-11a.994.994 0 0 1 1.75 0z" + style={{ fill: fill || colors.warningIconColor }} + /> + </Icon> ); } diff --git a/server/sonar-web/src/main/js/components/theme.ts b/server/sonar-web/src/main/js/components/theme.ts deleted file mode 100644 index 1dabe475f62..00000000000 --- a/server/sonar-web/src/main/js/components/theme.ts +++ /dev/null @@ -1,65 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2021 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -import { css, ThemeContext as EmotionThemeContext } from '@emotion/core'; -import emotionStyled, { CreateStyled } from '@emotion/styled'; -import { - ThemeProvider as EmotionThemeProvider, - ThemeProviderProps, - useTheme as emotionUseTheme, - withTheme -} from 'emotion-theming'; -import * as React from 'react'; - -export interface Theme { - colors: T.Dict<string>; - sizes: T.Dict<string>; - rawSizes: T.Dict<number>; - fonts: T.Dict<string>; - zIndexes: T.Dict<string>; - others: T.Dict<string>; -} - -export interface ThemedProps { - theme: Theme; -} - -const ThemeContext = EmotionThemeContext as React.Context<Theme>; - -export const styled = emotionStyled as CreateStyled<Theme>; -export const ThemeConsumer = ThemeContext.Consumer; -export const ThemeProvider = EmotionThemeProvider as React.ProviderExoticComponent< - ThemeProviderProps<Theme> ->; -export const useTheme = emotionUseTheme as () => Theme; - -export function themeGet(type: keyof Theme, name: string | number) { - return function({ theme }: Partial<ThemedProps>) { - return theme?.[type][name]; - }; -} -export function themeColor(name: keyof Theme['colors']) { - return themeGet('colors', name); -} -export function themeSize(name: keyof Theme['sizes']) { - return themeGet('sizes', name); -} - -export { css, withTheme }; -export default ThemeContext; diff --git a/server/sonar-web/src/main/js/components/ui/Alert.tsx b/server/sonar-web/src/main/js/components/ui/Alert.tsx index abd339da10d..2a63bad32ad 100644 --- a/server/sonar-web/src/main/js/components/ui/Alert.tsx +++ b/server/sonar-web/src/main/js/components/ui/Alert.tsx @@ -17,14 +17,16 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { css } from '@emotion/core'; +import styled from '@emotion/styled'; import * as classNames from 'classnames'; import * as React from 'react'; +import { colors, sizes } from '../../app/theme'; import { translate } from '../../helpers/l10n'; import AlertErrorIcon from '../icons/AlertErrorIcon'; import AlertSuccessIcon from '../icons/AlertSuccessIcon'; import AlertWarnIcon from '../icons/AlertWarnIcon'; import InfoIcon from '../icons/InfoIcon'; -import { css, styled, Theme, themeColor, ThemedProps, themeSize, useTheme } from '../theme'; import DeferredSpinner from './DeferredSpinner'; type AlertDisplay = 'banner' | 'inline' | 'block'; @@ -47,7 +49,7 @@ const StyledAlertIcon = styled.div<{ isBanner: boolean; variantInfo: AlertVarian display: flex; justify-content: center; align-items: center; - width: calc(${({ isBanner }) => (isBanner ? 2 : 4)} * ${themeSize('gridSize')}); + width: calc(${({ isBanner }) => (isBanner ? 2 : 4)} * ${sizes.gridSize}); border-right: ${({ isBanner }) => (!isBanner ? '1px solid' : 'none')}; border-color: ${({ variantInfo }) => variantInfo.borderColor}; `; @@ -56,16 +58,16 @@ const StyledAlertContent = styled.div` flex: 1 1 auto; overflow: auto; text-align: left; - padding: ${themeSize('gridSize')} calc(2 * ${themeSize('gridSize')}); + padding: ${sizes.gridSize} calc(2 * ${sizes.gridSize}); `; -const alertInnerIsBannerMixin = ({ theme }: ThemedProps) => css` - min-width: ${theme.sizes.minPageWidth}; - max-width: ${theme.sizes.maxPageWidth}; +const alertInnerIsBannerMixin = () => css` + min-width: ${sizes.minPageWidth}; + max-width: ${sizes.maxPageWidth}; margin-left: auto; margin-right: auto; - padding-left: ${theme.sizes.pagePadding}; - padding-right: ${theme.sizes.pagePadding}; + padding-left: ${sizes.pagePadding}; + padding-right: ${sizes.pagePadding}; box-sizing: border-box; `; @@ -78,7 +80,7 @@ const StyledAlertInner = styled.div<{ isBanner: boolean }>` const StyledAlert = styled.div<{ isInline: boolean; variantInfo: AlertVariantInformation }>` border: 1px solid; border-radius: 2px; - margin-bottom: ${themeSize('gridSize')}; + margin-bottom: ${sizes.gridSize}; border-color: ${({ variantInfo }) => variantInfo.borderColor}; background-color: ${({ variantInfo }) => variantInfo.backGroundColor}; color: ${({ variantInfo }) => variantInfo.color}; @@ -90,11 +92,11 @@ const StyledAlert = styled.div<{ isInline: boolean; variantInfo: AlertVariantInf a, .button-link { - border-color: ${themeColor('darkBlue')}; + border-color: ${colors.darkBlue}; } `; -function getAlertVariantInfo({ colors }: Theme, variant: AlertVariant): AlertVariantInformation { +function getAlertVariantInfo(variant: AlertVariant): AlertVariantInformation { const variantList: T.Dict<AlertVariantInformation> = { error: { icon: <AlertErrorIcon fill={colors.alertIconError} />, @@ -132,11 +134,10 @@ function getAlertVariantInfo({ colors }: Theme, variant: AlertVariant): AlertVar } export function Alert(props: AlertProps & React.HTMLAttributes<HTMLDivElement>) { - const theme = useTheme(); const { className, display, variant, ...domProps } = props; const isInline = display === 'inline'; const isBanner = display === 'banner'; - const variantInfo = getAlertVariantInfo(theme, variant); + const variantInfo = getAlertVariantInfo(variant); return ( <StyledAlert diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/popups-test.tsx.snap b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/popups-test.tsx.snap index 87b7811eb17..563764c60a5 100644 --- a/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/popups-test.tsx.snap +++ b/server/sonar-web/src/main/js/components/ui/__tests__/__snapshots__/popups-test.tsx.snap @@ -38,11 +38,11 @@ exports[`PortalPopup should render correctly with overlay 1`] = ` id="popup-trigger" /> <PortalWrapper> - <WithTheme(ScreenPositionFixer) + <ScreenPositionFixer ready={true} > <Component /> - </WithTheme(ScreenPositionFixer)> + </ScreenPositionFixer> </PortalWrapper> </Fragment> `; diff --git a/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx b/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx index d790073ba5d..d9555f32c7f 100644 --- a/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx +++ b/server/sonar-web/src/main/js/components/ui/__tests__/popups-test.tsx @@ -56,13 +56,7 @@ describe('PortalPopup', () => { const wrapper = shallowRender(); wrapper.setState({ left: 0, top: 0, width: 10, height: 10 }); expect(wrapper).toMatchSnapshot(); - expect( - wrapper - .find(ScreenPositionFixer) - .dive() - .dive() - .dive() - ).toMatchSnapshot(); + expect(wrapper.find(ScreenPositionFixer).dive()).toMatchSnapshot(); }); it('should correctly compute the popup positioning', () => { diff --git a/server/sonar-web/src/main/js/helpers/__tests__/request-test.ts b/server/sonar-web/src/main/js/helpers/__tests__/request-test.ts index 6cdb0e4b1e0..f4729185ef4 100644 --- a/server/sonar-web/src/main/js/helpers/__tests__/request-test.ts +++ b/server/sonar-web/src/main/js/helpers/__tests__/request-test.ts @@ -38,13 +38,6 @@ import { jest.mock('../handleRequiredAuthentication', () => ({ default: jest.fn() })); -jest.mock('../init', () => { - const module = jest.requireActual('../init'); - return { - ...module, - getRequestOptions: jest.fn().mockReturnValue({}) - }; -}); const url = '/my-url'; beforeEach(() => { diff --git a/server/sonar-web/src/main/js/helpers/__tests__/urls-test.ts b/server/sonar-web/src/main/js/helpers/__tests__/urls-test.ts index 7e067b7aa9e..bfa2ac6b793 100644 --- a/server/sonar-web/src/main/js/helpers/__tests__/urls-test.ts +++ b/server/sonar-web/src/main/js/helpers/__tests__/urls-test.ts @@ -222,16 +222,20 @@ describe('#getHostUrl', () => { jest.resetModules(); }); it('should return host url on client side', () => { - jest.mock('../init', () => ({ - getUrlContext: () => '', + jest.mock('../system', () => ({ + getBaseUrl: () => '' + })); + jest.mock('../browser', () => ({ IS_SSR: false })); const mockedUrls = require('../urls'); expect(mockedUrls.getHostUrl()).toBe('http://localhost'); }); it('should throw on server-side', () => { - jest.mock('../init', () => ({ - getUrlContext: () => '', + jest.mock('../system', () => ({ + getBaseUrl: () => '' + })); + jest.mock('../browser', () => ({ IS_SSR: true })); const mockedUrls = require('../urls'); diff --git a/server/sonar-web/src/main/js/types/extension.ts b/server/sonar-web/src/main/js/types/extension.ts index 960671480af..624da3e7793 100644 --- a/server/sonar-web/src/main/js/types/extension.ts +++ b/server/sonar-web/src/main/js/types/extension.ts @@ -20,7 +20,6 @@ import { InjectedIntl } from 'react-intl'; import { Store as ReduxStore } from 'redux'; import { Location, Router } from '../components/hoc/withRouter'; -import { Theme } from '../components/theme'; import { Store } from '../store/rootReducer'; import { L10nBundle } from './l10n'; @@ -39,7 +38,14 @@ export interface ExtensionStartMethodParameter { intl: InjectedIntl; location: Location; router: Router; - theme: Theme; + theme: { + colors: T.Dict<string>; + sizes: T.Dict<string>; + rawSizes: T.Dict<number>; + fonts: T.Dict<string>; + zIndexes: T.Dict<string>; + others: T.Dict<string>; + }; baseUrl: string; l10nBundle: L10nBundle; } |