Merge pull request #15 from Chia-Network/develop

release: 1.3.1
Chia-Network · Sep 19, 2023 · daedd5d · daedd5d
2 parents 54cc4ed + 26a64e7
commit daedd5d
Show file tree

Hide file tree

Showing 13 changed files with 89 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "core-registry-cadt-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "private": true,
   "author": "Chia Network Inc. <[email protected]>",
   "homepage": "./",

diff --git a/src/components/blocks/ComponentRepeater.js b/src/components/blocks/ComponentRepeater.js
@@ -77,7 +77,7 @@ const ComponentRepeater = ({
       {addIcon && values.length < maxRepetitions && (
         <StyledRepeatedComponentContainer onClick={addNewInstance}>
           {addIcon}
-          <Body color="#1890ff">
+          <Body color="#6e7d7f">
             <FormattedMessage id="click-to-add" />
             {useToolTip && (
               <ToolTipContainer tooltip={useToolTip}>

diff --git a/src/components/form/PrimaryButton.js b/src/components/form/PrimaryButton.js
@@ -1,89 +1,81 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { CircularProgress } from '@mui/material';
 import { ButtonText } from '../typography';
 
+const getHeightPadding = size => {
+  switch (size) {
+    case 'large':
+      return 'height: 40px !important; padding: 15px !important;';
+    case 'small':
+      return 'height: 28px !important; padding: 3px !important;';
+    default:
+      return '';
+  }
+};
+
 const Button = styled('button')`
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
   max-width: 100%;
-  background-color: ${props =>
-    props.danger ? '#FF4D4F' : props.theme.colors.default.secondaryDark};
-  border: 1px solid #1a8385;
+  background-color: ${({ danger, theme }) =>
+    danger ? '#FF4D4F' : theme.colors.default.secondaryDark};
+  border: none;
   border-radius: 5px;
   padding: 10px;
   height: 32px;
   cursor: pointer;
-
-  ${props => props.size === 'large' && `height: 40px !important;`};
-  ${props => props.size === 'small' && `height: 28px !important;`};
-
-  ${props => props.size === 'large' && `padding: 15px !important;`};
-  ${props => props.size === 'small' && `padding: 3px !important;`};
+  ${({ size }) => getHeightPadding(size)}
 
   &:hover {
-    background-color: ${props =>
-      props.danger ? '#FF7875' : props.theme.colors.default.secondaryDark};
+    background-color: ${({ danger, theme }) =>
+      danger ? '#FF7875' : theme.colors.default.secondaryDark};
   }
 
   &:active {
-    background-color: ${props =>
-      props.danger ? '#F5222D' : props.theme.colors.default.secondaryDark};
+    background-color: ${({ danger, theme }) =>
+      danger ? '#F5222D' : theme.colors.default.secondaryDark};
   }
 
-  ${props =>
-    props.loading &&
+  ${({ loading, danger, theme }) =>
+    loading &&
     `
-      background-color: ${props =>
-        props.danger ? '#FF7875' : props.theme.colors.default.secondaryDark};
+    background-color: ${
+      danger ? '#FF7875' : theme.colors.default.secondaryDark
+    };
     opacity: 0.65;
   `}
 
   &:disabled {
     background-color: #f5f5f5;
     border: 1px solid #d9d9d9;
-    box-sizing: border-box;
     cursor: default;
   }
 
-  ${props => {
-    if (props.type === 'default') {
-      if (props.loading) {
-        return `
-          background-color: white;
-          :hover, :active {
-            background-color: white;
-          };
-          h4 { color: #BFBFBF };
-          border: 1px solid #e5e5e5;
-        `;
-      }
-      return css`
-        background-color: white;
-        :hover,
-        :active {
-          background-color: white;
-        }
+  ${({ type, theme, loading }) =>
+    type === 'default' &&
+    `
+    background-color: white;
+    border: 1px solid #e5e5e5;
 
-        border: 1px solid #e5e5e5;
-        :active {
-          border: 1px solid #096dd9;
-        }
+    &:hover, &:active {
+      background-color: white;
+    }
+
+    h4 {
+      color: ${loading ? '#BFBFBF' : theme.colors.default.secondary};
+
+      &:hover {
+        color: ${theme.colors.default.secondaryDark};
+      }
 
-        h4 {
-          color: ${props.theme.colors.default.secondary};
-        }
-        h4:hover {
-          color: ${props.theme.colors.default.secondaryDark};
-        }
-        h4:active {
-          color: ${props.theme.colors.default.secondary};
-        }
-      `;
+      &:active {
+        color: ${theme.colors.default.secondary};
+      }
     }
-  }};
+  `}
 `;
 
 const PrimaryButton = ({
@@ -117,7 +109,7 @@ const PrimaryButton = ({
           <span style={{ width: size === 'small' ? 2 : 5 }}></span>
         </>
       )}
-      <ButtonText color={disabled ? '#BFBFBF' : '#0E172B'}>{label}</ButtonText>
+      <ButtonText color={disabled ? '#BFBFBF' : 'white'}>{label}</ButtonText>
     </Button>
   );
 };

diff --git a/src/components/forms/FormikRepeater.js b/src/components/forms/FormikRepeater.js
@@ -21,6 +21,7 @@ const StyledRepeatedComponentContainer = styled('div')`
   align-items: center;
   gap: 10px;
   margin: 20px 0;
+  color: #6e7d7f;
   ${props => !props.disabled && `cursor: pointer;`};
 `;
 

diff --git a/src/components/forms/UnitDetailsForm.js b/src/components/forms/UnitDetailsForm.js
@@ -55,10 +55,13 @@ const UnitDetailsForm = ({ noUnitCount = false }) => {
 
   const projectsSelectOptions = useMemo(() => {
     if (myProjects) {
-      return myProjects.map(projectItem => ({
-        value: projectItem,
-        label: projectItem.projectName,
-      }));
+      console.log('@@@@', myProjects);
+      return (
+        myProjects?.map(projectItem => ({
+          value: projectItem,
+          label: projectItem.projectName,
+        })) || []
+      );
     }
     return [];
   }, [myProjects]);

diff --git a/src/components/forms/UnitLabelForm.js b/src/components/forms/UnitLabelForm.js
@@ -123,7 +123,7 @@ const UnitLabelForm = memo(
 
     const projectsSelectOptions = useMemo(() => {
       if (myProjects?.length > 0) {
-        return myProjects.reduce((accumulator, project) => {
+        return myProjects?.reduce((accumulator, project) => {
           if (project?.labels?.length > 0) {
             const optionsForTheCurrentProject = project.labels.map(label => ({
               value: label.id,
@@ -201,7 +201,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'way-to-add-label',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -242,7 +243,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'select-existing-label',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -283,7 +285,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'select-label-by-project',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -330,7 +333,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-label-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -370,7 +374,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-label-type-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -405,7 +410,8 @@ const UnitLabelForm = memo(
                         <ToolTipContainer
                           tooltip={intl.formatMessage({
                             id: 'labels-label-link-description',
-                          })}>
+                          })}
+                        >
                           <DescriptionIcon height="14" width="14" />
                         </ToolTipContainer>
                       </Body>
@@ -444,7 +450,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-validity-period-start-date-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -480,7 +487,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-validity-period-end-date-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -516,7 +524,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-crediting-period-start-date-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -554,7 +563,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-crediting-period-end-date-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>
@@ -590,7 +600,8 @@ const UnitLabelForm = memo(
                       <ToolTipContainer
                         tooltip={intl.formatMessage({
                           id: 'labels-unit-quantity-description',
-                        })}>
+                        })}
+                      >
                         <DescriptionIcon height="14" width="14" />
                       </ToolTipContainer>
                     </Body>

diff --git a/src/components/icons/EllipseIcon.js b/src/components/icons/EllipseIcon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-const EllipseIcon = withTheme(({ width, height, fill }) => {
+const EllipseIcon = withTheme(({ width, height, fill = '#6e7d7f' }) => {
   return (
     <svg
       width={`${width}px`}

diff --git a/src/components/icons/IconColorsWrapper.js b/src/components/icons/IconColorsWrapper.js
@@ -12,7 +12,7 @@ export const IconColorsWrapper = styled('div')`
   color: ${props =>
     props.type === IconColorsWrapperTypeEnum.red
       ? props.theme.colors.default.shade2
-      : props.theme.colors.default.secondary};
+      : props.theme.colors.default.primary};
 
   :hover {
     color: ${props =>

diff --git a/src/components/layout/Tabs.js b/src/components/layout/Tabs.js
@@ -14,11 +14,11 @@ const StyledTabs = styled(MuiTabs)`
   }
 
   button.Mui-selected {
-    color: ${props => props.theme.colors.default.primaryDark};
+    color: ${props => props.theme.colors.default.secondaryDark};
   }
 
   .MuiTabs-indicator {
-    background-color: ${props => props.theme.colors.default.primaryDark};
+    background-color: ${props => props.theme.colors.default.secondaryDark};
   }
 `;
 

diff --git a/src/components/typography/ButtonText.js b/src/components/typography/ButtonText.js
@@ -3,12 +3,12 @@ import { useSelector } from 'react-redux';
 import styled, { withTheme } from 'styled-components';
 
 const Text = styled('h4')`
-  color: ${props => props.color || '#6e7d7f'} !important;
+  color: ${props => props.color || 'white'} !important;
   font-size: 1rem;
   font-family: ${props => props.theme.typography.primary.regular};
   line-height: 1.375rem;
   font-style: normal;
-  font-weight: 400;
+  font-weight: 700;
   text-transform: capitalize;
   margin: 0;
   padding: 0;

diff --git a/src/components/typography/Link.js b/src/components/typography/Link.js
@@ -4,16 +4,16 @@ import styled from 'styled-components';
 import { Body } from '../../components';
 
 const StyledLink = styled('div')`
-  color: ${props => props.theme.colors.default.secondary};
+  color: ${props => props.color || props.theme.colors.default.secondary};
   :hover {
     color: ${props => props.theme.colors.default.secondaryDark};
   }
 `;
 
-const Link = ({ children }) => {
+const Link = ({ children, color = '#6e7d7f' }) => {
   return (
     <Body>
-      <StyledLink>{children}</StyledLink>
+      <StyledLink color={color}>{children}</StyledLink>
     </Body>
   );
 };

diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
@@ -124,7 +124,7 @@ const StyledCreateOneNowContainer = styled('div')`
   margin-left: 0.3125rem;
   display: inline-block;
   cursor: pointer;
-  color: #1890ff;
+  color: ${props => props.theme.colors.default.secondaryDark};
 `;
 
 const NoDataMessageContainer = styled('div')`

diff --git a/src/pages/Units/index.js b/src/pages/Units/index.js
@@ -113,7 +113,7 @@ const StyledCreateOneNowContainer = styled('div')`
   margin-left: 0.3125rem;
   display: inline-block;
   cursor: pointer;
-  color: #1890ff;
+  color: ${props => props.theme.colors.default.secondaryDark};
 `;
 
 const NoDataMessageContainer = styled('div')`