Refactor code to use common active indicator component

bcgov · Jan 16, 2025 · 88e0973 · 88e0973
1 parent 9d92b01
commit 88e0973
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 29 deletions.
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
@@ -17,6 +17,12 @@ export const InlineFlexDiv = styled.div`
   flex-wrap: nowrap;
 `;
 
+export const FlexRowNoGap = styled(InlineFlexDiv)`
+  flex-direction: row;
+  align-items: center;
+  gap: 0;
+`;
+
 export const Breadcrumb = styled(BsBreadcrumb)`
   .breadcrumb-item:not(:first-child)::before {
     content: '>';

diff --git a/...c/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx b/...c/components/contact/ContactManagerView/ContactFilterComponent/ContactFilterComponent.tsx
@@ -2,13 +2,14 @@ import { Form, Formik } from 'formik';
 import React from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
-import { FaCircle } from 'react-icons/fa';
 import styled from 'styled-components';
 
+import ActiveIndicator from '@/components/common/ActiveIndicator';
 import { ResetButton, SearchButton } from '@/components/common/buttons';
 import ActiveFilterCheck from '@/components/common/form/ActiveFilterCheck';
 import { RadioGroup } from '@/components/common/form/RadioGroup';
 import { InlineInput } from '@/components/common/form/styles';
+import { FlexRowNoGap } from '@/components/common/styles';
 import { VerticalBar } from '@/components/common/VerticalBar';
 import { IContactFilter } from '@/components/contact/ContactManagerView/IContactFilter';
 
@@ -94,20 +95,18 @@ export const ContactFilterComponent: React.FunctionComponent<
                     placeholder="City of contact's address"
                   />
                 </Col>
-                <Col className="pl-0">
+                <Col className="pl-4">
                   {showActiveSelector && (
-                    <>
+                    <FlexRowNoGap>
                       <ActiveFilterCheck<IContactFilter>
                         fieldName="activeContactsOnly"
                         setFilter={setFilter}
                       />
-                      <ActiveIndicator>
-                        <FaCircle size={16} />
-                      </ActiveIndicator>
-                      <span>
+                      <ActiveIndicator active size={16} />
+                      <span className="ml-1">
                         <b>Active</b> contacts only
                       </span>
-                    </>
+                    </FlexRowNoGap>
                   )}
                 </Col>
               </Row>
@@ -213,7 +212,8 @@ const StyledFilterBoxForm = styled(Form)`
   padding: 1rem;
   max-width: 85%;
   @media only screen and (max-width: 1199px) {
-  max-width: 50%;
+    max-width: 50%;
+  }
 `;
 
 const StyledColButton = styled(Col)`
@@ -228,10 +228,3 @@ export const StyledNameInput = styled(InlineInput)`
 export const StyledCityInput = styled(InlineInput)`
   max-width: 25rem;
 `;
-
-export const ActiveIndicator = styled.div`
-  display: inline-block;
-  margin: 0rem 0.5rem;
-  padding: 0.2rem;
-  color: ${props => props.theme.bcTokens.iconsColorSuccess};
-`;
diff --git a/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx b/source/frontend/src/components/contact/ContactManagerView/ContactResultComponent/columns.tsx
@@ -1,9 +1,9 @@
 import { FaRegBuilding, FaRegUser } from 'react-icons/fa';
-import { FaCircle } from 'react-icons/fa';
 import { Link, useHistory } from 'react-router-dom';
 import { CellProps } from 'react-table';
 import styled from 'styled-components';
 
+import ActiveIndicator from '@/components/common/ActiveIndicator';
 import EditButton from '@/components/common/buttons/EditButton';
 import ViewButton from '@/components/common/buttons/ViewButton';
 import { InlineFlexDiv } from '@/components/common/styles';
@@ -22,9 +22,7 @@ const columns: ColumnWithProps<IContactSearchResult>[] = [
     maxWidth: 10,
     minWidth: 10,
     Cell: (props: CellProps<IContactSearchResult>) => (
-      <StatusIndicators className={props.row.original.isDisabled ? 'inactive' : 'active'}>
-        <FaCircle size={10} className="mr-2" />
-      </StatusIndicators>
+      <ActiveIndicator active={!props.row.original.isDisabled} />
     ),
   },
   {

diff --git a/source/frontend/src/features/admin/users/components/UsersFilterBar.tsx b/source/frontend/src/features/admin/users/components/UsersFilterBar.tsx
@@ -3,11 +3,11 @@ import React from 'react';
 import { Row } from 'react-bootstrap';
 import Col from 'react-bootstrap/Col';
 
-import Active from '@/assets/images/active.svg?react';
+import ActiveIndicator from '@/components/common/ActiveIndicator';
 import { ResetButton, SearchButton } from '@/components/common/buttons';
 import { Input, Select } from '@/components/common/form';
 import ActiveFilterCheck from '@/components/common/form/ActiveFilterCheck';
-import { FilterBoxForm } from '@/components/common/styles';
+import { FilterBoxForm, FlexRowNoGap } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import * as API from '@/constants/API';
 import { useLookupCodeHelpers } from '@/hooks/useLookupCodeHelpers';
@@ -88,9 +88,13 @@ export const UsersFilterBar: React.FC<React.PropsWithChildren<IProps>> = ({ valu
             <Col md={3} sm={3}>
               <Row>
                 <Col>
-                  <ActiveFilterCheck<IUsersFilter> fieldName="activeOnly" setFilter={onChange} />
-                  <Active />
-                  <span className="ml-1">Show active users only</span>
+                  <FlexRowNoGap>
+                    <ActiveFilterCheck<IUsersFilter> fieldName="activeOnly" setFilter={onChange} />
+                    <ActiveIndicator active size={16} />
+                    <span className="ml-1">
+                      <b>Active</b> users only
+                    </span>
+                  </FlexRowNoGap>
                 </Col>
               </Row>
             </Col>

diff --git a/source/frontend/src/features/admin/users/constants/index.tsx b/source/frontend/src/features/admin/users/constants/index.tsx
@@ -1,8 +1,7 @@
 import { Link } from 'react-router-dom';
 import { CellProps } from 'react-table';
 
-import Active from '@/assets/images/active.svg?react';
-import Inactive from '@/assets/images/inactive.svg?react';
+import ActiveIndicator from '@/components/common/ActiveIndicator';
 import { ColumnWithProps, renderTypeCode } from '@/components/Table';
 import { DateTimeCell } from '@/components/Table/DateCell';
 import { stringToFragment } from '@/utils';
@@ -18,8 +17,9 @@ export const getUserColumns = (refresh: () => void): ColumnWithProps<FormUser>[]
     clickable: true,
     sortable: true,
     width: 60,
-    Cell: (props: CellProps<FormUser>) =>
-      props.row.original.isDisabled ? <Inactive /> : <Active />,
+    Cell: (props: CellProps<FormUser>) => (
+      <ActiveIndicator active={!props.row.original.isDisabled} />
+    ),
   },
   {
     Header: 'IDIR/BCeID',