fix: replace hardcoded colors with theme colors 3

Chia-Network · Jun 7, 2022 · 00b46a2 · 00b46a2
1 parent bcc2378
commit 00b46a2
Show file tree

Hide file tree

Showing 14 changed files with 29 additions and 26 deletions.
diff --git a/src/components/blocks/AuditItemModal.js b/src/components/blocks/AuditItemModal.js
@@ -5,6 +5,7 @@ import dayjs from 'dayjs';
 
 import { Modal, modalTypeEnum, Body } from '..';
 import { convertPascalCaseToSentenceCase } from '../../utils/stringUtils';
+import theme from '../../theme';
 
 const StyledContainer = styled('div')`
   padding: 16px 21px;
@@ -27,7 +28,7 @@ const AuditItemModal = ({ onClose, auditItem }) => {
   const intl = useIntl();
   const change = auditItem.change && JSON.parse(auditItem.change);
 
-  const bodyColor = auditItem.type === 'INSERT' ? '#52C41A' : '#F5222D';
+  const bodyColor = auditItem.type === 'INSERT' ? '#52C41A' : theme.colors.default.status.error.primary;
 
   return (
     <>

diff --git a/src/components/blocks/DateSelect.js b/src/components/blocks/DateSelect.js
@@ -54,13 +54,13 @@ const InputContainer = styled('div')`
   ${props => {
     if (props.variant === DateVariantEnum.error) {
       return css`
-        border: 1px solid #f5222d;
+        border: 1px solid ${props.theme.colors.default.status.error.primary};
         :focus-within {
-          border: 1px solid #f5222d;
+          border: 1px solid ${props.theme.colors.default.status.error.primary};
           box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5);
         }
         :hover {
-          border: 1px solid #f5222d;
+          border: 1px solid ${props.theme.colors.default.status.error.primary};
         }
       `;
     }

diff --git a/src/components/blocks/ProjectDetailsStagingViewTab.js b/src/components/blocks/ProjectDetailsStagingViewTab.js
@@ -24,7 +24,7 @@ const ProjectDetailsStagingViewTab = ({ entry }) => {
   const getOriginalColorForKey = (entryProp, action) => {
     if (entryProp) {
       if (action === 'DELETE') {
-        return '#f5222d';
+        return theme.colors.default.status.error.primary;
       }
       if (action === 'INSERT') {
         return '#52C41A';

diff --git a/src/components/blocks/StagingDataGroups.js b/src/components/blocks/StagingDataGroups.js
@@ -51,9 +51,9 @@ const StyledChangeCardTitle = styled('div')`
   ${props =>
     props.displayInRed
       ? ` background-color: #ffebee;
-      border: 2px solid #f5222d;
+      border: 2px solid ${props.theme.colors.default.status.error.primary};
       body {
-        color: #f5222d;
+        color: ${props.theme.colors.default.status.error.primary};
       }`
       : ` background-color: #ECF8E6;
       border: 2px solid #52C41A;

diff --git a/src/components/blocks/StagingDataTable.js b/src/components/blocks/StagingDataTable.js
@@ -47,9 +47,9 @@ const Tr = styled('tr')`
     } else if (props.color === 'red') {
       return `
           background: #FFEBEE;  
-          border: 1px solid #F5222D;
+          border: 1px solid ${props.theme.colors.default.status.error.primary}
           p, span {
-            color: #F5222D !important;
+            color: ${props.theme.colors.default.status.error.primary} !important;
           };
           `;
     } else if (props.color === 'gray') {

diff --git a/src/components/blocks/TableDrawer.js b/src/components/blocks/TableDrawer.js
@@ -49,7 +49,9 @@ const StyledDetails = styled('div')`
   align-items: center;
   gap: 5px;
   ${props => props.isGreen && `body {color: #52C41A}`};
-  ${props => props.isRed && `body {color: #f5222d}`};
+  ${props =>
+    props.isRed &&
+    `body {color: ${props.theme.colors.default.status.error.primary}}`};
 `;
 
 const StyledValuesContainer = styled('div')`

diff --git a/src/components/blocks/UnitsDetailStagingViewTab.js b/src/components/blocks/UnitsDetailStagingViewTab.js
@@ -36,7 +36,7 @@ const UnitsDetailStagingViewTab = ({ entry }) => {
   const getOriginalColorForKey = (entryProp, action) => {
     if (entryProp) {
       if (action === 'DELETE') {
-        return '#f5222d';
+        return theme.colors.default.status.error.primary;
       }
       if (action === 'INSERT') {
         return '#52C41A';

diff --git a/src/components/blocks/YearSelect.js b/src/components/blocks/YearSelect.js
@@ -54,13 +54,13 @@ const InputContainer = styled('div')`
   ${props => {
     if (props.variant === DateVariantEnum.error) {
       return css`
-        border: 1px solid #f5222d;
+        border: 1px solid ${props.theme.colors.default.status.error.primary};
         :focus-within {
-          border: 1px solid #f5222d;
+          border: 1px solid ${props.theme.colors.default.status.error.primary};
           box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5);
         }
         :hover {
-          border: 1px solid #f5222d;
+          border: 1px solid ${props.theme.colors.default.status.error.primary};
         }
       `;
     }

diff --git a/src/components/form/Select.js b/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: ${props => props.theme.colors.default.onButton}
+  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: ${props => props.theme.colors.default.onButton}
+  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;
@@ -141,7 +141,7 @@ const StyledBasicMenuItem = styled('div')`
   ${props => {
     if (props.isSelected) {
       return `
-        background-color: #E6F7FF;
+        background-color: ${props.theme.colors.default.status.info.secondary};
         font-style: normal;
         font-weight: 600;
       `;

diff --git a/src/components/form/SelectOrganizations.js b/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: ${props => props.theme.colors.default.onButton}
+  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: ${props => props.theme.colors.default.onButton}
+  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;
@@ -121,7 +121,7 @@ const StyledBasicMenuItem = styled('div')`
   ${props => {
     if (props.isSelected) {
       return `
-        background-color: #E6F7FF;
+        background-color: ${props.theme.colors.default.status.info.secondary};
         font-style: normal;
         font-weight: 600;
       `;

diff --git a/src/components/form/SimpleSelect.js b/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: ${props => props.theme.colors.default.onButton}
+  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: ${props => props.theme.colors.default.onButton}
+  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;
@@ -144,7 +144,7 @@ const StyledBasicMenuItem = styled('div')`
   ${props => {
     if (props.isSelected) {
       return `
-        background-color: #E6F7FF;
+        background-color: ${props.theme.colors.default.status.info.secondary};
         font-style: normal;
         font-weight: 600;
       `;

diff --git a/src/components/layout/Dashboard.js b/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: ${props => props.theme.colors.default.onButton}
+  background-color: ${props => props.theme.colors.default.onButton};
   overflow: hidden;
   box-sizing: border-box;
   padding: 0;

diff --git a/src/pages/Audit/index.js b/src/pages/Audit/index.js
@@ -54,7 +54,7 @@ const StyledTable = styled('table')`
 const StyledTh = styled('th')`
   text-align: start;
   padding: 17px;
-  background-color: #e6f7ff;
+  background-color: ${props => props.theme.colors.default.status.info.secondary};
   position: sticky;
   top: 0;
 `;

diff --git a/src/pages/Conflicts/index.js b/src/pages/Conflicts/index.js
@@ -34,7 +34,7 @@ const StyledTable = styled('table')`
 const StyledTh = styled('th')`
   text-align: start;
   padding: 17px;
-  background-color: #e6f7ff;
+  background-color: ${props => props.theme.colors.default.info.secondary};
   position: sticky;
   top: 0;
 `;