feat: reduce them changes to a single color

samelogic · Nov 23, 2022 · f60402e · f60402e
1 parent fe63bd5
commit f60402e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 7 deletions.
diff --git a/packages/react-microsurveys-client/src/lib/MicrosurveyClient/MicrosurveyClient.stories.tsx b/packages/react-microsurveys-client/src/lib/MicrosurveyClient/MicrosurveyClient.stories.tsx
@@ -17,7 +17,7 @@ export default {
           fields: [
             {
               id: 'willing_to_Pay',
-              type: FieldType.DropDown,
+              type: FieldType.RadioButton,
               title: 'Are you willing to pay?',
               properties: {
                 description: '',
@@ -120,7 +120,7 @@ export default {
               main: '#68687B',
             },
             primary: {
-              main: '#00a3ff',
+              main: 'rgb(49, 24, 192)',
               contrastText: '#fff',
             },
             secondary: {

diff --git a/packages/react-microsurveys-client/src/lib/MicrosurveyClient/MicrosurveyClient.tsx b/packages/react-microsurveys-client/src/lib/MicrosurveyClient/MicrosurveyClient.tsx
@@ -23,16 +23,19 @@ export interface MicrosurveyClientProps {
   onSubmit?: (formResponse: Response) => void;
 }
 
-const StyledPaper = styled(Paper)({
-  border: 'solid rgb(138, 91, 255) 3px',
+const StyledPaper = styled(Paper)(({ theme }) => ({
+  borderStyle: 'solid',
+  borderWidth: '3px',
+  borderColor: theme.palette.primary.main,
   borderRadius: '0.7em',
   '@media (max-width: 640px)': {
     width: '20em',
     padding: '0.75em',
   },
   width: '27em',
   padding: '1rem',
-});
+}));
+
 export function MicrosurveyClient({
   form,
   page,

diff --git a/packages/react-microsurveys-client/src/lib/components/stepper/FieldActions/FieldActions.tsx b/packages/react-microsurveys-client/src/lib/components/stepper/FieldActions/FieldActions.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import { useTheme } from '@mui/material/styles';
 import PoweredBy from '../PoweredBy/PoweredBy';
 
 /* eslint-disable-next-line */
@@ -19,6 +20,7 @@ const StyledCancelButton = styled(Button)({
 const StyledNextButton = styled(Button)({});
 
 export function FieldActions({ onNext, onCancel }: FieldActionsProps) {
+  const theme = useTheme();
   return (
     <StyledFieldActions
       component="span"
@@ -40,6 +42,9 @@ export function FieldActions({ onNext, onCancel }: FieldActionsProps) {
           disableElevation
           variant="text"
           color="secondary"
+          style={{
+            color: theme.palette.primary.main,
+          }}
         >
           Cancel
         </StyledCancelButton>
@@ -49,7 +54,8 @@ export function FieldActions({ onNext, onCancel }: FieldActionsProps) {
           variant="contained"
           color="primary"
           style={{
-            backgroundColor: 'rgb(138, 91, 255)',
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
           }}
         >
           Reply

diff --git a/packages/react-microsurveys-client/src/lib/components/stepper/PoweredBy/PoweredBy.tsx b/packages/react-microsurveys-client/src/lib/components/stepper/PoweredBy/PoweredBy.tsx
@@ -1,4 +1,7 @@
+import { useTheme } from '@mui/material/styles';
+
 export function PoweredBy() {
+  const theme = useTheme();
   return (
     <a
       style={{
@@ -17,7 +20,7 @@ export function PoweredBy() {
         ⚡
       </span>{' '}
       by{' '}
-      <span style={{ color: 'rgb(138, 91, 255)', fontWeight: '600' }}>
+      <span style={{ color: theme.palette.primary.main, fontWeight: '600' }}>
         Samelogic
       </span>
     </a>

diff --git a/packages/react-microsurveys-client/src/lib/components/stepper/ThankYouPage/ThankYouPage.tsx b/packages/react-microsurveys-client/src/lib/components/stepper/ThankYouPage/ThankYouPage.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Link from '@mui/material/Link';
+import { useTheme } from '@mui/material/styles';
 import PoweredBy from '../PoweredBy/PoweredBy';
 import { StepPageProps } from '../StepPage/StepPage';
 import Confetti from './confetti.svg';
@@ -39,6 +40,7 @@ const StyledCloseButton = styled(Button)({
 });
 
 export function ThankYouPage({ onNext }: ThankYouPageProps) {
+  const theme = useTheme();
   return (
     <>
       <StyledThankYouPage>
@@ -63,6 +65,9 @@ export function ThankYouPage({ onNext }: ThankYouPageProps) {
           color="primary"
           variant="contained"
           disableElevation
+          style={{
+            backgroundColor: theme.palette.primary.main,
+          }}
         >
           Close
         </StyledCloseButton>