Refactor Choice sections margins

zooniverse · Nov 19, 2024 · 9e9d764 · 9e9d764
1 parent 6f22ceb
commit 9e9d764
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js
@@ -114,6 +114,7 @@ function Choice({
           direction='row'
           fill='horizontal'
           justify='between'
+          margin={{ bottom: '30px' }}
         >
           <Heading
             id='choice-label'
@@ -136,20 +137,22 @@ function Choice({
         <Collapsible
           open={showDescription}
         >
-          <Paragraph>
-            {strings.get(`choices.${choiceId}.description`)}
-          </Paragraph>
-          {choice.confusionsOrder?.length > 0 && (
-            <ConfusedWith
-              choices={choices}
-              choiceId={choiceId}
-              confusions={choice.confusions}
-              confusionsOrder={choice.confusionsOrder}
-              handleChoice={handleChoice}
-              images={images}
-              strings={strings}
-            />
-          )}
+          <Box margin={{ bottom: '30px' }}>
+            <Paragraph margin='none'>
+              {strings.get(`choices.${choiceId}.description`)}
+            </Paragraph>
+            {choice.confusionsOrder?.length > 0 && (
+              <ConfusedWith
+                choices={choices}
+                choiceId={choiceId}
+                confusions={choice.confusions}
+                confusionsOrder={choice.confusionsOrder}
+                handleChoice={handleChoice}
+                images={images}
+                strings={strings}
+              />
+            )}
+          </Box>
         </Collapsible>
         {questionIds.length > 0 && (
           <Questions
@@ -170,11 +173,12 @@ function Choice({
           fill='horizontal'
           gap='xsmall'
           justify='center'
+          margin={{ top: '30px' }}
           pad={{ top: 'small' }}
         >
           <Button
             fill='horizontal'
-            label={t('SurveyTask.Choice.notThis')}
+            label={t('SurveyTask.Choice.cancel')}
             onClick={() => handleDelete(choiceId)}
           />
           <PrimaryButton

diff --git a/...plugins/tasks/survey/components/components/Choice/components/ConfusedWith/ConfusedWith.js b/...plugins/tasks/survey/components/components/Choice/components/ConfusedWith/ConfusedWith.js
@@ -41,8 +41,13 @@ function ConfusedWith({
   }
 
   return (
-    <Box>
-      <SpacedHeading>{t('SurveyTask.ConfusedWith.confused')}</SpacedHeading>
+    <Box margin={{ top: '30px' }}>
+      <SpacedHeading
+        margin={{ bottom: '20px', top: 'none' }}
+        size='1rem'
+      >
+        {t('SurveyTask.ConfusedWith.confused')}
+      </SpacedHeading>
       <Box
         direction='row'
         wrap

diff --git a/...r/src/plugins/tasks/survey/components/components/Choice/components/Questions/Questions.js b/...r/src/plugins/tasks/survey/components/components/Choice/components/Questions/Questions.js
@@ -26,6 +26,7 @@ export default function Questions({
   return (
     <Box
       flex='grow'
+      gap='30px'
     >
       {questionIds.map((questionId, index) => {
         const question = questions.get(questionId) || { answers: {}, answersOrder: [] }
@@ -41,6 +42,10 @@ export default function Questions({
           >
             <SpacedHeading
               id={`${questionId}-label`}
+              margin={{
+                top: 'none',
+                bottom: '20px'
+              }}
               size='1rem'
             >
               {strings.get(`questions.${questionId}.label`)}

diff --git a/packages/lib-classifier/src/translations/en/plugins.json b/packages/lib-classifier/src/translations/en/plugins.json
@@ -26,7 +26,7 @@
       "identify": "Identify",
       "lessInfo": "Less info",
       "moreInfo": "More info",
-      "notThis": "Not this"
+      "cancel": "Cancel"
     },
     "ConfusedWith": {
       "cancel": "Cancel",