Merge pull request #2601 from decentdao/ui-tweaks-1

Ui tweaks 1
decentdao · Dec 9, 2024 · 9bb71ce · 9bb71ce
2 parents f1094c3 + 988d258
commit 9bb71ce
Show file tree

Hide file tree

Showing 15 changed files with 244 additions and 332 deletions.
diff --git a/src/components/Proposals/ProposalSummary.tsx b/src/components/Proposals/ProposalSummary.tsx
@@ -1,6 +1,5 @@
-import { Box, Button, Flex, Icon, Text } from '@chakra-ui/react';
+import { Box, Button, Flex, Text } from '@chakra-ui/react';
 import { abis } from '@fractal-framework/fractal-contracts';
-import { ArrowUpRight } from '@phosphor-icons/react';
 import { format } from 'date-fns';
 import { formatInTimeZone } from 'date-fns-tz';
 import { useEffect, useMemo, useState } from 'react';
@@ -193,7 +192,7 @@ export function AzoriusProposalSummary({ proposal }: { proposal: AzoriusProposal
               alignItems="center"
               justifyContent="space-between"
             >
-              {format(eventDate, DEFAULT_DATE_TIME_FORMAT)} <Icon as={ArrowUpRight} />
+              {format(eventDate, DEFAULT_DATE_TIME_FORMAT)}
             </Flex>
           </EtherscanLink>
         </Flex>

diff --git a/src/components/Roles/forms/RoleFormPaymentStreams.tsx b/src/components/Roles/forms/RoleFormPaymentStreams.tsx
@@ -77,6 +77,25 @@ export function RoleFormPaymentStreams() {
     <FieldArray name="roleEditing.payments">
       {({ push: pushPayment }: { push: (streamFormValue: SablierPaymentFormValues) => void }) => (
         <Box>
+          <Button
+            variant="secondary"
+            size="sm"
+            isDisabled={values.roleEditing?.isTermed ? !isTermsAvailable : false}
+            leftIcon={<Plus size="1rem" />}
+            iconSpacing={0}
+            onClick={async () => {
+              pushPayment({
+                isStreaming: () => false,
+                isCancellable: () => false,
+                isCancelling: false,
+                isValidatedAndSaved: false,
+              });
+              await validateForm();
+              setFieldValue('roleEditing.roleEditingPaymentIndex', (payments ?? []).length);
+            }}
+          >
+            {t('addPayment')}
+          </Button>
           {sortedPayments.length === 0 && (
             <Flex
               bg="neutral-2"
@@ -98,25 +117,6 @@ export function RoleFormPaymentStreams() {
               </Flex>
             </Flex>
           )}
-          <Button
-            variant="secondary"
-            size="sm"
-            isDisabled={values.roleEditing?.isTermed ? !isTermsAvailable : false}
-            leftIcon={<Plus size="1rem" />}
-            iconSpacing={0}
-            onClick={async () => {
-              pushPayment({
-                isStreaming: () => false,
-                isCancellable: () => false,
-                isCancelling: false,
-                isValidatedAndSaved: false,
-              });
-              await validateForm();
-              setFieldValue('roleEditing.roleEditingPaymentIndex', (payments ?? []).length);
-            }}
-          >
-            {t('addPayment')}
-          </Button>
           <RoleFormPaymentRenderer />
           {!!sortedPayments.length && <Divider my="1rem" />}
           <Box mt="0.5rem">

diff --git a/src/components/ui/links/DisplayAddress.tsx b/src/components/ui/links/DisplayAddress.tsx
@@ -1,5 +1,4 @@
-import { Flex, Text, Icon, LinkProps } from '@chakra-ui/react';
-import { ArrowUpRight } from '@phosphor-icons/react';
+import { Flex, Text, LinkProps } from '@chakra-ui/react';
 import { ReactNode } from 'react';
 import { Address } from 'viem';
 import { useGetAccountName } from '../../../hooks/utils/useGetAccountName';
@@ -36,13 +35,6 @@ export function DisplayAddress({
         >
           {children || displayAddress.displayName}
         </Text>
-        {!isTextLink && (
-          <Icon
-            as={ArrowUpRight}
-            mt="0.15rem"
-            ml="0.5rem"
-          />
-        )}
       </Flex>
     </EtherscanLink>
   );

diff --git a/src/components/ui/links/DisplayTransaction.tsx b/src/components/ui/links/DisplayTransaction.tsx
@@ -1,31 +1,18 @@
-import { Flex, Text, Icon } from '@chakra-ui/react';
-import { ArrowUpRight } from '@phosphor-icons/react';
+import { Flex, Text } from '@chakra-ui/react';
 import { createAccountSubstring } from '../../../hooks/utils/useGetAccountName';
 import EtherscanLink from './EtherscanLink';
 
-export default function DisplayTransaction({
-  txHash,
-  isTextLink,
-}: {
-  txHash: string;
-  isTextLink?: boolean;
-}) {
+export default function DisplayTransaction({ txHash }: { txHash: string }) {
   const displayName = createAccountSubstring(txHash);
   return (
     <EtherscanLink
       type="tx"
       value={txHash}
       pl={0}
-      isTextLink={isTextLink}
+      isTextLink
     >
       <Flex alignItems="center">
         <Text as="span">{displayName}</Text>
-        {!isTextLink && (
-          <Icon
-            as={ArrowUpRight}
-            ml="0.5rem"
-          />
-        )}
       </Flex>
     </EtherscanLink>
   );

diff --git a/src/components/ui/menus/CreateProposalMenu/index.tsx b/src/components/ui/menus/CreateProposalMenu/index.tsx
@@ -1,24 +1,11 @@
-import {
-  Box,
-  Button,
-  Divider,
-  Flex,
-  Icon,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Text,
-} from '@chakra-ui/react';
+import { Button, Flex, Icon, Text } from '@chakra-ui/react';
 import { CaretDown } from '@phosphor-icons/react';
-import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Address } from 'viem';
-import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
-import { EaseOutComponent } from '../../utils/EaseOutComponent';
+import { OptionMenu } from '../OptionMenu';
 
 export function CreateProposalMenu({ safeAddress }: { safeAddress: Address }) {
   const { t } = useTranslation('proposal');
@@ -28,102 +15,42 @@ export function CreateProposalMenu({ safeAddress }: { safeAddress: Address }) {
   const navigate = useNavigate();
 
   return (
-    <Box>
-      <Menu
-        placement="bottom-end"
-        offset={[0, 4]}
-      >
-        {({ isOpen }) => (
-          <Fragment>
-            <MenuButton
-              as={Button}
-              variant="secondary"
-              border="1px solid transparent"
-              borderRadius="0.75rem"
-              _hover={{ bg: 'neutral-2' }}
-              _active={{
-                color: 'lilac-0',
-                border: '1px solid',
-                borderColor: 'neutral-3',
-                bg: 'neutral-2',
-              }}
-            >
-              <Flex
-                alignItems="center"
-                gap={2}
-              >
-                <Text>{t('createProposal')}</Text>
-                <Icon
-                  as={CaretDown}
-                  boxSize="1.5rem"
-                />
-              </Flex>
-            </MenuButton>
-            {isOpen && (
-              <EaseOutComponent>
-                <MenuList>
-                  <Box
-                    backdropFilter="auto"
-                    bg={NEUTRAL_2_82_TRANSPARENT}
-                    backdropBlur="10px"
-                    border="1px solid"
-                    borderColor="neutral-3"
-                    className="scroll-dark"
-                    maxHeight="20rem"
-                    overflowY="auto"
-                    rounded="0.75rem"
-                    py="0.25rem"
-                  >
-                    <Box px="0.15rem">
-                      <MenuItem
-                        as={Button}
-                        variant="tertiary"
-                        h="2.5rem"
-                        onClick={() =>
-                          navigate(DAO_ROUTES.proposalNew.relative(addressPrefix, safeAddress))
-                        }
-                        noOfLines={1}
-                        display="flex"
-                        alignItems="center"
-                        justifyContent="flex-start"
-                        rounded="0.75rem"
-                        gap={2}
-                      >
-                        <Flex flexDir="column">
-                          <Text>{t('createFromScratch')}</Text>
-                        </Flex>
-                      </MenuItem>
-                    </Box>
-                    <Divider my="0.25rem" />
-                    <Box px="0.15rem">
-                      <MenuItem
-                        as={Button}
-                        variant="tertiary"
-                        h="2.5rem"
-                        onClick={() =>
-                          navigate(
-                            DAO_ROUTES.proposalTemplates.relative(addressPrefix, safeAddress),
-                          )
-                        }
-                        noOfLines={1}
-                        display="flex"
-                        alignItems="center"
-                        justifyContent="flex-start"
-                        rounded="0.75rem"
-                        gap={2}
-                      >
-                        <Flex flexDir="column">
-                          <Text>{t('browseTemplates')}</Text>
-                        </Flex>
-                      </MenuItem>
-                    </Box>
-                  </Box>
-                </MenuList>
-              </EaseOutComponent>
-            )}
-          </Fragment>
-        )}
-      </Menu>
-    </Box>
+    <OptionMenu
+      trigger={
+        <Flex
+          alignItems="center"
+          gap={2}
+        >
+          <Text textStyle="body-base">{t('createProposal')}</Text>
+          <Icon
+            as={CaretDown}
+            boxSize="1.5rem"
+          />
+        </Flex>
+      }
+      options={[
+        {
+          optionKey: t('createFromScratch'),
+          onClick: () => navigate(DAO_ROUTES.proposalNew.relative(addressPrefix, safeAddress)),
+        },
+        {
+          optionKey: t('browseTemplates'),
+          onClick: () =>
+            navigate(DAO_ROUTES.proposalTemplates.relative(addressPrefix, safeAddress)),
+        },
+      ]}
+      namespace="proposal"
+      buttonAs={Button}
+      buttonProps={{
+        variant: 'tertiary',
+        paddingX: '0.5rem',
+        paddingY: '0.25rem',
+        _hover: { bg: 'neutral-2' },
+        _active: {
+          color: 'lilac-0',
+          bg: 'neutral-2',
+        },
+      }}
+    />
   );
 }
diff --git a/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx b/src/components/ui/menus/ManageDAO/ManageDAOMenu.tsx
@@ -148,9 +148,9 @@ export function ManageDAOMenu() {
       guard.userHasVotes
     ) {
       if (type === GovernanceType.MULTISIG) {
-        return [freezeOption, modifyGovernanceOption, settingsOption];
+        return [settingsOption, freezeOption, modifyGovernanceOption];
       } else {
-        return [freezeOption, settingsOption];
+        return [settingsOption, freezeOption];
       }
     } else if (
       guard.freezeProposalCreatedTime !== null &&
@@ -163,20 +163,17 @@ export function ManageDAOMenu() {
         module => module.moduleType === FractalModuleType.FRACTAL,
       );
       if (fractalModule) {
-        return [clawBackOption, settingsOption];
+        return [settingsOption, clawBackOption];
       } else {
         return [settingsOption];
       }
     } else {
-      const optionsArr = [];
-      if (canUserCreateProposal) {
-        if (type === GovernanceType.MULTISIG) {
-          optionsArr.push(modifyGovernanceOption);
-        }
-      }
-
-      optionsArr.push(settingsOption);
-      return optionsArr;
+      return [
+        settingsOption,
+        ...(canUserCreateProposal && type === GovernanceType.MULTISIG
+          ? [modifyGovernanceOption]
+          : []),
+      ];
     }
   }, [
     guard,
@@ -190,15 +187,33 @@ export function ManageDAOMenu() {
     canUserCreateProposal,
   ]);
 
-  return (
+  return options.length === 1 ? (
+    <IconButton
+      aria-label="Manage DAO"
+      icon={
+        <Icon
+          as={GearFine}
+          boxSize="1.25rem"
+        />
+      }
+      onClick={options[0].onClick}
+      variant="tertiary"
+      p="0.25rem"
+      h="fit-content"
+      sx={{
+        span: {
+          h: '1.25rem',
+        },
+      }}
+    />
+  ) : (
     <OptionMenu
       trigger={
         <Icon
           as={GearFine}
           boxSize="1.25rem"
         />
       }
-      titleKey={canUserCreateProposal ? 'titleManageDAO' : 'titleViewDAODetails'}
       options={options}
       namespace="menu"
       buttonAs={IconButton}