More UI Tweaks

Mainly to improve consistency and readability across all categories/pages
Discussed in meeting with Polly 16/05

app/src/frontend/building/data-components/data-entry-group.css

@@ -3,6 +3,8 @@
     position: relative;
     font-size: 1.1rem;
     font-weight: 410;
+    padding-top: 3px;
+    padding-bottom: 3px;
 }
 .data-entry-group-header .data-entry-group-title {
     padding-left: 0.6rem;

app/src/frontend/building/data-container.css

@@ -1,7 +1,7 @@
 .edit-bar {
     position: sticky;
     top: 53px; /* match section-header height */
-    padding: 12px 0; /* match info-container-inner margin-top*/
+    padding: 3px 0 0 0; /* match info-container-inner margin-top*/
     width: 100%;
     background-color: white;
     z-index: 1000;

app/src/frontend/building/data-container.tsx

@@ -413,7 +413,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
                                                                 </button> :
                                                                 null
                                                         }
+                                                        <hr/>
                                                     </div>
+                                                    
                                             }
                                         </div>
                                         : null

app/src/frontend/building/data-containers/age.tsx

@@ -47,7 +47,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
        ){
       return (
           <Fragment>
-            <DataEntryGroup name="Building Age" collapsed={false} >
+            <DataEntryGroup name="Building Age">
                 <YearDataEntry
                     year={props.building.date_year}
                     upper={props.building.date_upper}
@@ -140,7 +140,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 <button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> 
                     {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
                 </button>
-                <DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
+                <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
                     <DynamicsBuildingPane>
                         <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
                         <FieldRow>
@@ -261,7 +261,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
       };
     return (
         <Fragment>
-            <DataEntryGroup name="Building Age" collapsed={true} >
+            <DataEntryGroup name="Building Age">
                 <YearDataEntry
                     year={props.building.date_year}
                     upper={props.building.date_upper}
@@ -411,11 +411,11 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     mode='view'
                 />
             </DataEntryGroup>
-            <DataEntryGroup name="Lifespan and Site History" collapsed={true} >
+            <DataEntryGroup name="Lifespan and Site History">
                 <button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> 
                     {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
                 </button>
-                <DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}>
+                <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
                     <DynamicsBuildingPane>
                         <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
                         <FieldRow>

app/src/frontend/building/data-containers/community.tsx

@@ -40,7 +40,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const { darkLightTheme } = useDisplayPreferences();
     const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
     return <>
-        <DataEntryGroup name="Community views on building types" collapsed={false} >
+        <DataEntryGroup name="Community views on building types">
         <InfoBox>
             Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
         </InfoBox>
@@ -151,7 +151,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
 
         </div>
         </DataEntryGroup>
-        <DataEntryGroup name="Building use for community activities" collapsed={false} >
+        <DataEntryGroup name="Building use for community activities">
         <InfoBox>
                 Here we are collecting information on the location of buildings used for community activities so we can track loss of/additions to community space over time
         </InfoBox>

app/src/frontend/building/data-containers/construction.tsx

@@ -38,7 +38,7 @@ const RoofCoveringOptions = [
 const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
          <Fragment>
-            <DataEntryGroup name="Materials" collapsed={false}>
+            <DataEntryGroup name="Materials">
                 <SelectDataEntry
                     title={dataFields.construction_core_material.title}
                     slug="construction_core_material"
@@ -87,7 +87,7 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
                     verified_count={props.building.verified.construction_roof_covering}
                     />
             </DataEntryGroup>
-            <DataEntryGroup name="Construction Sectors" collapsed={false}>
+            <DataEntryGroup name="Construction Sectors">
                 <DataEntry
                     title="Construction system type"
                     slug=""

app/src/frontend/building/data-containers/location.tsx

@@ -16,6 +16,8 @@ const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]
 
 const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
+        
+        <DataEntryGroup name="Address Data">
             <DataEntry
                 title={dataFields.location_name.title}
                 slug="location_name"
@@ -40,9 +42,24 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 slug=""
                 value=""
                 mode='view'
+                tooltip="Not yet activated.<br><br>For security reasons, we do not allow the use of free text boxes and are currently looking into alternative ways to collect this data."
+            />
+            <Verification
+                slug="location_name"
+                allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited}
+                onVerify={props.onVerify}
+                user_verified={props.user_verified.hasOwnProperty("location_name")}
+                user_verified_as={props.user_verified.location_name}
+                verified_count={props.building.verified.location_name}
+            />
+            <DataEntry
+                title="Building Name Source"
+                slug=""
+                value=""
+                mode='view'
                 tooltip="Coming Soon"
             />
-        <DataEntryGroup name="Address" collapsed={false}>
+            <hr/>
             <PatternDataEntry
                 title={dataFields.location_number.title}
                 slug="location_number"
@@ -138,7 +155,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 tooltip="Coming Soon"
             />
         </DataEntryGroup>
-        <DataEntryGroup name="Other Location Data" collapsed={false}>
+        <DataEntryGroup name="Property/Footprint IDs and Coordinate Data">
             <DataEntry
                 title={dataFields.ref_toid.title}
                 slug="ref_toid"
@@ -147,6 +164,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 copy={props.copy}
                 tooltip={dataFields.ref_toid.tooltip}
                 onChange={props.onChange}
+                disabled={true}
                 />
             <UPRNsDataEntry
                 title={dataFields.uprns.title}

app/src/frontend/building/data-containers/planning.tsx

@@ -66,7 +66,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
     <Fragment>
         <DataEntryGroup name="Planning application information" collapsed={true} >
-            <DataEntryGroup name="Current/active applications (official data)" collapsed={false} >
+            <DataEntryGroup name="Current/active applications (official data)">
                 <InfoBox>
                     This section provides data on active applications. We define these as applications with any activity in the last year.
                     <br />

app/src/frontend/building/data-containers/size.tsx

@@ -16,35 +16,7 @@ import InfoBox from '../../components/info-box';
 */
 const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
-        <DataEntryGroup name="Plot Size">
+        <DataEntryGroup name="Number of floors/storeys">
-            <NumericDataEntry
-                title={dataFields.size_plot_area_total.title}
-                slug="size_plot_area_total"
-                mode='view'
-                step={0.1}
-                min={0}
-            />
-            <NumericDataEntry
-                title={dataFields.size_far_ratio.title}
-                slug="size_far_ratio"
-                mode='view'
-                step={0.1}
-                min={0}
-            />
-            <DataEntry
-                title="Plot dimensions"
-                slug=""
-                value=""
-                mode='view'
-            />
-            <DataEntry
-                title="Plot geometry link"
-                slug=""
-                value=""
-                mode='view'
-            />
-        </DataEntryGroup>
-        <DataEntryGroup name="Floors">
             <NumericDataEntry
                 title={dataFields.size_storeys_core.title}
                 slug="size_storeys_core"
@@ -64,7 +36,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_storeys_core}
                 verified_count={props.building.verified.size_storeys_core}
                 />
-
             <NumericDataEntry
                 title={dataFields.size_storeys_attic.title}
                 slug="size_storeys_attic"
@@ -84,7 +55,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_storeys_attic}
                 verified_count={props.building.verified.size_storeys_attic}
                 />
-
             <NumericDataEntry
                 title={dataFields.size_storeys_basement.title}
                 slug="size_storeys_basement"
@@ -104,9 +74,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_storeys_basement}
                 verified_count={props.building.verified.size_storeys_basement}
                 />
-
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
         </DataEntryGroup>
-        <DataEntryGroup name="Height" collapsed={false}>
+        <DataEntryGroup name="Building height data">
             <NumericDataEntry
                 title={dataFields.size_height_apex.title}
                 slug="size_height_apex"
@@ -125,7 +108,21 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_height_apex}
                 verified_count={props.building.verified.size_height_apex}
                 />
-
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <hr/>
             <NumericDataEntry
                 title={dataFields.size_height_eaves.title}
                 slug="size_height_eaves"
@@ -137,8 +134,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 step={0.1}
                 min={0}
                 />
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
         </DataEntryGroup>
-        <DataEntryGroup name="Floor area">
+        <DataEntryGroup name="Floor area data">
             <NumericDataEntry
                 title={dataFields.size_floor_area_ground.title}
                 slug="size_floor_area_ground"
@@ -157,7 +168,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_floor_area_ground}
                 verified_count={props.building.verified.size_floor_area_ground}
                 />
-
             <NumericDataEntry
                 title={dataFields.size_floor_area_total.title}
                 slug="size_floor_area_total"
@@ -176,8 +186,102 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_floor_area_total}
                 verified_count={props.building.verified.size_floor_area_total}
                 />
-
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+                />
         </DataEntryGroup>
+        <DataEntryGroup name="Plot size data">
+            <NumericDataEntry
+                title={dataFields.size_plot_area_total.title}
+                slug="size_plot_area_total"
+                mode='view'
+                step={0.1}
+                min={0}
+            />
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <hr/>
+            <NumericDataEntry
+                title={dataFields.size_far_ratio.title}
+                slug="size_far_ratio"
+                mode='view'
+                step={0.1}
+                min={0}
+            />
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <hr/>
+            <DataEntry
+                title="Plot dimensions"
+                slug=""
+                value=""
+                mode='view'
+            />
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <hr/>
+            <DataEntry
+                title="Land parcel geometry link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip='INSPIRE Polygons'
+            />
+            <DataEntry
+                title="Source type"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+            <hr/>
             <NumericDataEntry
                 title={dataFields.size_width_frontage.title}
                 slug="size_width_frontage"
@@ -196,13 +300,21 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 user_verified_as={props.user_verified.size_width_frontage}
                 verified_count={props.building.verified.size_width_frontage}
                 />
-
             <DataEntry
-            title="Total opening area"
+                title="Source type"
                 slug=""
                 value=""
                 mode='view'
+                tooltip="Coming Soon"
             />
+            <DataEntry
+                title="Source link"
+                slug=""
+                value=""
+                mode='view'
+                tooltip="Coming Soon"
+            />
+        </DataEntryGroup>
     </Fragment>
 );
 const SizeContainer = withCopyEdit(SizeView);

app/src/frontend/building/data-containers/streetscape.tsx

@@ -7,12 +7,14 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
 import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 /**
 * Streetscape view/edit section
 */
 const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
     <Fragment>
+        <DataEntryGroup name="Does the building have a garden(s)?">
             <DataEntry
                 title="Does the building have a front garden?"
                 slug=""
@@ -25,6 +27,8 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 value=""
                 mode='view'
             />
+        </DataEntryGroup>
+        <DataEntryGroup name="Street/pavement properties">
             <DataEntry
                 title="Street width"
                 slug=""
@@ -43,8 +47,10 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 value=""
                 mode='view'
             />
+        </DataEntryGroup>
+        <DataEntryGroup name="Access to green space">
             <DataEntry
-            title="Distance from Public Green Space"
+                title="Distance from public green space"
                 slug=""
                 value=""
                 mode='view'
@@ -55,6 +61,7 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
                 value=""
                 mode='view'
             />
+        </DataEntryGroup>
     </Fragment>
 );
 const StreetscapeContainer = withCopyEdit(StreetscapeView);

app/src/frontend/building/data-containers/sustainability.tsx

@@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
 import InfoBox from '../../components/info-box';
 
 import { CategoryViewProps } from './category-view-props';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"];
 const BreeamRatingOptions = [
@@ -25,6 +26,7 @@ const BreeamRatingOptions = [
 const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
         <Fragment>
+            <DataEntryGroup name="Energy rating data">
                 <SelectDataEntry
                     title={dataFields.sust_breeam_rating.title}
                     slug="sust_breeam_rating"
@@ -74,7 +76,8 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
                     copy={props.copy}
                     onChange={props.onChange}
                 />
-
+            </DataEntryGroup>
+            <DataEntryGroup name="Retrofit Data">
                 <NumericDataEntry
                     title={dataFields.sust_retrofit_date.title}
                     slug="sust_retrofit_date"
@@ -115,12 +118,15 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
                     value=""
                     mode='view'
                 />
+            </DataEntryGroup>
+            <DataEntryGroup name="Other sustainability features">
                 <DataEntry
                     title="Green Walls / Green Roof"
                     slug=""
                     value=""
                     mode='view'
                 />
+            </DataEntryGroup>
         </Fragment>
     );
     };

app/src/frontend/building/data-containers/team.tsx

@@ -21,6 +21,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const currentBuildingConstructionYear = building.date_year || undefined;
       return (
        <form>
+            <DataEntryGroup name="Dates of construction/extension">
                 <NumericDataEntry
                     slug='date_year'
                     title={dataFields.date_year.title}
@@ -74,6 +75,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         />
                 </>
                 ) : (null)}
+            </DataEntryGroup>
+            <DataEntryGroup name="Land ownership data">
                 <MultiDataEntry
                     title={dataFields.landowner.title}
                     slug="landowner"
@@ -105,6 +108,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     editableEntries={true}
                     isUrl={true}
                     />
+            </DataEntryGroup>
+            <DataEntryGroup name="Developer data">
                 <SelectDataEntry
                     slug='developer_type'
                     title={dataFields.developer_type.title}
@@ -153,6 +158,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     editableEntries={true}
                     isUrl={true}
                     />
+            </DataEntryGroup>
+            <DataEntryGroup name="Designer data">
                 <MultiDataEntry
                     title={dataFields.designers.title}
                     slug="designers"
@@ -243,6 +250,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 </>
                 ) : (null)
             }
+            </DataEntryGroup>
+        <DataEntryGroup name="Builder data">
             <MultiDataEntry
                 title={dataFields.builder.title}
                 slug="builder"
@@ -272,6 +281,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                 editableEntries={true}
                 isUrl={true}
                 />
+        </DataEntryGroup>
      </form>
     );
 };

app/src/frontend/building/data-containers/type.tsx

@@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
 
 import { CategoryViewProps } from './category-view-props';
 import InfoBox from '../../components/info-box';
+import { DataEntryGroup } from '../data-components/data-entry-group';
 
 const AttachmentFormOptions = [
     "Detached",
@@ -23,6 +24,7 @@ const AttachmentFormOptions = [
 const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
     return (
         <Fragment>
+            <DataEntryGroup name="Adjacency and Building Use Data">
                 <SelectDataEntry
                     title={dataFields.building_attachment_form.title}
                     slug="building_attachment_form"
@@ -41,6 +43,21 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     user_verified_as={props.user_verified.building_attachment_form}
                     verified_count={props.building.verified.building_attachment_form}
                     />
+                <DataEntry
+                    title="Source type"
+                    slug=""
+                    value=""
+                    mode='view'
+                    tooltip="Coming Soon"
+                />
+                <DataEntry
+                    title="Source link"
+                    slug=""
+                    value=""
+                    mode='view'
+                    tooltip="Coming Soon"
+                />
+                <hr/>
                 <DataEntry
                     title={dataFields.original_building_use.title}
                     slug="original_building_use" // doesn't exist in database yet
@@ -59,6 +76,22 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     user_verified_as={props.user_verified.building_attachment_form}
                     verified_count={props.building.verified.building_attachment_form}
                     />
+                <DataEntry
+                    title="Source type"
+                    slug=""
+                    value=""
+                    mode='view'
+                    tooltip="Coming Soon"
+                />
+                <DataEntry
+                    title="Source link"
+                    slug=""
+                    value=""
+                    mode='view'
+                    tooltip="Coming Soon"
+                />
+            </DataEntryGroup>
+            <DataEntryGroup name="Building Typology and Classification Data">
                 <DataEntry
                     title="Local typology/architectural style"
                     slug=""
@@ -115,6 +148,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     copy={props.copy}
                     onChange={props.onChange}
                 /> */}
+            </DataEntryGroup>
         </Fragment>
     );
     };

app/src/frontend/building/data-containers/use.tsx

@@ -25,10 +25,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const { darkLightTheme } = useDisplayPreferences();
       return (
           <Fragment>
-                <DataEntryGroup name="Domestic or non-domestic use" collapsed={false}>
+                <DataEntryGroup name="Domestic/non-domestic use data">
-                    <InfoBox msg="93% of properties in UK are dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?"></InfoBox>
+                    <div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
+                        <i>
+                            93% of properties in UK are residential dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?
+                        </i>
+                    </div>
                     <button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
-                        {(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic, non-domestic and mixed-use buildings'}
+                        {(props.mapColourScale == "is_domestic")? 'Showing domestic, non-domestic and mixed-use buildings (click to hide)' : 'Click to see domestic, non-domestic and mixed-use buildings on the map.'}
                     </button>
                     <SelectDataEntry
                         title={dataFields.is_domestic.title}
@@ -48,17 +52,18 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         user_verified_as={props.user_verified.is_domestic}
                         verified_count={props.building.verified.is_domestic}
                     />
-                    <InfoBox type='warning'>Note: Work from home does not count as office and does not make building non-domestic.</InfoBox>
                     <SelectDataEntry
                         title={dataFields.is_domestic_source.title}
                         slug="is_domestic_source"
                         value={props.building.is_domestic}
                         options={
                             [
-                                "Citizen/passerby", 
+                                "Expert knowledge", 
+                                "Observed from the street",
                                 "Google or other photograph/satellite imagery", 
-                                "Government Record",
+                                "Government/public record/database",
-                                "Other Record"
+                                "Independently managed record/database",
+                                "Other type of record/database"
                             ]
                         }
                         mode={props.mode}
@@ -67,14 +72,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                         tooltip={dataFields.is_domestic_source.tooltip}
                     />
                     <DataEntry
-                        title="Please provide a link to the data source"
+                        title="Source link"
                         slug=""
                         value=""
                         mode='view'
                         tooltip="Coming Soon"
                     />
                 </DataEntryGroup>
-                <DataEntryGroup name="Specific Land Use" collapsed={false}>
+                <DataEntryGroup name="Specific land use data">
                     <MultiDataEntry
                         title={dataFields.current_landuse_group.title}
                         slug="current_landuse_group"
@@ -127,7 +132,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     }
                     {
                         props.mode != 'view' &&
-                        <InfoBox msg="A more general classification for the land use of this building is automatically derived and shown below."></InfoBox>
+                        <div>
+                            <hr/>
+                            <div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
+                                <i>
+                                    Below is a more general classification for the land use of this building, automatically derived from the information above.
+                                </i>
+                            </div>
+                        </div>
                     }
                     <DataEntry
                         title={dataFields.current_landuse_order.title}

app/src/frontend/config/categories-config.ts

@@ -80,7 +80,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
         slug: 'community',
         name: 'Community',
         aboutUrl: 'https://pages.colouring.london/community',
-        intro: 'This section collects data on how well citizens think specific *types* of building work (rather than individual buildings). This will help us save and reuse as many useful buildings as possible, and to help improve urban design quality in future.',
+        intro: 'This section collects data on how well citizens think specific *types* of building work. This will help us save/reuse as many useful buildings as possible, and help improve urban design quality in future.',
     },
     [Category.Planning]: {
         slug: 'planning',
@@ -98,7 +98,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
         slug: 'type',
         name: 'Typology',
         aboutUrl: 'https://pages.colouring.london/buildingtypology',
-        intro: 'This section provides open data on the type of activities being carried out within buildings.',
+        intro: 'Note: This section is currently under development, we are working to activate it as soon as possible. This section provides open data on the typology of the building.',
     },
     [Category.LandUse]: {
         slug: 'use',

app/src/frontend/config/data-fields-config.ts

@@ -177,7 +177,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     uprns: {
         category: Category.Location,
         title: "Unique Property Reference Number(s) (UPRN)",
-        tooltip: "Unique Property Reference Numbers (to be filled automatically)",
+        tooltip: "Unique Property Reference Numbers (to be filled automatically) [<a href='https://beta.ordnancesurvey.co.uk/products/os-open-uprn'>LINK</a>]",
         example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }],
     },
 
@@ -211,13 +211,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
     current_landuse_group: {
         category: Category.LandUse,
-        title: "Current Land Use",
+        title: "Current land use(s)",
         tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
         example: ["", ""],
     },
     current_landuse_order: {
         category: Category.LandUse,
-        title: "Current Land Use (Order)",
+        title: "Current land use (order)",
         tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
         example: "",
     },
@@ -272,7 +272,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     original_building_use: {
         category: Category.Type,
         title: "Original building use",
-        tooltip: "What was the building originally used for when it was built? I.e. If it was Victorian warehouse which is now an office this would be warehouse",
+        tooltip: "What was the building <u><i>originally</i></u> used for when it was built?",
         example: "",
     },
     size_roof_shape: {
@@ -290,7 +290,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     date_lower : {
         category: Category.Age,
         title: "Earliest possible start year",
-        tooltip: "This should be the earliest year in which building could have started.",
+        tooltip: "This should be the earliest year in which construction could have started.",
         example: 1900,
     },
     date_upper: {
@@ -362,13 +362,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
         category: Category.Size,
         title: "Height to apex (m)",
         example: 100.5,
-        //tooltip: ,
+        tooltip: "i.e. the highest part of the roof.",
     },
     size_height_eaves: {
         category: Category.Size,
         title: "Height to eaves (m)",
         example: 20.33,
-        //tooltip: ,
+        tooltip: "i.e. to where the top of the wall meets the roof",
     },
     size_floor_area_ground: {
         category: Category.Size,
@@ -601,12 +601,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     is_domestic: {
         category: Category.Team,
         title: "Is the building a home/domestic building?",
-        tooltip: "",
+        tooltip: "Note: Homes used as offices for working from home should be classified as domestic.",
         example: "mixed domestic/non-domestic"
     },
     is_domestic_source: {
         category: Category.Team,
-        title: "Domestic/non-domestic data source?",
+        title: "Source type",
         tooltip: "",
         example: ""
     },

app/src/frontend/styles/layout.css

@@ -50,9 +50,9 @@ article .color-block {
 hr {
     display: block;
     height: 1px;
-    border: 0;
+    border: none;
-    background: #000;
+    background-color: #ccc;
     width: 100%;
-    margin: 2em 0;
+    margin: 1.2em 0 1em 0;
     padding: 0;
 }