diff --git a/config.json b/config.json index 256bae08239f87fa2fbfa29dc817795bd9d376fc..2984308a115be5b06c643a6b4cb842772fc4cfcd 100644 --- a/config.json +++ b/config.json @@ -10,7 +10,7 @@ "type": "ELECTRICITY", "oauth": true, "slug": "enedisgrandlyon", - "cron": "0 30 10 * * *" + "cron": "0 30 6 * * *" }, "siteLink": "https://mon-compte-client.enedis.fr/" }, @@ -24,7 +24,7 @@ "type": "WATER", "oauth": false, "slug": "eglgrandlyon", - "cron": "0 30 8 * * *" + "cron": "0 30 6 * * *" }, "siteLink": "https://agence.eaudugrandlyon.com/inscription.aspx" }, @@ -38,7 +38,7 @@ "type": "GAS", "oauth": false, "slug": "grdfgrandlyon", - "cron": "0 30 8 * * *" + "cron": "0 30 6 * * *" }, "siteLink": "https://monespace.grdf.fr/monespace/connexion" } diff --git a/manifest.webapp b/manifest.webapp index 55d877fe577a25a3709b923ae387c556633b8262..d009c17c1a810d0577442bb82438906582e13076 100644 --- a/manifest.webapp +++ b/manifest.webapp @@ -3,7 +3,7 @@ "slug": "ecolyo", "icon": "icon.svg", "categories": ["energy"], - "version": "0.1.6", + "version": "0.1.8", "licence": "AGPL-3.0", "editor": "Métropole de Lyon", "default_locale": "fr", diff --git a/package.json b/package.json index a7875687fa3301a91b601da8c92b3fabf0bba464..d9b581940639717207c1cf8f94cae54438c458d3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ecolyo", - "version": "0.1.6", + "version": "0.1.8", "scripts": { "tx": "tx pull --all || true", "lint": "yarn lint:js && yarn lint:styles", diff --git a/src/components/CommonKit/Card/StyledCard.tsx b/src/components/CommonKit/Card/StyledCard.tsx index eb900a5fe7d363a888afa9bd96e9457bce2ecdc1..845934e866f31189f663ba6bbdfe080c7654bff4 100644 --- a/src/components/CommonKit/Card/StyledCard.tsx +++ b/src/components/CommonKit/Card/StyledCard.tsx @@ -18,19 +18,19 @@ const CardBase = withStyles({ const CardElec = withStyles({ root: { - border: '1px solid var(--elecColor)', + border: '1px solid var(--elecColor40)', }, })(CardBase) const CardWater = withStyles({ root: { - border: '1px solid var(--waterColor)', + border: '1px solid var(--waterColor40)', }, })(CardBase) const CardGas = withStyles({ root: { - border: '1px solid var(--gasColor)', + border: '1px solid var(--gasColor40)', }, })(CardBase) diff --git a/src/components/CommonKit/Card/StyledIconCard.tsx b/src/components/CommonKit/Card/StyledIconCard.tsx index acd82276b717ef77237fae00250e906da40b2152..db62f1cf289b8dd44496ef9225d6952b432edc40 100644 --- a/src/components/CommonKit/Card/StyledIconCard.tsx +++ b/src/components/CommonKit/Card/StyledIconCard.tsx @@ -23,19 +23,19 @@ const CardBase = withStyles({ const CardElec = withStyles({ root: { - border: '1px solid var(--elecColor)', + border: '1px solid var(--elecColor40)', }, })(CardBase) const CardWater = withStyles({ root: { - border: '1px solid var(--waterColor)', + border: '1px solid var(--waterColor40)', }, })(CardBase) const CardGas = withStyles({ root: { - border: '1px solid var(--gasColor)', + border: '1px solid var(--gasColor40)', }, })(CardBase) diff --git a/src/components/CommonKit/Modal/Modal.tsx b/src/components/CommonKit/Modal/Modal.tsx index b3af9f5f0dcb9deab54c8b62228685a8fbb7d12a..89e631ef88795db63bd9bda7a5b238f02c87b9fb 100644 --- a/src/components/CommonKit/Modal/Modal.tsx +++ b/src/components/CommonKit/Modal/Modal.tsx @@ -23,6 +23,9 @@ const Modal: React.FC<ModalProps> = ({ useEffect(() => { open ? disableBackgroundScroll(true) : disableBackgroundScroll(false) + return () => { + disableBackgroundScroll(false) + } }, [open]) const closeClick = () => { diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx index eaada07f5ff1a0df35d196d103c217f140dea7d8..185aab9cf09af9509c7f2228afb6ee189d177460 100644 --- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx +++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx @@ -39,6 +39,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails const [lackOfDataForChallenge, setLackOfDataForChallenge] = useState<boolean>( false ) + const [isLoaded, setIsLoaded] = useState<boolean>(false) const defineHeaderHeight = (height: number) => { setHeaderHeight(height) @@ -77,34 +78,36 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails useEffect(() => { let subscribed = true - const lag = challengeManager.getLagDays(fluidTypes) - - const timePeriod = { - startDate: DateTime.local() - .plus({ days: -6 }) - .startOf('day'), - endDate: DateTime.local() - .plus({ days: -lag }) - .endOf('day'), - } + if (props.location.state) { + const lag = challengeManager.getLagDays(fluidTypes) + const firstDayOfPreviousPeriod = + props && props.location.state.challenge.duration.days + const timePeriod = { + startDate: DateTime.local() + .plus({ days: -firstDayOfPreviousPeriod }) + .startOf('day'), + endDate: DateTime.local() + .plus({ days: -lag }) + .endOf('day'), + } - async function checkPreviousData() { - const cdm = new ConsumptionDataManager(client) - const fetchedPerformanceIndicators = await cdm.getPerformanceIndicators( - timePeriod, - 20, - fluidTypes - ) - if (fetchedPerformanceIndicators && subscribed) { - fetchedPerformanceIndicators.forEach(element => { - !element.value ? setLackOfDataForChallenge(true) : null - }) - } else { - setLackOfDataForChallenge(true) + async function checkPreviousData() { + const cdm = new ConsumptionDataManager(client) + const fetchedPerformanceIndicators = await cdm.getPerformanceIndicators( + timePeriod, + 20, + fluidTypes + ) + if (fetchedPerformanceIndicators && subscribed) { + fetchedPerformanceIndicators.forEach(element => { + !element.value ? setLackOfDataForChallenge(true) : null + }) + } else { + setLackOfDataForChallenge(true) + } + setIsLoaded(true) } - } - checkPreviousData() - if (props.location.state) { + checkPreviousData() setChallenge(props && props.location.state.challenge) } return () => { @@ -152,7 +155,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails </div> <div className="cp-right-button"> <StyledButtonValid - disabled={lackOfDataForChallenge} + disabled={lackOfDataForChallenge || !isLoaded} color="primary" onClick={handleStartClick} > @@ -162,7 +165,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails </div> </div> <div className="lack-of-data-challenge"> - {lackOfDataForChallenge + {lackOfDataForChallenge && isLoaded ? t('CHALLENGE.LACK_OF_DATA') : null} </div> diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx index 0a5fbeed1cb1d917696fba1f69841037f9b9cf20..89d8e1ace26eb274b00bddfdfe212e1cbb819bf7 100644 --- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx +++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx @@ -19,9 +19,12 @@ interface ChallengesListProps { const ChallengesList: React.FC<ChallengesListProps> = ({ client, }: ChallengesListProps) => { - const { fluidTypes, refreshCurrentChallenge, screenType } = useContext( - AppContext - ) + const { + fluidTypes, + refreshCurrentChallenge, + screenType, + challengeNotification, + } = useContext(AppContext) const challengeManager = new ChallengeManager(client) const [ ongoingChallenge, @@ -104,12 +107,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({ setOngoingChallenge(ongoingChallengeTmp) setOngoingChallengeModal(ongoingChallengeTmp) setUserLevel(levelOfUser) - if ( - await challengeManager.isChallengeOver( - ongoingChallengeTmp, - fluidTypes - ) - ) { + if (challengeNotification) { setOpenChallengeModal(true) await challengeManager.endChallenge(ongoingChallengeTmp, fluidTypes) await refreshCurrentChallenge() @@ -205,12 +203,14 @@ const ChallengesList: React.FC<ChallengesListProps> = ({ </div> </div> )} - <ChallengeModal - opened={openChallengeModal} - challenge={ongoingChallengeModal} - handleCloseClick={handleCloseClick} - badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge} - /> + {openChallengeModal && ( + <ChallengeModal + opened={openChallengeModal} + challenge={ongoingChallengeModal} + handleCloseClick={handleCloseClick} + badgeStatus={ongoingChallengeModal && ongoingChallengeModal.badge} + /> + )} </> ) } diff --git a/src/components/ContentComponents/Charts/AxisRight.tsx b/src/components/ContentComponents/Charts/AxisRight.tsx index 54519c76c225cacb3eb23ff19c4825943459ee06..c41678d74cd746f352ff9763db9f2affbb866396 100644 --- a/src/components/ContentComponents/Charts/AxisRight.tsx +++ b/src/components/ContentComponents/Charts/AxisRight.tsx @@ -16,8 +16,14 @@ interface AxisRightProps { const AxisRight = (props: AxisRightProps) => { const { yScale, fluidTypes, width, marginRight, marginTop, t } = props + let isHome + if (!window.location.hash.split('/')[2]) { + isHome = true + } else { + isHome = false + } const fluidStyle = - fluidTypes.length > 1 ? 'MULTIFLUID' : FluidType[fluidTypes[0]] + fluidTypes.length > 1 || isHome ? 'MULTIFLUID' : FluidType[fluidTypes[0]] const yAxisRef = useRef<SVGGElement>(null) const drawYAxis = () => { diff --git a/src/components/ContentComponents/Charts/Bar.tsx b/src/components/ContentComponents/Charts/Bar.tsx index 7a65d3b65ece7b2c11886dfb66b84b29732710af..f9fd12557402de2fda01ff780fd55b08842cb03c 100644 --- a/src/components/ContentComponents/Charts/Bar.tsx +++ b/src/components/ContentComponents/Charts/Bar.tsx @@ -22,6 +22,7 @@ interface BarProps { xScale: ScaleBand<string> yScale: ScaleLinear<number, number> height: number + isSwitching: boolean } const Bar = (props: BarProps) => { @@ -38,6 +39,7 @@ const Bar = (props: BarProps) => { xScale, yScale, height, + isSwitching, } = props const [clicked, setClicked] = useState(false) @@ -53,8 +55,10 @@ const Bar = (props: BarProps) => { ? 'MULTIFLUID' : FluidType[fluidTypes[0]] const handleClick = () => { - setClicked(true) - handleClickData(dataload, compareDataload) + if (!isSwitching) { + setClicked(true) + handleClickData(dataload, compareDataload) + } } const onAnimationEnd = () => { diff --git a/src/components/ContentComponents/Charts/BarChart.tsx b/src/components/ContentComponents/Charts/BarChart.tsx index 1e2fd9ab7a39fb104abbe77498f6765f65eec53d..8fa45f2fb68be6e2cfbf6776b9ca827e1c20cfe3 100644 --- a/src/components/ContentComponents/Charts/BarChart.tsx +++ b/src/components/ContentComponents/Charts/BarChart.tsx @@ -31,6 +31,7 @@ export interface BarChartProps { marginRight?: number marginTop?: number marginBottom?: number + isSwitching: boolean } interface DefaultProps { @@ -60,6 +61,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { marginRight, marginTop, marginBottom, + isSwitching, } = props as PropsWithDefaults const getContentWidth = () => { return width - marginLeft - marginRight @@ -103,16 +105,21 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { return ( <svg width={width} height={height}> - <g transform={`translate(${marginLeft},${marginTop})`}> - <Hash - challengePeriod={challengePeriod} - multiFluid={multiFluid} - xScale={xScale} - padding={(xScaleWithoutPadding.bandwidth() - xScale.bandwidth()) / 2} - width={getContentWidth()} - height={getContentHeight()} - /> - </g> + {timeStep === TimeStep.DAY && ( + <g transform={`translate(${marginLeft},${marginTop})`}> + <Hash + challengePeriod={challengePeriod} + multiFluid={multiFluid} + xScale={xScale} + padding={ + (xScaleWithoutPadding.bandwidth() - xScale.bandwidth()) / 2 + } + width={getContentWidth()} + height={getContentHeight()} + chartData={chartData} + /> + </g> + )} <AxisRight fluidTypes={fluidTypes} yScale={yScale} @@ -138,6 +145,7 @@ const BarChart: React.FC<BarChartProps> = (props: BarChartProps) => { xScale={xScale} yScale={yScale} height={getContentHeight()} + isSwitching={isSwitching} /> ))} </g> diff --git a/src/components/ContentComponents/Charts/Hash.tsx b/src/components/ContentComponents/Charts/Hash.tsx index cdca1034f736a293496e271cce130b159f52e3ec..457eba1bfed58cc9f64fb49f8e0100e8fd27d846 100644 --- a/src/components/ContentComponents/Charts/Hash.tsx +++ b/src/components/ContentComponents/Charts/Hash.tsx @@ -1,7 +1,12 @@ import React, { useState, useEffect } from 'react' import { ScaleBand } from 'd3-scale' -import { ITimePeriod } from 'services/dataConsumptionContracts' +import { + ITimePeriod, + IChartData, + TimeStep, +} from 'services/dataConsumptionContracts' import { DateTime } from 'luxon' +import { compareStepDate } from 'services/dateChartService' interface HashProps { challengePeriod: ITimePeriod | null @@ -10,10 +15,19 @@ interface HashProps { padding: number width: number height: number + chartData: IChartData } const Hash = (props: HashProps) => { - const { challengePeriod, multiFluid, xScale, padding, width, height } = props + const { + challengePeriod, + multiFluid, + xScale, + padding, + width, + height, + chartData, + } = props /* number array with @@ -35,12 +49,40 @@ const Hash = (props: HashProps) => { .startOf('day') .toLocaleString(DateTime.DATETIME_SHORT) ) + if (!startScale && !endScale) { - setScale([]) + const lastGraphDate = + chartData && + chartData.actualData && + chartData.actualData[chartData.actualData.length - 1] && + chartData.actualData[chartData.actualData.length - 1].date + const firstGraphDate = + chartData && + chartData.actualData && + chartData.actualData[0] && + chartData.actualData[0].date + if ( + challengePeriod.endDate > lastGraphDate && + challengePeriod.startDate < firstGraphDate + ) { + setScale([0, width - padding]) + } else { + setScale([]) + } } else if (startScale && !endScale) { setScale([startScale - padding, width - startScale]) } else if (!startScale && endScale) { - setScale([0, endScale - padding]) + if ( + compareStepDate( + TimeStep.DAY, + challengePeriod.endDate, + chartData.actualData[0].date + ) + ) { + setScale([]) + } else { + setScale([0, endScale - padding]) + } } else if (startScale && endScale) { setScale([startScale - padding, endScale - startScale]) } diff --git a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx b/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx index 6ee23e47723b8a7a26ad9f523851c9b4775c4378..227806bcf14349e287ad99cf155095dcff98a946 100644 --- a/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx +++ b/src/components/ContentComponents/ConsumptionVisualizer/DataloadConsumptionVisualizer.tsx @@ -98,14 +98,10 @@ const DataloadConsumptionVisualizer = ({ <div className={`cv-load-value ${fluidStyle.toLowerCase()} chart-result`} > - {multiFluid && fluidTypes.length === 1 - ? formatNumberValues( - ltcc.Convert(dataload.value, fluidTypes[0]) - ) - : formatNumberValues(dataload.value)} - <span className="text-18-normal">{`${t( - 'FLUID.' + fluidStyle + '.UNIT' - )}`}</span> + {formatNumberValues(dataload.value)} + <span className="text-18-normal"> + {`${t('FLUID.' + fluidStyle + '.UNIT')}`} + </span> </div> {!multiFluid ? ( <div diff --git a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx index 4b1fe0caf38b6c5af315d4b42c8df8ec16051673..fa2726ba53ba9db67234584cac10717248f06dee 100644 --- a/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx +++ b/src/components/ContentComponents/FluidChart/FluidChartSlide.tsx @@ -30,6 +30,7 @@ interface FluidChartSlideProps { compareDataload: IDataload | null ) => void consumptionDataManager: IConsumptionDataManager + isSwitching: boolean } const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ @@ -45,6 +46,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ challengePeriod, handleClickData, consumptionDataManager, + isSwitching, }: FluidChartSlideProps) => { const [chartData, setChartData] = useState<IChartData>(new ChartData([])) const [isLoaded, setIsLoaded] = useState<boolean>(false) @@ -58,12 +60,21 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ defineTimePeriod(referenceDate, timeStep, index), defineTimePeriod(referenceDate, timeStep, index + 1), ]) + let isHome + if (!window.location.hash.split('/')[2]) { + isHome = true + } else { + isHome = false + } + const graphData = await consumptionDataManager.getGraphData( timePeriod, timeStep, fluidTypes, - compareTimePeriod + compareTimePeriod, + isHome ) + if (subscribed && graphData && graphData.actualData.length > 0) { setChartData(graphData) setIsLoaded(true) @@ -92,6 +103,7 @@ const FluidChartSlide: React.FC<FluidChartSlideProps> = ({ height={height} width={width} challengePeriod={challengePeriod} + isSwitching={isSwitching} /> )} </div> diff --git a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx b/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx index 1f365907149f6d272b270097e2ee1a2e5d262444..907446e0080ba4190b4108ec8017f6030b295c16 100644 --- a/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx +++ b/src/components/ContentComponents/FluidChart/FluidChartSwipe.tsx @@ -46,6 +46,7 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({ const swipe = useRef<HTMLDivElement>(null) const [width, setWidth] = useState(0) const [height, setHeight] = useState(0) + const [isSwitching, setIsSwitching] = useState(false) useEffect(() => { function handleResize() { @@ -91,9 +92,14 @@ const FluidChartSwipe: React.FC<FluidChartSwipeProps> = ({ challengePeriod={challengePeriod} handleClickData={handleClickData} consumptionDataManager={consumptionDataManager} + isSwitching={isSwitching} /> )} enableMouseEvents + onSwitching={!isSwitching ? () => setIsSwitching(true) : null} + onTransitionEnd={() => { + setIsSwitching(false) + }} axis="x-reverse" /> </div> diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx index eb8c4828d5f1dcd90ca8297cce730d0cdc1e623a..1cf2982fb3bee221305107e38e6fde79cfa62e40 100644 --- a/src/components/Contexts/AppContextProvider.tsx +++ b/src/components/Contexts/AppContextProvider.tsx @@ -79,7 +79,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({ const [isIndexesLoadingSuccess, setIndexesLoadingSuccess] = useState< boolean | null >(null) - const [isDataLoading, setDataLoading] = useState<boolean>(false) const [isDataLoadingSuccess, setDataLoadingSuccess] = useState< boolean | null @@ -107,7 +106,6 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({ const [challengeNotification, setChallengeNotification] = useState<boolean>( false ) - const [isContextLoaded, setContextLoaded] = useState<boolean>(false) const [isError, setError] = useState<boolean>(false) const [screenType, setScreenType] = useState<ScreenType>(ScreenType.MOBILE) diff --git a/src/locales/fr.json b/src/locales/fr.json index fd92eec19b308e9c2415e2ffaf56d64dbb231005..032de073e7987a91ed95d4f25c4d88075b846707 100644 --- a/src/locales/fr.json +++ b/src/locales/fr.json @@ -270,7 +270,7 @@ "type_idea": "Idée", "type_other": "Autre", "success_sending": "Nous vous remercions pour votre retour.", - "warning": "Attention!", + "warning": "Attention !", "error_empty_description": "Le champ de description est vide.", "error_sending": "Erreur lors de l'envoi, veuillez essayer ultérieurement." } diff --git a/src/services/consumptionDataManagerService.ts b/src/services/consumptionDataManagerService.ts index b203ecb491b6e8db3d992536e511e790cf11a23d..072de5291e9b0caab88e75d41bd66d6fc61a1b37 100644 --- a/src/services/consumptionDataManagerService.ts +++ b/src/services/consumptionDataManagerService.ts @@ -37,7 +37,8 @@ export default class ConsumptionDataManager implements IConsumptionDataManager { timePeriod: ITimePeriod, timeStep: TimeStep, fluidTypes: FluidType[], - compareTimePeriod?: ITimePeriod + compareTimePeriod?: ITimePeriod, + isHome?: boolean ): Promise<IChartData | null> { const InputisValid: boolean = this._consumptionDataValidator.ValidateGetGraphData( timePeriod, @@ -50,7 +51,7 @@ export default class ConsumptionDataManager implements IConsumptionDataManager { let mappedData = null - if (fluidTypes.length === 1) { + if (fluidTypes.length === 1 && !isHome) { //TODO validating input data //TODO applying buisness logic to the query arguments @@ -75,7 +76,7 @@ export default class ConsumptionDataManager implements IConsumptionDataManager { // mapping result to contract mappedData = formattedData - } else if (fluidTypes.length > 1) { + } else if (fluidTypes.length > 1 || isHome) { const toBeAgreggatedData: ISingleFluidChartData[] = [] for (const fluidType of fluidTypes) { const fetchedData = await this.fetchSingleFLuidGraphData( diff --git a/src/services/dataConsumptionContracts.ts b/src/services/dataConsumptionContracts.ts index 44eb6da9dd64bed4f7aa1012928b3f34efd19b6f..260d284c3c4a788eb271a256840e9a9173325fb1 100644 --- a/src/services/dataConsumptionContracts.ts +++ b/src/services/dataConsumptionContracts.ts @@ -73,7 +73,8 @@ export interface IConsumptionDataManager { timePeriod: ITimePeriod, timeStep: TimeStep, fluidTypes: FluidType[], - compareTimePeriod?: ITimePeriod + compareTimePeriod?: ITimePeriod, + isHome?: boolean ): Promise<IChartData | null> fetchLastDateData(fluidType: FluidType[]): Promise<DateTime | null> diff --git a/src/styles/base/_color.scss b/src/styles/base/_color.scss index 3fd5c7ad2066febce2af07814c9633e94a268fc9..fc0a0c3ebe9edad67afe2a272ff2b174276c1937 100644 --- a/src/styles/base/_color.scss +++ b/src/styles/base/_color.scss @@ -71,16 +71,19 @@ $accordion-active-background: #34353a; $text-color: white; $elec-color: #d87b39; +$elec-color-40: rgba(216, 123, 57, 0.4); $elec-off-color: #5d3d2a; $elec-compare-color: #e2bca1; $elec-compare-off-color: #795c47; $gas-color: #45d1b8; +$gas-color-40: rgba(69, 209, 184, 0.4); $gas-off-color: #184940; $gas-compare-color: #a8f7e9; $gas-compare-off-color: #597773; $water-color: #3a98ec; +$water-color-40: rgba(58, 152, 236, 0.4); $water-off-color: #20415e; $water-compare-color: #abd4fa; $water-compare-off-color: #4d5c6e; diff --git a/src/styles/index.scss b/src/styles/index.scss index 82021a3cd090809385ee1496276f845b01b5ad17..de482173597c003adbeffa5ee9a58d2858891970 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -34,10 +34,13 @@ --blueRadialGradient: #{$blue-radial-gradient}; --blueRadialGradientTrans: #{$blue-radial-gradient-transparent}; --elecColor: #{$elec-color}; + --elecColor40: #{$elec-color-40}; --elecCompareColor: #{$elec-compare-color}; --gasColor: #{$gas-color}; + --gasColor40: #{$gas-color-40}; --gasCompareColor: #{$gas-compare-color}; --waterColor: #{$water-color}; + --waterColor40: #{$water-color-40}; --waterCompareColor: #{$water-compare-color}; --multiColor: #{$multi-color}; --multiCompareColor: #{$multi-compare-color};