Feature/Survey accent color picker

Ryczko · Jan 27, 2024 · e0a9338 · e0a9338
1 parent a7d67f0
commit e0a9338
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "axios": "^1.6.0",
     "bcrypt": "^5.1.0",
     "clsx": "^1.1.1",
+    "colord": "^2.9.3",
     "date-fns": "^2.28.0",
     "emoji-mart": "^5.5.2",
     "formik": "^2.2.9",

diff --git a/prisma/schema.prisma b/prisma/schema.prisma
@@ -73,6 +73,7 @@ model Survey {
   answers     Answer[]
   oneQuestionPerStep Boolean
   displayTitle Boolean
+  accentColor String?
 
   user User @relation(fields: [userId], references: [id], onDelete: Cascade)
 }

diff --git a/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx b/src/features/surveys/components/SurveyOptionsModal/SurveyOptionsModal.tsx
@@ -8,7 +8,7 @@ type SurveyOptionsModalProps = {
   isOpened: boolean;
   closeModal: () => void;
   surveyOptions: SurveyOptions;
-  updateOptions: (option: keyof SurveyOptions, value: boolean) => void;
+  updateOptions: (option: keyof SurveyOptions, value: boolean | string) => void;
 };
 
 export default function SurveyOptionsModalModal({
@@ -47,6 +47,21 @@ export default function SurveyOptionsModalModal({
             }}
             label={t('surveyOptionsModal.DisplayTitle')}
           />
+
+          <hr className="my-4" />
+          <div className="flex items-center gap-3 text-sm">
+            <div>Accent color</div>
+            <input
+              type="color"
+              className="block h-8 w-10 cursor-pointer rounded-md border border-gray-200 bg-white p-0.5 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-slate-900"
+              id="hs-color-input"
+              value={surveyOptions.accentColor}
+              onChange={(e) => {
+                updateOptions('accentColor', e.target.value);
+              }}
+              title="Choose your color"
+            />
+          </div>
         </div>
       }
     />

diff --git a/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx b/src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx
@@ -43,6 +43,7 @@ export default function PreviewPanel() {
               oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
               userId: '',
               title,
+              accentColor: surveyOptions.accentColor,
               createdAt: new Date(),
               questions: questions.map((question, index) => ({
                 surveyId: '',

diff --git a/...atures/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts b/...atures/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager.ts
@@ -23,6 +23,7 @@ export interface Question {
 export interface SurveyOptions {
   oneQuestionPerStep: boolean;
   displayTitle: boolean;
+  accentColor: string;
 }
 
 export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
@@ -43,6 +44,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
   const [surveyOptions, setSurveyOptions] = useState<SurveyOptions>({
     oneQuestionPerStep: initialData?.oneQuestionPerStep ?? true,
     displayTitle: initialData?.displayTitle ?? true,
+    accentColor: initialData?.accentColor ?? '#C7D2FE',
   });
 
   const [error, setError] = useState('');
@@ -76,7 +78,10 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
     sessionStorage.removeItem(DRAFT_SURVEY_SESSION_STORAGE);
   }, []);
 
-  const updateSurveyOptions = (option: keyof SurveyOptions, value: boolean) => {
+  const updateSurveyOptions = (
+    option: keyof SurveyOptions,
+    value: boolean | string
+  ) => {
     setSurveyOptions((oldOptions) => ({ ...oldOptions, [option]: value }));
   };
 
@@ -240,6 +245,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
         title,
         oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
         displayTitle: surveyOptions.displayTitle,
+        accentColor: surveyOptions.accentColor,
         questions: questions.map((question) => ({
           title: question.title,
           options: question.options,
@@ -275,6 +281,7 @@ export const useCreateSurveyManager = (initialData?: SurveyWithQuestions) => {
         title,
         oneQuestionPerStep: surveyOptions.oneQuestionPerStep,
         displayTitle: surveyOptions.displayTitle,
+        accentColor: surveyOptions.accentColor,
         questions: questions.map((question) => ({
           id: question.id,
           title: question.title,

diff --git a/src/features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView.tsx b/src/features/surveys/features/SurveyDisplay/components/AllQuestionsView/AllQuestionsView.tsx
@@ -7,6 +7,7 @@ import Button, {
 import useTranslation from 'next-translate/useTranslation';
 import { AnswersComponentFactory } from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory';
 import { useSurveyDisplayContext } from 'features/surveys/features/SurveyDisplay/context';
+import { getFontColor } from 'features/surveys/features/SurveyDisplay/utils/getFontColor';
 
 export default function AllQuestionView() {
   const { t } = useTranslation('survey');
@@ -32,6 +33,10 @@ export default function AllQuestionView() {
             variant={ButtonVariant.PRIMARY}
             sizeType={ButtonSize.FULL}
             isLoading={isAnswering}
+            style={{
+              backgroundColor: formData.accentColor ?? undefined,
+              color: getFontColor(formData?.accentColor),
+            }}
           >
             {t('sendButton')}
           </Button>

diff --git a/...es/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx b/...es/surveys/features/SurveyDisplay/components/AnswersComponent/AnswersComponentFactory.tsx
@@ -10,6 +10,7 @@ import ListAnswersComponent from 'features/surveys/features/SurveyDisplay/compon
 import RateAnswersComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/RateComponent/RateComponent';
 import TextAnswersComponent from 'features/surveys/features/SurveyDisplay/components/AnswersComponent/TextAnswersComponent';
 import { useSurveyDisplayContext } from 'features/surveys/features/SurveyDisplay/context';
+import { getFontColor } from 'features/surveys/features/SurveyDisplay/utils/getFontColor';
 
 interface AnswersComponentFactoryProps {
   questionIndex: number;
@@ -63,6 +64,7 @@ export const AnswersComponentFactory = (
               sizeType={ButtonSize.FULL}
               onClick={handlePreviousQuestion}
               disabled={isAnswering}
+              className="text-black"
             >
               {t('back')}
             </Button>
@@ -74,6 +76,10 @@ export const AnswersComponentFactory = (
               sizeType={ButtonSize.FULL}
               onClick={handleNextQuestion}
               isLoading={isAnswering}
+              style={{
+                backgroundColor: formData.accentColor ?? undefined,
+                color: getFontColor(formData.accentColor),
+              }}
             >
               {isLastQuestion ? t('sendButton') : t('next')}
             </Button>

diff --git a/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx b/src/features/surveys/features/SurveyDisplay/components/OneQuestionView/OneQuestionView.tsx
@@ -21,6 +21,7 @@ export default function OneQuestionView() {
             currentStep={activeQuestionIndex + 1}
             totalSteps={formData?.questions.length}
             isSubmitted={isAnswering}
+            accentColor={formData?.accentColor}
           />
         </>
       )}

diff --git a/src/features/surveys/features/SurveyDisplay/utils/getFontColor.ts b/src/features/surveys/features/SurveyDisplay/utils/getFontColor.ts
@@ -0,0 +1,10 @@
+export const getFontColor = (color?: string | null) => {
+  if (!color) return '#000000';
+
+  const hex = color.replace('#', '');
+  const r = parseInt(hex.substr(0, 2), 16);
+  const g = parseInt(hex.substr(2, 2), 16);
+  const b = parseInt(hex.substr(4, 2), 16);
+
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000000' : '#ffffff';
+};
diff --git a/src/pages/api/survey/[id].ts b/src/pages/api/survey/[id].ts
@@ -135,6 +135,7 @@ export default async function handler(
           questions,
           oneQuestionPerStep,
           displayTitle,
+          accentColor,
         } = req.body as SurveyData;
         if (!isSurveyValid(req.body)) {
           return res.status(400).end();
@@ -189,6 +190,7 @@ export default async function handler(
             description,
             oneQuestionPerStep,
             displayTitle,
+            accentColor,
           },
         });
 

diff --git a/src/pages/api/survey/index.ts b/src/pages/api/survey/index.ts
@@ -17,6 +17,7 @@ export interface SurveyData {
   questions: Question[];
   oneQuestionPerStep: boolean;
   displayTitle: boolean;
+  accentColor: string;
 }
 
 export async function getAllUserSurveys(userId: string) {
@@ -76,6 +77,7 @@ export default async function handler(
           questions,
           oneQuestionPerStep,
           displayTitle,
+          accentColor,
         } = req.body as SurveyData;
 
         if (!isSurveyValid(req.body)) {
@@ -87,6 +89,7 @@ export default async function handler(
             user: { connect: { id: session.currentUser.id } },
             title,
             description,
+            accentColor,
             isActive: true,
             oneQuestionPerStep,
             displayTitle,

diff --git a/src/shared/components/Button/Button.tsx b/src/shared/components/Button/Button.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
 import clsx from 'clsx';
 import Loader from 'shared/components/Loader/Loader';
 
@@ -25,6 +25,7 @@ export interface ButtonProps {
   className?: string | undefined;
   type?: 'button' | 'submit' | 'reset' | undefined;
   icon?: React.ReactNode;
+  style?: CSSProperties;
 }
 
 const Button = ({
@@ -36,6 +37,7 @@ const Button = ({
   disabled = false,
   type = 'button',
   icon,
+  style,
   ...props
 }: ButtonProps & React.HTMLProps<HTMLButtonElement>) => (
   <button
@@ -45,6 +47,7 @@ const Button = ({
       sizeType,
       className
     )}
+    style={style}
     disabled={disabled || isLoading}
     type={type}
     {...props}

diff --git a/src/shared/components/ProgressBar/ProgressBar.tsx b/src/shared/components/ProgressBar/ProgressBar.tsx
@@ -1,33 +1,56 @@
+import { colord, extend } from 'colord';
+import mixPlugin from 'colord/plugins/mix';
+
 interface ProgressbarProps {
   currentStep: number;
   totalSteps: number;
   isSubmitted?: boolean;
+  accentColor?: string | null;
 }
 
 export default function Progressbar({
   currentStep,
   totalSteps,
   isSubmitted,
+  accentColor,
 }: ProgressbarProps) {
   const percentage =
     ((currentStep - 1 + (isSubmitted ? 1 : 0)) / totalSteps) * 100;
 
+  const getBackgroundColor = () => {
+    if (!accentColor) return undefined;
+
+    extend([mixPlugin]);
+
+    const color = colord(accentColor);
+    const newc = color.tints(3).map((c) => c.toHex());
+
+    return newc[1];
+  };
+
   return (
-    <div className="relative mt-4 h-[24px] w-full overflow-hidden rounded-lg bg-indigo-100">
+    <div
+      className="relative mt-4 h-[12px] w-full overflow-hidden rounded-lg bg-indigo-100"
+      style={{ background: getBackgroundColor() }}
+    >
       <div
         data-testid="progressbar"
-        style={{ width: `${percentage}%` }}
+        style={{
+          width: `${percentage}%`,
+          backgroundColor: accentColor ?? undefined,
+        }}
         className="h-full bg-indigo-300 transition-all duration-300"
       ></div>
-      <span className="text-purple absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold">
+
+      {/* <span className="text-purple absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold">
         {isSubmitted ? (
           <span>Submitting...</span>
         ) : (
           <span>
             {currentStep - 1} of {totalSteps} completed
           </span>
         )}
-      </span>
+      </span> */}
     </div>
   );
 }