From 25a4bb7e0d47952a9bf7fe35ca7170e2232d45da Mon Sep 17 00:00:00 2001
From: Maciej Ziarkowski <maciej.ziarkowski@gmail.com>
Date: Mon, 11 Oct 2021 14:13:02 +0200
Subject: [PATCH] Add new feature notice, solid border in community

---
 .../frontend/building/data-containers/community.css   |  2 +-
 .../frontend/building/data-containers/community.tsx   |  3 +++
 app/src/frontend/components/info-box.tsx              | 11 ++++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/src/frontend/building/data-containers/community.css b/app/src/frontend/building/data-containers/community.css
index d807fa79..1e7c3bf0 100644
--- a/app/src/frontend/building/data-containers/community.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/app/src/frontend/building/data-containers/community.tsx b/app/src/frontend/building/data-containers/community.tsx
index eec04d8d..863f3c8d 100644
--- a/app/src/frontend/building/data-containers/community.tsx
+++ b/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?
diff --git a/app/src/frontend/components/info-box.tsx b/app/src/frontend/components/info-box.tsx
index f6e4f5c3..fcaf0efc 100644
--- a/app/src/frontend/components/info-box.tsx
+++ b/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) &&
-                <div className="alert alert-info" role="alert">
-                    { props.msg ?? '' }
-                    { props.children }
+            (msg || children) &&
+                <div className={`alert alert-${type}`} role="alert">
+                    { msg ?? '' }
+                    { children }
                 </div>
         }
     </>