fix: replace hardcoded colors with theme colors 2

src/components/blocks/Modal.js

@@ -25,7 +25,7 @@ const MaskContainer = styled('div')`
 `;
 
 const ModalContainer = styled('div')`
-  background-color: #ffffff;
+  background-color: ${props => props.theme.colors.default.onButton};
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

src/components/blocks/Notifications.js

@@ -9,6 +9,7 @@ import {
   Body,
   ButtonText,
 } from '..';
+import theme from '../../theme';
 
 const NotificationCard = styled('div')`
   display: flex;
@@ -17,7 +18,7 @@ const NotificationCard = styled('div')`
   box-shadow: 0rem 0.5625rem 1.75rem 0.5rem rgba(0, 0, 0, 0.05),
     0rem 0.375rem 1rem rgba(0, 0, 0, 0.08),
     0rem 0.1875rem 0.375rem -0.25rem rgba(0, 0, 0, 0.12);
-  background-color: #ffffff;
+  background-color: ${props => props.theme.colors.default.onButton};
   border: none;
   height: ${props => (props.buttonText ? '9rem' : '6.5rem')};
   width: 25.0625rem;
@@ -40,7 +41,7 @@ const ConfirmButton = styled('button')`
   background-color: #1890ff;
   border-radius: 0.125rem;
   border: none;
-  color: #ffffff;
+  color: ${props => props.theme.colors.default.onButton};
   cursor: pointer;
 `;
 
@@ -117,7 +118,7 @@ const Notification = withTheme(
           </div>
           {buttonText && (
             <ConfirmButton>
-              <ButtonText color="#ffffff">{buttonText}</ButtonText>
+              <ButtonText color={theme.colors.default.onButton}>{buttonText}</ButtonText>
             </ConfirmButton>
           )}
         </NotificationCard>

src/components/form/SearchInput.js

@@ -89,7 +89,7 @@ const ButtonSearchText = styled('p')`
   align-items: center;
   font-size: 1rem;
   width: 3.125rem;
-  color: ${props => (props.usePrimaryButton ? '#ffffff' : props.theme.colors.default.onSurface)};
+  color: ${props => (props.usePrimaryButton ? props.theme.colors.default.onButton : props.theme.colors.default.onSurface)};
   box-sizing: border-box;
 `;
 

src/components/form/Select.js

@@ -45,7 +45,7 @@ const StyledSelect = styled('div')`
   color: #262626;
   box-sizing: border-box;
   border: 0.0625rem solid #d9d9d9;
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   z-index: 5;
   user-select: none;
   align-items: center;
@@ -115,7 +115,7 @@ const StyledBasicMenu = styled(ScrollContainer)`
   position: absolute;
   padding: 0.25rem 0rem 0.25rem 0rem;
   top: ${props => (props.top ? props.top + 10 + 'px' : '10px')};
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
     0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   border-radius: 0.125rem;

src/components/form/SelectOrganizations.js

@@ -39,7 +39,7 @@ const StyledSelect = styled('div')`
   color: #262626;
   box-sizing: border-box;
   border: 0.0625rem solid #d9d9d9;
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   z-index: 5;
   user-select: none;
   align-items: center;
@@ -95,7 +95,7 @@ const StyledBasicMenu = styled(ScrollContainer)`
   position: absolute;
   padding: 0.25rem 0rem 0.25rem 0rem;
   top: ${props => (props.top ? props.top + 10 + 'px' : '10px')};
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
     0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   border-radius: 0.125rem;

src/components/form/SimpleSelect.js

@@ -45,7 +45,7 @@ const StyledSelect = styled('div')`
   color: #262626;
   box-sizing: border-box;
   border: 0.0625rem solid #d9d9d9;
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   z-index: 5;
   user-select: none;
   align-items: center;
@@ -118,7 +118,7 @@ const StyledBasicMenu = styled(ScrollContainer)`
   position: absolute;
   padding: 0.25rem 0rem 0.25rem 0rem;
   top: ${props => (props.top ? props.top + 10 + 'px' : '10px')};
-  background: #ffffff;
+  background: ${props => props.theme.colors.default.onButton}
   box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
     0px 6px 16px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
   border-radius: 0.125rem;

src/components/layout/Dashboard.js

@@ -14,7 +14,7 @@ const BodyText = styled('div')`
   max-width: calc(100% - 3rem);
   width: calc(100% - 3rem);
   margin: 1.5rem;
-  background-color: #ffffff;
+  background-color: ${props => props.theme.colors.default.onButton}
   overflow: hidden;
   box-sizing: border-box;
   padding: 0;

src/pages/Projects/index.js

@@ -48,6 +48,7 @@ import {
   clearProjectData,
   getProjectData,
 } from '../../store/actions/climateWarehouseActions';
+import theme from '../../theme';
 
 const headings = [
   'currentRegistry',
@@ -352,7 +353,7 @@ const Projects = () => {
               <PrimaryButton
                 label={intl.formatMessage({ id: 'create' })}
                 size="large"
-                icon={<AddIcon width="16.13" height="16.88" fill="#ffffff" />}
+                icon={<AddIcon width="16.13" height="16.88" fill={theme.colors.default.onButton} />}
                 onClick={() => {
                   if (
                     _.isEmpty(stagingData.units.pending) &&

src/pages/Units/index.js

@@ -47,6 +47,7 @@ import {
   MinusIcon,
   UnitsDetailViewModal,
 } from '../../components';
+import theme from '../../theme';
 
 const headings = [
   'projectLocationId',
@@ -352,7 +353,7 @@ const Units = () => {
               <PrimaryButton
                 label={intl.formatMessage({ id: 'create' })}
                 size="large"
-                icon={<AddIcon width="16.13" height="16.88" fill="#ffffff" />}
+                icon={<AddIcon width="16.13" height="16.88" fill={theme.colors.default.onButton} />}
                 onClick={() => {
                   if (
                     _.isEmpty(stagingData.units.pending) &&