From 17c8456c5639cae5b863669060d20fa293aeaf53 Mon Sep 17 00:00:00 2001
From: james hadfield <jh22@sanger.ac.uk>
Date: Fri, 6 Nov 2020 17:38:00 +1300
Subject: [PATCH] Modify display of filter badges

This shifts the active/inactive icon to the RHS of the filter badge based on feedback from testing.
---
 src/components/info/filterBadge.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/info/filterBadge.js b/src/components/info/filterBadge.js
index a68c45919..4cda2c8be 100644
--- a/src/components/info/filterBadge.js
+++ b/src/components/info/filterBadge.js
@@ -19,22 +19,22 @@ const TextContainer = styled(BaseContainer)`
   background-color: #E9F2F6;
   border: 1px solid #BDD8E5;
   border-width: 1;
-  border-radius: 0px 2px 2px 0px;
-  margin: 0px 2px 0px 0px;
+  border-radius: ${(props) => props.roundedRHS ? '0px 2px 2px 0px' : ''};
+  margin: ${(props) => props.roundedRHS ? '0px 2px 0px 0px' : '0px'};
   text-decoration: ${(props) => props.active ? "none" : "line-through"};
 `;
 
 const IconContainer = styled.div`
   cursor: pointer;
   color: #5097BA;
-  border-radius: ${(props) => props.internal ? "0px" : "2px 0px 0px 2px"};
-  border-width: 1px 0px 1px 1px;
+  border-radius: ${(props) => props.rhs ? "0px 2px 2px 0px" : "2px 0px 0px 2px"};
+  border-width: ${(props) => props.rhs ? "1px 1px 1px 0px" : "1px 0px 1px 1px"};
   border-style: solid;
   border-color: #BDD8E5;
   min-width: 20px;
   background-color: #E9F2F6;
   padding: 0px 0px 0px 2px;
-  margin: ${(props) => props.internal ? "1px 0px" : "1px 0px 1px 2px"};
+  margin: ${(props) => props.rhs ? "1px 2px 1px 0px" : "1px 0px 1px 2px"};
   display: inline-block;
   text-align: center;
   &:hover, &:focus {
@@ -76,14 +76,14 @@ export const FilterBadge = ({remove, canMakeInactive, active, activate, inactiva
       <IconContainer onClick={remove} role="button" tabIndex={0}>
         <FaTrash/>
       </IconContainer>
+      <TextContainer active={canMakeInactive ? active : true} roundedRHS={!canMakeInactive}>
+        {children}
+      </TextContainer>
       {canMakeInactive && (
-        <IconContainer internal onClick={active ? inactivate : activate} role="button" tabIndex={0}>
+        <IconContainer rhs onClick={active ? inactivate : activate} role="button" tabIndex={0}>
           {active ? <FaRegEye/> : <FaRegEyeSlash/>}
         </IconContainer>
       )}
-      <TextContainer active={canMakeInactive ? active : true}>
-        {children}
-      </TextContainer>
     </div>
   );
 };