Add new feature notice, solid border in community

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

@@ -1,5 +1,5 @@
 .community-opinion-pane {
     padding-top: 0.5em;
     padding-bottom: 0.5em;
-    border-bottom: 1px dashed gray;
+    border-bottom: 1px solid gray;
 }

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

@@ -20,6 +20,9 @@ import { MultiDataEntry } from '../data-components/multi-data-entry/multi-data-e
 const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
     const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
     return <>
+        <InfoBox type='warning'>
+            We are testing a new feature in this section! Switch between different colour maps by using the dropdown in the legend pane.
+        </InfoBox>
         <div className='community-opinion-pane'>
             <InfoBox>
                 Can you share your opinion on how well the building works?

app/src/frontend/components/info-box.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 
 interface InfoBoxProps {
     msg?: string;
+    type?: 'info' | 'warning'
 }
 
-const InfoBox: React.FC<InfoBoxProps> = (props) => (
+const InfoBox: React.FC<InfoBoxProps> = ({msg, children, type = 'info'}) => (
     <>
         {
-            (props.msg || props.children) &&
+            (msg || children) &&
-                <div className="alert alert-info" role="alert">
+                <div className={`alert alert-${type}`} role="alert">
-                    { props.msg ?? '' }
+                    { msg ?? '' }
-                    { props.children }
+                    { children }
                 </div>
         }
     </>