enforce consistent styling for add button, update "focus" state to al…

…so be green. (#4158) Co-authored-by: Smith <devin.smith@quartech.com>
bcgov · Jul 5, 2024 · 8bbf9dd · 8bbf9dd
1 parent e987268
commit 8bbf9dd
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 34 deletions.
diff --git a/source/frontend/src/components/common/styles.ts b/source/frontend/src/components/common/styles.ts
@@ -106,8 +106,10 @@ export const StyledAddButton = styled(Button)`
   &.btn.btn-primary:active {
     background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
   }
-  &.btn.btn-primary:hover {
+  &.btn.btn-primary:hover,
+  &.btn.btn-primary:focus {
     background-color: ${props => props.theme.css.pimsGreen80};
+    outline-color: ${props => props.theme.css.pimsGreen80};
   }
 `;
 

diff --git a/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx b/source/frontend/src/features/acquisition/list/AcquisitionListView.tsx
@@ -4,10 +4,9 @@ import { Col, Row } from 'react-bootstrap';
 import { FaFileExcel, FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
 import { StyledIconButton } from '@/components/common/buttons/IconButton';
+import { StyledAddButton } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import Claims from '@/constants/claims';
 import { useApiAcquisitionFile } from '@/hooks/pims-api/useApiAcquisitionFile';
@@ -138,10 +137,4 @@ export const AcquisitionListView: React.FunctionComponent<
   );
 };
 
-const StyledAddButton = styled(Button)`
-  &.btn.btn-primary {
-    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
-  }
-`;
-
 export default AcquisitionListView;
diff --git a/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx b/source/frontend/src/features/admin/financial-codes/list/FinancialCodeListView.tsx
@@ -3,9 +3,8 @@ import React, { useCallback, useEffect, useMemo } from 'react';
 import { Col, Row } from 'react-bootstrap';
 import { FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
-import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { StyledAddButton } from '@/components/common/styles';
 import { TableSort } from '@/components/Table/TableSort';
 import { Roles } from '@/constants/roles';
 import { useFinancialCodeRepository } from '@/hooks/repositories/useFinancialCodeRepository';
@@ -123,10 +122,4 @@ export const FinancialCodeListView: React.FC = () => {
   );
 };
 
-const StyledAddButton = styled(Button)`
-  &.btn.btn-primary {
-    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
-  }
-`;
-
 export default FinancialCodeListView;
diff --git a/source/frontend/src/features/leases/list/LeaseListView.tsx b/source/frontend/src/features/leases/list/LeaseListView.tsx
@@ -4,9 +4,9 @@ import { Col, Row } from 'react-bootstrap';
 import { FaFileAlt, FaFileExcel, FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
-import { Button, StyledIconButton } from '@/components/common/buttons';
+import { StyledIconButton } from '@/components/common/buttons';
+import { StyledAddButton } from '@/components/common/styles';
 import TooltipWrapper from '@/components/common/TooltipWrapper';
 import Claims from '@/constants/claims';
 import { useApiLeases } from '@/hooks/pims-api/useApiLeases';
@@ -125,11 +125,4 @@ export const LeaseListView: React.FunctionComponent<React.PropsWithChildren<unkn
   );
 };
 
-const StyledAddButton = styled(Button)`
-  &.btn.btn-primary,
-  &.btn.btn-primary:active {
-    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
-  }
-`;
-
 export default LeaseListView;
diff --git a/source/frontend/src/features/research/list/ResearchListView.tsx b/source/frontend/src/features/research/list/ResearchListView.tsx
@@ -4,9 +4,8 @@ import { Col, Row } from 'react-bootstrap';
 import { FaPlus } from 'react-icons/fa';
 import { useHistory } from 'react-router';
 import { toast } from 'react-toastify';
-import styled from 'styled-components';
 
-import { Button } from '@/components/common/buttons/Button';
+import { StyledAddButton } from '@/components/common/styles';
 import Claims from '@/constants/claims';
 import { useApiResearchFile } from '@/hooks/pims-api/useApiResearchFile';
 import useKeycloakWrapper from '@/hooks/useKeycloakWrapper';
@@ -96,10 +95,4 @@ export const ResearchListView: React.FunctionComponent<React.PropsWithChildren<u
   );
 };
 
-const StyledAddButton = styled(Button)`
-  &.btn.btn-primary {
-    background-color: ${props => props.theme.bcTokens.iconsColorSuccess};
-  }
-`;
-
 export default ResearchListView;