Merge branch 'master' into worker-actor

layer5io · Jun 11, 2024 · e5d9255 · e5d9255
2 parents 59fafb5 + 601ffe1
commit e5d9255
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 46 deletions.
diff --git a/src/custom/Feedback/FeedbackButton.tsx b/src/custom/Feedback/FeedbackButton.tsx
@@ -10,6 +10,7 @@ import {
 } from '../../icons';
 import { CULTURED } from '../../theme';
 import { CustomTooltip } from '../CustomTooltip';
+import { ModalButtonPrimary } from '../Modal';
 import { ModalCard } from '../ModalCard';
 import {
   ActionWrapper,
@@ -21,7 +22,6 @@ import {
   FeedbackMiniIcon,
   FeedbackOptionButton,
   FeedbackOptions,
-  FeedbackSubmitButton,
   FeedbackTextArea,
   HelperWrapper,
   InnerComponentWrapper,
@@ -166,14 +166,14 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
                       We may email you for more information or updates
                     </Typography>
                   </ActionWrapper>
-                  <FeedbackSubmitButton
+                  <ModalButtonPrimary
                     type="submit"
                     disabled={!(messageValue && isChecked)}
                     isOpen={!(messageValue && isChecked)}
                     onClick={handleSubmit}
                   >
                     Send
-                  </FeedbackSubmitButton>
+                  </ModalButtonPrimary>
                 </div>
               }
               leftHeaderIcon={<FeedbackIcon />}

diff --git a/src/custom/Feedback/style.tsx b/src/custom/Feedback/style.tsx
@@ -218,7 +218,7 @@ export const FeedbackMessage = styled(Box)<FeedbackMessageProps>(({ isOpen, them
   position: 'relative',
   bottom: isOpen ? '0px' : '-240px',
   right: '0',
-  color: BLACK,
+  color: theme.palette.text.default,
   backgroundColor: theme.palette.mode === 'dark' ? DARK_JUNGLE_GREEN : WHITE,
   border: `1px solid ${MEDIUM_GREY}`,
   padding: '20px',

diff --git a/src/custom/Modal/index.tsx b/src/custom/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { DialogProps, styled } from '@mui/material';
+import { ButtonProps, DialogProps, styled } from '@mui/material';
 import React, { useRef, useState } from 'react';
 import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
 import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
@@ -171,8 +171,12 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, va
   );
 };
 
+interface ModalButtonPrimaryProps extends ButtonProps {
+  isOpen?: boolean;
+}
+
 // ModalButtonPrimary
-export const ModalButtonPrimary = styled(ContainedButton)(({ theme }) => ({
+export const ModalButtonPrimary = styled(ContainedButton)<ModalButtonPrimaryProps>(({ theme }) => ({
   backgroundColor: theme.palette.background.brand?.default,
   color: theme.palette.text.constant?.white,
   '&:hover': {

diff --git a/src/custom/ModalCard/style.tsx b/src/custom/ModalCard/style.tsx
@@ -1,56 +1,37 @@
 import { styled } from '@mui/material';
 import { Typography } from '../../base';
-import {
-  BLACK,
-  BUTTON_MODAL,
-  BUTTON_MODAL_DARK,
-  SLIGHT_BLACK_2,
-  SLIGHT_BLUE,
-  WHITE
-} from '../../theme/colors/colors';
+import { WHITE } from '../../theme/colors/colors';
 
 export const ContentContainer = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.default
+  backgroundColor: theme.palette.background.surfaces
 }));
 
 export const ModalWrapper = styled('div')(() => ({
   zIndex: '100',
   borderRadius: '5px'
 }));
 
-export const ButtonContainer = styled('div')(({ theme }) => {
-  const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
-  const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
+export const ButtonContainer = styled('div')(() => ({
+  padding: '1.25rem 1rem',
+  display: 'flex',
+  justifyContent: 'flex-end',
 
-  return {
-    padding: '1.25rem 1rem',
-    display: 'flex',
-    justifyContent: 'flex-end',
+  background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
+  boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)',
+  position: 'relative',
+  zIndex: '100'
+}));
 
-    background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
-    boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)',
-    position: 'relative',
-    zIndex: '100'
-  };
-});
 export const HeaderTypography = styled(Typography)({
   fontSize: '18px'
 });
-export const HeaderModal = styled('div')(({ theme }) => {
-  const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
-  const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
-  return {
-    display: 'flex',
-    borderRadius: '5px  5px 0px 0px',
-    justifyContent: 'space-between',
-    padding: '11px 16px',
-    height: '52px',
-    fill: WHITE,
-    boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
-    background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
-    filter:
-      theme.palette.mode === 'light'
-        ? `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL}',endColorstr='${SLIGHT_BLUE}',GradientType=1)`
-        : `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL_DARK}',GradientType=1)`
-  };
-});
+export const HeaderModal = styled('div')(() => ({
+  display: 'flex',
+  borderRadius: '5px  5px 0px 0px',
+  justifyContent: 'space-between',
+  padding: '11px 16px',
+  height: '52px',
+  fill: WHITE,
+  boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
+  background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
+}));
diff --git a/src/icons/CatalogIcon/CatalogIcon.tsx b/src/icons/CatalogIcon/CatalogIcon.tsx
@@ -0,0 +1,65 @@
+import { FC } from 'react';
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
+import { CARIBBEAN_GREEN, DARK_SLATE_GRAY, KEPPEL, WHITE, useTheme } from '../../theme';
+import { IconProps } from '../types';
+
+type CatalogIconProps = {
+  primaryFill?: string;
+  secondaryFill?: string;
+  tertiaryFill?: string;
+} & IconProps;
+
+export const CatalogIcon: FC<CatalogIconProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  primaryFill,
+  secondaryFill,
+  tertiaryFill = WHITE,
+  style = {},
+  ...props
+}) => {
+  const theme = useTheme();
+  const themeMode = theme?.palette?.mode ?? 'light';
+
+  const themePrimaryFill = primaryFill ?? (themeMode === 'dark' ? KEPPEL : DARK_SLATE_GRAY);
+  const themeSecondaryFill = secondaryFill ?? (themeMode === 'dark' ? CARIBBEAN_GREEN : KEPPEL);
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 64 64"
+      style={style}
+      {...props}
+    >
+      <path
+        d="m32.03,60H5.1c-2.38,0-4.18-1.23-4.86-3.33-.15-.52-.25-1.11-.25-1.67C0,46.11-.04,37.19,0,28.3c0-.74.12-1.48.34-2.19,2.26-6.92,4.52-13.8,6.78-20.68.43-1.3.62-1.42,2.01-1.42h45.34c1.36,0,1.55.12,1.95,1.36,2.14,6.3,4.24,12.63,6.38,18.92.19.56.5,1.08.68,1.64.22.74.53,1.48.53,2.22.03,9.01.03,18.06,0,27.07,0,2.66-2.17,4.75-4.89,4.75-9.04.03-18.04.03-27.08.03Zm9.16-36.74h18.75c-.06-.28-.09-.43-.15-.62-1.76-5.25-3.53-10.47-5.26-15.71-.19-.59-.56-.65-1.05-.65H10.08c-.62,0-.9.22-1.08.8-1.67,5.19-3.37,10.37-5.08,15.53-.06.22-.12.43-.19.68h19.06c.31,2.38.99,2.99,3.37,2.99h11.67c2.32.03,3.09-.62,3.34-3.03Zm-17.95,19.82c.22-.77.43-1.48.62-2.19.37-1.42-.34-2.75-1.64-3.12-1.36-.37-2.63.34-3.06,1.76-.53,1.73-1.05,3.49-1.55,5.25-.5,1.76.62,3.21,2.44,3.21h24.67c1.61,0,2.82-1.42,2.38-2.96-.59-2.01-1.27-3.95-1.98-5.93-.37-1.02-1.33-1.48-2.41-1.42-.99.06-1.89.71-2.1,1.67-.12.59-.03,1.2.06,1.82.12.65.37,1.23.62,1.91h-18.04Z"
+        strokeWidth="0"
+        fill={themePrimaryFill}
+      />
+      <path
+        d="m32.11,18.48h22.13c.34,0,.8,0,1.02.19.28.28.56.77.53,1.14-.03.62-.53.93-1.11.93-1.21.03-2.41,0-3.62,0H9.58c-.84-.03-1.36-.46-1.36-1.17s.53-1.14,1.39-1.14h11.14c3.78.06,7.55.06,11.36.06Z"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        d="m31.98,13.66h20.64c.31,0,.62,0,.93.03.62.09.99.43,1.02,1.08.03.65-.34,1.05-.99,1.2-.25.06-.53.03-.77.03H10.97c-.31,0-.71.03-.9-.12-.31-.31-.68-.8-.65-1.14.03-.37.53-.71.9-.99.19-.12.56-.06.84-.06,6.96-.03,13.9-.03,20.83-.03Z"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        d="m32,11.16H12.9c-.22,0-.46.03-.68-.03-.62-.12-1.02-.52-1.02-1.17s.4-1.02,1.05-1.14c.19-.03.4-.03.62-.03h38.25c.22,0,.4-.03.62.03.62.12,1.02.49,1.05,1.14.03.56-.46,1.11-1.11,1.2-.22.03-.4,0-.62,0h-19.06Z"
+        strokeWidth="0"
+        fill={themeSecondaryFill}
+      />
+      <path
+        d="m20.05,47.99h24.67c1.61,0,2.82-1.42,2.38-2.96-.59-2.01-1.27-3.95-1.98-5.93-.37-1.02-1.33-1.48-2.41-1.42-.99.06-1.89.71-2.1,1.67-.12.59-.03,1.2.06,1.82.12.65.37,1.23.62,1.91h-18.04c.22-.77.43-1.48.62-2.19.37-1.42-.34-2.75-1.64-3.12-1.36-.37-2.63.34-3.06,1.76-.53,1.73-1.05,3.49-1.55,5.25s.62,3.21,2.44,3.21Z"
+        strokeWidth="0"
+        fill={tertiaryFill}
+      />
+    </svg>
+  );
+};
+
+export default CatalogIcon;
diff --git a/src/icons/CatalogIcon/index.ts b/src/icons/CatalogIcon/index.ts
@@ -0,0 +1 @@
+export { default as CatalogIcon } from './CatalogIcon';
diff --git a/src/icons/index.ts b/src/icons/index.ts
@@ -3,6 +3,7 @@ export * from './AddCircle';
 export * from './Application';
 export * from './Bell';
 export * from './Bus';
+export * from './CatalogIcon';
 export * from './Chevron';
 export * from './Circle';
 export * from './Clone';