Merge remote-tracking branch 'origin/reskin/refactor-root-reskin' int…

…o reskin/sidebar
decentdao · Apr 30, 2024 · 7d518e1 · 7d518e1
2 parents 6551748 + 913c286
commit 7d518e1
Show file tree

Hide file tree

Showing 41 changed files with 625 additions and 719 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,10 +24,10 @@
     "@shutter-network/shutter-crypto": "^1.0.1",
     "@snapshot-labs/snapshot.js": "^0.7.3",
     "@tanstack/react-query": "^5.28.4",
-    "@ukstv/jazzicon-react": "^1.0.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@web3modal/wagmi": "^4.1.1",
     "axios": "^0.27.2",
+    "blo": "^1.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.29.3",
     "date-fns-tz": "^2.0.1",

diff --git a/public/images/alert-triangle.svg b/public/images/alert-triangle.svg
diff --git a/src/components/Activity/ActivityDescription.tsx b/src/components/Activity/ActivityDescription.tsx
@@ -29,7 +29,8 @@ export function ActivityDescription({ activity, showFullDescription }: IActivity
       {description && (
         <Box
           mt={2}
-          textColor="#B3B3B3"
+          textColor="neutral-7"
+          textStyle="body-base"
         >
           <Markdown
             content={description}

diff --git a/src/components/Activity/ActivityDescriptionGovernance.tsx b/src/components/Activity/ActivityDescriptionGovernance.tsx
@@ -59,8 +59,8 @@ function ProposalAuthor({ activity }: { activity: Activity }) {
     <Flex
       gap={2}
       alignItems="center"
-      color="#B3B3B3"
-      textStyle="text-md-sans-regular"
+      color="neutral-7"
+      textStyle="label-base"
     >
       <Avatar
         size="sm"
@@ -97,10 +97,9 @@ export function ProposalTitle({
   const titleText = proposalIdText + ' ' + proposaltitleText;
   return (
     <Box
-      textStyle="text-lg-sans-medium"
-      fontSize="20px"
-      color="grayscale.100"
-      pr={2}
+      textStyle="display-lg"
+      color="white-0"
+      pr="1.5rem"
     >
       <Flex
         alignItems="center"

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 ? (