Merge pull request #1151 from FaheemOnHub/update/feedback/orgColor

add: Feedback wrapper should be organisation based.

Author: leecalcote

src/custom/Feedback/style.tsx

@@ -2,7 +2,6 @@ import { Box, Button, Checkbox, styled } from '@mui/material';
 import {} from '../../constants/constants';
 import {
   BLACK,
-  BUTTON_MODAL,
   CARIBBEAN_GREEN,
   CHINESE_SILVER,
   CULTURED,
@@ -150,7 +149,7 @@ export const FeedbackSubmitButton = styled(Button)<SubmitProp>(({ isOpen }) => (
 }));
 
 export const FeedbackButton = styled(Button)<RenderPositionType>(({ theme, renderPosition }) => ({
-  backgroundColor: BUTTON_MODAL,
+  backgroundColor: theme.palette.interactive.primary,
   color: CULTURED,
   borderRadius: '5px',
   padding: '10px 20px',
@@ -159,7 +158,7 @@ export const FeedbackButton = styled(Button)<RenderPositionType>(({ theme, rende
   position: 'fixed',
   ...positionMap[renderPosition],
   '&:hover': {
-    backgroundColor: theme.palette.mode === 'dark' ? BLACK : '#213A45'
+    boxShadow: theme.shadows[4]
   }
 }));
 
@@ -250,14 +249,8 @@ export const FeedbackOptionButton = styled(Button)<FeedbackMessageProps>(({ them
   padding: '0rem',
   borderRadius: '0px',
   flexDirection: 'column',
-  borderBottom: isOpen ? `2px solid ${KEPPEL}` : '',
-  background: isOpen
-    ? theme.palette.mode === 'dark'
-      ? BLACK
-      : SNOW_WHITE
-    : theme.palette.mode === 'dark'
-      ? DARK_JUNGLE_GREEN
-      : DARK_SLATE_GRAY,
+  borderBottom: isOpen ? `2px solid ${theme.palette.interactive.primary}` : '',
+  background: isOpen ? SNOW_WHITE : theme.palette.navigation.secondary,
   color: isOpen
     ? theme.palette.mode === 'dark'
       ? SNOW_WHITE

src/custom/ModalCard/style.tsx

@@ -11,27 +11,25 @@ export const ModalWrapper = styled('div')(() => ({
   borderRadius: '5px'
 }));
 
-export const ButtonContainer = styled('div')(() => ({
+export const ButtonContainer = styled('div')(({ theme }) => ({
   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)',
+  background: theme.palette.surface.tint,
   position: 'relative',
   zIndex: '100'
 }));
 
 export const HeaderTypography = styled(Typography)({
   fontSize: '18px'
 });
-export const HeaderModal = styled('div')(() => ({
+export const HeaderModal = styled('div')(({ theme }) => ({
   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%)'
+  background: theme.palette.surface.tint
 }));

src/icons/Calender/CalenderIcon.tsx

@@ -1,8 +1,10 @@
 import { FC } from 'react';
 import { KEPPEL_GREEN_FILL } from '../../constants/constants';
 import { IconProps } from '../types';
+import { useTheme } from './../../theme/index';
 
 const CalenderIcon: FC<IconProps> = ({ width, height, ...props }) => {
+  const theme = useTheme();
   return (
     <svg
       width={width}
@@ -18,7 +20,7 @@ const CalenderIcon: FC<IconProps> = ({ width, height, ...props }) => {
       <path d="M11 13H4V15H11V13Z" />
       <path
         d="M15.256 20V17.744H13V16.244H15.256V14H16.756V16.244H19V17.744H16.756V20H15.256Z"
-        fill={props.stroke || KEPPEL_GREEN_FILL}
+        fill={theme.palette.interactive.primary}
       />
     </svg>
   );

src/icons/Idea/IdeaIcon.tsx

@@ -1,8 +1,9 @@
 import { FC } from 'react';
 import { DEFAULT_HEIGHT, DEFAULT_WIDTH, KEPPEL_GREEN_FILL } from '../../constants/constants';
 import { IconProps } from '../types';
-
+import { useTheme } from './../../theme/index';
 const IdeaIcon: FC<IconProps> = ({ width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, ...props }) => {
+  const theme = useTheme();
   return (
     <svg
       width={width}
@@ -16,15 +17,15 @@ const IdeaIcon: FC<IconProps> = ({ width = DEFAULT_WIDTH, height = DEFAULT_HEIGH
       <path d="M7.49634 0C3.81658 0 0.833008 3.0072 0.833008 6.71664C0.833008 7.938 1.17348 9.07344 1.72134 10.0702C3.35777 13.0418 3.7911 14.7106 4.05801 16.3255C4.28206 17.6794 4.59206 17.9938 5.60658 17.9938C6.03801 17.9938 6.74444 17.9938 7.49634 17.9938C8.24825 17.9938 8.95467 17.9938 9.38586 17.9938C10.4009 17.9938 10.7106 17.6789 10.9347 16.3255C11.2016 14.7106 11.6351 13.0416 13.2716 10.0702C13.8197 9.07368 14.1597 7.938 14.1597 6.71664C14.1599 3.0072 11.1763 0 7.49634 0Z" />
       <path
         d="M9.87735 18.4805H5.11544C4.9183 18.4805 4.7583 18.6415 4.7583 18.8405V19.0805C4.7583 19.2794 4.9183 19.4405 5.11544 19.4405H9.87735C10.0745 19.4405 10.2345 19.2794 10.2345 19.0805V18.8405C10.2345 18.6415 10.0745 18.4805 9.87735 18.4805Z"
-        fill={props.stroke || KEPPEL_GREEN_FILL}
+        fill={theme.palette.interactive.primary}
       />
       <path
         d="M9.87735 19.9199H5.11544C4.9183 19.9199 4.7583 20.081 4.7583 20.2799V20.5199C4.7583 20.7189 4.9183 20.8799 5.11544 20.8799H9.87735C10.0745 20.8799 10.2345 20.7189 10.2345 20.5199V20.2799C10.2345 20.081 10.0745 19.9199 9.87735 19.9199Z"
-        fill={props.stroke || KEPPEL_GREEN_FILL}
+        fill={theme.palette.interactive.primary}
       />
       <path
         d="M9.87735 21.3604H5.11544C4.9183 21.3604 4.7583 21.5214 4.7583 21.7204V21.9604C4.7583 22.1593 4.9183 22.3204 5.11544 22.3204H9.87735C10.0745 22.3204 10.2345 22.1593 10.2345 21.9604V21.7204C10.2345 21.5214 10.0745 21.3604 9.87735 21.3604Z"
-        fill={props.stroke || KEPPEL_GREEN_FILL}
+        fill={theme.palette.interactive.primary}
       />
       <path d="M5.71045 22.7998H9.28188C9.28188 23.5198 8.3295 23.9998 7.49616 23.9998C6.66283 23.9998 5.71045 23.5198 5.71045 22.7998Z" />
     </svg>