feat(web): add-description-field-in-resolver-forms

kleros · Jan 9, 2024 · 97d0b99 · 97d0b99
1 parent f31afa6
commit 97d0b99
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx b/web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx
@@ -12,7 +12,7 @@ import { usePublicClient } from "wagmi";
 import Popup, { PopupType } from "components/Popup";
 import DisputeIcon from "assets/svgs/icons/dispute.svg";
 import { DecodeEventLogParameters, decodeEventLog, parseAbi } from "viem";
-import { EnsureChain } from "~src/components/EnsureChain";
+import { EnsureChain } from "components/EnsureChain";
 
 const StyledButton = styled(Button)``;
 

diff --git a/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx b/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx
@@ -9,7 +9,7 @@ import { Answer, useNewDisputeContext } from "context/NewDisputeContext";
 const OptionsContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 30px;
+  gap: 48px;
   width: 84vw;
 
   ${landscapeStyle(
@@ -19,9 +19,15 @@ const OptionsContainer = styled.div`
   )}
 `;
 
+const InputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+`;
 const StyledPlusMinusField = styled(PlusMinusField)`
   align-self: start;
-  margin: 24px 0px;
+  margin: 32px 0px 48px;
 `;
 
 const OptionsFields: React.FC = () => {
@@ -44,14 +50,22 @@ const OptionsFields: React.FC = () => {
     <>
       <OptionsContainer>
         {disputeData.answers.map((answer, index) => (
-          <LabeledInput
-            name="title"
-            label={`Voting Option ${index + 1}`}
-            placeholder="eg. Pay 150 DAI"
-            key={answer?.id}
-            value={answer.title ?? ""}
-            onChange={(event) => handleOptionWrite(event, index)}
-          />
+          <InputContainer key={answer.id}>
+            <LabeledInput
+              name="title"
+              label={`Voting Option ${index + 1}`}
+              placeholder="eg. Pay 150 DAI"
+              value={answer.title ?? ""}
+              onChange={(event) => handleOptionWrite(event, index)}
+            />
+            <LabeledInput
+              name="description"
+              label="Option Description (Optional)"
+              placeholder={`Description for Option ${index + 1}`}
+              value={answer.description ?? ""}
+              onChange={(event) => handleOptionWrite(event, index)}
+            />
+          </InputContainer>
         ))}
       </OptionsContainer>
       <StyledPlusMinusField currentValue={disputeData.answers?.length ?? 2} updateValue={updateOptions} minValue={2} />

diff --git a/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx b/web/src/pages/Resolver/Parameters/VotingOptions/index.tsx
@@ -16,7 +16,7 @@ const Container = styled.div`
 `;
 
 const QuestionField = styled(LabeledInput)`
-  margin-bottom: 58px;
+  margin-bottom: 78px;
 `;
 
 const AlertMessageContainer = styled.div`
@@ -26,7 +26,6 @@ const AlertMessageContainer = styled.div`
       width: ${responsiveSize(442, 700, 900)};
     `
   )}
-  margin-top: 16px;
   > div {
     width: 100%;
   }