Refactor Choice button borders

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

Hide file tree

Showing 2 changed files with 13 additions and 3 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
@@ -19,6 +19,16 @@ const StyledBox = styled(Box)`
   }
 `
 
+const StyledButton = styled(Button)`
+  border: 1px solid ${props => props.theme.global.colors.brand};
+  border-radius: 4px;
+`
+
+const StyledPrimaryButton = styled(PrimaryButton)`
+  border-radius: 4px;
+`
+
+
 function Choice({
   answers = {},
   choiceId = '',
@@ -176,12 +186,12 @@ function Choice({
           margin={{ top: '30px' }}
           pad={{ top: 'small' }}
         >
-          <Button
+          <StyledButton
             fill='horizontal'
             label={t('SurveyTask.Choice.cancel')}
             onClick={() => handleDelete(choiceId)}
           />
-          <PrimaryButton
+          <StyledPrimaryButton
             data-testid='choice-identify-button'
             disabled={!allowIdentify}
             fill='horizontal'

diff --git a/.../components/Choice/components/Questions/components/InputGroup/components/QuestionInput.js b/.../components/Choice/components/Questions/components/InputGroup/components/QuestionInput.js
@@ -59,7 +59,7 @@ function QuestionInput (props) {
           right: 'xsmall'
         }}
         pad={{ horizontal: 'xsmall' }}
-        round={type === 'radio' ? 'full' : false}
+        round={type === 'radio' ? 'full' : '4px'}
         width={type === 'radio' ? { min: '40px' } : { min: '110px' }}
       >
         <input