Merge pull request #201 from Edgeryders-Participio/separate-selected-in-list

Separate the selection highlight in the lists from the rest of the lists

Author: Powersource

ui/src/scenes/Home/components/NeedsContainer/components/NeedsList/NeedsList.js

@@ -11,6 +11,10 @@ const NeedsListGroup = styled(ListGroup)`
   margin-bottom: 1rem;
 `;
 
+const SelectedNeedGroup = styled(ListGroup)`
+  margin-bottom: 0.5rem;
+`;
+
 const NeedsListGroupHeader = styled(ListGroupItem)`
   display: flex;
   justify-content: space-between;
@@ -74,16 +78,17 @@ const NeedsList = ({ selectedNeedId, needs, subscribeToNeedsEvents }) => {
   }], ['asc']);
   return (
     <div>
-      <NeedsListGroup>
-        {sortedNeeds.filter((need) => need.nodeId === selectedNeedId).map((need) => (
+      {sortedNeeds.filter((need) => need.nodeId === selectedNeedId).map((need) => (
+        <SelectedNeedGroup key={1}>
           <NeedsListGroupHeader
-            key={selectedNeedId}
             active
           >
             {need.title}
             {renderMissingRealizersAmount(need)}
           </NeedsListGroupHeader>
-        ))}
+        </SelectedNeedGroup>
+      ))}
+      <NeedsListGroup>
         {sortedNeeds.map((need) => (
           <NeedsListGroupItem
             key={need.nodeId}

ui/src/scenes/Home/components/ResponsibilitiesContainer/components/ResponsibilitiesList/ResponsibilitiesList.js

@@ -11,6 +11,10 @@ const ResponsibilitiesListGroup = styled(ListGroup)`
   margin-bottom: 1rem;
 `;
 
+const SelectedResponsibilitiesListGroup = styled(ListGroup)`
+  margin-bottom: 0.5rem;
+`;
+
 const ResponsibilitiesListGroupHeader = styled(ListGroupItem)`
   display: flex;
   justify-content: space-between;
@@ -60,18 +64,19 @@ const ResponsibilitiesList = ({
   }], ['asc']);
   return (
     <div>
-      <ResponsibilitiesListGroup>
-        {sortedResponsibilities
-          .filter((responsibility) => responsibility.nodeId === selectedResponsibilityId)
-          .map((responsibility) => (
+      {sortedResponsibilities
+        .filter((responsibility) => responsibility.nodeId === selectedResponsibilityId)
+        .map((responsibility) => (
+          <SelectedResponsibilitiesListGroup key={1}>
             <ResponsibilitiesListGroupHeader
-              key={selectedResponsibilityId}
               active
             >
               {responsibility.title}
               {renderMissingRealizerIcon(responsibility)}
             </ResponsibilitiesListGroupHeader>
-          ))}
+          </SelectedResponsibilitiesListGroup>
+        ))}
+      <ResponsibilitiesListGroup>
         {sortedResponsibilities.map((responsibility) => (
           <ResponsibilitiesListGroupItem
             key={responsibility.nodeId}