Merge pull request #643 from sudhanshutech/fix/feedback

Fix feedback component to use standard style

Author: sudhanshutech

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 />}

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',

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': {

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%)'
+}));