process improvements (#565)

* improvments

* delete rerender state

src/components/Navbar/index.tsx

@@ -79,8 +79,6 @@ const Navbar = () => {
                         src={account?.account.avatar}
                         name={account?.account.name.default || account?.address}
                         size='xs'
-                        bg='primary.main'
-                        color='white'
                       />
                       {isOpen ? (
                         <ChevronUpIcon boxSize={8} color='navbar_chevron' />

src/components/Process/ActionsMenu.tsx

@@ -52,6 +52,12 @@ const ActionsMenuList = (props: MenuListProps) => {
           justifyContent='start'
           isLoading={loading.continue}
           variant=''
+          sx={{
+            '& span': {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          }}
         >
           {t('process_actions.start')}
         </MenuItem>
@@ -64,6 +70,12 @@ const ActionsMenuList = (props: MenuListProps) => {
           justifyContent='start'
           isLoading={loading.pause}
           variant=''
+          sx={{
+            '& span': {
+              display: 'flex',
+              alignItems: 'center',
+            },
+          }}
         >
           {t('process_actions.pause')}
         </MenuItem>
@@ -76,6 +88,12 @@ const ActionsMenuList = (props: MenuListProps) => {
         isLoading={loading.end}
         variant='solid'
         colorScheme='gray'
+        sx={{
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
       >
         {t('process_actions.end')}
       </MenuItem>
@@ -88,6 +106,12 @@ const ActionsMenuList = (props: MenuListProps) => {
         isLoading={loading.cancel}
         variant='solid'
         colorScheme='gray'
+        sx={{
+          '& span': {
+            display: 'flex',
+            alignItems: 'center',
+          },
+        }}
       >
         {t('process_actions.cancel')}
       </MenuItem>

src/components/Process/Aside.tsx

@@ -138,7 +138,7 @@ const ProcessAside = () => {
   )
 }
 
-export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void }) => {
+export const VoteButton = ({ setQuestionsTab, ...props }: { setQuestionsTab: () => void }) => {
   const { t } = useTranslation()
 
   const { election, connected, isAbleToVote, isInCensus } = useElection()
@@ -159,6 +159,7 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void })
       color='process.aside.color'
       py={3}
       px={{ base: 3, lg2: 0 }}
+      {...props}
     >
       {census?.type !== 'spreadsheet' && !connected && (
         <ConnectButton.Custom>
@@ -193,7 +194,17 @@ export const VoteButton = ({ setQuestionsTab }: { setQuestionsTab: () => void })
         </ConnectButton.Custom>
       )}
       {census?.type === 'spreadsheet' && !connected && <SpreadsheetAccess />}
-      {isAbleToVote && <CVoteButton w='full' fontSize='lg' onClick={setQuestionsTab} />}
+      {isAbleToVote && (
+        <CVoteButton
+          w='60%'
+          fontSize='lg'
+          height='50px'
+          onClick={setQuestionsTab}
+          _disabled={{
+            opacity: '0.8',
+          }}
+        />
+      )}
     </Flex>
   )
 }

src/components/Process/CreatedBy.tsx

@@ -9,12 +9,7 @@ export const CreatedBy = (props: FlexProps) => {
 
   return (
     <Flex gap={2} alignItems='center' {...props}>
-      <Avatar
-        alignSelf='start'
-        size='sm'
-        src={organization?.account.avatar}
-        name={organization?.account.name.default}
-      />
+      <Avatar size='sm' src={organization?.account.avatar} name={organization?.account.name.default} />
       <LongOrganizationName />
       <CopyAddressBtn />
     </Flex>
@@ -52,7 +47,7 @@ const CopyAddressBtn = () => {
   return (
     <IconButton
       variant='transparent'
-      icon={<CopyIcon />}
+      icon={<CopyIcon boxSize={3} />}
       aria-label='copy address'
       onClick={() => {
         toast({

src/components/Process/View.tsx

@@ -76,6 +76,7 @@ export const ProcessView = () => {
     <Box>
       <Box className='site-wrapper' mb={44}>
         <Header />
+
         {election?.streamUri && (
           <Box
             maxW={{ base: videoTop ? '250px' : '800px', lg: videoTop ? '400px' : '800px' }}
@@ -107,7 +108,7 @@ export const ProcessView = () => {
             </TabList>
             <TabPanels>
               <TabPanel>
-                <Box className='md-sizes'>
+                <Box className='md-sizes' mb='100px' pt='50px'>
                   <ElectionQuestions
                     confirmContents={(election, answers) => <ConfirmVoteModal election={election} answers={answers} />}
                   />

src/themes/default/colors.ts

@@ -34,6 +34,10 @@ export const colors = {
     700: colorsBase.primary.dark2,
   },
 
+  avatar: {
+    bg: colorsBase.primary.main,
+    color: colorsBase.white.pure,
+  },
   black: {
     50: colorsBase.white.pure,
     500: colorsBase.black,

src/themes/default/components/Avatar.ts

@@ -0,0 +1,16 @@
+import { avatarAnatomy } from '@chakra-ui/anatomy'
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react'
+
+const { definePartsStyle, defineMultiStyleConfig } = createMultiStyleConfigHelpers(avatarAnatomy.keys)
+
+const baseStyle = definePartsStyle({
+  // define the part you're going to style
+
+  container: {
+    borderRadius: 'full',
+    bg: 'avatar.bg',
+    color: 'avatar.color',
+  },
+})
+
+export const Avatar = defineMultiStyleConfig({ baseStyle })

src/themes/default/components/Questions.ts

@@ -105,13 +105,17 @@ const baseStyle = definePartsStyle({
       alignItems: 'center',
       gap: 2,
       w: { lg2: '99%' },
+      _hover: {
+        bgColor: '#eee',
+      },
 
       '& span:nth-of-type(1)': {
         display: { base: 'none', md: 'block' },
+        position: 'absolute',
         width: '30px',
         height: '30px',
         background: 'transparent',
-        ml: '5px',
+        ml: '10px',
         borderRadius: 'none',
 
         '&[data-checked=""]': {
@@ -120,9 +124,9 @@ const baseStyle = definePartsStyle({
             bgColor: 'transparent',
           },
 
-          border: 'none',
           background: 'process.questions.question_selected.bg',
-          borderColor: 'process.questions.question_selected.bg',
+          borderColor: 'white',
+          borderWidth: '1px',
           bgSize: '15px',
           bgRepeat: 'no-repeat',
           bgPosition: 'center',
@@ -146,6 +150,7 @@ const baseStyle = definePartsStyle({
       },
       '& span:nth-of-type(2)': {
         p: 2,
+        pl: { md: 12 },
         m: 0,
         border: '1px solid lightgray',
         w: '100%',

src/themes/default/components/index.ts

@@ -1,4 +1,3 @@
-import { ElectionActions } from './Actions'
 import { Alert } from './Alert'
 import { Badge } from './Badge'
 import { Button } from './Button'
@@ -16,15 +15,16 @@ import { SpreadsheetAccess } from './SpreadSheet'
 import { Stepper } from './Stepper'
 import { Tabs } from './Tabs'
 import { Textarea } from './Textarea'
+import { Avatar } from './Avatar'
 
 export {
   Alert,
+  Avatar,
   Badge,
   Button,
   Card,
   Checkbox,
   ConfirmModal,
-  ElectionActions,
   ElectionQuestions,
   ElectionResults,
   Form,
@@ -39,8 +39,8 @@ export {
 }
 
 export const components = {
-  ElectionActions,
   Alert,
+  Avatar,
   Badge,
   Button,
   Card,