Creator rebuild

src/features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons.tsx

@@ -23,7 +23,7 @@ export default function ActionButtons() {
   } = useSurveyCreatorContext();
 
   return (
-    <div className="mt-4">
+    <div className="mt-2">
       {questions.length < MAX_QUESTIONS && !isEditMode && (
         <AddQuestionButton onClick={addQuestion} />
       )}

src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx

@@ -1,8 +1,5 @@
 import { PlusCircleIcon } from '@heroicons/react/outline';
-import Button, {
-  ButtonSize,
-  ButtonVariant,
-} from 'shared/components/Button/Button';
+import Button, { ButtonSize } from 'shared/components/Button/Button';
 import NewQuestionModal from 'features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal';
 import useModal from 'features/surveys/hooks/useModal';
 import { DraftQuestion } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/createSurveyManager';
@@ -14,14 +11,13 @@ interface AddQuestionButtonProps {
 export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
   const { closeModal, isModalOpen, openModal } = useModal();
   return (
-    <div className="mb-2">
+    <div className="mb-2 rounded-md shadow-sm">
       <Button
         onClick={openModal}
-        variant={ButtonVariant.OUTLINE}
         sizeType={ButtonSize.FULL}
         icon={<PlusCircleIcon className="h-5 w-5" />}
       >
-        Add Question
+        Add new block
       </Button>
 
       <NewQuestionModal

src/features/surveys/features/SurveyCreator/components/EmojiPicker/EmojiPicker.tsx

@@ -49,21 +49,20 @@ function EmojiPicker({
 
   return (
     <div>
-      <button
-        type="button"
-        className="label-text flex h-12 w-14 items-center justify-center rounded-md border bg-zinc-50 p-3 shadow-sm transition hover:scale-95"
+      <Button
+        className="label-text flex h-11 w-14 items-center justify-center rounded-md border bg-zinc-50 shadow-sm transition hover:scale-95"
         onClick={() => setDisplayPicker(!displayPicker)}
       >
         {!addEmoji ? (
-          <Emoji size={28} shortcodes={pickedEmoji || ''} />
+          <Emoji size={27} shortcodes={pickedEmoji || ''} />
         ) : (
-          <PlusSmIcon className="w-[22px]" />
+          <PlusSmIcon className="w-[20px]" />
         )}
-      </button>
+      </Button>
       {onEmoteRemove && (
         <Button
           onClick={() => onEmoteRemove(index, questionIndex)}
-          className="mt-1 w-14"
+          className="mt-1 w-14 py-1.5"
           variant={ButtonVariant.DANGER}
           icon={<TrashIcon className="h-[15px] w-[15px]" />}
         />

src/features/surveys/features/SurveyCreator/components/LogicalJump/Condition.tsx

@@ -48,81 +48,79 @@ export default function Condition({
       ComparisonType.SUBMITTED;
 
   return (
-    <>
-      <div className="mb-2 flex items-center justify-between gap-4">
-        <div className="flex flex-grow items-center gap-4">
-          {elseCondition ? (
-            <div className="mt-1 flex items-center gap-4">
-              <ArrowDownIcon className="h-4 w-4" />
-              Else continue to the next question
-            </div>
-          ) : (
-            <>
-              <ArrowRightIcon className="h-4 w-4" />
-              if this answer
-              <Select
-                classNames="flex-grow"
-                required
-                submitted={isSubmitted}
-                disabled={isEditMode}
-                selectedValue={
-                  currentQuestion.logicPaths?.[stepIndex].comparisonType
-                }
-                onChangeCallback={(option) =>
-                  updateLogicPath(questionIndex, stepIndex, {
-                    comparisonType: option.value as ComparisonType,
-                  })
-                }
-                options={conditionOptions?.comparisons ?? []}
-              />
-              {displayAnswersOptions && (
-                <Select
-                  classNames="flex-grow"
-                  disabled={isEditMode}
-                  required
-                  submitted={isSubmitted}
-                  emojiContent={currentQuestion.type === QuestionType.EMOJI}
-                  selectedValue={
-                    currentQuestion.logicPaths?.[stepIndex].selectedOption ??
-                    undefined
-                  }
-                  onChangeCallback={(option) =>
-                    updateLogicPath(questionIndex, stepIndex, {
-                      selectedOption: option.value,
-                    })
-                  }
-                  options={conditionOptions?.options ?? []}
-                />
-              )}
-              jump to
+    <div className="mb-2 flex items-center justify-between gap-4">
+      <div className="flex flex-grow items-center gap-4">
+        {elseCondition ? (
+          <div className="mt-1 flex items-center gap-4">
+            <ArrowDownIcon className="h-4 w-4" />
+            Else continue to the next question
+          </div>
+        ) : (
+          <>
+            <ArrowRightIcon className="h-4 w-4" />
+            if this answer
+            <Select
+              classNames="flex-grow"
+              required
+              submitted={isSubmitted}
+              disabled={isEditMode}
+              selectedValue={
+                currentQuestion.logicPaths?.[stepIndex].comparisonType
+              }
+              onChangeCallback={(option) =>
+                updateLogicPath(questionIndex, stepIndex, {
+                  comparisonType: option.value as ComparisonType,
+                })
+              }
+              options={conditionOptions?.comparisons ?? []}
+            />
+            {displayAnswersOptions && (
               <Select
                 classNames="flex-grow"
                 disabled={isEditMode}
                 required
                 submitted={isSubmitted}
+                emojiContent={currentQuestion.type === QuestionType.EMOJI}
                 selectedValue={
-                  currentQuestion.logicPaths?.[stepIndex].nextQuestionId ??
+                  currentQuestion.logicPaths?.[stepIndex].selectedOption ??
                   undefined
                 }
                 onChangeCallback={(option) =>
                   updateLogicPath(questionIndex, stepIndex, {
-                    nextQuestionId: option.value,
-                    endSurvey: option.value === END_OF_SURVEY || undefined,
+                    selectedOption: option.value,
                   })
                 }
-                options={conditionOptions?.jumpQuestions ?? []}
+                options={conditionOptions?.options ?? []}
               />
-            </>
-          )}
-        </div>
-
-        {!elseCondition && !isEditMode && (
-          <TrashIcon
-            onClick={() => removeLogicPath(questionIndex, stepIndex)}
-            className="h-4 w-4 cursor-pointer text-red-800"
-          />
+            )}
+            jump to
+            <Select
+              classNames="flex-grow"
+              disabled={isEditMode}
+              required
+              submitted={isSubmitted}
+              selectedValue={
+                currentQuestion.logicPaths?.[stepIndex].nextQuestionId ??
+                undefined
+              }
+              onChangeCallback={(option) =>
+                updateLogicPath(questionIndex, stepIndex, {
+                  nextQuestionId: option.value,
+                  endSurvey: option.value === END_OF_SURVEY || undefined,
+                })
+              }
+              options={conditionOptions?.jumpQuestions ?? []}
+            />
+          </>
         )}
       </div>
-    </>
+
+      {!elseCondition && !isEditMode && (
+        <TrashIcon
+          onClick={() => removeLogicPath(questionIndex, stepIndex)}
+          className="h-4 w-4 cursor-pointer text-red-800"
+        />
+      )}
+    </div>
   );
 }

src/features/surveys/features/SurveyCreator/components/LogicalJump/LogicalJump.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import Button from 'shared/components/Button/Button';
+import Button, { ButtonSize } from 'shared/components/Button/Button';
 import Condition from 'features/surveys/features/SurveyCreator/components/LogicalJump/Condition';
 import { TerminalIcon } from '@heroicons/react/outline';
 import { QuestionMarkCircleIcon } from '@heroicons/react/solid';
 import { Tooltip } from 'react-tooltip';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
+import { MAX_LOGIC_PATHS } from 'shared/constants/surveysConfig';
 
 export interface ConditionSelect {
   name: string;
@@ -58,10 +59,11 @@ export default function LogicalJump({
         </div>
       )}
 
-      {!isEditMode && (
+      {!isEditMode && conditions.length < MAX_LOGIC_PATHS && (
         <Button
           onClick={() => addLogicPath(questionIndex)}
           className="mt-4"
+          sizeType={ButtonSize.SMALL}
           icon={<TerminalIcon className="mr-1 h-5 w-5" />}
         >
           Add path

src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx

@@ -79,7 +79,7 @@ export default function NewQuestionModal({
     <StyledDialog
       isOpen={isOpened}
       onClose={closeModal}
-      title={'Choose question type'}
+      title={'Choose block type'}
       content={
         <div className="mt-6 flex flex-col gap-2 sm:mt-4 sm:flex-row">
           <NewQuestionModalButton

src/features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import SurveyDisplay from 'features/surveys/features/SurveyDisplay/SurveyDisplay';
-import Background from 'layout/Background/Background';
 import React from 'react';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
 import { usePreviewPanelContext } from 'features/surveys/features/SurveyCreator/managers/previewPanelManager/context';
@@ -29,7 +28,7 @@ export default function PreviewPanel() {
 
       <div
         className={clsx(
-          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[calc(100vw-(100vw-100%))] items-center overflow-hidden border-l transition-transform duration-500 ease-in-out',
+          'fixed bottom-0 right-0 top-[var(--navigation-height)] w-[550px] max-w-[calc(100vw-(100vw-100%))] items-center overflow-hidden border-l shadow transition-transform duration-500 ease-in-out',
           !isPanelOpened && 'translate-x-full'
         )}
       >
@@ -42,8 +41,8 @@ export default function PreviewPanel() {
 
           <XIcon onClick={togglePanel} className="h-5 w-5 cursor-pointer" />
         </div>
-        <div className="no-scrollbar h-[calc(100%-42px)] overflow-auto p-6 px-4">
-          <Background hideAccents />
+        <div className="no-scrollbar h-[calc(100%-42px)] overflow-auto bg-white p-6 ">
+          {/* <Background hideAccents /> */}
           <SurveyDisplay
             previewMode
             restartTrigger={restartTrigger}

src/features/surveys/features/SurveyCreator/components/QuestionBlocks/ChoiceQuestionBlock/ChoiceQuestionBlock.tsx

@@ -1,6 +1,9 @@
 import { PlusIcon, TrashIcon } from '@heroicons/react/outline';
-import Button, { ButtonVariant } from 'shared/components/Button/Button';
-import Input from 'shared/components/Input/Input';
+import Button, {
+  ButtonSize,
+  ButtonVariant,
+} from 'shared/components/Button/Button';
+import Input, { InputSize } from 'shared/components/Input/Input';
 import { MAX_OPTIONS, MIN_OPTIONS } from 'shared/constants/surveysConfig';
 import useTranslation from 'next-translate/useTranslation';
 import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
@@ -32,7 +35,7 @@ export default function ChoiceQuestionBlock({
   };
 
   return (
-    <div>
+    <div className="mt-[2px]">
       {options.map((option, index) => (
         <div className="flex w-full gap-2" key={index}>
           <div className="block flex-grow">
@@ -41,7 +44,8 @@ export default function ChoiceQuestionBlock({
               value={option}
               placeholder="Answer..."
               error={getAnswerError(option)}
-              className="mt-[2px]"
+              className="mt-0 !bg-white"
+              inputSize={InputSize.SMALL}
               onChange={(e) =>
                 handleOptionChange(
                   index,
@@ -53,18 +57,20 @@ export default function ChoiceQuestionBlock({
           </div>
           {options.length > MIN_OPTIONS && (
             <Button
-              className="mt-[2px] h-[42px] w-[42px]"
               variant={ButtonVariant.DANGER}
+              sizeType={ButtonSize.SMALL}
               icon={<TrashIcon className="h-4 w-4" />}
+              className="w-[40px]"
               onClick={() => handleOptionRemove(index, questionIndex)}
             />
           )}
         </div>
       ))}
       {options.length < MAX_OPTIONS && (
-        <div className="mb-3 mt-2">
+        <div className="mb-3 mt-0">
           <Button
-            className="ml-auto"
+            className="w-full"
+            sizeType={ButtonSize.SMALL}
             onClick={() => handleAddingNewOption('', questionIndex)}
           >
             Add New Option <PlusIcon className="ml-2 h-4 w-4" />

src/features/surveys/features/SurveyCreator/components/QuestionBlocks/EmojiQuestionBlock/EmojiQuestionBlock.tsx

@@ -16,10 +16,10 @@ export default function EmojiQuestionBlock({
 
   return (
     <div
-      className="mb-5 mt-1"
+      className="mb-4 mt-2"
       style={{
         display: 'grid',
-        gridTemplateColumns: 'repeat(auto-fit, 58px)',
+        gridTemplateColumns: 'repeat(auto-fit, 56px)',
         justifyContent: 'space-between',
         gridGap: '8px',
       }}