Skip to content

Commit e5d9255

Browse files
leecalcoteleecalcote
authored
Merge branch 'master' into worker-actor
2 parents 59fafb5 + 601ffe1 commit e5d9255

File tree

7 files changed

+98
-46
lines changed

7 files changed

+98
-46
lines changed

‎src/custom/Feedback/FeedbackButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from '../../icons';
1111
import { CULTURED } from '../../theme';
1212
import { CustomTooltip } from '../CustomTooltip';
13+
import { ModalButtonPrimary } from '../Modal';
1314
import { ModalCard } from '../ModalCard';
1415
import {
1516
ActionWrapper,
@@ -21,7 +22,6 @@ import {
2122
FeedbackMiniIcon,
2223
FeedbackOptionButton,
2324
FeedbackOptions,
24-
FeedbackSubmitButton,
2525
FeedbackTextArea,
2626
HelperWrapper,
2727
InnerComponentWrapper,
@@ -166,14 +166,14 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
166166
We may email you for more information or updates
167167
</Typography>
168168
</ActionWrapper>
169-
<FeedbackSubmitButton
169+
<ModalButtonPrimary
170170
type="submit"
171171
disabled={!(messageValue && isChecked)}
172172
isOpen={!(messageValue && isChecked)}
173173
onClick={handleSubmit}
174174
>
175175
Send
176-
</FeedbackSubmitButton>
176+
</ModalButtonPrimary>
177177
</div>
178178
}
179179
leftHeaderIcon={<FeedbackIcon />}

‎src/custom/Feedback/style.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ export const FeedbackMessage = styled(Box)<FeedbackMessageProps>(({ isOpen, them
218218
position: 'relative',
219219
bottom: isOpen ? '0px' : '-240px',
220220
right: '0',
221-
color: BLACK,
221+
color: theme.palette.text.default,
222222
backgroundColor: theme.palette.mode === 'dark' ? DARK_JUNGLE_GREEN : WHITE,
223223
border: `1px solid ${MEDIUM_GREY}`,
224224
padding: '20px',

‎src/custom/Modal/index.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DialogProps, styled } from '@mui/material';
1+
import { ButtonProps, DialogProps, styled } from '@mui/material';
22
import React, { useRef, useState } from 'react';
33
import { Box, Dialog, IconButton, Paper, Typography } from '../../base';
44
import { ContainedButton, OutlinedButton, TextButton } from '../../base/Button/Button';
@@ -171,8 +171,12 @@ export const ModalFooter: React.FC<ModalFooterProps> = ({ helpText, children, va
171171
);
172172
};
173173

174+
interface ModalButtonPrimaryProps extends ButtonProps {
175+
isOpen?: boolean;
176+
}
177+
174178
// ModalButtonPrimary
175-
export const ModalButtonPrimary = styled(ContainedButton)(({ theme }) => ({
179+
export const ModalButtonPrimary = styled(ContainedButton)<ModalButtonPrimaryProps>(({ theme }) => ({
176180
backgroundColor: theme.palette.background.brand?.default,
177181
color: theme.palette.text.constant?.white,
178182
'&:hover': {

‎src/custom/ModalCard/style.tsx

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,37 @@
11
import { styled } from '@mui/material';
22
import { Typography } from '../../base';
3-
import {
4-
BLACK,
5-
BUTTON_MODAL,
6-
BUTTON_MODAL_DARK,
7-
SLIGHT_BLACK_2,
8-
SLIGHT_BLUE,
9-
WHITE
10-
} from '../../theme/colors/colors';
3+
import { WHITE } from '../../theme/colors/colors';
114

125
export const ContentContainer = styled('div')(({ theme }) => ({
13-
backgroundColor: theme.palette.background.default
6+
backgroundColor: theme.palette.background.surfaces
147
}));
158

169
export const ModalWrapper = styled('div')(() => ({
1710
zIndex: '100',
1811
borderRadius: '5px'
1912
}));
2013

21-
export const ButtonContainer = styled('div')(({ theme }) => {
22-
const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
23-
const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
14+
export const ButtonContainer = styled('div')(() => ({
15+
padding: '1.25rem 1rem',
16+
display: 'flex',
17+
justifyContent: 'flex-end',
2418

25-
return {
26-
padding: '1.25rem 1rem',
27-
display: 'flex',
28-
justifyContent: 'flex-end',
19+
background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)',
20+
boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)',
21+
position: 'relative',
22+
zIndex: '100'
23+
}));
2924

30-
background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
31-
boxShadow: 'inset 0px 3px 5px 0px rgba(0,0,0,0.25)',
32-
position: 'relative',
33-
zIndex: '100'
34-
};
35-
});
3625
export const HeaderTypography = styled(Typography)({
3726
fontSize: '18px'
3827
});
39-
export const HeaderModal = styled('div')(({ theme }) => {
40-
const startColor = theme.palette.mode === 'light' ? BUTTON_MODAL : BLACK;
41-
const endColor = theme.palette.mode === 'light' ? SLIGHT_BLUE : SLIGHT_BLACK_2;
42-
return {
43-
display: 'flex',
44-
borderRadius: '5px 5px 0px 0px',
45-
justifyContent: 'space-between',
46-
padding: '11px 16px',
47-
height: '52px',
48-
fill: WHITE,
49-
boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
50-
background: `linear-gradient(90deg, ${startColor}, ${endColor})`,
51-
filter:
52-
theme.palette.mode === 'light'
53-
? `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL}',endColorstr='${SLIGHT_BLUE}',GradientType=1)`
54-
: `progid:DXImageTransform.Microsoft.gradient(startColorstr='${BUTTON_MODAL_DARK}',GradientType=1)`
55-
};
56-
});
28+
export const HeaderModal = styled('div')(() => ({
29+
display: 'flex',
30+
borderRadius: '5px 5px 0px 0px',
31+
justifyContent: 'space-between',
32+
padding: '11px 16px',
33+
height: '52px',
34+
fill: WHITE,
35+
boxShadow: 'inset 0px -1px 3px 0px rgba(0,0,0,0.2)',
36+
background: 'linear-gradient(90deg, #3B687B 0%, #507D90 100%)'
37+
}));

‎src/icons/CatalogIcon/CatalogIcon.tsx

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { FC } from 'react';
2+
import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants';
3+
import { CARIBBEAN_GREEN, DARK_SLATE_GRAY, KEPPEL, WHITE, useTheme } from '../../theme';
4+
import { IconProps } from '../types';
5+
6+
type CatalogIconProps = {
7+
primaryFill?: string;
8+
secondaryFill?: string;
9+
tertiaryFill?: string;
10+
} & IconProps;
11+
12+
export const CatalogIcon: FC<CatalogIconProps> = ({
13+
width = DEFAULT_WIDTH,
14+
height = DEFAULT_HEIGHT,
15+
primaryFill,
16+
secondaryFill,
17+
tertiaryFill = WHITE,
18+
style = {},
19+
...props
20+
}) => {
21+
const theme = useTheme();
22+
const themeMode = theme?.palette?.mode ?? 'light';
23+
24+
const themePrimaryFill = primaryFill ?? (themeMode === 'dark' ? KEPPEL : DARK_SLATE_GRAY);
25+
const themeSecondaryFill = secondaryFill ?? (themeMode === 'dark' ? CARIBBEAN_GREEN : KEPPEL);
26+
27+
return (
28+
<svg
29+
width={width}
30+
height={height}
31+
xmlns="http://www.w3.org/2000/svg"
32+
viewBox="0 0 64 64"
33+
style={style}
34+
{...props}
35+
>
36+
<path
37+
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"
38+
strokeWidth="0"
39+
fill={themePrimaryFill}
40+
/>
41+
<path
42+
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"
43+
strokeWidth="0"
44+
fill={themeSecondaryFill}
45+
/>
46+
<path
47+
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"
48+
strokeWidth="0"
49+
fill={themeSecondaryFill}
50+
/>
51+
<path
52+
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"
53+
strokeWidth="0"
54+
fill={themeSecondaryFill}
55+
/>
56+
<path
57+
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"
58+
strokeWidth="0"
59+
fill={tertiaryFill}
60+
/>
61+
</svg>
62+
);
63+
};
64+
65+
export default CatalogIcon;

‎src/icons/CatalogIcon/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as CatalogIcon } from './CatalogIcon';

‎src/icons/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ export * from './AddCircle';
33
export * from './Application';
44
export * from './Bell';
55
export * from './Bus';
6+
export * from './CatalogIcon';
67
export * from './Chevron';
78
export * from './Circle';
89
export * from './Clone';

0 commit comments

Comments
 (0)