Merge pull request #1610 from decentdao/reskin/proposal-input-fixes

Reskin/proposal input fixes
decentdao · Apr 29, 2024 · 7a3719f · 7a3719f
2 parents e752a57 + d9b0397
commit 7a3719f
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 28 deletions.
diff --git a/src/components/ProposalBuilder/ProposalTransaction.tsx b/src/components/ProposalBuilder/ProposalTransaction.tsx
@@ -65,17 +65,18 @@ export default function ProposalTransaction({
   return (
     <VStack
       align="left"
-      spacing={4}
+      px="1.5rem"
       mt={6}
     >
+      {/* TRANSACTION TARGET ADDRESS */}
       <InputComponent
         label={t('labelTargetAddress')}
         helper={t('helperTargetAddress')}
         placeholder="0x0000"
         isRequired
         disabled={transactionPending}
         subLabel={
-          <HStack>
+          <HStack textStyle="helper-text-base">
             <Text>{t('example', { ns: 'common' })}:</Text>
             <ExampleLabel>yourdomain.eth</ExampleLabel>
             <Text>{t('or', { ns: 'common' })}</Text>
@@ -97,7 +98,10 @@ export default function ProposalTransaction({
           />
         </Box>
       )}
+
       <Divider my="1.5rem" />
+
+      {/* FUNCTION SPECIFICATION */}
       <Box>
         <Text
           textStyle="display-lg"
@@ -125,7 +129,9 @@ export default function ProposalTransaction({
           testId="transaction.functionName"
         />
       </Box>
-      <Box>
+
+      {/* TRANSACTION PARAMETERS LIST */}
+      <Box mt="1.5rem">
         <Accordion
           allowMultiple
           index={expandedIndecies}
@@ -138,11 +144,17 @@ export default function ProposalTransaction({
               padding="1rem"
               borderRadius={4}
               bg="neutral-3"
+              px={0}
+              py="1.5rem"
             >
               {({ isExpanded }) => (
                 <>
                   <Box>
-                    <HStack justify="space-between">
+                    {/* TRANSACTION PARAMETER HEADER */}
+                    <HStack
+                      px="1.5rem"
+                      justify="space-between"
+                    >
                       <AccordionButton
                         onClick={() => {
                           setExpandedIndecies(indexArray => {
@@ -169,6 +181,8 @@ export default function ProposalTransaction({
                           </Flex>
                         </Text>
                       </AccordionButton>
+
+                      {/* Remove parameter button */}
                       {i !== 0 || transaction.parameters.length !== 1 ? (
                         <IconButton
                           icon={<MinusCircle />}
@@ -193,12 +207,11 @@ export default function ProposalTransaction({
                         <Box h="2.25rem" />
                       )}
                     </HStack>
+
+                    {/* TRANSACTION PARAMETER SECTION */}
                     <AccordionPanel p={0}>
-                      <Flex
-                        gap={2}
-                        mt={6}
-                      >
-                        <Box>
+                      <Flex mt="1rem">
+                        <Box px="1.5rem">
                           <InputComponent
                             label={t('labelFunctionParameter', { ns: 'proposalTemplate' })}
                             helper={t('helperFunctionParameter', { ns: 'proposalTemplate' })}
@@ -362,12 +375,15 @@ export default function ProposalTransaction({
                       </Flex>
                     </AccordionPanel>
                   </Box>
+
                   {!isExpanded && (
                     <Divider
                       variant="light"
                       mt="0.5rem"
                     />
                   )}
+
+                  {/* ADD PARAMETER BUTTON */}
                   {i === transaction.parameters.length - 1 && (
                     <Button
                       onClick={() => {
@@ -380,8 +396,8 @@ export default function ProposalTransaction({
                       }}
                       variant="text"
                       color="celery-0"
-                      padding="0.25rem 0.75rem"
                       mt={1}
+                      mx="1.5rem"
                       gap="0.25rem"
                       borderRadius="625rem"
                       borderColor="transparent"
@@ -398,6 +414,8 @@ export default function ProposalTransaction({
             </AccordionItem>
           ))}
         </Accordion>
+
+        {/* ETH VALUE */}
         <Box mt={6}>
           <BigIntComponent
             label={t('labelEthValue')}

diff --git a/src/components/ProposalBuilder/ProposalTransactions.tsx b/src/components/ProposalBuilder/ProposalTransactions.tsx
@@ -41,7 +41,7 @@ export default function ProposalTransactions({
   const removeTransaction = (transactionIndex: number) => {
     setFieldValue(
       'transactions',
-      transactions.filter((tx, i) => i !== transactionIndex),
+      transactions.filter((_, i) => i !== transactionIndex),
     );
   };
   return (
@@ -61,15 +61,14 @@ export default function ProposalTransactions({
             key={index}
             borderTop="none"
             borderBottom="none"
-            my="1.5rem"
           >
             {({ isExpanded }) => (
-              <Box
-                borderRadius={4}
-                p={3}
-                my="2"
-              >
-                <HStack justify="space-between">
+              <Box borderRadius={4}>
+                {/* TRANSACTION HEADER */}
+                <HStack
+                  px="1.5rem"
+                  justify="space-between"
+                >
                   <AccordionButton
                     onClick={() => {
                       setExpandedIndecies(indexArray => {
@@ -82,7 +81,7 @@ export default function ProposalTransactions({
                         }
                       });
                     }}
-                    p={0}
+                    p="0.25rem"
                     textStyle="display-lg"
                     color="lilac-0"
                   >
@@ -112,6 +111,7 @@ export default function ProposalTransactions({
                     <Box h="2.25rem" />
                   )}
                 </HStack>
+
                 <AccordionPanel p={0}>
                   <ProposalTransaction
                     transaction={transactions[index] as CreateProposalTransaction}

diff --git a/src/components/ProposalBuilder/ProposalTransactionsForm.tsx b/src/components/ProposalBuilder/ProposalTransactionsForm.tsx
@@ -32,7 +32,7 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm
   }, [safeNonce, setFieldValue]);
 
   return (
-    <Box>
+    <Box py="1.5rem">
       <ProposalTransactions
         expandedIndecies={expandedIndecies}
         setExpandedIndecies={setExpandedIndecies}
@@ -49,7 +49,7 @@ export default function ProposalTransactionsForm(props: ProposalTransactionsForm
         disabled={pendingTransaction}
         w="fit-content"
         color="celery-0"
-        padding="0.25rem 0.75rem"
+        mx="1.5rem"
         gap="0.25rem"
         borderRadius="625rem"
         borderColor="transparent"

diff --git a/src/components/ProposalBuilder/index.tsx b/src/components/ProposalBuilder/index.tsx
@@ -19,17 +19,17 @@ import ProposalMetadata from './ProposalMetadata';
 import ProposalTransactionsForm from './ProposalTransactionsForm';
 import StateButtons from './StateButtons';
 
-interface IProposalBuilder {
+interface ProposalBuilderProps {
   mode: ProposalBuilderMode;
   prepareProposalData: (values: CreateProposalForm) => Promise<ProposalExecuteData | undefined>;
   initialValues: CreateProposalForm;
 }
 
-export default function ProposalBuilder({
+export function ProposalBuilder({
   mode,
   initialValues,
   prepareProposalData,
-}: IProposalBuilder) {
+}: ProposalBuilderProps) {
   const [formState, setFormState] = useState(CreateProposalState.METADATA_FORM);
   const { t } = useTranslation(['proposalTemplate', 'proposal']);
 
@@ -142,7 +142,6 @@ export default function ProposalBuilder({
                     <Box
                       marginBottom="2rem"
                       rounded="lg"
-                      p="1.5rem"
                       bg="neutral-2"
                     >
                       {formState === CreateProposalState.METADATA_FORM ? (

diff --git a/src/components/ui/forms/InputComponent.tsx b/src/components/ui/forms/InputComponent.tsx
@@ -89,9 +89,11 @@ export function LabelComponent(props: Omit<BaseProps, 'value'>) {
         )}
         {helperSlot === 'start' && <Text color="neutral-7">{helper}</Text>}
       </GridItem>
+
       <GridItem {...inputContainerProps}>
         <LabelWrapper
           subLabel={subLabel}
+          // TODO: LabelWrapper error message design is out of date
           errorMessage={errorMessage}
         >
           {children}

diff --git a/src/i18n/locales/en/proposal.json b/src/i18n/locales/en/proposal.json
@@ -79,7 +79,7 @@
   "filterProposalsNSelected": "Filter {{count}}",
   "filter": "Filter",
   "transaction": "Transaction",
-  "parameter": "Paramter",
+  "parameter": "Parameter",
   "proposal": "Proposal",
   "transactionExecutionAlertMessage": "Transactions execute in the order they are added",
   "labelProposalVotingPeriod": "Voting Period",

diff --git a/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx b/src/pages/daos/[daoAddress]/proposal-templates/new/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import ProposalBuilder from '../../../../../components/ProposalBuilder';
+import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { logError } from '../../../../../helpers/errorLogging';
 import useCreateProposalTemplate from '../../../../../hooks/DAO/proposal/useCreateProposalTemplate';

diff --git a/src/pages/daos/[daoAddress]/proposals/new/index.tsx b/src/pages/daos/[daoAddress]/proposals/new/index.tsx
@@ -1,6 +1,6 @@
 import { Center } from '@chakra-ui/react';
 import { useRef, useEffect } from 'react';
-import ProposalBuilder from '../../../../../components/ProposalBuilder';
+import { ProposalBuilder } from '../../../../../components/ProposalBuilder';
 import { DEFAULT_PROPOSAL } from '../../../../../components/ProposalBuilder/constants';
 import { BarLoader } from '../../../../../components/ui/loaders/BarLoader';
 import { HEADER_HEIGHT } from '../../../../../constants/common';