Organization dashboard styles (#708)

--------- Co-authored-by: Òscar Casajuana <elboletaire@gmail.com>
vocdoni · Jun 25, 2024 · a1115bf · a1115bf · github-actions · Jun 25, 2024
1 parent c904ea7
commit a1115bf
Show file tree

Hide file tree

Showing 33 changed files with 469 additions and 421 deletions.
diff --git a/src/Providers.tsx b/src/Providers.tsx
@@ -5,7 +5,6 @@ import { ClientProvider } from '@vocdoni/chakra-components'
 import { EnvOptions } from '@vocdoni/sdk'
 import { useTranslation } from 'react-i18next'
 import { useAccount, useWalletClient, WagmiConfig } from 'wagmi'
-import { OrganizationModalProvider } from '~components/Organization/OrganizationModalProvider'
 import { walletClientToSigner } from '~constants/wagmi-adapters'
 import { VocdoniEnvironment } from './constants'
 import { chains, wagmiConfig } from './constants/rainbow'
@@ -47,10 +46,8 @@ export const AppProviders = () => {
         datesLocale={datesLocale(i18n.language)}
         options={{ faucet_url: import.meta.env.CUSTOM_FAUCET_URL }}
       >
-        <OrganizationModalProvider>
-          <ColorModeScript />
-          <RoutesProvider />
-        </OrganizationModalProvider>
+        <ColorModeScript />
+        <RoutesProvider />
       </ClientProvider>
     </RainbowKitTheme>
   )

diff --git a/src/components/Account/EditProfile.tsx b/src/components/Account/EditProfile.tsx
@@ -9,22 +9,16 @@ import {
   IconButton,
   Image,
   Input,
-  Modal,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
   Text,
   Textarea,
 } from '@chakra-ui/react'
 import { Button } from '@vocdoni/chakra-components'
 import { errorToString, useClient, useOrganization } from '@vocdoni/react-providers'
 import { Account } from '@vocdoni/sdk'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { BiTrash } from 'react-icons/bi'
-import { useOrganizationModal } from '~components/Organization/OrganizationModalProvider'
 import fallback from '/assets/default-avatar.png'
 
 interface EditFormFields {
@@ -39,11 +33,9 @@ export const EditProfile = () => {
   const { account, fetchAccount } = useClient()
   const { update } = useOrganization()
   const { t } = useTranslation()
-
+  const [loading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
-  const { isOpen, onClose, loading, setLoading } = useOrganizationModal()
-
   const required = {
     value: true,
     message: t('form.error.field_is_required'),
@@ -55,7 +47,6 @@ export const EditProfile = () => {
     register,
     handleSubmit,
     formState: { errors },
-    clearErrors,
   } = useForm({
     defaultValues: {
       name: account?.account.name.default || '',
@@ -64,17 +55,6 @@ export const EditProfile = () => {
     },
   })
 
-  useEffect(() => {
-    if (isOpen) {
-      setValue('name', account?.account.name.default || '')
-      setValue('description', account?.account.description.default || '')
-      setValue('avatar', account?.account.avatar || '')
-      clearErrors()
-      setError(null)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen])
-
   const avatar = watch('avatar')
 
   const correctAvatarFormat = (val: string) => REGEX_AVATAR.test(val)
@@ -85,7 +65,6 @@ export const EditProfile = () => {
     try {
       await update(new Account({ ...account?.account, ...values }))
       fetchAccount()
-      onClose()
     } catch (err: any) {
       setError(errorToString(err))
     } finally {
@@ -96,7 +75,7 @@ export const EditProfile = () => {
   return (
     <Box
       as='form'
-      onSubmit={(e) => {
+      onSubmit={(e: any) => {
         e.stopPropagation()
         e.preventDefault()
         handleSubmit(onSubmit)(e)
@@ -105,7 +84,7 @@ export const EditProfile = () => {
       <Flex direction='column' gap={6} my={8}>
         <Flex alignItems='center' gap={5}>
           <Box position='relative' outline='none' border='none'>
-            <AspectRatio flexShrink={0} w={{ base: 20, md: 40 }} ratio={1.25 / 1} borderRadius={0} overflow='hidden'>
+            <AspectRatio flexShrink={0} w={{ base: 20, md: 40 }} ratio={1.25 / 1} borderRadius='lg' overflow='hidden'>
               <Image src={avatar} fallbackSrc={fallback} />
             </AspectRatio>
             {correctAvatarFormat(avatar) && (
@@ -181,7 +160,7 @@ export const EditProfile = () => {
         )}
       </Flex>
       <Box display='flex' flexDirection='column' gap={5} w='full' alignItems='center'>
-        <Button type='submit' isLoading={loading}>
+        <Button type='submit' isLoading={loading} px={10} py={4}>
           {t('form.edit_profile.btn')}
         </Button>
         <Text textAlign='center' maxW='70%'>
@@ -191,24 +170,3 @@ export const EditProfile = () => {
     </Box>
   )
 }
-
-const EditProfileModal = () => {
-  const { t } = useTranslation()
-
-  const { isOpen, onClose, loading } = useOrganizationModal()
-
-  return (
-    <>
-      <Modal isOpen={isOpen} onClose={() => !loading && onClose()}>
-        <ModalOverlay />
-        <ModalContent minW={{ md: '600px' }}>
-          <ModalHeader>{t('form.edit_profile.title')}</ModalHeader>
-          <ModalCloseButton />
-          <EditProfile />
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
-
-export default EditProfileModal
diff --git a/src/components/Layout/NavbarLink.tsx b/src/components/Layout/NavbarLink.tsx
@@ -14,16 +14,7 @@ const NavbarLink = ({ name, to, icon }: NavbarLink) => {
   const isActive = to === location.pathname
 
   return (
-    <Button
-      as={Link}
-      to={to}
-      isActive={isActive}
-      justifyContent='start'
-      variant='ghost'
-      colorScheme='teal'
-      w='full'
-      leftIcon={icon}
-    >
+    <Button as={Link} to={to} isActive={isActive} justifyContent='start' variant='dashboard' w='full' leftIcon={icon}>
       {name}
     </Button>
   )

diff --git a/src/components/Navbar/Menu.tsx b/src/components/Navbar/Menu.tsx
@@ -21,7 +21,6 @@ import { HiShoppingCart } from 'react-icons/hi'
 import { MdOutlineLogout } from 'react-icons/md'
 import { Link as ReactRouterLink } from 'react-router-dom'
 import { useDisconnect } from 'wagmi'
-import { useOrganizationModal } from '~components/Organization/OrganizationModalProvider'
 import { addressTextOverflow } from '~constants'
 import { LanguagesList } from './LanguagesList'
 
@@ -33,8 +32,6 @@ const MenuDropdown = () => {
 
   const [isOpenMenuLanguages, setIsOpenMenuLanguages] = useState(false)
 
-  const { onOpen } = useOrganizationModal()
-
   return (
     <MenuList
       py={4}
@@ -115,7 +112,10 @@ const MenuDropdown = () => {
               )}
             </Flex>
           </MenuItem>
-          <MenuItem onClick={onOpen}>{t('menu.organization')}</MenuItem>
+
+          <MenuItem as={ReactRouterLink} to='organization/edit'>
+            {t('menu.organization')}
+          </MenuItem>
         </>
       )}
 

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -20,87 +20,87 @@ const Navbar = () => {
   const { exists } = useOrganizationHealthTools()
 
   return (
-    <Flex className='site-wrapper' w='full' mx='auto' py={{ base: '12px', md: '24px' }} position='relative'>
-      <NavBg />
+    <NavBg>
+      <Flex className='site-wrapper' w='full' mx='auto' py={{ base: '12px', md: '24px' }} position='relative'>
+        <Flex justifyContent='space-between' alignItems='center' zIndex={1} w='100%'>
+          <Logo />
 
-      <Flex justifyContent='space-between' alignItems='center' zIndex={1} w='100%'>
-        <Logo />
-
-        <List as='nav' display='flex' alignItems='center' gap={4}>
-          {isConnected && (
-            <ListItem>
-              <Button as={ReactRouterLink} to='/processes/create'>
-                <AddIcon boxSize={{ base: 4, sm2: 3 }} />
-                <Text as='span' display={{ base: 'none', sm2: 'inline-block' }}>
-                  {t('menu.new_process')}
-                </Text>
-              </Button>
-            </ListItem>
-          )}
-
-          {exists && (
-            <ListItem>
-              <Button as={ReactRouterLink} to={`/organization/${account?.address}`} variant='secondary'>
-                <Icon as={MdHowToVote} boxSize={{ base: 4, sm2: 3 }} />
-                <Text as='span' display={{ base: 'none', sm2: 'inline-block' }}>
-                  {t('menu.my_org')}
-                </Text>
-              </Button>
-            </ListItem>
-          )}
+          <List as='nav' display='flex' alignItems='center' gap={4}>
+            {isConnected && (
+              <ListItem>
+                <Button as={ReactRouterLink} to='/processes/create'>
+                  <AddIcon boxSize={{ base: 4, sm2: 3 }} />
+                  <Text as='span' display={{ base: 'none', sm2: 'inline-block' }}>
+                    {t('menu.new_process')}
+                  </Text>
+                </Button>
+              </ListItem>
+            )}
 
-          {!isConnected && (
-            <>
+            {isConnected && (
               <ListItem>
-                <Button
-                  onClick={() => {
-                    if (openConnectModal) openConnectModal()
-                  }}
-                  width='175px'
-                  height='50px'
-                >
-                  {t('menu.login').toString()}
+                <Button as={ReactRouterLink} to={`/organization`} variant='secondary'>
+                  <Icon as={MdHowToVote} boxSize={{ base: 4, sm2: 3 }} />
+                  <Text as='span' display={{ base: 'none', sm2: 'inline-block' }}>
+                    {t('menu.my_org')}
+                  </Text>
                 </Button>
               </ListItem>
+            )}
+
+            {!isConnected && (
+              <>
+                <ListItem>
+                  <Button
+                    onClick={() => {
+                      if (openConnectModal) openConnectModal()
+                    }}
+                    width='175px'
+                    height='50px'
+                  >
+                    {t('menu.login').toString()}
+                  </Button>
+                </ListItem>
+                <ListItem>
+                  <LanguagesMenu />
+                </ListItem>
+              </>
+            )}
+            {isConnected && (
               <ListItem>
-                <LanguagesMenu />
+                <Menu>
+                  {({ isOpen }) => (
+                    <>
+                      <MenuButton
+                        as={Button}
+                        variant='secondary'
+                        boxShadow='var(--box-shadow-btn)'
+                        aria-label={t('menu.languages_list')}
+                        p={2}
+                      >
+                        <Box as='span' display='flex' alignItems='center'>
+                          <Avatar
+                            src={account?.account.avatar}
+                            name={account?.account.name.default || account?.address}
+                            size='xs'
+                          />
+                          {isOpen ? (
+                            <ChevronUpIcon boxSize={8} color='navbar_chevron' />
+                          ) : (
+                            <ChevronDownIcon boxSize={8} color='navbar_chevron' />
+                          )}
+                        </Box>
+                      </MenuButton>
+                      <MenuDropdown />
+                    </>
+                  )}
+                </Menu>
               </ListItem>
-            </>
-          )}
-          {isConnected && (
-            <ListItem>
-              <Menu>
-                {({ isOpen }) => (
-                  <>
-                    <MenuButton
-                      as={Button}
-                      variant='secondary'
-                      boxShadow='var(--box-shadow-btn)'
-                      aria-label={t('menu.languages_list')}
-                      p={2}
-                    >
-                      <Box as='span' display='flex' alignItems='center'>
-                        <Avatar
-                          src={account?.account.avatar}
-                          name={account?.account.name.default || account?.address}
-                          size='xs'
-                        />
-                        {isOpen ? (
-                          <ChevronUpIcon boxSize={8} color='navbar_chevron' />
-                        ) : (
-                          <ChevronDownIcon boxSize={8} color='navbar_chevron' />
-                        )}
-                      </Box>
-                    </MenuButton>
-                    <MenuDropdown />
-                  </>
-                )}
-              </Menu>
-            </ListItem>
-          )}
-        </List>
+            )}
+          </List>
+        </Flex>
       </Flex>
-    </Flex>
+    </NavBg>
   )
 }
 

diff --git a/src/components/Organization/Dashboard/Create.tsx b/src/components/Organization/Dashboard/Create.tsx
@@ -1,22 +1,22 @@
-import { Box } from '@chakra-ui/react'
 import { Button } from '@vocdoni/chakra-components'
 import { useClient } from '@vocdoni/react-providers'
+import { useTranslation } from 'react-i18next'
 import { AccountCreate } from '~components/Account/Create'
 import { ContentsBox } from './Box'
 
 const CreateOrganization = () => {
+  const { t } = useTranslation()
+
   const {
     loading: { create },
   } = useClient()
 
   return (
     <ContentsBox>
       <AccountCreate />
-      <Box>
-        <Button form='process-create-form' type='submit' isLoading={create}>
-          Create org
-        </Button>
-      </Box>
+      <Button form='process-create-form' type='submit' isLoading={create} mx='auto'>
+        {t('organization.create_org')}
+      </Button>
     </ContentsBox>
   )
 }