Reorder and rename categories on the grid

As requested in https://github.com/colouring-cities/colouring-core/issues/1
This commit is contained in:
Mike Simpson 2023-01-06 13:18:06 +00:00
parent df1da50a4a
commit b0707d47f0
10 changed files with 649 additions and 321 deletions

View File

@ -2,26 +2,47 @@ import React, { Fragment } from 'react';
import { dataFields } from '../../config/data-fields-config';
import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-entry';
import { DataEntryGroup } from '../data-components/data-entry-group';
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
import { FieldRow } from '../data-components/field-row';
import { Link } from 'react-router-dom';
import { Category } from '../../config/categories-config';
import NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry';
import TextboxDataEntry from '../data-components/textbox-data-entry';
import Verification from '../data-components/verification';
import YearDataEntry from '../data-components/year-data-entry';
import withCopyEdit from '../data-container';
import DataEntry from '../data-components/data-entry';
import InfoBox from '../../components/info-box';
import { CategoryViewProps } from './category-view-props';
import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
const HistoricalStatusOptions = [
'The current footprint matches/almost exactly matches the historical map beneath, and/or is known to have been built before the map was made',
'The building core is the same as the historical map but has had multiple additions/changes',
'The building no longer exists',
];
/**
* Age view/edit section
*/
const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
const currentYear = new Date().getFullYear();
const building = props.building;
const thisYear = (new Date()).getFullYear();
const currentBuildingConstructionYear = building.date_year || undefined;
const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`;
if (props.building.date_source == "Expert knowledge of building" ||
props.building.date_source == "Expert estimate from image" ||
props.building.date_source == null
){
return (
<Fragment>
<DataEntryGroup name="Building Age" collapsed={true} >
<YearDataEntry
year={props.building.date_year}
upper={props.building.date_upper}
@ -88,11 +109,159 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.date_source}
verified_count={props.building.verified.date_source}
/>
<InfoBox>
This section is under development.
</InfoBox>
<DataEntry
title="Cladding Date"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Date of Significant Extensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Date of Significant Retrofits"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_constructed.title}
value={currentBuildingConstructionYear}
disabled={true}
mode='view'
/>
</div>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_demolished.title}
value={undefined}
placeholder='---'
disabled={true}
mode='view'
/>
</div>
<div style={{flex: '0 1 27%'}}>
<DataEntry
slug=''
title='Lifespan to date'
value={ (thisYear - currentBuildingConstructionYear) + ''}
disabled={true}
mode='view'
/>
</div>
</FieldRow>
</DynamicsBuildingPane>
{
currentBuildingConstructionYear == undefined ?
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
<>
<LogicalDataEntry
slug='dynamics_has_demolished_buildings'
title={dataFields.dynamics_has_demolished_buildings.title}
value={building.dynamics_has_demolished_buildings}
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
onChange={props.onSaveChange}
mode={props.mode}
copy={props.copy}
/>
{
building.dynamics_has_demolished_buildings &&
<>
<DynamicsDataEntry
/*
Will clear the edits and new record data upon navigating to another building.
Should get a better way to do this, plus a way to actually keep unsaved edits.
*/
key={building.building_id}
value={building.demolished_buildings}
editableEntries={true}
slug='demolished_buildings'
title={dataFields.demolished_buildings.title}
mode={props.mode}
onChange={props.onChange}
onSaveAdd={props.onSaveAdd}
hasEdits={props.edited}
maxYear={currentBuildingConstructionYear}
minYear={50}
/>
{
props.mode === 'view' &&
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
}
</>
}
</>
}
</DataEntryGroup>
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
<DataEntry
title="Historical land use change"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (raster) link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (vector) link"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<InfoBox>
This section is under development in collaboration with the historic environment sector.
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
</InfoBox>
</DataEntryGroup>
<DataEntryGroup name="Survival and Loss tracked using Historical Maps" collapsed={true} >
<InfoBox>
This section is under development.
</InfoBox>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" /*onClick={}*/>
{'Click here for historical maps'}
</button>
<SelectDataEntry
title={dataFields.historical_status.title}
slug="historical_status"
value={""}
tooltip={dataFields.historical_status.tooltip}
options={HistoricalStatusOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
</DataEntryGroup>
</Fragment>
);
};
return (
<Fragment>
<DataEntryGroup name="Building Age" collapsed={true} >
<YearDataEntry
year={props.building.date_year}
upper={props.building.date_upper}
@ -139,7 +308,6 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.facade_year}
verified_count={props.building.verified.facade_year}
/>
<SelectDataEntry
title={dataFields.date_source.title}
slug="date_source"
@ -179,6 +347,195 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.date_link}
verified_count={props.building.verified.date_link}
/>
<InfoBox>
This section is under development.
</InfoBox>
<DataEntry
title="Cladding Date"
slug=""
value=""
mode='view'
/>
<Verification
slug="date_link"
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_link")}
user_verified_as={props.user_verified.date_link}
verified_count={props.building.verified.date_link}
/>
<DataEntry
title="Source"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Date of Significant Extensions"
slug=""
value=""
mode='view'
/>
<Verification
slug="date_link"
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_link")}
user_verified_as={props.user_verified.date_link}
verified_count={props.building.verified.date_link}
/>
<DataEntry
title="Source"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Date of Significant Retrofits"
slug=""
value=""
mode='view'
/>
<Verification
slug="date_link"
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_link")}
user_verified_as={props.user_verified.date_link}
verified_count={props.building.verified.date_link}
/>
<DataEntry
title="Source"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} >
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_constructed.title}
value={currentBuildingConstructionYear}
disabled={true}
mode='view'
/>
</div>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_demolished.title}
value={undefined}
placeholder='---'
disabled={true}
mode='view'
/>
</div>
<div style={{flex: '0 1 27%'}}>
<DataEntry
slug=''
title='Lifespan to date'
value={ (thisYear - currentBuildingConstructionYear) + ''}
disabled={true}
mode='view'
/>
</div>
</FieldRow>
</DynamicsBuildingPane>
{
currentBuildingConstructionYear == undefined ?
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
<>
<LogicalDataEntry
slug='dynamics_has_demolished_buildings'
title={dataFields.dynamics_has_demolished_buildings.title}
value={building.dynamics_has_demolished_buildings}
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
onChange={props.onSaveChange}
mode={props.mode}
copy={props.copy}
/>
{
building.dynamics_has_demolished_buildings &&
<>
<DynamicsDataEntry
/*
Will clear the edits and new record data upon navigating to another building.
Should get a better way to do this, plus a way to actually keep unsaved edits.
*/
key={building.building_id}
value={building.demolished_buildings}
editableEntries={true}
slug='demolished_buildings'
title={dataFields.demolished_buildings.title}
mode={props.mode}
onChange={props.onChange}
onSaveAdd={props.onSaveAdd}
hasEdits={props.edited}
maxYear={currentBuildingConstructionYear}
minYear={50}
/>
{
props.mode === 'view' &&
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
}
</>
}
</>
}
</DataEntryGroup>
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
<DataEntry
title="Historical land use change"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (raster) link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (vector) link"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<InfoBox>
This section is under development in collaboration with the historic environment sector.
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
</InfoBox>
</DataEntryGroup>
<DataEntryGroup name="Survival and Loss tracked using Historical Maps" collapsed={true} >
<InfoBox>
This section is under development.
</InfoBox>
<button className="map-switcher-inline btn btn-outline btn-outline-dark" /*onClick={}*/>
{'Click here for historical maps'}
</button>
<SelectDataEntry
title={dataFields.historical_status.title}
slug="historical_status"
value={""}
tooltip={dataFields.historical_status.tooltip}
options={HistoricalStatusOptions}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
</DataEntryGroup>
</Fragment>
);
};

View File

@ -1,140 +0,0 @@
import React from 'react';
import { Link } from 'react-router-dom';
import InfoBox from '../../../components/info-box';
import { Category } from '../../../config/categories-config';
import { dataFields } from '../../../config/data-fields-config';
import DataEntry from '../../data-components/data-entry';
import { DataEntryGroup } from '../../data-components/data-entry-group';
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics-data-entry';
import { FieldRow } from '../../data-components/field-row';
import NumericDataEntry from '../../data-components/numeric-data-entry';
import withCopyEdit from '../../data-container';
import { CategoryViewProps } from '../category-view-props';
import { LogicalDataEntry } from '../../data-components/logical-data-entry/logical-data-entry';
/**
* Dynamics view/edit section
*/
const DynamicsView: React.FunctionComponent<CategoryViewProps> = (props) => {
const building = props.building;
const thisYear = (new Date()).getFullYear();
const currentBuildingConstructionYear = building.date_year || undefined;
const ageLinkUrl = `/${props.mode}/${Category.Age}/${props.building.building_id}`;
return (<>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_constructed.title}
value={currentBuildingConstructionYear}
disabled={true}
mode='view'
/>
</div>
<div>
<NumericDataEntry
slug=''
title={dataFields.demolished_buildings.items.year_demolished.title}
value={undefined}
placeholder='---'
disabled={true}
mode='view'
/>
</div>
<div style={{flex: '0 1 27%'}}>
<DataEntry
slug=''
title='Lifespan to date'
value={ (thisYear - currentBuildingConstructionYear) + ''}
disabled={true}
mode='view'
/>
</div>
</FieldRow>
</DynamicsBuildingPane>
{
currentBuildingConstructionYear == undefined ?
<InfoBox>To add historical records, fill in the <Link to={ageLinkUrl}>Age</Link> data first.</InfoBox> :
<>
<LogicalDataEntry
slug='dynamics_has_demolished_buildings'
title={dataFields.dynamics_has_demolished_buildings.title}
value={building.dynamics_has_demolished_buildings}
disallowFalse={(building.demolished_buildings?.length ?? 0) > 0}
disallowNull={(building.demolished_buildings?.length ?? 0) > 0}
onChange={props.onSaveChange}
mode={props.mode}
copy={props.copy}
/>
{
building.dynamics_has_demolished_buildings &&
<>
<DynamicsDataEntry
/*
Will clear the edits and new record data upon navigating to another building.
Should get a better way to do this, plus a way to actually keep unsaved edits.
*/
key={building.building_id}
value={building.demolished_buildings}
editableEntries={true}
slug='demolished_buildings'
title={dataFields.demolished_buildings.title}
mode={props.mode}
onChange={props.onChange}
onSaveAdd={props.onSaveAdd}
hasEdits={props.edited}
maxYear={currentBuildingConstructionYear}
minYear={50}
/>
{
props.mode === 'view' &&
<InfoBox>Switch to edit mode to add/edit past building records</InfoBox>
}
</>
}
</>
}
</DataEntryGroup>
<DataEntryGroup name="Future planned data collection" collapsed={false} showCount={false}>
<DataEntry
title="Historical land use change"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (raster) link"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Longitudinal historical footprints (vector) link"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<InfoBox>
This section is under development in collaboration with the historic environment sector.
Please let us know your suggestions on the <a href="https://discuss.colouring.london/t/dynamics-category-discussion/107">discussion forum</a>! (external link - save your edits first)
</InfoBox>
</>)
};
const DynamicsContainer = withCopyEdit(DynamicsView);
export default DynamicsContainer;

View File

@ -0,0 +1,105 @@
import React from 'react';
import { Link } from 'react-router-dom';
import InfoBox from '../../components/info-box';
import { Category } from '../../config/categories-config';
import { dataFields } from '../../config/data-fields-config';
import DataEntry from '../data-components/data-entry';
import { DataEntryGroup } from '../data-components/data-entry-group';
import { DynamicsBuildingPane, DynamicsDataEntry } from './dynamics/dynamics-data-entry';
import { FieldRow } from '../data-components/field-row';
import NumericDataEntry from '../data-components/numeric-data-entry';
import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props';
import { LogicalDataEntry } from '../data-components/logical-data-entry/logical-data-entry';
/**
* Dynamics view/edit section
*/
const ResilienceView: React.FunctionComponent<CategoryViewProps> = (props) => {
return (<>
<InfoBox>
This section is under development.
</InfoBox>
<DataEntry
title="Building age"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Typical typology lifespan"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Typology adaptability rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Physical adaptability rating - within plot"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Landuse adaptability rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Structural material lifespan rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Protection from demolition rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Flood risk rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Surface geology type"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Average community value rating for typology"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Other rating"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Total resilience rating"
slug=""
value=""
mode='view'
/>
</>)
};
const ResilienceContainer = withCopyEdit(ResilienceView);
export default ResilienceContainer;

View File

@ -6,6 +6,7 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
import SelectDataEntry from '../data-components/select-data-entry';
import Verification from '../data-components/verification';
import withCopyEdit from '../data-container';
import InfoBox from '../../components/info-box';
import { CategoryViewProps } from './category-view-props';
@ -94,26 +95,25 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
user_verified_as={props.user_verified.sust_retrofit_date}
verified_count={props.building.verified.sust_retrofit_date}
/>
<NumericDataEntry
title={dataFields.sust_life_expectancy.title}
slug="sust_life_expectancy"
value={props.building.sust_life_expectancy}
step={1}
min={1}
disabled={true}
mode={props.mode}
copy={props.copy}
onChange={props.onChange}
/>
<InfoBox>
This section is under development.
</InfoBox>
<DataEntry
title="Repairability rating for type"
title="Date of Significant Retrofits"
slug=""
value=""
mode='view'
/>
<Verification
slug="date_link"
allow_verify={props.user !== undefined && props.building.date_link !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("date_link")}
user_verified_as={props.user_verified.date_link}
verified_count={props.building.verified.date_link}
/>
<DataEntry
title="Adaptability within plot rating"
title="Source"
slug=""
value=""
mode='view'

View File

@ -41,7 +41,7 @@ const LogoGrid: React.FunctionComponent = () => (
<div className="row">
<div className="cell background-sustainability"></div>
<div className="cell background-planning"></div>
<div className="cell background-dynamics"></div>
<div className="cell background-resilience"></div>
<div className="cell background-community"></div>
</div>
</div>

View File

@ -13,7 +13,7 @@ export enum Category {
Team = 'team',
Planning = 'planning',
Sustainability = 'sustainability',
Dynamics = 'dynamics',
Resilience = 'resilience',
Community = 'community',
}
@ -26,14 +26,14 @@ export const categoriesOrder: Category[] = [
Category.Location,
Category.LandUse,
Category.Type,
Category.Age,
Category.Size,
Category.Construction,
Category.Age,
Category.Streetscape,
Category.Team,
Category.Planning,
Category.Sustainability,
Category.Dynamics,
Category.Resilience,
Category.Community,
];
@ -48,13 +48,13 @@ interface CategoryDefinition {
export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
[Category.Age]: {
slug: 'age',
name: 'Age',
name: 'Age & History',
aboutUrl: 'https://pages.colouring.london/age',
intro: 'Building age data can support energy analysis and help predict long-term change.',
},
[Category.Size]: {
slug: 'size',
name: 'Size',
name: 'Size & Form',
aboutUrl: 'https://pages.colouring.london/shapeandsize',
intro: 'How big are buildings?',
},
@ -84,19 +84,19 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
},
[Category.Planning]: {
slug: 'planning',
name: 'Planning',
name: 'Planning Controls',
aboutUrl: 'https://pages.colouring.london/planning',
intro: 'Planning controls relating to protection and reuse.',
},
[Category.Sustainability]: {
slug: 'sustainability',
name: 'Sustainability',
name: 'Energy Performance',
aboutUrl: 'https://pages.colouring.london/sustainability',
intro: 'Are buildings energy efficient?',
},
[Category.Type]: {
slug: 'type',
name: 'Type',
name: 'Typology',
aboutUrl: 'https://pages.colouring.london/buildingtypology',
intro: 'How were buildings previously used?',
},
@ -113,9 +113,9 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
aboutUrl: 'https://pages.colouring.london/greenery',
intro: "What's the building's context? Coming soon…",
},
[Category.Dynamics]: {
slug: 'dynamics',
name: 'Dynamics',
[Category.Resilience]: {
slug: 'resilience',
name: 'Resilience',
aboutUrl: 'https://pages.colouring.london/dynamics',
intro: 'How has the site of this building changed over time?'
},

View File

@ -317,10 +317,10 @@ export const categoryMapsConfig: {[key in Category]: CategoryMapDefinition[]} =
elements: []
},
}],
[Category.Dynamics]: [{
[Category.Resilience]: [{
mapStyle: 'dynamics_demolished_count',
legend: {
title: 'Dynamics',
title: 'Resilience',
description: 'Demolished buildings on the same site',
elements: [
{

View File

@ -3,7 +3,7 @@ import { Category } from './categories-config';
import AgeContainer from '../building/data-containers/age';
import CommunityContainer from '../building/data-containers/community';
import ConstructionContainer from '../building/data-containers/construction';
import DynamicsContainer from '../building/data-containers/dynamics/dynamics';
import ResilienceContainer from '../building/data-containers/resilience';
import LocationContainer from '../building/data-containers/location';
import PlanningContainer from '../building/data-containers/planning';
import SizeContainer from '../building/data-containers/size';
@ -26,7 +26,7 @@ export const categoryUiConfig: {[key in Category]: DataContainerType} = {
[Category.Team]: TeamContainer,
[Category.Planning]: PlanningContainer,
[Category.Sustainability]: SustainabilityContainer,
[Category.Dynamics]: DynamicsContainer,
[Category.Resilience]: ResilienceContainer,
[Category.Community]: CommunityContainer,
};

View File

@ -452,6 +452,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
//tooltip: ,
},
historical_status: {
category: Category.Age,
title: "Historical Status",
tooltip: "Survival and Loss tracked using Historical Maps",
},
edit_history: {
category: Category.Planning,
title: "PLANNING DATA",
@ -613,13 +619,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
},
dynamics_has_demolished_buildings: {
category: Category.Dynamics,
category: Category.Resilience,
title: 'Were any other buildings ever built on this site?',
example: true,
},
demolished_buildings: {
category: Category.Dynamics,
category: Category.Resilience,
title: 'Past (demolished) buildings on this site',
items: {
year_constructed: {

View File

@ -66,13 +66,13 @@
background-color: #f77d11;
}
.background-age {
background-color: #ff6161;
background-color: #ab8fb0;
}
.background-size {
background-color: #f2a2b9;
background-color: #ff6161;
}
.background-construction {
background-color: #ab8fb0;
background-color: #f2a2b9;
}
.background-streetscape {
background-color: #718899;
@ -86,7 +86,7 @@
.background-sustainability {
background-color: #6bb1e3;
}
.background-dynamics {
.background-resilience {
background-color: #aaaaaa;
}
.background-community {